More social media icons at Divi footer

Mar 22, 2017 | Divi Resources

How to add more social media icons to Divi footer

This post covers the topic – how to add more social media icons to Divi footer.

If you are a fan of Divi and hate the limitation of having fewer social media icons in the footer, then you don’t have to face it anymore. Because I’m going to walk you through the way on how to add more social media icons to Divi footer. And a control option for this in Divi Theme Panel. Meanwhile, checkout out our Divi Layouts Pack, which includes custom blog page layouts, blog post templates, footer, headers, and WooCommerce product page layouts. Checkout this blog post covering how to add icons to the Divi blog and post meta.

As Divi comes with the settings of four default social media icons i.e. Facebook, Twitter, Google+, and RSS. And most of the time, we have to add extra social media icons to the footer such as Instagram, YouTube and more, then there will be no option left for us than to hard-code.

Hard-coding is not the right approach as it lacks the dynamicity. Moreover, in this case, if the client wants to change social media icons in the future, then he has to hire a developer for such a little thing as he might not be a developer. And in a theme like Divi, which is very user-friendly, one shouldn’t have to hire a developer to change only social media icons.

In Divi theme options panel, there are four default social media icon buttons and four text fields adjacent to them to add links. In order to add more social media icon buttons, you have to write a few lines of code but before going further, make sure you are writing in your Divi child theme.

Here I am showing you to add LinkedIn icon in the Divi theme options.

In the first step of your query on how to add more social media icons to Divi footer, you need to create a file named ‘panel_options.php‘ and in that file, write a few lines of code.

In the above code, I have added the LinkedIn icon enable button below the Google+ button and the text field correspondence to it written below the Google+ text field.

Now after that, add these into your child theme ‘functions.php

This will make the previous code work and add the LinkedIn icon enable button to the theme options.

In the final step, you need to create an “includes” folder in your child theme. And copy “social_icons.php” file from the “includes” folder in the parent theme to your child theme “includes” folder.

Now append this code in your child theme’s social_icons.php file.

Now after enabling the LinkedIn icon from the theme options, you can see your icon in the footer.

That’s it, fellas, on how to add more social media icons to Divi footer and in theme options. You can add more icons if you want to include YouTube, Dribble, etc. Even without caring about the CSS, Divi will take care of it.

You don’t have to worry about these social media icons CSS.

Still need help in getting this done? Check out our Custom Divi Work page. Or checkout this blog post to add Divi menu at the bottom of the page.

Posted By:
Mohd Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 8 years experience in the WordPress development industry.

19 Comments

  1. Garvit

    Here its not mentioned where this ‘panel-options.php’ file will be created. Need support.

    Reply
    • Ankur Khurana

      In the root folder of your child theme. Let me know if you still face any issues or have any queries.

      Reply
      • Garvit

        Working fine, Thank you for teaching me something new

        Reply
  2. Mike Williams

    Hello, I’ve followed all of the steps and on my theme options page I have these errors at the top of the page:

    directory() . esc_attr( “/options_divi.php” ) ); global $options; $enable_key = “name”; $enable_value = “Show Google+ Icon”; $enable_options = array ( array( “name” => esc_html__( “Show Instagram Icon”, $themename ), “id” => $shortname.”_show_instagram_icon”, “type” => “checkbox”, “std” => “off”, “desc” => esc_html__( “Here you can choose to display the Instagram Icon. “, $themename ) ), ); foreach( $options as $index => $value ) { if ( isset($value[$enable_key]) && $value[$enable_key] === $enable_value ) { foreach( $enable_options as $custom_index => $enable_option ) { $options = insertArrayIndex($options, $enable_option, $index+$custom_index+1); } break; } } $url_key = “name”; $url_value = “Google+ Profile Url”; $value_options = array ( array( “name” => esc_html__( “Instagram Profile Url”, $themename ), “id” => $shortname.”_instagram_url”, “std” => “#”, “type” => “text”, “validation_type” => “url”, “desc” => esc_html__( “Enter the URL of your Instagram Profile. “, $themename ) ) ); foreach( $options as $index => $value ) { if ( isset($value[$url_key]) && $value[$url_key] === $url_value ) { foreach( $value_options as $custom_index => $value_option ) { $options = insertArrayIndex($options, $value_option, $index+$custom_index+1); } break; } } function insertArrayIndex($array, $new_element, $index) { $start = array_slice($array, 0, $index); $end = array_slice($array, $index); $start[] = $new_element; return array_merge($start, $end); } return $options;
    Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\testsite\wp-content\themes\Divi\functions.php on line 8692

    Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\testsite\wp-content\themes\Divi\epanel\core_functions.php on line 805

    I was pretty sure I placed the files in the correct locations. Can you please provide some assistance?

    Reply
    • Divi Extended

      Hi Mike,

      Did you start the code in panel_options.php file with php tag?

      Reply
  3. John Raymond Quijano Tanedo

    Hi Ankur What if I need Instagram instead of Linked in?

    Reply
    • Divi Extended

      Hi John,

      Use instagram wherever linkedin is used in both files ‘panel_options.php’ and ‘social_icons.php’.
      But if you want both icons then copy the code of linkedin in ‘panel_options.php’ and paste below it and replace linkedin with instagram and same as in ‘social_icons.php’.

      Reply
  4. Pascal

    Hi Ankur, thanks for this great tutorial!

    I created all the files with your code and it is working fine, but if I use wordpress in another language, the new social options disappear, do you have any suggestions to show up the social options when WordPress and Divi are in Italian?
    Thanks again!

    Reply
    • Ankur Khurana

      Hi Pascal, thank you for finding this useful.
      The code should work with any language but in case if it’s not working, I can take a look at it. It would be helpful if you can grant me(ankur@elicus.com) access to your website.

      Reply
      • E

        Just wanted to confirm this only works if English is setted up as language of the site.

        Reply
        • Divi Extended

          No, this has nothing to do with the language, this will work irrespective of the language of the site.

          Reply
  5. Micole

    Hi. I tried doing this for instagram. I see the option to use it in theme options

    Reply
  6. Micole Cohen Richter

    Sorry – see it in theme options but it doesn’t show up on my site. What could I have done wrong?

    Reply
  7. Amy S Chaplin

    I am unable to get the LinkedIn option to show in theme options. I do not see panel_options.php in the theme files–I suspect this is why it’s not working.

    Reply
  8. Vicky Rowe

    Thanks, this worked great!! The only thing that needs changed is that the LinkedIn icon is showing up on the left, and all the other icons are on the right.

    Reply
  9. joa

    yes!
    it depends of webpage language!
    change sentences as:
    Google+ Profile Url
    Show Google+ profile
    etc.

    in panel_options.php’s enable values tags

    with your language specific phrases.
    now it works

    Reply
  10. JGarrido

    I have a suggest to do… In case you use a non english WP, the comparation of name isn´t working.

    Shouln´t be better to use?

    $enable_value = __(“Show Google+ Icon”, $themename);

    And such in all data that will ,be cpompared with translated strings?

    I had to do this in my spanish WP.

    Reply
  11. Cheari

    Thank you for this. It seems pretty simple to install, but before I do I’d like to ask if it also displays the added icons to the secondary menu

    Reply
  12. Cheari

    Ok, so I tried it. But I want to add a whatsapp icon. So i changed the code as mentioned above, but Divi doesn’t actually HAVE a whatsapp icon? Where do I add this icon image file to make sure it gets picked up by the enabled option?

    Reply

Trackbacks/Pingbacks

  1. How to display and customize social media icons in Divi header and footer - […] How to add more social media icons to Divi footer […]

Submit a Comment

Your email address will not be published. Required fields are marked *

19 Comments

  1. Garvit

    Here its not mentioned where this ‘panel-options.php’ file will be created. Need support.

    Reply
    • Ankur Khurana

      In the root folder of your child theme. Let me know if you still face any issues or have any queries.

      Reply
      • Garvit

        Working fine, Thank you for teaching me something new

        Reply
  2. Mike Williams

    Hello, I’ve followed all of the steps and on my theme options page I have these errors at the top of the page:

    directory() . esc_attr( “/options_divi.php” ) ); global $options; $enable_key = “name”; $enable_value = “Show Google+ Icon”; $enable_options = array ( array( “name” => esc_html__( “Show Instagram Icon”, $themename ), “id” => $shortname.”_show_instagram_icon”, “type” => “checkbox”, “std” => “off”, “desc” => esc_html__( “Here you can choose to display the Instagram Icon. “, $themename ) ), ); foreach( $options as $index => $value ) { if ( isset($value[$enable_key]) && $value[$enable_key] === $enable_value ) { foreach( $enable_options as $custom_index => $enable_option ) { $options = insertArrayIndex($options, $enable_option, $index+$custom_index+1); } break; } } $url_key = “name”; $url_value = “Google+ Profile Url”; $value_options = array ( array( “name” => esc_html__( “Instagram Profile Url”, $themename ), “id” => $shortname.”_instagram_url”, “std” => “#”, “type” => “text”, “validation_type” => “url”, “desc” => esc_html__( “Enter the URL of your Instagram Profile. “, $themename ) ) ); foreach( $options as $index => $value ) { if ( isset($value[$url_key]) && $value[$url_key] === $url_value ) { foreach( $value_options as $custom_index => $value_option ) { $options = insertArrayIndex($options, $value_option, $index+$custom_index+1); } break; } } function insertArrayIndex($array, $new_element, $index) { $start = array_slice($array, 0, $index); $end = array_slice($array, $index); $start[] = $new_element; return array_merge($start, $end); } return $options;
    Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\testsite\wp-content\themes\Divi\functions.php on line 8692

    Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\testsite\wp-content\themes\Divi\epanel\core_functions.php on line 805

    I was pretty sure I placed the files in the correct locations. Can you please provide some assistance?

    Reply
    • Divi Extended

      Hi Mike,

      Did you start the code in panel_options.php file with php tag?

      Reply
  3. John Raymond Quijano Tanedo

    Hi Ankur What if I need Instagram instead of Linked in?

    Reply
    • Divi Extended

      Hi John,

      Use instagram wherever linkedin is used in both files ‘panel_options.php’ and ‘social_icons.php’.
      But if you want both icons then copy the code of linkedin in ‘panel_options.php’ and paste below it and replace linkedin with instagram and same as in ‘social_icons.php’.

      Reply
  4. Pascal

    Hi Ankur, thanks for this great tutorial!

    I created all the files with your code and it is working fine, but if I use wordpress in another language, the new social options disappear, do you have any suggestions to show up the social options when WordPress and Divi are in Italian?
    Thanks again!

    Reply
    • Ankur Khurana

      Hi Pascal, thank you for finding this useful.
      The code should work with any language but in case if it’s not working, I can take a look at it. It would be helpful if you can grant me(ankur@elicus.com) access to your website.

      Reply
      • E

        Just wanted to confirm this only works if English is setted up as language of the site.

        Reply
        • Divi Extended

          No, this has nothing to do with the language, this will work irrespective of the language of the site.

          Reply
  5. Micole

    Hi. I tried doing this for instagram. I see the option to use it in theme options

    Reply
  6. Micole Cohen Richter

    Sorry – see it in theme options but it doesn’t show up on my site. What could I have done wrong?

    Reply
  7. Amy S Chaplin

    I am unable to get the LinkedIn option to show in theme options. I do not see panel_options.php in the theme files–I suspect this is why it’s not working.

    Reply
  8. Vicky Rowe

    Thanks, this worked great!! The only thing that needs changed is that the LinkedIn icon is showing up on the left, and all the other icons are on the right.

    Reply
  9. joa

    yes!
    it depends of webpage language!
    change sentences as:
    Google+ Profile Url
    Show Google+ profile
    etc.

    in panel_options.php’s enable values tags

    with your language specific phrases.
    now it works

    Reply
  10. JGarrido

    I have a suggest to do… In case you use a non english WP, the comparation of name isn´t working.

    Shouln´t be better to use?

    $enable_value = __(“Show Google+ Icon”, $themename);

    And such in all data that will ,be cpompared with translated strings?

    I had to do this in my spanish WP.

    Reply
  11. Cheari

    Thank you for this. It seems pretty simple to install, but before I do I’d like to ask if it also displays the added icons to the secondary menu

    Reply
  12. Cheari

    Ok, so I tried it. But I want to add a whatsapp icon. So i changed the code as mentioned above, but Divi doesn’t actually HAVE a whatsapp icon? Where do I add this icon image file to make sure it gets picked up by the enabled option?

    Reply

Trackbacks/Pingbacks

  1. How to display and customize social media icons in Divi header and footer - […] How to add more social media icons to Divi footer […]

Submit a Comment

Your email address will not be published. Required fields are marked *

15 professional website design tips you can follow in 2020

15 professional website design tips you can follow in 2020

Competing in today’s business landscape can feel like an impossible task. No matter how many calls you make, emails you send, or social media posts you submit, it will feel like companies with more resources than you are always a step or two ahead. When it comes to...

Create Divi logo carousel easily with Divi Plus logo slider module

Create Divi logo carousel easily with Divi Plus logo slider module

What makes a business website good that provides service in the market? It's their portfolio and how they present it. And Divi logo carousel on Divi theme business sites adds +1 in portfolio presentation. Therefore, in this blog post, we're going to see how we can...