// you’re reading...
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)
Loading...

Featured

Adding, removing, changing social icons in the WordPress Divi Theme 2.4+

social_icons

The basic unit for each social icon presented on both the header and footer is a block of PHP code in the file:

wp-content/themes/Divi-child/includes/social_icons.php

A typical unit appears below:

<?php if ( 'on' === et_get_option( 'divi_show_instagram_icon', 'on' ) ) : ?>
  <li class="et-social-icon et-social-instagram">
    <a href="<?php echo esc_url( et_get_option( 'divi_instagram_url', '#' ) ); ?>" class="icon">
      <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
    </a>
  </li>
<?php endif; ?>

Note: Make sure you created a child theme. In fact, make sure you always create a child theme.

Adding, deleting and changing social icons in the Divi Theme

To add a service, cut the code above and place it after a <?php endif; ?>, you can move these blocks around to get the order you desire. If something other than Instagram, change it to which service you want using common sense for the name.

To remove a service simply delete its block of code or turn it 'off'.

To change the URL of a service replace the # with the URL of your choosing.

Also of interest may be the social follow module from ET for DIVI.

Example file with added social icons and resources

<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', '//facebook.com' ) ); ?>" 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', '//twitter.com' ) ); ?>" class="icon">
      <span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
    </a>
  </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_instagram_icon', 'on' ) ) : ?>
  <li class="et-social-icon et-social-instagram">
    <a href="<?php echo esc_url( et_get_option( 'divi_instagram_url', '//instagram.com' ) ); ?>" class="icon">
      <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
    </a>
  </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'off' ) ) : ?>
<?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>

Discussion

7 Responses to “Adding, removing, changing social icons in the WordPress Divi Theme 2.4+”

  1. i’m trying to add yelp at the bottom is that icon available

    Posted by john | October 28, 2016, 10:54 AM
  2. Thank you, very interesting tutorial.

    Posted by Canaiman | March 13, 2016, 3:30 AM
  3. How to add Foursquare icon?

    Posted by Darko Martic | February 12, 2016, 5:37 AM
    • Unfortunately Foursquare is not available.

      Here is the current list of available social icons:
      .et-social-facebook
      .et-social-twitter
      .et-social-google-plus
      .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
      .et-social-rss

      Posted by Mike Molony | February 14, 2016, 6:02 PM
  4. Thank you worked perfect.

    Posted by Jason | January 8, 2016, 8:25 AM
  5. Thanks a lot for the help here! Nice simple tutorial.

    Posted by Patric | August 5, 2015, 11:25 AM

Post a comment