Create a ‘Floating’ Areas in Thesis (no plugin required)

Everyone has a few icons on their site now. Whether it’s for social media, contact info, or other ways to connect with visitors, it’s become a standard. Now the question becomes, “Where do I put them?”

The sidebar seems like a logical place, but it’s already crowded as it is. So how about on the side of the screen, out of everyone’s way? There are some plugins that do this, but most of the ones I’ve seen include either some Javascript, IFrames, or a similar waste of code. We can do it clean with just HTML and CSS.

But enough from me, let’s get onto the code!

(Editor’s note: This tutorial is specifically for the Thesis theme, however it can easily be applied to other themes. Enjoy!)

Step 1: Decide What You’re Going To Display

For this example, we’re going to set 4 separate 48px by 48px icons for Twitter, Facebook, RSS, and email. But you could also have it display a single icon or ‘call to action’ if that’s what you want. So since we’re using icons, I’ve uploaded the 4 icons I want to use (all the same size) into the images folder in the custom directory.

Step 2: Setting The Functions

As usual, I like to set all my functions in a list at the beginning of my custom_functions.php file. This only requires one function, so let’s set it now.

add_action('thesis_hook_after_html','social_sides'); // Adds social icons that follow the side

Step 3: Create The Links

This will include the HTML we’re going to build at the very bottom of the page. Don’t worry, the CSS will put it where we want it. Here is where we are actually putting in the links and icons. Note the images aren’t linked here. They’ll be in the CSS later. Obviously, change the links for your own accounts.

function social_sides() { ?>

<?php }

Here I’ve set the Twitter, Facebook, RSS feed (using the built-in Thesis feed hook) and email. Nothing crazy. You can add / remove as many as you want. The important thing is the CSS in the next step.

Step 4: Position via CSS

There are a view pieces to the CSS setup that need to be taken into consideration.

1. The width in each section (48px) matches the size of the icons. Doesn’t matter what size you use, they just need to match
2. The position:fixed will keep them in the same location (in this example on the very left of the screen) as the visitor scrolls down
3. The top and left percentages will dictate where they are aligned. Start with those, and play around in Firebug until you find what you like

/* Sidebar Floating icons */
.custom #side_slide {
  background:transparent;
  left:0.25%;
  position:fixed;
  top:40%;
  width:48px;
}

.custom #side_slide a {
  display:block;
  height:48px;
  text-indent:-9999px;
  padding:5px 0;
}

.custom #side_slide .twitter {background:url('images/sd_twitter.png') no-repeat 0 0;}
.custom #side_slide .facebook { background:url('images/sd_facebook.png') no-repeat 0 0;}
.custom #side_slide .rss { background:url('images/sd_feed.png') no-repeat 0 0;}
.custom #side_slide .contact { background:url('images/sd_contact.png') no-repeat 0 0;}

.custom #side_slide .twitter:hover,
.custom #side_slide .facebook:hover,
.custom #side_slide .rss:hover,
.custom #side_slide .youtube:hover,
.custom #side_slide .contact:hover {
  background-position:0 0;
}

Here’s an example of it “in action”

That’s it! You’ll now have your contact and profile icons floating happily on the side of the screen, always available to the visitor without taking up room in the sidebar.

Editor’s Note: This tutorial was a guest post by Andrew Norcross. He might just be the most tattooed person I know, and that’s saying a lot. Oh yeah, he’s also a kickin web developer, WordPress designer, & Thesis guru. If you need any web work done, you’d be lucky to hire him.

image source: Corie Howell