How to Add More Social Icons in Divi’s Header and Footer

The Divi  theme from Elegant Themes is a fabulously customizable theme that can become anything you can imagine.  However, the social networks it comes with by default are a bit limiting.  Fortunately, there is a relatively easy way to add more social icons to your secondary and footer navigation.

Here is the 10 step process for adding more social icons to Divi’s header and footer:

1 – Create a new folder in your child theme via FTP. Go to your site via FTP and then go to wp-content >> Themes >> Your Child Theme and create a directory called includes.php.  Always use a child theme with Divi to house your customizations! That will prevent your work being lost each time you update the Divi theme.

2 – Copy the social_icons.php file from your Divi theme to the new includes folder. Via FTP it can be found in wp-content >> Divi >>  Includes. Download the social_icons.php file to your desktop and then navigate to wp-content >>  Your Child Theme >> Includes and upload the social_icons.php file

3 – Log into your WordPress dashboard and then go to Appearance >> Editor >> social_icons.php

4 – In social_icons.php, you will see the following:

<ul class="et-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( '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>

5 – Note that each individual social network code ends with  <?php endif; ?>

6 – Add the following code AFTER the  <?php endif; ?> where you want your new icon to appear.  Remember to change the #, in the code below, to the URL of your chosen social network.

<li class="et-social-icon et-social-pinterest">
<a href="#" target="new" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>

7 – Adding the code above will add your social icon for the particular platform you want to use.  In the example, in 6 above, I’ve used Pinterest as the social network to add.  Change that name Pinterest to the service you want to add.  You can use the following networks:

.et-social-pinterest
.et-social-linkedin
.et-social-tumblr
.et-social-instagram
.et-social-skype
.et-social-flikr
.et-social-myspace
.et-social-dribbble
.et-social-youtube
.et-social-vimeo

8 – Here is how the finished code will look with your new icons added:

<ul class="et-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; ?>

<li class="et-social-icon et-social-pinterest">
<a href="http://pinterest.com/jillchongva" target="new" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>

<li class="et-social-icon et-social-instagram">
<a href="https://www.instagram.com/jill_chongva/" target="new" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

<?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( '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>

I added my Pinterest and Instagram icons between the Twitter and Google + networks.  I changed the #, in 6 above, to the URL of my profile.  I also added the target=”new” to ensure that the new icons open in a new tab, so your readers don’t navigate away from your site when they click the icon.

9 – Don’t forget to change the URLs in the code to point at YOUR social network, not mine! See #6 above!

<li class="et-social-icon et-social-instagram">
<a href="https://www.instagram.com/jill_chongva/" target="new" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

10 – Make sure as well, that when you add the code, you change the name of the network to add in both of the following highlighted spots:

<li class="et-social-icon et-social-instagram">
<a href="https://www.instagram.com/jill_chongva/" target="new" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

I hope this helps you in customizing your Divi site with additional social networks!

*This post is based on this resource at Elegant Tweaks

 

· weekly lusciousness ·

· kick start your blog ·

· my favourite theme ·

Divi WordPress Theme

· together#weresist ·

This site uses referral links in some content, meaning I will receive a small commission should you choose to purchase via my link.  It costs you nothing at all and helps keep me caffeinated!
 Read our disclosure policy for more info.

Pin It on Pinterest

Share This