Add Social Media Buttons to Website Header in WordPress

Perhaps you want to add social media buttons to your website header in WordPress instead of having them in other places on your site such as your left or right hand navigation, or the top or bottom of your pages or posts.  Adding social media buttons to website headers gives you more room for displaying your website content.  We will show you how to do this including how to create RSS feed in WordPress.

1.  Upload the social media icons you want to use for your blog by going to Media -> Add New in your dashboard.  After uploading each icon, copy and paste the file url for each icon into a text document.  The file url will look something like this:

File URL for Youtube Icon
http://www.abundantideas.com/wp-content/uploads/2012/12/youtube.png

2.  Go to Appearance – > Editor -> Style.css.  Paste the following code into the bottom of your page.

#header_icons img {    

    float:right;

    height:32px;

    width:32px;

    margin:0;

    margin-right:10px;

 

}

 

#header_icons {

    float: right;

    padding-top:50px;

    width:250px;

    z-index:-9999;

    padding-bottom:10px;

3.  In the code below, fill in the missing information for each of your social media icons. For example, where it says, “YourTwitterPage”, enter your twitter page.   If there are other Icons you want to add, just use the code structure below for that icon.  Next, go to Appearance – > Editor -> header.php and add the code right after the div id=header tag in the <body> section of the code.

 

div id=”header_icons”>

<a href=”https://twitter.com/YourTwitterPage” target=”_blank”>
<img src=”Enter Link You Saved For Twitter Icon in Step1
width=”40px”></a>

<a href=”https://www.facebook.com/YourFacebookPage” target=”_blank”>
<img src=”Enter Link You Saved For Facebook Icon in Step1” width=”40px”></a>

<a href=”http://www.linkedin.com/in/YourLinkedInPage” target=”_blank”>
<img src=”Enter Link You Saved For LinKedInPage Icon in Step1” width=”40px”></a>

<a href=”https://YourGooglePlusLink” target=”_blank”>
<img src=”Enter Link You Saved For GooglePlus Icon in Step1” width=”40px”></a>

<a href=”http://YourRSSfeedURL” target=”_blank”>
<img src=”Enter Link You Saved For RSS Icon in Step1” width=”40px”></a>

<a href=”mailto:you@yourdomain.com” target=”_blank”>
<img src=”Enter Link You Saved For Mailto Icon in Step1” width=”40px”></a>

</div>

 

How To Remove RSS Feed From WordPress Theme

Some WordPress themes might already come with their own RSS image at the top of the page.  You may need to remove this in order to make room for other things you want to put into the header, like your own personalized RSS image.  To remove the default RSS feed image from WordPress, find the code that looks similar to the following and remove it by going to Appearance -> Editor -> header.php

Here is what the code might look like:

<div>

<a href=”http://www.abundantideas.com/feed” title=”RSS”></a>

 

In my theme, I had to remove the following code:

<div>

 <?php if(get_option(‘Eximius_rssicon’)==’yes’) { ?>

    

                <a href=”<?php bloginfo(‘rss2_url’); ?>” title=”RSS”></a>

 <?php } ?>

</div>

 

We hope this has been a useful tutorial for how to add social media buttons to website headers  and to create RSS feed in WordPress.  Feel free to comment and ask any questions.