Add Social Media Icons to Footer in Thesis

Add social media icons to footer in Thesis Theme

Please note: This is an old post. There is a good chance that things have changed since this post was written and the code might no longer work. Also, you should forget about Thesis and get Genesis.

This will be a quick tutorial that will show one way to add social media icons or buttons to the footer area of the Thesis WordPress theme. We are going to use the custom_functions.php file to add a widget to the footer of the theme, some custom.css to style the widget area and also the HTML for our social networking icons.

Before you get started you will need to decide upon which icons you are going to add – and go ahead and upload them to your …custom/images/ folder. In this example, my icons are 32 pixels high – you may need to adjust the CSS and image proportions in the HTML according to your specific icons.

Adding a single widget to the footer of Thesis:

Copy and paste this code into your custom_functions.php file to create your new footer widget. (It’s always a good practice to backup your files before you start making changes)

/* ----------------------------------
WIDGETIZED THESIS FOOTER FUNCTION
---------------------------------- */
register_sidebars(1,
array(
'name' => 'Footer Widget',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function footer_widget() { ?>
<div id="footer_widget_1" class="sidebar">
<ul class="sidebar_list">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Widget') ){	?>
<li class="widget"><h3><?php _e('Footer Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'footer_widget', '1');

Next we’ll need to add a little styling to the widget that we just created and for the HTML that we are going to place inside of it. You will need to copy and paste the following code into your custom.css file:

/* ----------------------------------
WIDGETIZED THESIS FOOTER CSS
---------------------------------- */
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #footer_widget_1 ul.sidebar_list li.widget {position: absolute; text-align: left; display: block; top:4px; left:0px; width:468px; }
.custom #footer-social-icons a img { float:left; }

The last thing that you will need to do is to add a text box to the newly created footer widget area. Go to your Dashboard >> Appearance >> Widgets >> and drag a text box over into the Footer Widget area. You will then paste the following code into this text box (leaving the “Title” blank – Obviously you will also need to update the the path of each icon to your domain name and image name, and also add in your appropriate username for each social networking site).

<div id="footer-social-icons">

<a href="http://feeds.feedburner.com/YOUR_FEED_URL" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-rss.png" width="32" height="32" alt="RSS" title="Stay Current" /></a>

<a href="http://www.linkedin.com/in/YOUR_DISPLAY_NAME" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-linkedin.png" width="32" height="32" alt="LinkedIn" title="Connect with me on LinkedIn" /></a>

<a href="http://www.facebook.com/YOUR_FB_IDENTIFIER" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-facebook.png" width="32" height="32" alt="Facebook" title="Follow Me on Facebook" /></a>

<a href="https://twitter.com/YOUR_USER_NAME" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-twitter.png" width="32" height="32" alt="Twitter" title="Stalk Me on Twitter" /></a>

</div>

Comments

  1. Social media icons in the footer is a great idea, thanks a ton.

  2. I’m a Nashville, TN Wedding Photographer and am very grateful for your site man.
    I’m using this code in my footer and love it!

    I did want to add how to space the icons out a little more.
    I found the answer on your site, just another post.
    You’d just add a magin-right: 0.3em; to the code above like this;

    .custom .sidebar ul.sidebar_list {position: relative;}
    .custom #footer_widget_1 ul.sidebar_list li.widget {position: absolute; text-align: left; display: block; top:4px; left:0px; width:468px; }
    .custom #footer-social-icons a img { float:left; margin-right: 0.3em;}

    And adjust the 0.3em to whatever you like.
    I have mine at 0.7em.

    Anyway thanks again and have a great day!

Speak Your Mind

*