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>
i’m trying to add yelp at the bottom is that icon available
Thank you, very interesting tutorial.
How to add Foursquare icon?
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
Thank you worked perfect.
Thanks a lot for the help here! Nice simple tutorial.
Glad it could help.