Leather: A Free WordPress Theme

This theme has been in the works for a few months, so I am very happy to have finally finished it, and get it ready for release. So enjoy this texture and font rich theme, that is most importantly completely free.

View Demo | Download Theme

A few quick features:

  • 100% GPL.
  • Supports Custom Menus (WordPress 3.0 Only).
  • Supports Featured Images (WordPress 2.9+).
  • Threaded commenting.
  • Dynamically loads Gravatars for comments.
  • Simple theme options page with a design that matches WordPress.

Enjoy!

Update (August 26,2010): This theme was updated to version 1.1 to fix some issues brought up by John Levandowski in the comments. Thanks John!

Building a jQuery Featured Posts Slider for WordPress

One of the most common requests in modern WordPress themes is the addition of a featured posts or featured image rotator. This is often a feature that users think makes a theme “premium”. Once you break down the code required,  it is actually much easier than it seems.

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.

[html]

<div id="photo-rotator">

[Featured Posts Here]

</div>

[/html]

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:

[php]

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

[/php]

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]

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

[/php]

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.

[php]

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

[/php]

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]

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

[/php]

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.

[php]
<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>

[/php]

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]

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

[/php]

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.

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

[/js]

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.

[css]
#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;
}

[/css]

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.

On WordPress Theme Options

Over the past year it has become trendy to build theme options pages crammed full of every possible setting. While it is well intentioned, I don’t think it is the best direction to take themes. In software design we always say that adding a preference should be your last resort. First you should try to design an elegant way, and add a setting only if absolutely needed. Thus avoiding unneeded complexity and setup time.

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.


Note: sales from any affiliate links in the article go to WP Tavern. They deserve it.

It’s Personal (Preview)

This is our new personal blogging and photo theme. It would also work great for setting up a portfolio site. It also uses CSS3 to create a flip effect that you can see in the screencast. Enjoy!

Screencast Demo

Screenshots

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

First Ever 3D CSS WordPress Theme

CSS3 has some great support for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but I am hoping Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them. I created 3 different shapes the posts can form while rotating. Click a post to view a larger size.

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.

A New Level of Precision

Announcing new themes is just fun. I personally love to see what other developers in the community are working on, and it gives potential customers a great opportunity to imagine a new look for their sites.

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.

Refresh Your Site

Here’s a preview of our next theme coming up. We have been working on it for the last two weeks. It includes great support for WordPress 2.9 custom post thumbnails, a jQuery powered image and post slider on the homepage, as well as great widget support!

Take a look at Refresh.

The Details.

You can choose a color scheme, add in a custom heading, and choose a category of posts to feature in the home page rotator. Take a look at the starting color schemes:

If you have requests for additional color schemes or features let us know. Stay tuned for this theme to be released within the next week!

Announcing: WordPress Theme Store

I am very pleased to announce that WP Limits is launching a  WordPress theme store. Over the past couple of months we have been working hard to design and develop a great set of themes to kick start this new venture.

Our Themes

Here are the great themes we are launching with:

  • Dynamic Business
    A CMS theme designed to help you easily create business sites.
  • Knowledge
    Knowledge turns WordPress into a knowledge base or wiki site.
  • Emphasis
    A free blogging theme with an emphasis on content.

Expect a new theme to be released every 2-3 weeks, with teaser the week before a release. Of course our themes are all released under the GPL license so you are free to modify and distribute as you please.

General Questions

Why another theme store?

WP Limits has been known in the community for over a year for pushing the limits of what is possible with WordPress, now the idea is to take that knowledge into the theme market. More friendly competition will mean that theme quality will continue to go up and more innovation will take place. I am looking forward to seeing what we can contribute to the community over the next several years.

What about support?

To start out to get support for our themes you can visit our support page. In the near future we will be adding support forums and user accounts.

How do we maintain quality?

We have a team of beta testers who review each of our themes before launch. If issues do come up we are fix them promptly and updated themes will be available for download. If you have suggestions for how we can improve our themes please let us know.


View our Themes »


Our blog will regularly be updated with WordPress tips, theme announcements, and general news. Subscribe to our RSS feed to stay updated.


Update: On March 24th, 2010 WP Limits was renamed to Legend Themes.