How to Add Social Media Icons To Header Area

This is a trick to add social media icons to the header area of Socrates (not Speaker Theme).  You can see it on this post in header area (because I’m using Widget visibility).

Copy this Social Icon shortcode

[soc_social color="#4082c6" align="left" twitter="http://twitter.com" facebook="http://facebook.com" youtube="http://youtube.com"]

Goto Appearance > Widgets and Drag a Custom HTML Widget to the Header Widget Area.

Paste the code and replace the social icon URLs with your own links.   You can change the color of the icons as well with color code.  Or remove the color code and it inherits One extra step if you use a white background.. the actual icons are white, and in a future update we’ll add another color option for icon..   but you can fix with custom css with this code.

.soc-social a {color: #000;}

These are all the icon options.

  • twitter
  • facebook
  • youtube
  • vimeo
  • tumblr
  • pinterest
  • linkedin
  • instagram
  • github
  • rss

Reminder:  The header widget is disabled in mobile by default.   But you can enable it in Appearance > Customize > Other > Hide Header Widget in Mobile

Tags:
Previous Post

How to use a Child Theme (and export options)

Next Post

How To Create A Sticky Header

Comments

    • Stephen Last
    • December 7, 2020
    Reply

    I was just about to go and try this in Speaker Theme when I saw that this trick only applies to Socrates. Is there any way to do this in Speaker theme, please?

      • Dan Nickerson
      • December 7, 2020
      Reply

      Speaker Theme doesn’t have a header widget area, so it just means you can’t use the trick in that area. You can use it a sidebar widget, top banner widget. Or you can add Font Awesome icons via any menu using this trick.. So the trick works in any of our themes. But Speaker and ACME don’t have header widget areas.

        • Stephen Last
        • December 7, 2020
        Reply

        Aha! Yes. I have added all my social site accounts to my Sidebar now, and in fact I like them as much there as in the header. Thank you so much!

        My hosting provider was looking at optimisation for me and he said my site was also impressively fast without touching it!

        No doubt something to do with using your coding tips and not using any WordPress page builders!

Leave a Reply

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