Wow, have I been busy. With all the development work I’ve been doing, I simply haven’t had time to write any tutorials. So, I’m going to share a few tutorials that I have used lately. I’d also like to share a couple of must reads for all of the newbies out there. I know a lot of you guys and gals are scratching your head wondering what WordPress and Thesis are all about. So, I decided to include a couple of important links that will help newbs understand Thesis, WordPress, hosting and the lot.

A couple of the biggest questions I receive from beginners and less code savvy users are:

1. What is Thesis?
2. What is a theme framework?

When somebody asks me “What is the Thesis Theme?” my response is “It is a theme framework.” Of course, I know that the next question will be “What is a theme framework?” Honestly, the answer is simple. A theme framework provides an underlying system that makes designing on WordPress easier, more scaleable and (generally) allows for easy modifications to design without compromising your HTML markup. Additionally, all worthwhile companies who sell frameworks have excellent support staff. I know support isn’t directly related to theme frameworks, but believe me: in my early days I relied HEAVILY on the support forums and moderators for help and you will, too.

Often, I get users who are new to websites in general. They have heard of HTML and CSS but they can’t write either. They have heard of hosting and WordPress but they don’t know where to get either and they certainly don’t know how to set it all up. Sometimes I run into the user who is really dedicated to learning about HTML, CSS, PHP, etc. But frankly, most people are looking for answers and not endless amounts of studying. My recommendation to them is managed WordPress hosting.

What? Huh? Managed hosting removes essentially 99% of the work it takes to get a site up and going. It keeps your software up to date, provides much tighter security, backs up your database (where all your posts and options are saved) and typically has many other excellent features. Managed hosting is best for people who DO NOT want to fiddle with their server. It is also great for newbies who want to learn WordPress and may someday handle their own server, but aren’t presently capable of doing so. Is it more expensive than traditional shared servers? Yes. Is it about ten thousand times better? Yes.

A couple of tutorials, as promised!

Unless you don’t work on the internet, are a luddite or are in a coma you have definitely heard of the Google +1 button. DIYthemes has made putting the Google +1 code on your site is easy as pie. I highly recommend that tutorial.

I don’t personally use Fascistbook…oops I mean Facebook, but if you do and want other Facebook users to be able to recommend your site, I suggest you check out the DIYthemes tutorial on adding a facebook share button.

A quick final note

I know that it is a little cheap to post and not write an actual tutorial (though you can’t be mad, I still hooked it up). I do intend to release a few freebie plugins fairly soon, so watch out for those. If you really want to help me move along with them, check out my github page and ask to participate. Also, be sure to visit @mattonomics (me) on Twitter. If you are truly a glutton for randomness and weird stuff, you can always visit Mattonomics.com.

Many of you have found the post on excluding categories from you blog very helpful. However, what happens when you want to exclude posts with a certain tag from appearing on the blog? Well, thankfully that is an extremely simple operation.

The first thing you have to do is figure what the tag id is. Simply go to Posts->Post Tags and hover over the name of the tag. Look at the bottom of the browser window (in the status bar) and look at the number on the end.

If you are confused, watch this video.

Next, open up custom_functions.php and enter the following (yes, that is two underscores between tag__not ):

function exclude_tag($query) {
if ( $query->is_home) {
	$query-> set('tag__not_in',array(ID));
	}
return $query;
}
add_filter('pre_get_posts','exclude_tag');

Where I have ID, you should have the number for the tag you want to exclude. For instance, 24 or 1. It is very important that you do not put apostrophes around the number. Also, if you want more than one tag, you would do the following:

function exclude_tag($query) {
if ( $query->is_home) {
	$query-> set('tag__not_in',array(ID, ID, ID, ID));
	}
return $query;
}
add_filter('pre_get_posts','exclude_tag');

That is pretty much all there is to it!

Remember, if you don’t have the Thesis Developer’s License, you are really missing out!

Did you know that Thesis has supported adding custom background colors (but not images) to the <body> for a few versions now? Well, it has WordPress has decided to catch up and add in a CSS background generator. Basically, WordPress adds <style> body { background: blah blah; } </style> to your <head>.

Remember, this is completely unnecessary if you just want a background color. Thesis already provides this functionality. This tutorial is aimed towards the very lazy user [ahem...] who wants to put a background image on their <body>.

Here’s what you do: open custom_functions.php and enter the following:

add_custom_background();

Embarrassingly simple

Get Thesis now!

Before you can start this tutorial, you’ll need to follow the tutorial on how to add the WordPress 3 menu to Thesis.

Once you finish that tutorial, you will have the following in your custom_functions.php:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now we need to do two things:

1. Register the menu area.
2. Hook the menu area into place. In this example I’ll be putting a menu above the footer.

To accomplish this, we will add the following to our code from above:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');
add_action('thesis_hook_before_footer','footer_menu');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu',
        'footer'=>'Footer Menu'
    ));
}

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

For the register part, I simply added a comma then 'footer'=>'Footer Menu'. The first part, 'footer' is the menu slug. The second part, 'Footer Menu' is what will be displayed in the WordPress admin. So, if you were going to add a menu above the content, you may do something like this 'content-menu'=>'Content Menu'.

The second thing I did was add a function that contains my menu.

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

If I wanted to add the menu above the content, I would do something like this:

function content_menu() {
wp_nav_menu('theme_location=content-menu');
}

Lastly, I hooked my function into place with

add_action('thesis_hook_before_footer','footer_menu');

If I were putting a menu area above the content, I may do something like this:

add_action('thesis_hook_before_content','content_menu');

I have seen a few ways to add WordPress 3.0 menu support to Thesis and they do “work”, but they really aren’t optimal. So, I have written a fix for this issue until Thesis can get updated.

First, let’s identify exactly what we need to get accomplished. This tutorial will only cover replacing the current navigation menu, called by the function thesis_nav_menu();, if and only if a replacement has been assigned by the WordPress functionality. It is important to remember that you lose some, but not all, of the CSS native to the Thesis navigation.

Let’s get started by opening custom_functions.php and entering the following function:

function register_menu() {
register_nav_menus(
    array(
        'primary'=> 'Primary Menu'
    ));
}

Basically, this allows us to register the area where we want a navigation bar to appear. Since we are using an array, this will allow us to go back at any point and register another area.

Next, we need set up the following 3 scenarios:

1. No WordPress menu is detected, so the Thesis menu is shown.
2. At least one WordPress menu exists, but none are selected for the nav bar, so the Thesis navigation is shown.
3. At least one WordPress menu exists and one is selected for the area.

It is important to remember that this next function must be repeated to register other areas. Unlike register_nav_menus();, each area where you want a navigation bar to appear must have its own code to register. For the primary navigation, we will use the following code:

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now, let’s register the menus and areas and take the default Thesis nav menu out.

add_action( 'init' , 'register_menu' );
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

Now, Let me show you what all the code looks like together:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Remember that the WordPress menu system is not as clean and robust as Thesis, so you will have to make some CSS changes. Some of the things that the WordPress menu does not contain are the home, current and current-parent classes. Why? Because Thesis‘ nav menu has a specific purpose and the WordPress menu system is for generic menu creation.

In a recent job I was doing, I needed to change the <h1> tag on the homepage of my client’s site. In Thesis, the homepage <h1> is set as the tagline, and I not only needed to change that, but have a simple solution for all my sites from here on out.

My setup was as follows: I had a static homepage that I had done a bunch of custom work on.

Editing Core Files

Go to the thesis_1x folder. Click on lib then functions, then open document.php.

• Go to line 95, which says the following:

  echo "\t\t<h1 id=\"tagline\">" . get_bloginfo('description') . "</h1>\n";
  else
  echo "\t\t<p id=\"tagline\">" . get_bloginfo('description') . "</p>\n";
  

• Replace lines 95-97 with this:

  echo "\t\t<h1 id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</h1>\n";
  else
  echo "\t\t<p id=\"tagline\">" . apply_filters('homepage_h1', get_bloginfo('description')) . "</p>\n";
  

Using the H1 Filter

To make use of this new filter, simply add the following to custom_functions.php:

function h1_replace() {
return "New H1 Text Goes Here";
}
add_filter('homepage_h1','h1_replace');

Be sure to change the text to what you want the new H1 to be.

Thesis is just that easy!

When Chris Pearson, the creator of Thesis, recently redesigned Pearsonified.com on Thesis, he did something amazingly cool: he put rotating images in his header area.

Well, I was so inspired by his design that I wanted to figure out how he did it. It turns out that putting rotating images in your header is extremely easy.

On the backside.

Well, let’s get started. From the WordPress Dashboard, go to Thesis Options -> Design Options -> Feature Box.

In this tutorial, I am setting the Feature Box to “Full Width Above Content And Sidebars.” It is completely up to you whether you chose to show the rotator on every page or just the home page.

The Code

Let’s start with the Custom.CSS. I just want to warn you right now: THIS IS SUPER EASY!

Copy and paste the following into your Custom.CSS:

.custom #feature_box { padding: 0; border: none; }
	.custom #feature_box img { display: block; }

Wow! That’s it, folks. Ok, now let’s knock out the Custom_Functions.PHP part of this. Again, don’t be shocked when you see how unbelievably simple this is.

function header_rotator() {
echo thesis_image_rotator();
}
add_action('thesis_hook_feature_box','header_rotator');

Seriously, that is all. Unreal how simple that is, isn’t it?

Purchase or Upgrade to the Thesis Developer’s Option Today!

Add an Anchor Tag

Let’s say that you want to add an anchor tag, <a>, around the rotating image. Simply put this in your custom_functions.php file instead of what’s above:

function header_rotator() {
?><a href="http://addressgoeshere.com"><?php
echo thesis_image_rotator();
?></a><?php
}
add_action('thesis_hook_feature_box','header_rotator');

Just add the address you want to link to, and call it a day

What about the images?

To get the images to line up perfectly you need to know the width of your site. If you use the Firebug plugin for Firefox or Google Chrome, you’ll have no problem finding out the width. Just remember that if you have page padding (as in the <div class=”page”>), you need to exclude that from the width calculation.

Also, I recommend making the images the same height so that the layout doesn’t shift on refreshes.

Oh, yeah. Don’t forget to Upgrade to the Developer Option! You will never regret it!

Web hosting confused the hell out of me when I first started working on the web. What is hosting? What kinds of options did I have? What’s the deal with their advertised prices? What service does Thesis Tutor recommend? These are questions that I am going to stamp out once and for all. With this post, I bestow unto you the knowledge of website hosting.

What is Web Hosting?

Web hosting is a simple concept: it is a virtual storage unit. That’s it. No mystery, no surprises. It stores and holds your website content, pictures, videos, comments [ahem], etc on a server. The only difference between web hosting and real storage units is that much of the contents of your server are available for public viewing.

Now, when I first started, I wanted to know why I couldn’t just host a website at my home computer. I thought I had a good internet connection and enough storage. So why not?

The first problem is your ISP. They simply cannot allow residential customers to use the amount of bandwidth required by website hosting. More simply, it’s just too slow.

Second is security. Chances are, if you are reading this you don’t know jack about security. I bet simple PHP encoding would totally stump you. Don’t worry though, you are not alone.

Third is management. Servers require constant attention. There are always patches and upgrades and this-es and thats. You don’t have time to fool with that junk, trust me.

Head over to MidPhase and pick up hosting. Or, read on!

Hosting Options

There are essentially three primary hosting options:

1. Shared Hosting:

   Shared hosting is exactly what it says: you share a server with multiple other users. This is the simplest form of hosting and is absolutely the cheapest route.

   There are certainly some drawbacks, however. If one of the sites you share resources with suddenly gets a million visitors, your site will slow to a crawl. Also, advanced modifications to ports are hard/impossible to make. But, if you’re a newbie, you won’t be doing that anyway

2. VPS: Virtual Private Server

   VPS is the obvious way of the future. Basically, VPS divides a server into distinct sections that act as their own server. It is many sub-servers within a server.

   Lemme break it down for ya:

   Imagine an apartment building where everyone shared the same air conditioning unit. This would be like shared hosting. One greedy neighbor decides to turn his house into an icebox and sets his thermostat to 33°F. Suddenly, everyone else in the building is having problems because greedy, creepy icebox guy is overloading the A/C. Such is the failure of shared hosting.

   Now, imagine the same apartment building. Instead of one huge A/C unit, each apartment has it’s own. Suddenly, creepy ice man’s insane usage has little to no effect on your comfort. You win. heh.

   The one drawback with VPS configurations is that they require a slightly higher level of technical knowledge. So, if you are completely ignorant, this may not be for you.

3. Dedicated and Managed Hosting

   Quite simply, dedicated hosting is your own server that you manage yourself. Managed hosting is your own server that the hosting company manages for you. Both options are considerably more expensive that either shared or VPS and should only be used by people who have fairly hefty traffic and a relatively high level of expertise.

Pricing

What if I told you that you could have a brand new, 52 inch Samsung LCD Series 6 HDTV for only $55 per month?! Yeah, you totally can. Except for instead of $55 per month you pay me $2000 right now!

Wtf kind of logic is that?

This is exactly how hosting companies advertise.

I’m tired of that junk advertising method so I’m going to lay it out straight.

Here are the rates for MidPhase shared hosting and VPS.net vps services, the companies (both owned by UK2) I exclusively love. I’ll tell you more about why I have a monogamous hosting relationship after I tell you the prices.

For a full list of all the features for each class, click here.

Shared Hosting Prices

• Basic Plan – for ONE website.

  • 24 Months – $70.80
  • 12 Months – $71.40
  • 3 Months – $26.85 + $49.00 Set Up Fee

• Unlimited Plan – Unlimited Sites and Databases

  • 24 Months – $166.80
  • 12 Months – $107.40
  • 3 Months – $10.95 + $49.00 Set Up Fee

• Business Plan – Dedicated Secure Certificate & Static Ip [among many]

  • 24 Months – $214.80
  • 12 Months – $143.40
  • 3 Months – $38.85 + $49.00 Set Up Fee

Dude! Get over to MidPhase and pick up hosting. You’ll love it!

VPS Hosting Prices

VPS pricing is based on ‘nodes’ which are basically resource measures. The more resources you want, the more it costs. For small sites the nodes start at $20/month. For extremely large sites, prices will hit $234/month. And yes, they really charge by the month!

Most regular old sites will only need one or two nodes. But wait! What happens if you suddenly start getting massive traffic one day? Easy answer: pay for one day’s worth of extra space. Done.

Say what?

VPS allows for one day expansion nodes. You can add one node for $1/day or 18 for $18/day. Done, done and done.

Why I use MidPhase and am Switching to VPS.net

Right now, I run a shared server on the unlimited plan. Why? Honestly, I just haven’t gotten around to switching to VPS’ cloud hosted servers. I should, but I have sites to build and content to make By the end of the year I hope to have it all switched over, however.

But, why do I like MidPhase?

There are two reasons, really. The first is that they are just easy to use. When you sign up you get all the information within seconds and you can start adding domains and databases right away. I love that.

Second, they have great customer support. You can always chat with a live rep or call them if you are feeling particularly frisky. Every hosting problem I have had [even ones only kind of related to hosting like an .htaccess question I had] have been answered by their customer support. Once, in my early days, I was too stupid to go into my server and make a change in WordPress. The MidPhase customer support did it for me.

Am I saying MidPhase will totally hold you hand and wipe your tush? No. But they are friendly as hell and willing to help. What is that worth to you? To me it is worth infinity dollars. No, seriously!

I hope that this little article will help you find the right hosting to fit your needs. Good luck!

You know it ALL now! Secure your hosting today!

When it comes to being a Thesis developer, there is one thing I have been unable to live without: Thesis Hooks. Good ol’ Chris Pearson has hooked us devs up with…well, a ton of hooks. The Thesis hooks list below tells you all 54 hooks in the order they appear in hooks.php. Before the list of hooks is the filters list with the corresponding file name.

Thesis Filters List

1. Comments.PHP

   • thesis_comments_link
   • thesis_comments_intro
   • thesis_avatar
   • thesis_comments_navigation

2. Compatibility.PHP

   • thesis_custom_field_keys

3. Content.PHP

   • thesis_content_classes
   • thesis_image_caption_shortcode

4. Document.PHP

   • thesis_body_classes

5. Widgets.PHP

   • thesis_search_form_value

Thesis Hooks List

1. thesis_hook_before_html – right after body.custom
2. thesis_hook_after_html – after #container and before /body
3. thesis_hook_before_header – between .menu and #header
4. thesis_hook_after_header – between #header and #content_box, before thesis_hook_before_content_box
5. thesis_hook_header – within #header, after #tagline, after thesis_hook_after_title
6. thesis_hook_before_title – within #header before #logo
7. thesis_hook_after_title – within #header, after #tagline, before thesis_hook_header
8. thesis_hook_first_nav_item – right after .menu, before the first li
9. thesis_hook_last_nav_item – within .menu, right after last li
10. thesis_hook_before_content_box – between #header and #content_box, after thesis_hook_after_header
11. thesis_hook_after_content_box – between #content_box and #footer
12. thesis_hook_content_box_top –
13. thesis_hook_content_box_bottom –
14. thesis_hook_before_content – right after #content
15. thesis_hook_after_content – at the end of #content, after .prev_next
16. thesis_hook_before_content_area – before #content_area, only in full width framework
17. thesis_hook_after_content_area – after #content_area, only in full width framework
18. thesis_hook_feature_box – within #feature_box, either the first item within #content, between #header and #content_box, or between .menu and #header
19. thesis_hook_before_post_box – after #content, before first post
20. thesis_hook_after_post_box – within each .post, at the very end
21. thesis_hook_before_teasers_box – within and at the beginning of .teasers_box
22. thesis_hook_after_teasers_box – after each .teasers_box div
23. thesis_hook_before_post – within and at the very beginning of .format_text
24. thesis_hook_after_post – at the end of .format_text, after .to_comments
25. thesis_hook_before_teaser_box – before each .teaser
26. thesis_hook_after_teaser_box – after each .teaser [this one is a little tricky]
27. thesis_hook_before_teaser – first thing within .format_teaser
28. thesis_hook_after_teaser – last thing within .format_teaser
29. thesis_hook_before_headline – first thing within headline_area
30. thesis_hook_after_headline – right after .entry-title
31. thesis_hook_before_teaser_headline – before each .teaser’s .entry-title
32. thesis_hook_after_teaser_headline – right below each .teaser’s .entry-title
33. thesis_hook_byline_item – right after .headline_meta
34. thesis_hook_before_comment_meta – first thing within each dt.comment
35. thesis_hook_after_comment_meta – last thing within each dt.comment
36. thesis_hook_after_comment – last thing within each dd.comment .comment-body-n
37. thesis_hook_after_comments – right after dl#comment_list
38. thesis_hook_comment_form_top –
39. thesis_hook_comment_field – right after #comment_form p
40. thesis_hook_after_comment_box –
41. thesis_hook_comment_form_bottom –
42. thesis_hook_comment_form – right after .comment_box, before the submit button
43. thesis_hook_archives_template – Used to customize the appearance of the Archives Template (archives.php). This hook calls the thesis_archives_template function by default. //from DIYthemes
44. thesis_hook_custom_template – your very own custom page custom template replacing #content_box
45. thesis_hook_faux_admin – within div#content_box (and also div#column_wrap if a sidebars-first three-column layout is in use) //from DIYthemes
46. thesis_hook_archive_info – Above the first post only on archive views. //from DIYthemes
47. thesis_hook_404_title – within a 404 page’s .headline_meta h1
48. thesis_hook_404_content – last thing within a 404 page’s .format_text
49. thesis_hook_before_sidebars – first thing within #sidebars
50. thesis_hook_after_sidebars – last thing within #sidebars
51. thesis_hook_multimedia_box – contents of #multimedia_box #custom_box
52. thesis_hook_after_multimedia_box – after #multimedia_box, before #sidebar_1 and/or #sidebar_2
53. thesis_hook_before_sidebar_1 – first thing within #sidebar_1 .sidebar_list, before the first li
54. thesis_hook_after_sidebar_1 – last thing within #sidebar_1 .sidebar_list, after the last li
55. thesis_hook_before_sidebar_2 – first thing within #sidebar_2 .sidebar_list, before the first li
56. thesis_hook_after_sidebar_2 – last thing within #sidebar_2 .sidebar_list, after the last li
57. thesis_hook_before_footer – right before #footer and after #content_box
58. thesis_hook_after_footer – after #footer, but still within #page
59. thesis_hook_footer – between attribution link and WP Admin link in #footer

Well, there you have it folks. A list of every single Thesis Hook available as of Thesis 1.6.

If you are interested in developing sites on Thesis, be sure to upgrade to the developer’s option. If you don’t have Thesis, you had better pick it up now!

Updated! 03/23/10

Well I can’t spell apparently. I had misspelled ‘slideshow’ in the code below. The issue is fixed and my wife is now administering me weekly spelling tests. Thanks, Scott and Willie.

Slideshow Made Simple

Making a jQuery image slideshow in Thesis is actually very easy. There are four basic steps:

• Insert a few lines of code into the header.
• Make a slideshow <div id="slideshow">.
• Put some images into your images folder.
• Write a little custom.css code magic.

To begin, I want to outline a few assumptions. I am going to assume that you have images of the same size (height and width). Also, although you can put any HTML into a “slide” I will only be using images. Lastly, I will be using a default transition effect called “fade” and I will not be adjusting all of the variables. In fact, if you read the Cycle Plugin documentation, you will see that there are about a million tweaks possible.

Update 2/18/09

For the sake of this tutorial, I am going to assume that you only want the slideshow to appear on your home page. If you want the slideshow on every page simply remove if (is_front_page()){...........}. Also, never be embarrassed to ask me for help! I am the Thesis Tutor, after all.

Now, onto the juicy parts!

First, copy and paste the following into your custom_functions.php:

function slideshow() {
if (is_front_page()) {
?><div class="slideshow">
    <a id="slide1" class="slide" href="http://yourblog.com/link"></a>
    <a id="slide2" class="slide" href="http://yourblog.com/link2"></a>
  </div>
<?php
}}
add_action('thesis_hook_after_header','slideshow');

function slide_script() {
echo "\n\n";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'fade' //You can change transition effects here.
	});
});
</script>
<?php
}
add_action('wp_head','slide_script');

It is important to note that you can add as many images as you please, just be sure to give them each a unique id so you can target them later in the CSS.

Next, drop the images you want to use in the slideshow in your images folder.

Last, we need to add some CSS to whip this little slideshow into shape. So, open up your custom.css and paste this little bit of code in there:

.custom .slideshow .slide { display: block; height: ---em; width: ---em; outline: none; }
.custom .slideshow #slide1 { background: url('images/image-1.jpg') no-repeat; }
.custom .slideshow #slide2 { background: url('images/image-2.jpg') no-repeat; }

Be sure to insert your images names and height/width. By default, the font-size is 10px. Therefore, to convert to ems, simply divide pixels by 10. Yes, it is THAT easy.

That should cover it, folks. Happy coding!