The Divi 2.0 WordPress Theme from Elegant Themes is probably the most advanced, yet most easy to use WordPress Themes available today. One cool feature is that it makes it easy to use social media links on the footer of your page. Unfortunately out of the box it comes only with Facebook, Twitter, Google + and RSS feed options available. You have to do a little tweaking in order to add others.
For those trying to make these changes for the first time, I highly recommend you read the following tutorial by Agent WP. It is how I learned to make this change using previous versions of Divi. But due to some major changes in the recent release of 2.0, I have had to make some modifications to make it work.
So based on the foundation laid out using the procedures given to us by Agent WP, these are the additional changes I had to make. Note: we recommend using child themes for any wordpress theme customization : http://codex.wordpress.org/Child_Themes
I use a child theme and these are the steps I had to take.
Step one: Update the child theme footer.php. I had previously customized the footer-info section so I made sure to make a copy of my child theme footer into a text document. Then I copied the new Divi 2.0 footer content and pasted it into my child theme footer after deleting the current content on my child theme footer.php. Then I copied back in the the modified footer-info section giving me back my copyright line. This was my modified footer-info section.
<p id="footer-info">Copyright © 2012-<?php echo date('Y'); ?> Quiroz.Co <?php printf( __( ' | PO Box 1327 Marina CA 93933 | ph: 831.234.0788 fx: 360.234.0784 | %1$s', 'Divi' ), '<a target="_blank" href="http://www.blueletterbible.org/Bible.cfm?b=Jhn&c=3&t=NKJV#s=1000016" title="John 3:16-17">John 3:16-17</a>'); ?></p>
Step two: Create a child theme social_icons.php. So in my child theme directory, I had to create a folder called “includes” and I moved a copy of the social_icons.php form the Divi 2.0 “includes” folder. And in the child theme social_icons.php I added the following just before the closing </ul>
<li class="et-social-icon et-social-linkedin"> <a target="_blank" href="https://www.linkedin.com/in/genoq"> <span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span> </a> </li> <li class="et-social-icon et-social-pinterest"> <a target="_blank" href="http://www.pinterest.com/gqcs/"> <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span> </a> </li>
Step three: Then I added the following css in my child theme.
.et-social-linkedin a:before { content: '\e09d';}
.et-social-pinterest a:before { content: '\e095';}
And just in case you are interested in how I moved the lines around, this is the rest of the css I used to get the placement and colors I wanted.
/*Copyright Line*/
#footer-bottom{background-color: #1e2024;}
#footer-info{font-family: arial ,serif; margin-left:150px;}
#footer-info a {font-weight: 500;color: #ef4a4a;}
.et-social-icons {margin-right:450px; margin-top:-50px;}
.et-social-twitter a, .et-social-facebook a {color: #1e2024; }
.et-social-linkedin a:before { content: '\e09d';}
.et-social-pinterest a:before { content: '\e095';}
.et-social-linkedin a, .et-social-pinterest a {color: #1e2024; }
And here is a list of the Social Icon classes in case you are working on others.
.et-social-facebook a:before { content: '\e093'; }
.et-social-twitter a:before { content: '\e094'; }
.et-social-google-plus a:before { content: '\e096'; }
.et-social-pinterest a:before { content: '\e095'; }
.et-social-linkedin a:before { content: '\e09d'; }
.et-social-tumblr a:before { content: '\e097'; }
.et-social-instagram a:before { content: '\e09a'; }
.et-social-skype a:before { content: '\e0a2'; }
.et-social-flikr a:before { content: '\e0a6'; }
.et-social-myspace a:before { content: '\e0a1'; }
.et-social-dribbble a:before { content: '\e09b'; }
.et-social-youtube a:before { content: '\e0a3'; }
.et-social-vimeo a:before { content: '\e09c'; }
.et-social-rss a:before { content: '\e09e'; }
Well that’s all for now. I hope you find this article useful.
Thank you so much!! Works perfectly!
No problem Jennifer. Glad it helped. By the way, great website 🙂
Geno,thanks for the article, but I have made some minor mistake. The icon does not show up, just a text link. You can take a look at http://accountabilitycorp.com/site1 any guidance?
Looks like it might be something in your social_icons.php file. Can you email me a copy of what you have in your social_icons.php file? geno@quiroz.co
It appeared their was a syntax issue with the quote marks in the social-icons.php file. After replacing the quote marks we were able to fix it.
Thank you! It really worked, but I must advise against copy & pasting your code, since quote marks are not the right ones, as previously mention.
Thanks TICgal. I updated the page to correct the quotation mark syntax issue. Its now copy and paste-able 🙂
THANK YOU so much for this tutorial! I started with the article that you referenced but since I am a newbie, I didn’t know about creating an “includes” folder in the child theme. Bingo! Also, it was helpful to know about the sexed quotation marks altering the syntax.
So does is the code grabbing the image from a location on the Divi site? Like they included all of the icons but not the option to use them in the epanel? Thanks again!!
Glad it helped. Yes the Divi theme comes packed with the Elegant Themes icon font which includes a ton of images/icons. Not sure why they did not have more options on the epanel though.
Hi! This looks great! I have been spending too long to digg info for this… Love how your explanations are clear and neat looking.
How do you fix the quotation marks? i am not a developer and doing copy/paste is what I can handle… and right now that does not look pretty…. is there a way to make these open in a new window too?
Thank you!
Hi Monicka. Thanks for the feedback. Glad it was helpful. I updated this page to correct the quotation mark issue awhile back so the codes above should work fine. The codes above also include the code that allows the social media links to open in new windows. If you have any problems, feel free to shoot me an email using the contact form on this site and I will be more than happy to help you out with it. Happy coding!
Thank U Thank U!!!! It worked….!!!!
and not only THAT, I disabled the Facebook and Twitter icons from within the Divi panel, because THESE would not open in a new window, and I replaced them in the code!
One if the few times that coding actually did make me happy! 🙂 Thank you!!
Awesome!!!! I love it when it someone codes successfully on the first try 🙂 Cant wait to see your site when it’s done Monicka. I am already intrigued just by the cover art on the splash page 🙂
Thanks Geno for the article. I would like to add a completely different social icon to footer (“vkontakte” for example). The Elegant Themes icon font does not contain it. What can you advise?
Great question. I know this is doable as I have come across this before but just can’t recall where. I will look into it further and get back to you 🙂
Finally figured it out. I wrote a post about it to help others. Let me know your thoughts.
Desperately keen to know if there is a way to add less well known social media sites, or directorires, to the social follow settings within Divi – I cannot figure out how to do it from these instructions – I think that this is, of course, my fault, not yours 😉
For instance, I would like to add:
Crunchbase: – http://www.crunchbase.com/organization/secluded-io
Angelinvest: https://angel.co/secluded-io
F6S – http://www.f6s.com/secluded.io
I’d be ever so grateful if someone could point me in the right direction for adding these sites.
Perhaps I need to add them as simple URL links or something, I don’t know, but it qould be nice if they could appear the the social follow icons.
cheers
Craig R.
Brisbane, Australia
Hi Craig. This is possible but it’s a little different approach since they are not included in Icon fonts.
1. The first thing you want to do is get a copy of the logo image you want to use. In this case I downloaded the logo for F6S on to my computer.
2. Then upload the image into your media files so that you can grab the url for the image.
3. Now open up your social_icons.php file just as I mentioned in the instructions above.
4. Add this next line of code just before the closing < /ul > tag
As you can see I used your url for the destination. But you will replace the src url with the url of your uploaded image. Also note the img class of f6s. This will be the CSS classs that we will use to give it some style so this will be unique for each logo you add.
5. Now open up your style.css as I mentioned in the instructions above and then enter this code anywhere in there.
/*-----Add Custom Image to Social Media Footer-----*/ img.f6s{height: 25px;padding-left: 20px;filter: gray;-webkit-filter: grayscale(100%);} img.f6s:hover {filter: none;-webkit-filter: grayscale(0%);}This makes the image grey like the rest of the social icons and the second line allows the original logo color to show when you mouseover the image.
Thats it. I added it to my demo page in case you want to see it in action. https://quiroz.co/2014-Demo/
Hope this solves your problem. Cheers!
Hi Geno – I’m overwhelmed that you would take the time to fully explain this for me.
I was hoping that I might be able to add a new social icon via the page layout designer in the social_follow module:
http://s944.photobucket.com/user/custom_badges/library/public
Is that possible
Otherwise I’m not sure how to add the lesser known social follow sites in places like:
http://secluded.io/our_team/
thank you for your time
cheers
Craig R.
Brisbane, Australia
Hi Carl – As of now I have never tried to add social media icons to the Social Follow module built into Divi but if I do I will keep you posted.
Have you tried using the new Elegant Themes social media plug-in Monarch? It has way more options than the Divi Social Follow Module and it is my go-to for Social Media Follow and Share features. Perhaps this might be a better option for you?
http://elegantthemes.com/preview/Monarch/
Otherwise you could also try a plug-in like Social Media Feather which lets you import your own icons.
https://wordpress.org/plugins/social-media-feather/
thank you – I will try those options and update this reply in case anyone stumbles across the same issue.
cheers
Craig R.
Brisbane, Australia
Thanks Geno. Do you know if there’s an icon that is a “chain link”? Or another that might be good for redirecting to another website (a globe, maybe)?
I dont know what I’m doing wrong, but I cant seem to get this to work!! I added the code in my child theme, I added the CSS… Its still not appearing though! I don’t usually have problems adding code and for some reason this one is giving me a headache.
My social_icons.php file looks like this,
<a href="” class=”icon”>
My CSS file looks like this,
.et-social-instagram a:before { content: ‘\e09a’; }
I dont need to edit the footer.php for any reason, right? It currently has this,
I may have goofed somehow and am completely blind to the error because I’ve been staring at it, heres the link if you think you may be able to see my error!! http://www.aandgdesigns.com/lucid/
THANK YOU IN ADVANCE, if you think you can help!!! 🙂
NOO – the code I pasted into the above comment isnt showing up in the comment, I should have predicted that.
Hi Emily. I am not sure what you might be doing wrong. I would have to look at the php files to see if there is an error.
How to add Foursquare icon?
Geno…I’ve used this tut before, but for some reason I’m missing something completely obvious or something is really broke. Here is my file that I have in my child theme, in the includes folder: http://d.pr/f/uFnA. I’m trying to add Instagram.
I added the CSS for Instagram, but no bueno. What am I missing?
Dev site is at http://wordpress-4684-24500-115530.cloudwaysapps.com
In your code, the CSS for the Instagram icon is inside an If condition for showing the RSS icon. You might want to try moving it below the on line 41.
Fantastic, that did it…thank you.