Add search and social to a WordPress Thesis theme header

by Andrew Gertig on August 9, 2010

I recently switched my theme from a plug-and-chug type theme to one of the white-labelish type themes called Thesis. It is very flexible and is almost like starting with a blank canvas that has a big set of paints and a crowd of tutors standing next to it. One of the big things I wanted to do with the theme is to replace the text “Blog Title” with an image logo and also to put a search bar and some links to some of my networks and rss feed in the header.

This is how I accomplished the addition of search and social as shown in the screenshot below.

First make sure that your header logo image does not take up the whole width of the header, it just makes things simpler.  The CSS code below looks like a lot but what it does is allow you to use any of a multitude of social links, all from one image which essentially “moves” depending on the pixel values chosen to display the appropriate image and then show the corresponding grayed out image on mouse hover.  Download the image here.

Next upload that image using the built in WordPress media “add new” uploader and use the link to its upload location in the code below where it says “add your image link here“. Then copy the code shown below into the bottom of your custom.css file.

.custom #header_addons .search_form {float: right; width: 240px;}
.custom #header_addons .search_form input[type="text"] {padding: 9px 5px; border: 1px solid #cbcac8; background: #f9f9f9; width: 223px;}
.custom #header_addons .search_form input[type="text"]:focus {background: #ffffff;}

/* positions the search widget on the right hand side of the header */
.custom #header_addons {position: absolute; top: 40px; right: 0px; text-align: right; width: 400px; margin-top: 0;}

.custom #social {list-style: none; text-align: left; width: 148px; overflow: hidden; float: right;}

.custom #social li {float: left;}

.custom #social li a { float: left; width: 32px; height: 32px; background: url(http://add your image link here) 0 0 no-repeat; text-indent: -9999px; display: block; margin-left: 5px; position: relative;}

.custom #social li a span {background: url(http://add your image link here) 0 0 no-repeat; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; }

.custom #social li#delicious a {background-position: 0 0;}
.custom #social li#delicious a:hover {background-position: 0 -32px;}

.custom #social li#digg a {background-position: -42px 0;}
.custom li#digg a:hover {background-position: -42px -32px;}

.custom #social li#email a {background-position: -84px 0;}
.custom #social li#email a:hover {background-position: -84px -32px;}

.custom #social li#facebook a {background-position: -126px 0;}
.custom #social li#facebook a:hover {background-position: -126px -32px;}

.custom #social li#flickr a {background-position: -168px 0;}
.custom #social li#flickr a:hover {background-position: -168px -32px;}

.custom #social li#google a {background-position: -210px 0;}
.custom #social li#google a:hover {background-position: -210px -32px;}

.custom #social li#linkedin a {background-position: -252px 0;}
.custom #social li#linkedin a:hover {background-position: -252px -32px;}

.custom #social li#rss a {background-position: -294px 0;}
.custom #social li#rss a:hover {background-position: -294px -32px;}

.custom #social li#skype a {background-position: -334px 0;}
.custom #social li#skype a:hover {background-position: -334px -32px;}

.custom #social li#stumbleupon a {background-position: -376px 0;}
.custom #social li#stumbleupon a:hover {background-position: -376px -32px;}

.custom #social li#twitter a {background-position: -418px 0;}
.custom #social li#twitter a:hover {background-position: -418px -32px;}

.custom #social li#vimeo a {background-position: -460px 0;}
.custom #social li#vimeo a:hover {background-position: -460px -32px;}

.custom #social li#youtube a {background-position: -502px 0;}
.custom #social li#youtube a:hover {background-position: -502px -32px;}

Then copy the code shown below into the bottom of your custom_functions.php file.

function custom_social_search_widget() { ?>
<div id=”header_addons”>
<form method=”get” action=”<?php bloginfo(‘home’); ?>/”>
<p>
<input type=”text” value=”Enter search…” name=”s” id=”s” />
<!– <input type=”submit” id=”searchsubmit” value=”Search” /> –>
</p>
</form>
<ul id=”social”>
<li id=”twitter”><a rel=”nofollow” href=”http://twitter.com/gertig” title=”My Tweetage”>Twitter</a></li>
<li id=”linkedin”><a rel=”nofollow” href=”http://www.linkedin.com/pub/andrew-gertig/3/a75/665″ title=”LinkedIn”>LinkedIn</a></li>
<li id=”youtube”><a rel=”nofollow” href=”http://www.youtube.com/user/AndrewGertig” title=”Youtube”>Youtube</a></li>
<li id=”rss”><a rel=”nofollow” href=”http://andrewgertig.com/feed” title=”RSS”>RSS</a></li>
<!–<li id=”email”><a href=”http://andrewgertig.com/contact” title=”Contact me” style=”">Contact me</a></li>–>
<!–<li id=”delicious”><a href=”#” title=”Our Delicious Profile”>Delicious</a></li>–>
<!–<li id=”digg”><a href=”#” title=”Our Digg Profile”>Digg</a></li>–>
<!–<li id=”facebook”><a href=”#” title=”Our Facebook Profile”>Facebook</a></li>–>
<!–<li id=”flickr”><a href=”#” title=”Our Flickr Page”>Flickr</a></li>–>
<!–<li id=”google”><a href=”http://www.google.com/profiles/andrewgertig” title=”Google Profile” style=”">Google Profile</a></li>–>
<!–<li id=”linkedin”><a href=”#” title=”Our Linkedin Profile”>Linkedin</a></li>–>
<!–<li id=”skype”><a href=”#” title=”Call us with Skype”>Skype</a></li>–>
<!–<li id=”stumbleupon”><a href=”#” title=”Our Stumbleupon Profile”>Stumbleupon</a></li>–>
<!–<li id=”vimeo”><a href=”#” title=”Our Vimeo Profile”>Vimeo</a></li>–>
<!–<li id=”youtube”><a href=”#” title=”Our Youtube Profile”>Youtube</a></li>–>
</ul>
</div>
<?php }
add_action(‘thesis_hook_header’ , ‘custom_social_search_widget’);

As you can see from the code above I have commented out the services I do not want to use.  I chose to use Twitter, LinkedIn, Youtube, and RSS.

Tagged as: CSS, PHP, Thesis, Wordpress

  • Chantilly

    Andrew, I’m not using the Thesis theme, but I’d like to display my social icons, that connect to my profiles, in the top-bar above my header. Can you offer any suggestions? I’m not that familiar with php.

    http://www.biculturalmom.com/

  • Greg

    Hey Andrew, I tried this out and everything is great except one thing… the position is absolute and moves location when you change the size of the browser.  

    Yet, yours does not do this… any ideas?  Thanks!

  • http://avgjoegeek.net/ avgjoegeek

    Doesn’t seem to work with thesis 1.8? I dunno maybe I’m doing something wrong.. but I’m pretty sure I don’t have anything in conflict with it. 

Previous post:

Next post: