Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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 &copy; 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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

ยฉ2012-2018 Geno Quiroz | Teach Learn Build Love |ย Divi Expert Services |ย John 3:16

Diviย is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed byย Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest