View Demo | Download Files

Also when combined with the WordPress 2.9 featured image feature (renamed in 3.0, it was previously called post thumbnail), it becomes much more powerful.

This technique can be seen in our themes Precision and Refresh.

A demo of what we are building.

Start by opening a containing div. Everything from here on will go inside this div. Note the ID because we will call it later.

<div id="photo-rotator">

[Featured Posts Here]

</div>

Adding Featured Image Support

In order to let WordPress know that your theme supports featured images you need to add these line to the functions.php file:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add support for posts
add_image_size( 'nav-image', 130, 40, true ); // nav thumbnail size, hard crop mode
add_image_size( 'rotator-post-image', 615, 280, true ); // large size, hard crop mode

The values are for width (615) and height (280) in pixels. I like to specify multiple image sizes just in case I need more later. To do this just re-use the second line and change the name.

A New Query

With WordPress we use the loop to call in posts. Now you should not use the same loop twice on the same page. To work around this we are going to use WP Query.

<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4&cat=3");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>

Here we are showing up to 5 posts from the category with an ID of 3. You may use any of the standard query arguments to customize which posts show up. Just remove &cat=3 if you want to query all your posts. Using at least 1 argument is required (or at least it has caused me problems in the past!).

Now we get into the actual markup for each slide. Since this will be repeated for each post in the loop you only need to write it once.

 <div id="slide-<?php echo $slide_id; $slide_id++;?>">
 <a href="<?php the_permalink() ?>">
 <?php the_post_thumbnail( 'rotator-post-image' ); ?>
 <span><?php the_title(); ?></span>
 </a>
 </div>

Then close the loop. The $slide_id is required so that we can tie the navigation to each specific post for linking. It increases by 1 for each post.

<?php endwhile; ?><!--/close loop-->

Now for the Navigation

You probably want users to be able to move between the posts on their own, so we need to loop through our query again to create the post navigation.

<ul id="slide-nav">
 <?php $nav_id=1; while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
    <li>
       <a href="#slide-<?php echo $nav_id; ?>">
          <span>
             <?php the_post_thumbnail( 'nav-image' ); ?>
          </span>
          <? the_title(); $nav_id++;?>
        </a>
    </li>
 <?php endwhile; ?><!--/close loop-->
 </ul>

And with that our PHP work is done.

Adding jQuery

We are using the jQuery tabs section to accomplish this, so you will need to include both jQuery and jQuery UI. WordPress has all the files you need built in, so you can use wp_enqueue_script(); to pull them in. Make sure to call in all the parts of jQuery Ui that you need.

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>

Now with to call in the jQuery UI Tabs function. With plenty of settings you can control speed, transitions, and much more. Read about it on the jQuery UI site.

jQuery(document).ready(function($){
 $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});

Now for some Style

We’ve got functionality, now to make it pretty. Here are the styles I used to get started. You will need to modify this to match your site.

#photo-rotator {
 background: url('img/background.png') no-repeat 0px -10px;
 width: 635px;
 padding: 0px 10px;
 height: 400px;
 position: relative;
 color: #fff;
 margin: 20px auto 20px;
 }

 #photo-rotator .ui-tabs-panel {
 list-style: none;
 height: 300px;
 }

 #photo-rotator .ui-tabs-panel a.post-image {
 display: block;
 width: 615px;
 height: 280px;
 float: left;
 margin: 10px;
 background: #ccc;
 position: relative;
 text-decoration: none;
 }

 #photo-rotator .ui-tabs-panel a.post-image .title {
 display: block;
 padding: 10px;
 background: #000;
 background: rgba(0,0,0,.5);
 color: #ccc;
 position: absolute;
 bottom: 0px;
 left: 0px;
 font-size: 18px;
 width: 595px;
 }

 .ui-tabs-hide {display: none !important;}

 #slide-nav {
 padding: 0px;
 margin: 0px;
 position: relative;
 float: left;
 }

 #slide-nav li {
 float: left;
 list-style: none;
 }

 #slide-nav a {
 display: block;
 color: #666;
 float: left;
 width: 138px;
 padding: 12px 10px 10px;
 text-decoration: none;
 background: url('img/post-line.png') no-repeat right top;
 min-height: 100px;
 font-size: 14px;
 }

 #slide-nav li:last-child a {
 background: none;
 }

 #slide-nav a:hover {
 color: #000;
 }

 #slide-nav a .thumbnail {
 display: block;
 background: #cbc9c9;
 padding: 3px;
 border-bottom: solid #fff 1px;
 width: 130px;
 height: 40px;
 filter: alpha(opacity=50); /* Decreases opacity in IE */
 -moz-opacity: .5; /* Decreases opacity in Firefox */
 opacity: .5; /* Decreases opacity in Safari, Chrome, and Opera */
 }

 #slide-nav .ui-tabs-selected a { color: #222 }
 #slide-nav .ui-tabs-selected a .thumbnail {
 background: #bbb;
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 opacity: 1;
 }

I am linking to several images to add more style to the slider. You can get these images in the download file.

Wrapping it up

Our style here is pretty basic, but you can add more content and make your posts much more detailed. Plenty of great sites implement this feature. Please post in the comments if you have any questions or find some great examples of something similar being implemented around the web.

Adding more options actually makes the theme files more complex for someone trying to understand and customize the code that powers the website.

Start by removing options that aren’t really necessary. Here is Justin Tadlock on the subject:

One goal when making themes should be to avoid options by finding more intuitive ways for features to work. Ever heard of widgets?

So what does belong in a theme options page?

• Theme style (Basically choosing a CSS file to reference)
• Logo Upload (?)
• Layout Switching (If it is crucial to the theme)
• Custom text areas (though first consider if a widget would work)

Of course all of these depend on the theme.

Advertising

So you want to place small bits of code in assorted places throughout the site? Specifically places the user can control? This is perfect for a widget. No need for an entire tab of your options page devoted to configuring ads. Widgets are the answer.

SEO Options

Generally users need to customize page and posts titles,  meta information, and modify link attributes. While this can be important to a great site, it isn’t the role of a theme. WordPress has many great plugins that handle all the needed settings and more. Recently in their announcement of SEO settings in their themes WooThemes noted that it is compatible with the All-in-One SEO plugin. Meaning it is nothing more than duplicate functionality, and extra options for an end user to try and understand.

Navigation Menus

Since custom navigation menus are included in WordPress 3.0, you don’t need to make them part of your theme. If the theme already have this functionality I would recommend removing it with the next update.

Detailed Color Options

You’re a theme designer, right? Then the color decisions you made when designing the theme should be solid. It is good to design several different color variations the user can choose from, and even better to write your CSS so that it is easy to edit and understand. So having users be able to change the color of every link or heading from an options panel is excessive.

Now I don’t think this applies if you are trying to create a blank slate theme (i.e. Canvas, Headway, Thesis, etc).

Featured Images

With support for featured images in 2.9 (then called “Post Thumbnail”), you no longer need image resizing in your theme. Some say the built in WordPress support isn’t good enough, but I haven’t yet found a case where you couldn’t make it work.

Contact Forms

Forms are part of the functionality of the site, so they should be handled by plugins. There are some fantastic paid plugins (Gravity Forms) and some good free ones as well. Most commonly themes provide small contact forms to go in sidebars or footers. For that use a widget. Then it can be placed anywhere.

The Grey Areas

Here are the things I am not sure of their place in a theme or not. What do you think?

• Analytics Code
• Support Documentation (Just link to your knowledge base or support page. It isn’t needed as part of the theme)
• Custom CSS
• Number of posts on homepage (WordPress already has a posts per page setting)

On Style

Make it your options page design match WordPress. We don’t need a conflicting design style and user experience corrupting WordPress. Genesis is a great example of an options page that truly matches.

Simplicity

When it comes time to code the options for your next theme, keep it simple.

Screencast Demo

Screenshots

Take a look at a few additional styles it comes in:

If a comment adds value to the discussion, then approve it. Otherwise it belongs in the trash.

So any comments such as “First!” or “Great post, I love it!” are not needed. If you want to maintain  a quality blog then you need quality comments as well. YouTube has the reputation for having the worst comments on the web. Let’s go the other direction and curate the discussion on our blog to maintain the highest quality.

Dealing with Spam.

The majority of spam comments can be stopped with a plugin like Akismet (which comes pre-installed with WordPress, you just need to activate it), but you will still have some slip through.

Everyone is familiar with the usual online spam (software, viagra, etc), but these days other forms of spam are becoming far more common. Here are some examples I have seen recently:

Though it doesn’t sound exactly like spam, I haven’t written anything on my blog about SQL. If it isn’t relevant, delete it.

Really? A small business owner? As in you run a spam business? This comment is off topic, poorly formatted, and the URL looks sketchy.

Loans? Yes please! Obviously spam. Though I have been surprised with how often I see comments like this approved on respectable blogs.

A compliment? For me? Sometimes these types of comments are written by humans, but complementing the author is a great way to get a spam link published. So automated or not, I don’t think it has a place in your carefully curated blog comments.

All of these comments fall under our simple rule:

If a comment adds value to the discussion, then approve it. Otherwise it belongs  in the trash.

For those of you who complain about dealing with too many comments, you could turn them off, or just remember this quote from Oscar Wilde:

“The only thing worse than being talked about is not being talked about.”

View Demo or Purchase Theme

View the Demo or Download the Theme

Note: the 3D and animation only work in recent versions of Safari. Though the site does degrade gracefully in other, less capable browsers. Update: Only Safari in Snow Leopard can fully run this demo. Unfortunately preserve-3d doesn’t appear to be supported in Safari Windows or in Chrome on any platform.

Update 2: Safari 5 added support for this demo on all platforms. Download the new version if you are browsing on Windows. Unfortunately Chrome still doesn’t have support.

In this screen cast the animation doesn’t look very smooth. But when viewed live all the animations are silky smooth. You’ll just have to try it for yourself.

I know this theme isn’t the most practical, but I would love to hear your thoughts on it. Also feel free to download it to learn more about how it works.

So, this is the Precision theme. It comes in a variety of colors (5 unique color schemes), and uses jQuery for the home page post slider. It also has extensive use of the WordPress featured image feature, so your post  lists are always visually interesting. Take a look!

Hopefully you can start imagining new sites that can be built with this theme. Precision is mostly coded (just wrapping up some final changes) so look for it to be released in the next week.

We will be using HTML5 and CSS3 to achieve great style and functionality without causing problems in less capable browsers. To be clear, this code will not look exactly the same in every browser. We are designing for the most advanced browsers, then making sure it still degrades gracefully.

Starting with the right markup.

Here we are using HTML 5 to code the form. Take a look:

<div id="registration">
 <h2>Create an Account</h2>

 <form id="RegisterUserForm" action="" method="post">
 <fieldset>
 <p>
 <label for="name">Name</label>
 <input id="name" name="name" type="text" class="text" value="" />
 </p>

 <p>
 <label for="tel">Phone Number</label>
 <input id="tel" name="tel" type="tel" class="text" value="" />
 </p>

 <p>
 <label for="email">Email</label>
 <input id="email" name="email" type="email" class="text" value="" />
 </p>

 <p>
 <label for="password">Password</label>
 <input id="password" name="password" class="text" type="password" />
 </p>

 <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
 <label for="acceptTerms">
 I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a>
 </label>
 </p>

 <p>
 <button id="registerNew" type="submit">Register</button>
 </p>
 </fieldset>

 </form>
 </div>

Note the input types. Instead of only using the usual “name” and “password” I also added “tel” and “email”. Most browsers don’t render anything different here, but it makes a big difference for the user experience on Safari mobile (iPhone and iPad). The key difference is a rearranged keyboard to focus on the type of input. Email adds the @ sign as well as a . button. Also the auto-correct changes so it doesn’t try to split domain names into multiple words.

It looks like a minor difference but it is very frustrating to enter an email address into a text input on the iPhone. Your users will thank you for paying attention to the details.

Older browsers that don’t understand HTML 5 forms will just fall back to input type=”text”. Which is just fine for our purposes. Also each field has class of “text” so that I can style them with the CSS input.text selector. Even though they aren’t all text fields, I do want them to look the same. You could use CSS3 selectors instead, but getting that to work in IE is beyond the scope of this article.

Adding basic styling.

Now to style our form. We are going to start with a very simple reset. Please use something more appropriate to your project.

/* Add whatever you need to your CSS reset */
html, body, h1, form, fieldset, input {
 margin: 0;
 padding: 0;
 border: none;
 }

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }

Now to style the form container.

#registration {
    color: #fff;
    background: #2d2d2d;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(60,60,60)),
        color-stop(0.74, rgb(43,43,43)),
        color-stop(1, rgb(60,60,60))
        );
     background: -moz-linear-gradient(
        center bottom,
        rgb(60,60,60) 0%,
        rgb(43,43,43) 74%,
        rgb(60,60,60) 100%
        );
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     margin: 10px;
     width: 430px;
     }

 #registration a {
      color: #8c910b;
      text-shadow: 0px -1px 0px #000;
      }

#registration fieldset {
      padding: 20px;
      }

Here we are using CSS3 gradients to set the background of the container. We are using three different background declarations to accommodate different browsers. First we set a background color of #2d2d2d that all browsers will understand, then we overwrite it for -webkit and -moz to use background gradients instead. Since Internet Explorer doesn’t understand gradients it will ignore them and use the solid color specified first.

You can use this website to generate your own CSS gradients.

Then for the rounded corners we are adding -webkit-border-radius, then -moz-border-radius for the browsers that support it, then adding standard border-radius for when the official spec is adopted in the future (hopefully by IE9).

For the links we are adding a default color, then more importantly adding text-shadow (not supported in IE). The syntax for the text-shadow is this:

text-shadow: x  y  blur  color;

text-shadow: 0px -1px 0px #000;

So we are using that to add a black vertical shadow that gives the text an indented look.

Styling the Input Fields

input.text {
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     border:solid 1px #444;
     font-size: 14px;
     width: 90%;
     padding: 7px 8px 7px 8px;
     background: #ddd;
     background: -moz-linear-gradient(
          center bottom,
          rgb(225,225,225) 0%,
          rgb(215,215,215) 54%,
          rgb(173,173,173) 100%
     );
     background: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
      );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
      box-shadow: 0px 1px 0px #777;
 }

Here we are adding background gradients again, remember to specify the default for older browsers. The rounded corners also give the fields a nice pill shape.

The new part is that we used a box-shadow to give it a recessed look. The syntax is the same for box-shadow as it is for text-shadow. So box-shadow: 0px 1px 0px #777; is a light colored shadow, with no blur, that is down 1px. This combined with a dark stroke gives it the look below.

Adding Icons.

Next we will add icons to each field so that it is more easily identified at a glance. With CSS3 we are able to use multiple backgrounds to have both a gradient and an image. First create a sprite image of all your icons combined into one file. This will decrease HTTP requests, simplify your markup, and improve page load. An example of the icons I used are on the right.

You will want to replace the earlier code for the input field backgrounds with this new code.

background: #ddd url('img/inputSprite.png') no-repeat 4px 6px;
 background: url('img/inputSprite.png') no-repeat 4px 6px, -moz-linear-gradient(
center bottom,
rgb(225,225,225) 0%,
rgb(215,215,215) 54%,
rgb(173,173,173) 100%
);
 background:  url('img/inputSprite.png') no-repeat 4px 6px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(225,225,225)),
color-stop(0.54, rgb(215,215,215)),
color-stop(1, rgb(173,173,173))
);

We are able to add multiple backgrounds by separating each one with a comma. To accommodate the new icons we will also need to change the right padding to 30px.

padding: 7px 8px 7px 30px;

Then specify the background position for each field individually so that it will display the correct icon. The exact values will depend on the icons that you use. Note that the order of the icons in the sprite does not have to match the order of the input fields.

input#email {
   background-position: 4px 5px;
   background-position: 4px 5px, 0px 0px;
 }
input#password {
   background-position: 4px -20px;
   background-position: 4px -20px, 0px 0px;
 }
input#name {
   background-position: 4px -46px;
   background-position: 4px -46px, 0px 0px;
 }
input#tel {
   background-position: 4px -76px;
   background-position: 4px -76px, 0px 0px;
 }

Here the first background-position is for the browsers that don’t support multiple background images, the second is for the gradient position on the browsers that do support it.

Styling the Header & Submit Button

#registration h2 {
color: #fff;
text-shadow: 0px -1px 0px #000;
text-align: center;
padding: 18px;
margin: 0px;
font-weight: normal;
      font-size: 24px;
      font-family: Lucida Grande, Helvetica, Arial, sans-serif;
border-bottom: solid #181818 1px;
-moz-box-shadow: 0px 1px 0px #3a3a3a;
-webkit-box-shadow: 0px 1px 0px #3a3a3a;
box-shadow: 0px 1px 0px #3a3a3a;
      }

Using a bottom border and a box shadow we are able to create an indented separating line without any additional markup.

For the submit button we will use an sprite that has 3 states for :link, :hover, and :active.

You can then use different background positions to shift the image up for each state. This keeps your HTTP requests to a minimum and also prevents a flicker while the browser loads an image for the :hover state.

#registerNew {
width: 203px;
height: 40px;
border: none;
text-indent: -9999px;
background: url('img/createAccountButton.png') no-repeat;
cursor: pointer;
float: right;
}
#registerNew:hover { background-position: 0px -41px; }
 #registerNew:active { background-position: 0px -82px; }

Moving Labels Inline with jQuery.

To further style the forms I want to move the label inside the field itself. This technique is largely based on the work from Trevor Davis at Viget Labs.

<script type="text/javascript">

 $(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);

 $("#RegisterUserForm label").inFieldLabels();
});

</script>

The line “$(“#RegisterUserForm label”).inFieldLabels();” is what activates the script for those particular labels. Make sure to change the ID if yours is different. I modified the script to add support for the input types “tel” and “email”. If you choose to use others you will need to write those in (near the end of the script).

We are also adding a class of .infield to the labels that need to be restyled. This way if JavaScript is disabled the form will degrade gracefully. Here is the necessary CSS:

fieldset label.infield /* .infield label added by JS */ {
 color: #333;
 text-shadow: 0px 1px 0px #fff;
 position: absolute;
 text-align: left;
 top: 3px !important;
 left: 35px !important;
 line-height: 29px;
 }

Sometimes the browser auto-complete can interfere with the inline form fields (especially on login boxes). If this is an issue for your site then you can add autocomplete=”off” to the input fields.

Note: We could have used the HTML5 Placeholder attribute instead, but this method works better in older browsers and also I like how it looks better.

How it looks in Internet Explorer

Because we designed first for modern browsers, certain less capable browsers will not be able to display the form in its best possible look. Here is what IE users will see:

Not as pretty, but everything still functions perfectly.

That’s all!

Please ask any questions and give feedback in the comments.

What do you think?

Acquiring the New Name.

Once deciding on a new domain name I set out to find a Twitter username. It was quite surprising that the domain name LegendThemes.com was available, but @LegendThemes was not. Luckily I was able to contact the owner and negotiate a reasonable purchase price of $60. Because a Twitter account is free at first it seemed very foreign to pay for it (my wife’s response was “You paid how much for something that is normally free?”), but I think having the right name (especially at that price) is definitely worth it.

Have a Backup Option.

While I wasn’t sure if I could get @LegendThemes I checked every variation and @ThemeLegend was the only acceptable option available. This was quick to save by creating a new twitter account. I waited to announce anything on Twitter until I found out if I could buy my preferred choice.

Once I had the login information for the new account (after paying for it, of course) I made sure to change the email address and password, so that the account was fully in my control. Since Twitters password recovery option is through email it is very important that you change the email address.

Making the Switch.

On the @WPlimits account I made several posts, before and after, to let followers know I would be switching it over to the new name. Wait a while to give anyone time to respond. Then go into the newly purchased account and change the username. I just change it to @legendthemes2, then logged back into @wplimits and changed it to @LegendThemes. Simple.

Technically someone could have stolen the account for the 30 seconds it was exposed, but they would a) have to care about it, and b) know exactly when I was making the switch. Not much of a concern.

From there update the profile image and change the background (if needed), and the important part is done!

Final Details.

Because I didn’t want to lose any users and wanted to minimize any confusion I setup a new account at the now available @WPlimits which pointed to @LegendThemes. I also updated the @ThemeLegend profile to point users in the correct direction as well. The point is to just tie up any possible loose ends.

Have you ever had to switch Twitter usernames? Share your story or thoughts in the comments.