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 ·

Pin It on Pinterest

Share This