In my last post I wrote about why I made this website. Now I’d like to go over how I made the website and customized it. I had no idea what I was doing, but it was not so difficult in the end. At first I used wordpress.com to register my domain name and host my website. However, when I realized that adding plugins wasn’t included in their “personal” package I decided that a provider that gives me more freedom would suit me much better. So I went with my friend’s recommendation and switched to Versio.nl. I also followed her recommendation of installing the iThemes security plugin. I chose a theme, then customized it by adding custom social media icons.

Choose a theme and make a child theme

When choosing a theme I had certain criteria in mind. A good looking theme was of course one of the criteria. I also wanted a relatively typical blog layout, including a large section for the main content, a side bar where I could add widgets like a search bar and twitter feed and a header that included a title, subtitle, menu bar and social media icons. After trying out several themes, I settled on Chicago by Catch Themes.

My first customization was really straightforward: I used the wordpress interface to change the header image to a photo of my home city (Calgary, Canada) that I took many years ago. Another customization that I wanted was to use this LinkedIn plugin to populate my CV/Resume pages. Unfortunately, LinkedIn has limited access to their API to sites that generate enough revenue for them, so this customization was not possible. Also, it is against LinkedIn’s terms of service to scrape their website, so I decided that for now I’d simply post a static resume. I’d like to find a solution to this eventually, but for now this is good enough.

One customization that I was able to make, however, was to add some social media icons to my header which were not part of my chosen theme. In order to do this I had to first make a child theme, which is explained fairly well here. Catch themes also provides templates for child themes. To find out how I added the custom icons, read on!

In case you are interested in downloading my child theme, it is available in my github repository.

Add custom social media icons

My WordPress theme came with a social menu with several available icons. However, it was missing a couple that I needed: Research Gate and Google Scholar. Given that I am almost done my PhD, I wanted to be able to link to my publication lists. To add custom social media links, I first installed Font Awesome, which has a collection of font icons. This website explains font icons and how to use Font Awesome with WordPress. I followed the hosted CDN method, but you can also download the files and install manually.

Since the Research Gate and Google Scholar icons are not available in Font Awesome, I then installed Academicons, which is an extension of Font Awesome with academic font icons. To do this I:

1. downloaded Academicons and uploaded the css and fonts directories into my child theme’s directory.
2. added the following lines to the functions.php file to load the Font Awesome and Academicons font icons:

\* borrowed from https://www.sitepoint.com/using-font-awesome-with-wordpress/
\* I added the second wp_enqueue_style line to include Academicons
\* This code enqueues our external font awesome stylesheet
\*
\*

function enqueue_our_required_stylesheets(){
    wp_enqueue_style('font-awesome', 'https://use.fontawesome.com/adc2e6740b.js');
    wp_enqueue_style('academicons', get_stylesheet_directory_uri() . '/css/academicons.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

3. added the following lines to style.css, which tells the social menu that urls containing researchgate.net or scholar.google.com should be associated with the Research Gate and Google Scholar icons, respectively:

\* Tell social menu to associate character \\e854 of the
\* Academicons font with urls containing "researchgate.net"
\*
.social-menu ul a\[href\*="researchgate.net"\]:before {
content: "\\e854";
font-family: "Academicons";
}

/\* Do the same for Google Scholar (character \\e828) \*/
.social-menu ul a\[href\*="scholar.google.com"\]:before {
    content: "\\e828";
    font-family: "Academicons";
}

And that’s all there is to it! If you are interested in implementing this yourself, check out my child theme repository on github.

That’s all for now, folks! Stay tuned for more of my learning adventures and updates!