If you are making a WordPress website as a scholar or for a research project, chances are that you would like to link to academic profile pages, such as ResearchGate and GoogleScholar. In this tutorial we explain how you can add icons linking to such pages to the header and footer of your website when using the DIVI theme.
On the website of DIVI Space, a well-known developer of DIVI themes and plugins, I came across a very useful tutorial on how to add more social media icons to DIVI’s standard header and footer. In that tutorial, they make use of the free Font Awesome icon library. This icon library contains some icons for academic social network / profile pages (e.g. ResearchGate and Mendeley and are included), but not all (e.g. GoogleScholar and Academia are not included). This post provides a variation on that DIVI Space tutorial, which explains how to add more academic icons to the standard DIVI header and footer. To achieve this, we will use Academicons, a free collection of academic icons.
Good to know before you start…
Which academic icons can I add if I follow this tutorial?
Any icon that is included in the ‘Academicons‘ icon set. At the moment of writing this tutorial, these are:
academia, acclaim, acm, acmdl, ads, africarxiv, arxiv, biorxiv, ceur, ciencia-vitae, closed-access, conversation, coursera, crossref, cv, datacite, dataverse, dblp, depsy, doi, dryad, elsevier, figshare, google-scholar, hal, hypothesis, ideas-repec, ieee, impactstory, inaturalist, inpn, inspire, isidore, jstor, lattes, mathoverflow, mendeley, moodle, nakala, open-access, open-data, open-materials, obp, openedition, orcid, osf, overleaf, philpapers, piazza, preregistered, protocols, psyarxiv, publons, pubmed, pubpeer, researcherid, researchgate, ror, sci-hub, scirate, scopus, semantic-scholar, springer, ssrn, stackoverflow, zenodo, zotero
The person that has created that icon set, is however open to requests to add more academic icons. So feel free to contact him!
What if I want to add both more general social icons and academic icons?
In step 4 add not just the code snippet that we give to enqueue Academicons, but also the following code snippet to enqueue FontAwesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
Consult the blog post by DIVI Space on what else to do to start making use of FontAwesome icons to the standard DIVI header and footer.
Is this tutorial applicable to headers and footers created with the DIVI Theme Builder?
The short answer: no, it is not. It just applies to the standard DIVI header and footer.
If you don’t know the difference: there are at the moment two ways to create a header and footer for your DIVI website:
- You can use the standard header and footer, which you can customize – within certain limits – in the WordPress dashboard at Appearance –> Customize
- You can make a fully custom header and footer using the DIVI Theme Builder, which is accessible in the WordPress dashboard at DIVI –> Theme Builder. This requires more advanced skills, especially if you want your header to look good on mobile phones and tablets as well.
This tutorial only applies to the former.
What we want to achieve
A before and after image (click to enlarge) for a site where the Academia and Google Scholar icons have been added:
Before
After
Overview of main steps to follow
- Create and install a so-called ‘child theme‘ of DIVI, if you have not already done so. This ensures that the changes that you make, are not overwritten when Elegant Themes releases a DIVI theme update. DIVI Space offers an easy tool to create a DIVI Child theme. This step will not be discussed further in this post.
- Make a back-up of your website. This is always smart to do when you are going to edit (child) theme files. This step will not be discussed further in this post.
- Add a code snippet to your site that gives your site access to Academicons
- Identify the Academicons icon you need and put it in a code snippet
- Download social-icons.php from the DIVI theme
- Add the academic icons that you would like to use
- Upload your new social-icons.php file to the DIVI child theme
- Optionally: add some CSS code to make all social icons the same size
Let’s now look at steps 3 to 8 in more detail.
Step 3 – Add a code snippet to your site to make ‘Academicons’ available
- Go to go to Divi > Theme Options > Integration
- Place the code snippet below in the “Add code to the < head > of your blog” section (click on the image to enlarge)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
Now Academicons has been enqueued on your site.
Step 4 – Identify the ‘Academicons’ icon you need & include it in another code snippet
- Copy the code snippet below and paste it in an empty (text) file
- Go to go to the overview page with all Academicons icons and copy the name of the icon that you need (no need to download anything – we’ve already integrated the required files in the previous step).
- Inside the <i></i> tag of the code snippet, replace ‘ai-academia’ with ‘ai-name‘.
- Inside the <a></a> tags replace the title ‘Academia’ with the name of the network you are adding.
- Replace the URL in href=”…” with the profile page that you would like your icon to link to.
- Inside the <i></i> tag ‘ai-3x’ indicates that the icon size should be 3em (=3x the standard font size for the site). You can change this in ‘ai-2x’ (2em) or in ‘ai-1x’ (1em) if you want a smaller icon. On your website, none of these sizes may be the same as the size of your regular social icons. In step 8 we will show you what to do if that is the case.
<li class="et-social-icon"><a href="https://www.academia.edu/" target="_blank" rel="noopener" title="Academia"><i class="ai ai-academia ai-3x"></i></a></li>
Prepare such a code snippet for each icon that you would like to add.
Step 5 – Download social-icons.php from the main DIVI Theme
- Open the file manager that your hosting provider offers, or access your website’s files through FTP.
- Locate the file ‘social-icons.php’ in the folder wp-content > themes > divi > includes.
- Download it.
Step 6 – Add the code snippet with your academic icon to social-icons.php
- Open the social-icons.php file to edit it, preferably in a code editing program like e.g. Sublime (which can be downloaded for free). Such programs add colors that help you read the code and find possible errors more easily.
- Within the <ul></ul> tags, you find the standard DIVI social icons, each one wrapped within <?php if … ?> <?php endif; ?> tags.
- Paste each of your code snippets between the <ul></ul> tags. This can be after the last <?php endif; ?> if you want to add the academic icons at the end of the standard icon list (the screenshot), or after any earlier <?php endif; ?> if you want to put your new icon in between two older icons.
Note that in the screenshot some hard returns have been added to the code snippets. This increases the readability of the php file for the human eye, but makes no difference for how a computer processes it.
Step 7 – Upload your new social-icons.php file to the DIVI Child theme
The old social_icons.php file is still part of the parent DIVI theme. But if a file with the same name exists in the right place of the DIVI child theme, that file will be used by your website instead.
- Go to wp-content > themes > your-child-theme;
- Create a folder there called ‘includes’ (if such a folder does not exist yet);
- Upload your new ‘social-icons.php’ file to wp-content > themes > your-child-theme > includes;
- Empty any caches that your site has and refresh your website in your browser to see the result
Step 8 – Add some CSS code to make all icons the same size
Depending on the current size of your general social icons, the new academic icons may or may not be the same size. If not:
- Go to go to Divi > Theme Options > General;
- Place the code snippet below in the box ‘Custom CSS’ (click on the image to enlarge);
- Lower or increase the size (1.5em) to make your academic icons the same size as the general social icons. Experiment if needed to find the right number.
li a .ai {
font-size:1.5em;
}
0 Comments