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

There are a lot of plugins out there that will create a ‘featured content’ gallery. But if you’re anything like me, you don’t like using plugins unless you absolutely have to. I want to thank Greg Rickaby for his tutorial. However, his didn’t quite work for me, so I modified it and changed / added a few things. So let’s roll up our sleeves a bit and do it ourselves. Let’s get started, shall we?

Step 1: Setting The Functions

It’s a personal preference, but I always set my functions in a list at the beginning of my custom_functions.php file. This helps me debug issues, choose load order (when there are multiple functions using the same hook) and if need be, comment out a function without removing the code completely. So let’s do that now.

add_action ('wp_head', 'slider_scripts'); // Adds slider scripts, etc
add_action('thesis_hook_before_content', 'featured_slider'); // Adds featured slider

Step 2: Calling The Scripts

One issue I ran into was using the default jQuery library in Thesis. They load in the footer, and for some reason that didn’t do the job. So I downloaded the libraries and manually uploaded them into a folder I labeled ‘js’ within the custom folder. You’ll need the full jQuery library (found here) and the jQuery Cycle (found here). Then add the function to load them in the wp-head.

    function slider_scripts() {
	if (is_home()) { ?>
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/jquery.min.js"></script>
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/jquery.cycle.all.2.72.js"></script>
            <script type="text/javascript">
            $(function() {
                $('#slideshow').before('<div id="nav" class="nav">').cycle({
                    fx:     'fade',
                    speed:  '3000',
                    timeout: '3000',
                    pager:  '#nav',
                pause:   '0',
                fastOnEvent: '0',
                    before: function() { if (window.console) console.log(this.src); }
                });
            });
            </script>
	<?php } }

Step 3: The Slider Function

This is the guts of the feature. It does the following:

• Determines how it will grab the posts (in the example, it uses the tag ‘featured’)
• Selects the number of posts it will retrieve, from the most recent going back
• Pulls the image from the Thesis Post Image field
• Sets the height, width, and image quality
• Adds the post title below the post

The function for getting the image
Note: this function is not required to be called in a hook, hence the reason it wasn’t included in Step 1

function grabImage() {
 global $post, $posts;
 $first_img = get_post_meta($post->ID, 'thesis_post_image', true);
 return $first_img;
}

The Slider itself

function featured_slider () {
if (is_home()) { ?>
    <div id="slideshow">
    <?php $featured_loop = new WP_Query("tag=featured&showposts=5");
    while ($featured_loop->have_posts()) : $featured_loop->the_post(); ?>
        <a href="<?php the_permalink(); ?>" /><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo grabImage(); ?>&h=250&w=630&zc=1&q=80" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /><p><?php the_title(); ?></p></a>
    <?php endwhile; ?>
    </div>
<?php } }

Step 4: Style It

The CSS included can obviously be changed for your liking. A few things to keep in mind:

• You’ll want to make sure that the height and width under the #slideshow match what you have in the slider function itself.
• I’ve included some rounded edges on the post numbers on the bottom of the slider
• Make sure the bottom margin in the #slideshow is big enough to include the post title, otherwise it may get washed out.

#slideshow {
	height: 250px;
	width:650px;
	margin: 0 0 50px 0;
	padding-left:0;
	padding-right:0;
	}
#slideshow p{
	margin-top:0;
	color:#0b486b;
	font-size:14px;
	font-weight:600;
	}
#slideshow a img{}
.nav {margin: 0;}
#nav a {
	position: relative;
	top: 235px;
	left: 10px;
	color: #ffffff;
	margin: 0 2px;
	padding: 5px 8px;
	background: #0b486b; /* sets the bg color of the nav box */
	text-decoration: none;
	font-weight:bold;
	z-index: 9999;
 	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#nav a.activeSlide {background-color:#ffffff;color:#0b486b; border:1px solid #0b486b; }/* sets the bg colors of the nav box when active */
#nav a:focus {outline: none;}

Editor’s Note: This tutorial was a guest post by Andrew Norcross. He’s a self described “freelancing web monkey” from St. Petersburg, FL. I had the chance to meet Andrew at Search & Social Spring Summit this week and let me tell you, he knows his stuff. I really appreciate Andrew sharing this tutorial with us and if you’re looking for a web developer, WordPress designer, or Thesis guru, he’s your man.

image source: kretyen

The Thesis theme has been hailed as the most flexible WordPress Theme ever. And, given the diversity of quality designs its users have cranked out, it’s tough to disagree.

The flexibility centers around the theme’s unique use of a custom CSS (cascading style sheet) file so you can drastically change the look of your site by editing just one or two lines of code in one single file.

If you’re an amateur (at best) web designer like myself, just reading the three letters of CSS probably sent shivers down your spine. But, while CSS can certainly be intimidating at first, Thesis actually makes it MUCH more approachable and easier to learn.

While I still wouldn’t consider myself an expert, in just a few hours I was able to learn enough to create the custom design you see on this site.

The Necessary Tools

For the purpose of this tutorial you’ll obviously need to have purchased a copy of the Thesis theme. Also, I urge you to install the Thesis OpenHook plugin, as well as the Firebug add-on for FireFox.

OpenHook makes it quick and easy to edit your custom CSS file from within the WordPress admin panel. Without it you’ll have to use an html editor and keep saving & uploading every time you tweak something and that gets old quick.

Note: Thesis OpenHook also allows you create and use custom functions within the hooks Thesis uses. But that’s a whole other post and both Chris & Rae have done a good job of explaining hooks already. Also, Thesis 1.6 has built in functionality that allows you to edit your custom files. If you’re comfortable with PHP and using hooks, you will no longer need OpenHook, however, it’s still a great tool for those new to Thesis.

Firebug allows you to inspect items on any given web page and selects the corresponding CSS rules that govern that particular object. This will keep you from having to guess what rules are being applied to an object not to mention having to sort through line after line of code trying to find the answer.

Those two plugins saved me countless hours of work and certain frustration. If you don’t install them that’s fine, just don’t get mad at me when you put your keyboard through your flat screen display.

Learning CSS

Once you’ve activated your custom CSS file (which amounts to renaming the “custom-sample” folder in the stock Thesis installation to simply “custom”) any change you make in your custom.css file will be applied to your site.

So, how do you make those changes?

After activating the Thesis OpenHook plugin, you’ll see a “Thesis Custom Styling” option in the Appearance section of your left sidebar. Clicking that link will take you to a page that should look a lot like the image below that allows you to edit your custom.css file.

As you can see, within the developer’s comments you’re given these two quick examples of CSS stylings that you may want to employ:

.custom a, .custom a:visited { color: #090; } <--- This makes links green
.custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them

CSS code is divided up into 3 basic parts, the selector (the item you want to style), the property, and the value. In the first line above you’re styling links (a) and visited links (a:visited) by editing their color property to a value of #090 (green).

Trial and Error

Once you’ve grasped the concept of how to construct CSS stylings, my best advice is to jump right in. You could spend hours digging through W3Schools’ article repository on CSS but at least for me, trial and error is a much more effective approach.

Note: Do keep the W3School articles handy for quick reference should you encounter an issue that you don’t know how to deal with.

DIYthemes offers a quick but worthwhile tutorial on editing your background color or adding a background image that was a fairly natural starting point for me.

Grab their code, drop it into your custom.css file and start tweaking the settings to your liking. For this site, I wound up wittling the code for my background down to the following:

body.custom {
background: #505050 url('images/bg-image.png') repeat-y scroll center center;
}

While my code looks a little different than the first example, the structure is essentially the same. My selector in this instance is the page body, and I’m styling the background property to have a value of #505050, use a background image, repeat that image along the y axis even while scrolling, and to center that background image on the page.

Learn from Others

The big breakthrough during my learning process came when I started looking at the sites in the Thesis showcase.

When I found something I liked, I inspected it with Firebug to figure out the syntax and applied it to my site.

Want to know how Chris Brogan got that cool image to appear when you hover over links in his footer? Take a look!

And, with most installations of the Thesis them if you need to take a look at the entire custom.css file you can do that too by adding /wp-content/themes/thesis/custom/custom.css after the domain name.

Note: While CSS can not be copyrighted, the look and feel of a design CAN fall under copyright laws. So don’t try to rip off someone’s entire theme. This should only be used to learn how to modify your own theme.

For example, want to know how I made my headlines orange and centered on the page? Using Firebug or peaking at the full style sheet you’d see this snippet of CSS:

.custom h1, .custom h2, .custom h2 a {
color: #d54e21;
text-align: center;
}

Do you want orange headlines centered on your page? Probably not.

But now you know how to should you choose to do so and that, my friends, is the whole point.

Original image by Simon Pow