Divi WordPress Theme from Elegant Themes is probably the most advanced, yet most easy to use WordPress Themes available today. It lets you create any type of layout within minutes using its advanced page builder and theme options.
There are some things, like social icons, which cannot be changed from theme options. This is fine since most people will use standard social options like Facebook, Twitter, Google+ and RSS, so that is no point bloating the theme with extra theme options.
But if you use want additional social icons like Pinterest, Instagram, Linedin etc. in Divi WordPress theme, here’s the procedure.
• Here’s the list of codes for the social icons available in Divi style.css file.
.et-social-twitter a.icon:before { content: '\e094'; }
.et-social-google-plus a.icon:before { content: '\e096'; }
.et-social-pinterest a.icon:before { content: '\e095'; }
.et-social-linkedin a.icon:before { content: '\e09d'; }
.et-social-tumblr a.icon:before { content: '\e097'; }
.et-social-instagram a.icon:before { content: '\e09a'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-myspace a.icon:before { content: '\e0a1'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }
.et-social-rss a.icon:before { content: '\e09e'; }
This list shows all the available social network icons in Divi theme.
• Now open the includes/social_icons.php file and find the code for social icons,
<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-facebook">
<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-twitter">
<a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-google-plus">
<a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
<?php
$et_rss_url = '' !== et_get_option( 'divi_rss_url' )
? et_get_option( 'divi_rss_url' )
: get_bloginfo( 'comments_rss2_url' );
?>
<li class="et-social-icon et-social-rss">
<a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
<span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
</ul>
• To add a social icon, for example LinkedIn, add a code section like following, just before the closing </ul> in the social icons code above.
<a href="http://in.linkedin.com/in/mayursomani" class="icon">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>
To add YouTube, you’ll add something like,
<a href="http://youtube.com/u/yourusername" class="icon">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>
To add a Pinterest icon, you’ll add,
<a href="http://pinterest.com/yourusername" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>
You see the pattern.
You can add any new network from the list posted above.
That’s it. You just added a new social icon to Divi WordPress Theme. You can also remove a social icon by simply removing its section from the includes/social_icons.php file.
I’ve just changed something on my footer, and I must be mistaken, because it doesn’t show up now. Do you have the default code for the footer on Divi theme, so that I can have it as default? Thanks a lot!
Hi, Download a fresh copy of the theme from ET members area and get the default footer code from it.
Hi, any idea if my changes we be retained after an update of Divi theme? Say Elegant came out with an updated for Divi, do you think it will replace the code I used here?
Create a child theme for Divi and then store the changes in it. This is the best way to future proof your theme.
Can you give the exact code for adding Pinterest like you did above for Youtube and LindedIn? Please. I am code illiterate, but I really need to add my Pinterest link to my page. Thank you for considering!
I have updated the post to add the example code for adding pinterest icon.