Warning: Declaration of thesis_comment::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /home/directm7/public_html/wpblogger/wp-content/themes/thesis/lib/classes/comments.php on line 0

Warning: Declaration of thesis_comment::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /home/directm7/public_html/wpblogger/wp-content/themes/thesis/lib/classes/comments.php on line 0

Warning: Declaration of thesis_comment::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /home/directm7/public_html/wpblogger/wp-content/themes/thesis/lib/classes/comments.php on line 0

Warning: Declaration of thesis_comment::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /home/directm7/public_html/wpblogger/wp-content/themes/thesis/lib/classes/comments.php on line 0
Create a 'Floating' Areas in Thesis (no plugin required) - WPblogger | WPblogger
Creating floating icons in the Thesis theme for WordPress

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

by Norcross on June 5, 2010

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() { ?>
<a href=”” class=”rss” title=”Subscribe to the RSS feed”>RSS Feed Contact

<?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

{ 6 comments… read them below or add one }

Neil June 5, 2010 at 5:31 am

Great tutorial thanks.
But does it not need

to work properly with that css?

Neil June 5, 2010 at 5:33 am

Sorry, the code got cut –
I meant should you add id=”side_slide” to that div?

Norcross June 5, 2010 at 12:10 pm

Neil- yes, that div ID is required. it can be whatever you want, but the name needs to match on the HTML in the function and in the CSS. the main div container that its in had all the CSS that positions the overall set of icons. the rest (the UL and LI classes) handles the individual icons.

Norcross June 5, 2010 at 12:20 pm

Neil – i just realized that div class got cut off from the HTML code. I’ll edit that, but add the div ID before the UL class.

George Serradinho June 28, 2010 at 2:27 am

Nice tutorial, I also did a tutorial some time back about adding floating icons and I saw that a plugin was developed a few weeks after that to make it easier for users. Although plugins are cool and easy to use, I still prefer to code stuff myself and keep plugins to a minimum.

Henry July 15, 2010 at 12:19 pm

Excellent tutorial, exactly what I have been looking for. However is there any way to display the floating icons when the mouse is hover to the left hand side of the window?

Previous post:

Next post: