Looking back at the code of my first attempt at a WordPress theme, I can easily see that without a proper understanding of WordPress theme template files and template tags, it can be a frustrating project to undertake. And although I am a HUGE fan of learning as you go, I wanted to share a few secrets that might save you a headache or two along the way.

1. The Loop
If you're not familiar with "the loop", you have no business trying to work with WordPress themes yet. The structure of the loop is simple, yet it's vital to the development process. It goes a little something like this:

It is in essence a call to custom WordPress functions that query the database to see if you have posts. If you do (and while you do ... it's a PHP thing ... a loop), then you can insert custom template tags inside the loop to display the content of the post. I won't go into detail, but suffice it to say that this is something you need to understand. For more on the loop, go to the WordPress codex.

2. Pages
WordPress did us all a huge favor when they implemented the ability to have static pages (as opposed to blog posts) for static content. For instance, an "About Me" page or a "Contact" page. Pages can be a powerful tool at your disposal. You need to know how to display pages, how to call pages, how to style pages, etc. Pages can also be a powerful tool in using WordPress as a website content management system.

3. Sub-Pages
Also very important. WordPress allows you to set up pages in a hierarchical structure. It lets you choose (if you so desire) a page to be the "parent" or "child" of another page. This is important, especially if using WordPress as a content management system. It can also be helpful in simply organizing your pages, or displaying lists of pages. Which leads me to...

Read the rest of this entry

Unfortunately, sometimes the logical thing to do and the "technically right" thing to do are polar opposites. Such is the case with those little tiny links at the bottom of your WordPress blog that send your reader into the pits of your archives. One must make a choice here... should I link to "page 2" of the blog archives using the words "previous posts" or "next page"?

Technically speaking, they are indeed previous posts. One would think that while a person is browsing the articles on your blog, they would naturally know what "previous posts/entries" meant, and would consequently know intuitively which link to click when presented with the options.

One would be wrong.

Read the rest of this entry

I generally subscribe to 3-5 new blogs per month. Maybe they're not new, but they're new to me, because I've never heard of them or read them before. But trying to quantify the features of the blogs I subscribe to is hard to do. Why do I subscribe? Is it the content? The design?

Because I'm a curious guy, I decided to take some inventory of the blogs in my reader. It was actually a pretty fun experiment. I was surprised to actually see the design of some of the blogs. Since I read exclusively from my reader, I didn't even remember what the design looked like :-)

Here are 5 features I've found to be effective to convincing me to subscribe.

1. Would it be cliche to say that content matters?

I don't really care if it's cliche or not, content matters! If you don't have regular decent articles, or at the very least articles that encourage lively discussion, then don't even bother starting a blog. I'm dead serious. Blog content, to a person who reads 80+ feeds, is of paramount importance. Don't even think about softball articles.

2. A clean, simple, aesthetically pleasing design

If you can't design a site for your blog software, pay someone to do it. We are professionals. This is what we do. You can't ignore the fact that if your design sucks, you won't get as many readers. I'm partial to sites with the content on the left and two well used right hand sidebars, but that's just me.

3. Readable Text

If your readers are like me, then they will bookmark your site before subscribing to it. Normally, I will bookmark the blog in del.icio.us and come back once or twice a week and check the content. I use this time to see if the site is worth a spot in my reader. So.... that means for at least a week, I will be reading your content directly on your site ... which means you need readable text. For me, that means either Arial or Trebuchet MS fonts. If you use Lucida Grande, I'm gonna be pissed. I just thing that font is unreadable. If you use a Georgia or Times New Roman font, you might be pushing the line. It better be a big font with lots of space. Serif fonts, without good spacing, can be unreadable as well.

4. Prominent Link to Your RSS Feed

I like to reward good bloggers by subscribing directly to their feedburner feed ... if they have one. The joy of seeing new readers in your stats is a good encouragement ... something you don't get if I subscribe to your blog's feed address. So, don't make me hunt for your link. If it takes me too long to find the link, I'll just click the RSS button in the address bar of FireFox. Normally, that will give me your blog's feed, not your feedburner feed. Worse still, if I'm in a bad mood and I can't find your link, I might not even subscribe at all, out of spite for the time you made me waste. Think about it.

5. Comment on My Blog

OK, OK, this has nothing to do with your design, but it will get me to read your blog. My personal blog is religious in nature. I like to find good bloggers in my niche. The way I do that is by checking who my favorite bloggers link to, and by checking the sites of the people who comment on my blog (also, linking to me gets you lots of love). If you can contribute to the conversation in my comments, I will probably assume that you can contribute to the conversation on your own blog. Nearly every single one of my regular commenters holds a place in my feed reader. That's not a coincidence.

What about you? What makes you subscribe to a blog's feed? Be honest and asses the blogs that hold a place in your reader and ask yourself why you subscribed. Was it the cool design? The great content? The ease of process? Did they comment on your blog? What was it? Let everyone know in the comments!

If you browse the WordPress Theme Viewer, take notice of where most designers place their page links. Most designers put them in a horizontal menu either directly above or below their header image. What you might also notice is that many designers treat the links like tabs with a link hover effect. Sometimes, that link style (something that sets the tab apart on hover) will be shared with an active page style. In other words, a tab will look different than the other tabs when it is either being hovered over by the mouse, or if the tab represents a page that is currently active.

Thankfully, the good folks at WordPress decided to add a great little feature to the wp_list_pages function. When a page is active, the list item that represents that page gets a class added to it called "current_page_item". This is in addition to the "page_item" class that is on all page list elements (elements can have multiple classes). So now that we know that this new class is automatically added to active list items, we can take advantage of that and style that element based on the class, to demonstrate that the page tab is active.

As always, I'm assuming you know basic web coding, and this isn't a tutorial on how to make tabs in CSS. If you need help with that, check out Listamatic.

The WordPress Template Code

Read the rest of this entry

If you take a look at some blogs, you may notice that they have their search bar in some odd places. Some put it in the header, some put it in the horizontal navigation bar, some in the sidebar. I personally like to have it in either the header or in the navigation menu. It seems like that's always the first place I look when I want to find the search bar.

But getting the search bar positioned correctly can be frustrating, especially if you are using the entire header area to fit your logo.

So today, we're going to position the search bar absolutely, within the header. I normally don't recommend absolute positioning, because much of the time it's not necessary, and if you can avoid it, definitely try to keep your positioning normal. But in this case, I think an exception is in order ... so let's get started!

First, let's look at the header. For this article, I'll use the a theme I created a while back called RockinSuckerfish (the 2 column version). Let's look at some of the header code:

Read the rest of this entry

If you're a web code expert (or even novice) you can probably handle hard coding in sponsored links in your blog's sidebar. But many people are unaware that you can manage text ads via your WordPress administration panel. It's a small tweak/hack, but once you have it in place, adding and removing sponsored text ads will be a breeze from then on.

Read the rest of this entry

It's nothing you haven't heard before. Simple things like knowing what to put above the fold, placing your ads in the right places, designing around a brand, and being both simple and memorable ... these are the kinds of things we all know we should consider when designing our blogs. But sometimes amidst the frenzy of coolness, we forget about usability. Sure it matters where you place your ads, but if it gets in the way of a graceful user experience, will it even matter?

And I don't even mean the W3C usability standards either (although that's a good place to start). I'm talking about simple psychology. Where does a reader's eye go first on the page? How does he/she scan articles? What fonts are the most readable (without being ancient)? What colors go well together? How long should a line of text be?

Think about a newspaper. The front page has all the key elements a reader is looking for (or has come to expect). The name of the paper, major headline and partial story text with perhaps a picture, secondary headlines and story excerpts, table of contents to other stories and categories, and maybe an advertisement or two. Also notice the length of the lines of text in the story text ... you think they are short like that by accident?

Bloggers can learn a lot by studying the strengths and weaknesses of mainstream media. Blog designers can do the same thing. I mean, there's no reason to reinvent the wheel.

1. The title of your blog

Make it prominent, but don't let it overshadow your content. I know this seems like common sense, but there are too many blogs out there who forget this simple, but effective, strategy. Your blog title should serve 2 major purposes: Identify/brand your site, and get the user back to the homepage (by making it a clickable home link). Making it too big or bold doesn't help either of these purposes, and could in fact do damage to your brand. For a good example of what a title should look like, have a look at the site you're on right now, performancing.com.

2. Headline Stories

This may be a little less clear, and I understand there are loads of opinions out there about how you should handle headline stories on the homepage. Personally, I'm a fan of either using the tag (in WordPress), or calling excerpts for homepages. This allows the blog owner to fit more content on to the homepage, and allows the reader the option to quickly "scan" for what they want to read. There are some bloggers who would never do this though, and believe the reverse chronological list of full articles on the homepage is the best way to go. You'll have to make that call for yourself, and perhaps do some trial and error, but this you can be sure of ... the way you list your stories on your homepage is NOT an insignificant detail. It matters a lot.

3. Secondary headlines

This is actually pretty interesting, and if you've never actually looked under the hood of your blog software or theme, you may want to skip this one. There are plenty of ways of displaying "aside" stories on your homepage, and it's something I really like. It gives the blog author a quick way to communicate non-critical information to the reader without getting in the way of the major blog headlines. Perhaps in the future, I'll do a tutorial on how to put a small "aside" box in your sidebar or maybe at the very top in a colored box or something. Another good option is putting the headlines from your different categories into an "aside" box. Either way, it's a great use of real estate on your homepage.

4. Table of Contents

For a newspaper, it's the place where it lists the sections and what pages they are on. For blogs, it's called "recent articles" and "categories". Displaying these on your homepage is a fantastic way of letting your reader know what your blog is all about. Descriptive titles for both your posts and categories are always a plus.

5. Ads

Honestly, I think this should be the last thing you should consider when building your homepage. But there's no doubt that placing your ads intelligently is important, especially if you use pay-per-click ads like adsense. You don't want to hide them at the bottom, but you also don't want to sacrifice prime headline real estate on ads. This makes for a bad user experience. There are plenty of tips on how to place ads, so I won't beat that dead horse. Just be sure to put a lot of thought and research into placing your ads.

Studying the mainstream media and piggybacking on their readership research can be a great way to optimize your blog's homepage. Pick up a newspaper (preferably a successful one) or magazine and see what they do ... then rip them off :-) A simple, yet effective piece of advice.

Have you ever been browsing through the theme viewer or checking out the daily theme release announcements over at WeblogToolsCollection.com, and noticed that a certain theme requires a plugin to function correctly (or at least has a feature that requires a plugin to work)? I certainly have, and although I have never required a plugin for any themes I've released, I can see why one would want to include the functionality of a plugin to make that theme even more awesomely cool (and perhaps get more downloads).

But it is generally frowned upon to require the user to download and install a plugin in order for your theme to work properly. So what is a designer to do? Of course, he could just try to figure out what the plugin does by examining the code, but most designers don't have a working knowledge of PHP/MySQL. Another option is to just remove the feature from your theme, but that means you lose that super-cool feature that might have set your theme apart from the others.

Thankfully, there is a solution that is actually quite simple.

A while back, I was working on a custom design for a client, and he requested a very long list of features that were beyond what I could do with a vanilla WordPress install. So naturally, I hit google up for any plugins that would give me the functionality he was looking for. But again, I wanted to deliver a fully functional theme to this client, without having to instruct him to install a list of plugins to get the theme working properly.

After thinking for a while, it hit me: just copy the code from the plugin into the functions.php file of the WordPress theme. I did so, and it worked like a charm! Absolutely no plugins were activated, and I was able to deliver a theme that worked perfectly right out of the box.

A few possible limitations to this method.

I'm not sure about this, but some plugins do add new rows/columns/tables to your database. There is a possibility that a plugin will do this upon activation, and may not work as an integrated function in the functions.php file. Again, I'm not sure about this.

Also, plugins with multiple files, especially plugins that require you place files/folders in multiple locations, probably won't be easily integrated into your theme. Plugins that only require a single file upload are best.

A few extra tips

1. Be sure to keep the plugin information in tact when copying the content of a plugin file over to your functions.php file. This way you can keep track of which plugins are installed, and where one ends and another begins.
2. Be sure to copy the entire contents of the plugin file to your functions.php file. If you're missing an opening or closing tag anywhere, it could break your theme.
3. Use obvious separators when integrating multiple plugins. This is sort of like point 1, but you'll definitely want to use a consistent and obvious marker for when a plugin begins and ends.
4. Test, Test, TEST!!! Do not just slap the code in last minute and expect it to work. Test it extensively and make sure that your theme doesn't break. Plugins are buggy sometimes, so you need to make sure it's working properly before you release it or make it live.

One Final Tip

If you are comfortable enough with PHP, it should be noted that you can put the plugin files in a folder within your theme folder, and simply use your functions.php file to include those plugin files. I like to keep the php calls to a minimum, but you're certainly welcome to go that route if you are more comfortable with it.

Anyway, I thought that was a cool little tip, and hopefully so will you.

Happy Coding!