The Web Designer’s Guide to Blogger Templates

Despite it’s apparent simplicity, Blogger is a powerful publishing platform which offers many unique features. Millions of bloggers from all corners of the globe use this platform, and as more turn to blogging, the demand for professional, well-designed Blogger templates is increasing in demand.

Blogger offers an ideal template system for web designers in the form of a single-file template and editing system where changes can be previewed as they are made. If you are capable of creating a well-designed CSS based web template, you can easily adapt your skills to create beautiful Blogger templates. Furthermore, a little knowledge of Blogger’s template tags allows you to utilize some of the more powerful features to control exactly how the template will perform.


The Most Usable Web Icons Available…and FREE

Unless you’re an uber-icon designer, you probably find yourself searching the web for pretty icons for your templates. The only problem is that the web is littered with icons that no developer could ever use – like Pixar characters. They’re adorable, but utterly useless. Consequently, I’ve compiled a list of the ten (well actually nine) most usable web icons. Did I mention that they’re absolutely free?!


Control Your Content with query_posts

I’ve heard a lot of people online complain that while WordPress is easy to learn at a basic level it can be hard to unlock some of its more complex features. When I first was learning to make WordPress themes, I found myself stuck making only "blog style" themes. You know what I’m talking about: a basic page with a header, a navigation, a long section of posts, a sidebar, and a footer. I was relatively happy with them and even today that style still serves a definite purpose.

But sometimes you have more than one type of content to present. You may want a large, featured post area for showing off recent work. You may want more than just a sidebar recapping your recent posts, perhaps a sidebar with actual, fresh content in it. This post will hopefully shed a little light on an easy way to gain control of your WordPress content. Using “query_posts” to pass parameters to your WordPress loop will let you put any content any place in your layout.

I feel a quick warning is in order. This post is a little bit wordy and is intended for users who are already somewhat familiar with WordPress.

Below is the example I’m basing this article on (and it just so happens to by my personal blog). I’m sure there are many other great examples using query_posts but since I can’t see their code I chose this one to make sure it was a valid example.

ClarkLab diagram

A quick glance shows you that I have multiple types of content. I have a space to show recent work (it slowly fades between the three most recent entries in the category "templates"). I have a space to show my recent blog posts (it shows the ten most recent entries in the category "posts"). In the first sidebar, I have a section where I post short reviews of movies I’ve recently seen (shows the seven most recent posts in the category "movies"). In the second, smaller sidebar, I have a space for a mini design showcase (it shows the five most recent posts from the category "design").

Most themes use The Loop for getting the posts from the WordPress database. If you have made a WordPress theme, you are probably familiar with The Loop. Along with The Loop, query_posts is an extremely useful tool. Here is what’s codex has to say:

"Query_posts can be used to control which posts show up in The Loop. It accepts a variety of parameters in the same format as used in your URL (e.g. p=4 to show only post of ID number 4). "

Query_posts is placed right before The Loop and will change what posts The Loop retrieves. For example, if you wanted to only call posts from the category "movies" your query would look like this:

<?php query_posts('category_name=movies'); ?>

and you would place it right before your Loop. The whole thing would look like this:

<?php query_posts('category_name=movies'); ?>
<?php while (have_posts()) : the_post(); ?> stuff...
<?php endwhile;?>

"…do stuff…" is of course where you would put your template code. Things like the_title and the_content and your layout. Now lets get more specific. Say, for example, if you wanted only the most recent five posts from the category "movies" that had the tag "comedy" you could use this query:

<?php query_posts('category_name=movies&tag=comedy&showposts=5'); ?>

You can tack on as many parameters as you need. This allows you to have complete control over any bit of content in your database. You can create layouts and not really have to worry about how you will get WordPress to stick each piece of content where you need it. It allows you to be more creative with your layouts and with your content. In my blog’s current layout, I would never want those mini movie reviews to show up as a regular post; they are far less significant. Displaying them in a smaller, sidebar sized area works much better for the layout.

Using this technique you can achieve very complex "magazine" style themes, CMS style themes, professional business themes not geared towards blogging, and anything else you can dream up. You can even use it to display single items. Say you had a client who wanted his contact info listed at the top of this theme. Its just a few lines of static information, right? Normally you would just insert this directly into one of the template files. Instead, using query_posts you could call up only a single post that is in a category "info" and is tagged "contact." The query would look like this:

<?php query_posts('category_name=info&tag=contact&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile;?>

Then if the client needed to change his contact info, he could just edit a post and not have to worry about digging into the templates. Calling posts in this way makes your entries extremely flexible. You could use the "info" category to hold all sorts of info: a short bio post, a introduction paragraph, a message for your footer, or a quote from a client. Then you could call those specific posts anywhere you’d need them. It really allows you to have an extra way to enter, store, and display content.

If you use query_posts around each Loop you use, you don’t have to worry about these extra posts showing up anywhere else. If you still are using a regular loop you may want to exclude the "info" category, and you could do so with a query like this:

<?php query_posts('cat=-3'); ?>

where "3" is the ID of the category "info." Notice there are many different category parameters (like category_name, cat, category__and, etc). For a complete list, read the query_posts page on the WordPress codex. While learning how to use query_posts you’ll want to keep this page open for reference and to see what its really capable of.

There is one down side, though, but its not a major one. When templating in this way you end up with certain category names, category IDs, post tags, etc hard coded right into your theme. If its a job for yourself or for a client, this is just fine (since you are the one setting up all the categories and posts anyway). But if you are aiming to use it in a template for resell, you’ll need to include full explanation and explain which categories need to be created and how to use them correctly make use of the theme. Of course, if you are more advanced, you could use a WordPress options page with your theme and let the user handle some of the setup. Dan Harper has an excellent write up about theme options page you can read here.

Once you’ve mastered query_posts and its parameters you’ll find templating with WordPress will be much, much easier. Your templates will be more flexible, dynamic, and organized. You’ll have complete control over every bit of content and will be able to switch it all out at a moment’s notice, without having to touch your template files. Its a great benefit to any theme for a client that might not be too savvy, but its also just a great way to setup your own blog or your next template for sale.

How to Create a Contact Form Using PHP and AJAX

I noticed a thread on the forums that discussed exactly how to implement a working contact form into a site template. So I thought to myself, “What better way to demonstrate the process than with a screencast!”

The code that you’ll find here is 100% yours to use in any way, shape, or form. Feel free to use it as it is, or or edit the code to your heart’s content. As long as you use it to make your ThemeForest templates better, I’ll be happy.


Create an Options Page For Your WordPress Theme

Including a Theme Options page for your theme is one of the best ways to increase ease-of-use for managing a complex theme. However, a few quick Google searches later and most people give up. Such a great inclusion for theme design appears to have such little documentation, that it appears to be one of those heavily guarded secrets which only the crème de la crème of designers hold the key to.

In this article we will be incorporating an options panel for the ‘WordPress Classic’ theme. The methods you learn will allow you to very easily integrate it into an existing theme you’re working on.


7 jQuery Effects to Sell More Templates

With jQuery popularity on the rise it seems like everyone is jumping on board with the lightweight and easy to learn Javascript framework. When I first started learning jQuery, I had a general fear of jQuery plugins. After all, I was already trying to learn one new thing, could I really handle piling on trying to work with plugins too?


WordPress Gets a New Admin Panel

Last week, the WordPress blog posted the first screenshots of the new admin section that will be shipping with WordPress 2.7. Though many have scorned the layout as being too different, too soon, the majority of the community has welcomed the changes with open arms.


WordPress Theme Previews

Setting up a demo WordPress installation in order to provide a Live Preview of your new theme is a mind-numbingly dull task. Thankfully, a few developers have realised this and released files to help speed up this process. These two files are a must-have for ThemeForest WordPress developers.


The Anatomy of GamePress – Part 2

Continuing from Part 1 at NETTUTS, we take a look at some of the features of the GamePress theme for sale on ThemeForest for $40.

GamePress is a “Gaming News & Reviews” theme for WordPress and currently one of the most popular themes at ThemeForest (at only $40). It is a very advanced theme and really pushes what the WordPress engine can do!

Purchase GamePress from ThemeForest for $40


Links of Note

Master your craft

Like many others, I spend about thirty minutes a day reading over my RSS feeds. Every Friday (Saturday for some of you), I’ll post links to the articles that I found to be especially helpful when it comes to creating templates. Feel free to include yours in the comments section.