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.
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.
Start by opening a containing div. Everything from here on will go inside this div. Note the ID because we will call it later.
[Featured Posts Here]
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.
$featuredPosts = new WP_Query();
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.
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.
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.
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.
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.
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.
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).
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.
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?
Support Documentation (Just link to your knowledge base or support page. It isn’t needed as part of the theme)
Number of posts on homepage (WordPress already has a posts per page setting)
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.
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.
Precision, our latest business theme, is now available for purchase. Choose between 5 different color schemes, feature posts in the homepage slider, and use the prominent page navigation to create a CMS style site for your business or project.
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.
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.
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.
A quick screen cast to demo the upcoming snapshot theme. We still have a few bugs and final details to work out before launching. This is an exciting theme that heavily uses CSS3 and modern browser techniques. It also degrades gracefully in browsers (Internet Explorer) that don’t support the full functionality. Continue reading Snapshot Theme Preview
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.
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!
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.
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.
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.