Your iPhone optimised WordPress theme doesn’t have to be the single column look we often see; there’s no reason at all why you can’t just slightly simplify your theme and still give iPhone users a decent experience when visiting your site. That’s what we’ll be doing in today’s post, using just CSS.

IPhone stylesheets

The first thing we need to do is to set up our iPhone specific stylesheet. Put the line below after your normal stylesheet so we can just overwrite some styles using an iphone.css stylesheet uploaded to your theme’s directory (instead of starting from scratch).

Potential drawbacks

Before we get styling, there are some downsides to this method. This isn’t the most efficient way of doing things as potentially some elements will have to be set to display:none;, meaning that they still load, just aren’t displayed. This may have some impact on performance but personally I think as long as your site loads quickly normally, it’ll be fine here.

Slim down, load up

So onto the styling. Portrait, the iPhone’s 320px wide, landscape 480px. Most iPhone specific themes will be 320px, just showing some content. Personally, I see no reason not to just shrink a site slightly, perhaps slimming the sidebar right down to 150px and getting rid of things iPhones can’t properly display (such as tabs).

Every site is going to differ, but something like this will probably do the job:

You then might find that you need to hide some sections, which you can do with display:none;:

Once you’ve fiddled around with that a bit, you’ll soon have a delightful iPhone specific WordPress theme for your blog.

Custom icons

But we’re not stopping there though! There is something else that’s really easy to do (that’s worth doing too): make an icon so when someone bookmarks your site to their home screen, your custom icon will show up.

You just need to create a 57×57 PNG without any gloss and upload it to your template’s directory/images/ and then add the following to the <head/> section:

For better or worse

That’s all there is to it. It won’t be for everyone; some might prefer 320px wide layouts, but personally, I find them quite annoying so by making it as much like the desktop site as possible but making it easier to use on an iPhone, I think your readers will love you for it.

Choose your posts

First thing you need to do is choose which posts you want to have in your featured area. For argument’s sake, I’m going to use a category “featured”. We’re going to be building something like what’s currently on WPShout: no fancy jQuery, just something smart and functional that clearly shows off a couple of posts. Because we’re showing only three posts, we’re not going to do the usual and display the three most recent posts, but be bold and randomly pick three posts out of our category “featured”. This requires a custom query looking something like this:

Displaying posts

Now that we’ve got our posts, we need to display them. We’ll wrap them in a div with the titles wrapped in H2s and linked up, followed by the post’s excerpt. That’ll all end up something like this:

Of course, we’ll then need to sandwich that in our query, so we end up with the following:

Styling the featured content

Next a little styling. Nettus recently published a screencast showing how to make the fold over (that’s actually a triangle) effect purely with CSS. We’ll be using that technique here to give a little pop to our featured content. We’ll also be employing some subtle CSS3 shadows and gradients to subtly make our content look awesome.

First, we need to wrap the whole lot in a div and give that a width, background etc:

In addition to the CSS3 box shadow we’ve got, you might like to add some CSS3 gradients to the box, something like this looks subtly awesome!

We can then add a little styling to the .welcome-post class we created to wrap each post with:

This’ll split up the area into three little columns, one for each post.

We can then style links and H2s:

And again, some optional CSS3 enhancement:

Finally, we just need to add the little arrow:

And we’ve created an awesome featured content area. You can grab the source files below and just check out the homepage for an example.

Download

Drop cap first letter

Drop caps are when you take the first letter and enlarge it, dropping it down several lines and wrapping text around it so that it looks something like this (you’ve probably seen it before, even if you didn’t recognise it):

The plugin way

We’ll start with the plugin method. The appropriately named ‘Drop Caps‘ plugin adds <span> around the first letter of the post which you can then style as you wish.

The CSS3 way

You can use CSS3′s selectors to do this, specifically the :first-letter and :first-of-type. Combining these together you can target the first letter of the first paragraph of your post’s content:

These mean you don’t need to add any extra markup whatsoever to the post and it’ll be all automated for you. The downside, of course, is that IE users don’t get to see the drop cap, but it does degrade gracefully:

The manual way

If you only want to use a drop cap on the occasional post then this is the best way of doing things — otherwise I can see very little advantage in doing this over any of the other methods.

The manual way does mean wrapping the first letter of the post in <span> tags in the HTML editor. This means unless you do it from the start on your blog you’re not going to get the drop cap on every post, hence why I wouldn’t really recommend doing this unless you only want to do it occasionally.

You’ll need some CSS, something like this:

Dropping off?

Wake up! It’s the end of the post. That’s a really bad pun. I’d better end quickly. Drop caps. They’re pretty cool and now they’re easy for you to do too. Do leave a comment if you’ve got an ingenious better way of doing this.

Image from DailyDropCap, an awesome site.

Update 06-04-2010 — I’ve added in affiliate links as regular readers will have read the article by now, but the content remains the same.

Frugal

Initial impressions are good. A hefty user guide covers most things although a quick video introduction to the theme would have been useful. Installation goes smoothly and I’m all set with a decent looking site from the off.

Frugal’s big selling point is it’s options pages. These offer you a huge array of different options for changing the look and feel of your site. In a couple of minutes I was able to make a respectable looking site which was impressive.

Asides from the theme options, Frugal offers the usual in post SEO options and a whole load of custom hooks.

Who’s this for? I’d say it’s a better option that Thesis for most, and Eric Hamm, Frugal founder agrees with me (he also thinks that everyone, everywhere should be using it though!):

I see all kinds of people use my theme.  From total beginners to seasoned WP developers. Usually, though, it seems to be people who don’t want to mess with much coding, but who still want to do-it-all with their theme.

Summing up, really comprehensive options pages let you change pretty heftily the design. I fear though that if you don’t know a lot about design then you’d find the options overwhelming and not know what to change.

Headway

Wow. Headway’s got a visual editor that’s not like anything I’ve ever seen in a WordPress theme.

Headway is visual.  You edit and customize the theme right before your eyes.  We use a system that consists of “leafs”.  Leafs can be compared to widgets, but you can move a leaf almost anywhere on the page.  You can also have sidebar leafs that allow you to add widgets.  The sky is the limit.

That’s Headway’s Clay Griffiths. He’s not far wrong actually. Headway has a visual editor overlay thing that lets you quite literally drag bits around your page. If you want a block wider you can either set the width or just drag it across the page! It’s very well done – you can hover over an element to find its class or ID, click on elements to change them etc etc. A video would explain this better, so I’ve just made one. I didn’t narrate it as I didn’t really have any idea what I was doing – I was just playing around

Headway also has things like the colour pickers, options pages, all the things you’d expect from a premium theme. I’m impressed, but would I actually use it? I’m not sure I would. I don’t think you’d ever be able to create something really nice and unique by dragging and dropping. Some might find it’s a good option, but for most I think it’s a bit too gimmicky.

Builder

Builder has a page that lets you… well, build pages in a way similar to Headway’s visual editor.

It’s not quite as innovative as Headway – no drag and drop here, but the interface is functional – select a ‘module’ – be it navigation, widget bar, content area, footer etc and where you want it and you’ve built a layout. You can then choose to apply this to a page, post or homepage. You’ve got control over the layout but not really the design which I’m not sure isn’t a bad thing – with Frugal and Headway I get the idea you’ll see largely the same sites being churned – there’s only so far you can get with their options I think.

Other nice touches include things like a menu manager (although it’s nothing like the 3.0 manager!) and a couple of SEO options. It also has iThemes’ impressive array of video tutorials which cover most things I can think of from changing your permalink structure to creating a post. As with the others, it offers what you’d expect from a decent quality premium theme.

It’s right up with Headway with the whole build pages idea and between the two I’d probably go with Builder – it doesn’t offer nearly the same design options, but for building layouts, it’s pretty good and my favourite out of Frugal and Headway.

And now for something completely different

You’ll only be able to get so far with any of Headway, Frugal or Builder before you have to actually start writing some code. No matter what you do with any of these themes, with the built in options, they’ll still have some features that point them out as powered by that theme. They’re all good for people who can’t write code, but you’ll only get so far editing them and no way are these going to be the death of the good old well designed and then coded theme.

The second half of this post will look at two ‘frameworks’ that more or less exclusively designed for building new designs. Introducing Genesis and Elemental.

Genesis and Elemental

From StudioPress, Brian and Nathan did a pretty damn good job of presenting Genesis as the be all and end all of frameworks. On installation I was impressed with the options page that isn’t covered in jQuery, but actually looks nice and blends in with the WordPress backend. The big focus though is on child themes. Genesis has been presented as something that you can build all kinds of sites off and it’ll function great regardless. Hooks and filters all over the place, they’ve certainly nailed those. The SEO options are comprehensive too, I’ll give them that as well. I’m going to come back to Genesis in a sec. First, Elemental.

Elemental is from ProThemeDesign. It’s certainly a turn away from the likes of Mimbo and if I’m honest I had pretty high expectations of it. Ben’s work is always awesome so something that was originally built for him has got to be pretty good, I thought. On installation I instantly took a shone to Elemental. I don’t know why, but I got the impression that if I was going to build all my themes off something, then this would be it.

In a framework like this, it’s the attention to detail that matters and Genesis might win on the development side, but the little touches like a bar at the top of all pages with quick links to writing posts, pages and the dashboard make me lean towards Elemental as something I’d actually like to use day in, day out.

Between the two, Genesis is certainly well made, but then so is Elemental. The Genesis options page fits in really nicely but the Elemental one looks good too. It’s tough to choose between the two; they both offer similar awesome page templates, options pages, filters and hooks. There is one difference though that separates the two. Genesis offers a theme store which lets you buy child themes but Elemental doesn’t. For me, it’s not a problem, but if you don’t want to build a design from scratch then Genesis should be the one to go for. If you want something to build all your sites with then go for Elemental as it’s a pleasure to use.

Could you concise that?

Sure. Frugal has a huge options panel which is good for those of you who want something they can customise a bit but ultimately you want a blog look. Headway is like Frugal with layout options added on. Builder is what Frugal would be if it did layout options instead of design options.

Genesis and Elemental are both very well built but the deciding factor is whether you want to be able to buy child themes (note themes – you can buy them for Elemental from ProThemeDesign). If you do, go for Genesis, but if not Elemental.

It all started when Jad sent me a Google Chat message asking if I’d help him with converting an HTML design to WordPress. I then ended up doing the whole theme. I still don’t know how that happened. Over the next couple of weeks, Jad then revisited the theme, doing it again himself — the best way of learning!

The first thing to do was to take the HTML and put it into header, index, sidebar and footer files. Here’s a badly made screenshot of which bits went where:

Nothing here is too taxing for WordPress to handle, but a couple of things pose a problem.

The header

As the design was only going to be used on DesignInformer, there was no need to make the navigation dynamic. The same applied to the logo, RSS and Twitter buttons, so nothing really to do here!

The index

I’m using the index and not the home file here as we’re creating something that can be used as a fallback. A closer look at the post area reveals it’s quite complex. WordPress brain in gear, these were what I thought I’d do (another poorly made graphic!):

Looking at the CSS though, we hit a problem. Quite a few problems actually. First is that the excerpt is a paragraph with a class. the_excerpt outputs plain <p>s. An ingenious solution is at hand though: the_excerpt_rss doesn’t have any wrapping <p>s so we can apply our own styling:

<p class="excerpt"><?php the_excerpt_rss(); ?></p>

The next problem is the ‘Continue Reading’ section. That too has a class so we can’t just use the read more that comes with the_excerpt. Instead, we can use <?php the_permalink(); ?> and wrap the continue reading <p class> around that:

<p class="read-more"><a href="<?php the_permalink(); ?>">Continue Reading</a></p>

I then found out that Jad wanted backwards comparability with his old posts which were using custom fields, not the post_thumbnail function. The solution was to use Justin Tadlock’s get_the_image plugin, albeit customised a bit.

The sidebar

Badly made graphic number one is actually quite heavily cropped so you don’t see the ‘Popular Posts’ section of the sidebar. For this, we followed my own advice to get most commented posts the right way:

<ul>
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
	<?php while ($popular->have_posts()) : $popular->the_post(); ?>	

	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a></li>

<?php endwhile; ?>
</ul>

The rest of the sidebar is filled with ads and a latest tweets section which I left Jad to do via a plugin.

The footer

I largely left the footer as is — the Categories section was better left hardcoded as we didn’t want all of the categories, the friends list can be easily edited manually and the bottom of the footer is static too. That leaves the recommended reading section. A custom query is in order. We want two posts from the category with an ID of 164, so use the following code:

<ul>
<?php $reading = new WP_Query('cat=164&posts_per_page=2'); ?>

	<?php while ($reading ->have_posts()) : $reading ->the_post(); ?>	

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a>

<?php the_content(); ?>

<?php endwhile; ?>
</ul>

We can use the_content as the whole post is being displayed – they’re only short!

Lessons learnt

The major lesson learnt here is that knowing your template tags can get you out of a lot of holes! Not knowing the_excerpt_rss could be used to get our p class could have meant you’d added in an extra div in an attempt to sort it out when you needn’t have done! Hopefully this case study will have helped you see in a real example how converting HTML to WordPress is easy!

WordPress theme development is actually very hard. In this post we’ll look at the different aspects of WordPress theme development, starting with the fundamentals and then moving swiftly onto the basics, template tags and the more advanced files.

Contents

• Part 1: Introduction; the fundamentals of WordPress theme development
• Part 2: The index.php and style.css files: the most important parts of any theme.
• Part 3: The header.php, sidebar.php and footer.php files.
• Part 4: The single.php file: the file that handles posts.
• Part 5: The archive.php, home.php and functions.php files.

Downloads

Part 2 onwards all have an accompanying download – they’re listed here:

• Part 2
• Part 3
• Part 4
• Part 5

THE FUNDAMENTALS

A WordPress theme is made up of a number of different files, and they all contain a seperate section of the page; the header will contain the title and navigation, then the index will contain the main content area (or on a post, the single file does the job). The sidebar, obviously contains the sidebar and the footer contains the footer and closes off the HTML. This all sounds very straightforward, but the important bit is how you can just have a single file, change it once and you will change your whole site. Change your footer and that change will be reflected sitewise, not just on a single page.

Expanding on this, a post page is made up of four files (usually): the header.php file for the header, the single.php file for the post content, the sidebar.php file for the sidebar and the footer.php file for the footer. You can have the same header.php, sidebar.php and footer.php files for the whole site, and so when you make a change, this change comes immediately sitewide.

THE ADMIN STUFF

Getting started with WordPress theming can be a daunting prospect, and before we start, I’ll say this now; I’m going to assume a good solid understanding of both CSS and HTML. Good places to gain this knowledge are CSS-Tricks and Nettuts+.

A couple of things to sort out first – you’ll need to get yourself a code editor. If you’re using Windows, the free Notepad++ is an excellent tool to have and if you’re on a Mac then I’m sure there are plenty of great free editors, but the one that everyone raves about is called Coda(and it’s not free). If you’re serious about design then Coda will be worth it in the long term. The only other quick thing we need to do is install WordPress locally. You can find how to do that here.

Creating a basic theme

First off, the style.css. This is our stylesheet. This isn’t a design series, so I’m not going to dwell on it too much, but there are some important parts of a stylesheet which WordPress needs that tell it some info about the theme. The theme we’ll be creating this week is called Champion. It’s based on the Default WordPress theme for ease of use. Download the theme and unzip it. Open up the style.css file and you’ll see something like this:

/*
Theme Name: Champion Theme URI: http://wpshout.com
Description: description
Author: Alex Denning
Author URI: http://wpshout.com
Version: 1.0
*/

And that’s all you need to make a stylesheet WordPress-ified. After you’ve got that in a stylesheet, you can style as you would normally.

The index

WordPress has lots of different template files. They’re all used to generate different types of post, page, archive etc. A previous post explains all, but to give you an idea

For posts, first, WordPress will look for the single.php file, but if it isn’t found then it will use the index.php to display the post.

For author archives, first WordPress will look for the author.php file, then the archive.php file and if it can’t find that it’ll use the index.php file to display the author archive. It’s the same with all types of post, page or archive; they all revert to the index.php. This is why it is the most important file of them all.

So let’s get started. Open up the theme files again and open the index.php file. We don’t need any other files because as I’ve just pointed out, all types of page revert back to the index.php file so to prove the point, in this part it is the only file we’re going to use. As the week goes on we’ll be adding more files back in, don’t worry! Open up the index.php file and look for line 49, which starts with:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

This is the WordPress Loop, and the most important part of any WordPress theme. This part is exciting; we’re using the most important template file and the most important part of any template file!

THE LOOP EXPLAINED

So what is this Loop? It’s the thing that goes and fetches posts. With the loop started, look at the next couple of lines, ignoring the opening <div>s. They read:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php the_content(); ?>

These are your very first template tags. Template tags are pieces of PHP (which always start and end <?php and ?>)  which tell WordPress for the current post, get this piece of information. For example, the first template tag used here, the_permalink, tells WordPress for the current post, get the post permalink. Used inside an anchor and you’ve got yourself a link to current post. The next template tag, the_title, as you might have guessed, outputs the title of the post. Add that all together, inside an H2 tag and you’ve got yourself a title which when clicks goes to the post’s post page.

The final template tag above is the_content. This is tells WordPress for the current post, go and find the contents of it and display it.

The next part of the file reads (again, ignoring the divs):

<?php endwhile; ?>

<php next_posts_link('' Older Entries') ?>

<?php previous_posts_link('Newer Entries &raquo;') ?>

<?php else : ?>

<h2>Not Found</h2>

<p>Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

The first part, endwhile tells WordPress when you’ve finished displaying all the posts, display this:. What is displayed are links to older and newer entries using the template tags next_posts_link and previous_posts_link.

The next part, else tells WordPress if you can’t find any posts, display this:. You’ll see that if no posts are found then a ‘Not Found’ displays. Finally, endif finishes the loop.

So there we have it; the most important part of any WordPress theme; the loop. What we’ve also done is get introduced to template tags. There are quite a few to get yourself familiar with, and you can find them listed on the codex.

With the deciphering done, load up the theme to your WordPress install and activate it. You’ll see that despite only having a stylesheet and a single index.php file, the theme loads fine. Click on a post and you’ll see that gets displayed too. Pages, post archives, category archives and any page you like work fine too. Going back to what I said earlier – all template file hierarchies fall back on the index.php file – this proves it.

This also arises the question – “if I can do all this with a single file, why have more template files?” The answer is customisation. A change to the index.php file will be reflected throughout the entire site, so if you just want to change post pages then you wouldn’t be (easily, see à) able to do this, which is why we have different template files (the pedantic might point out you could get round this with if statements, which is true, but it wouldn’t be particularly practical at the end of the day).

SEPARATING the files

Download the latest copy of our theme and open up the index.php file. First thing that you should notice is that the header has been replaced with a piece of PHP -

<?php get_header(); ?>.

This is another of WordPress’ template tags, and it’s telling WordPress go into the theme files, find the header.php file and display the contents here. As your theme becomes more and more complicated, this allows you to create a single header and use it throughout your theme. At this point, you’re probably opening up the header.php file. Good idea! Upon opening it, you’ll see it’s the same thing we had starting off our index.php file. All that has changed is now it has a whole file to itself.

DECIPERING THE HEADER

Before we move on, a couple of important header points. You’ll notice that the header doesn’t display things like your content type, it uses template tags (I did say there were lots!) such as:

<?php bloginfo('html_type'); ?>

When this loads, what is displayed is your HTML type – have a look at the source code yourself – text/html gets shown. Template tags such as this one are used throughout the header to get the stylesheet url, title, pingback url etc etc. The reason for this is because every WordPress installation is different and so by using dynamic template tags, you can cater for all of these different installations at once.

THE SIDEBAR

Look back in the index file and you’ll see that the sidebar has gone too, and its place <?php get_sidebar(); ?>. Like the header, this tells WordPress go into the theme files, find the sidebar.php file and display the contents here. There’s not much to decipher here; a couple of new template tags and only one completely new thing: widgets, which we’ll discuss further in the last part as it requires the functions.php file.

THE FOOTER

The final part of this part’s instalment is going to look at the footer. Like the header and sidebar, it has been removed from the index.php file and now resides in the footer.php file. Again, it is referenced with the <?php get_footer(); ?> function. Nothing much new here; again some more new template tags, but other than that it’s much the same as the index.php file’s footer we had before.

DEVELOPING THE SINGLE.PHP (POST PAGE) FILE

Upon opening the single.php file, it should look pretty familiar; the first line is <?php get_header(); ?> which, as we learnt in the previous part, tells WordPress find the header.php file and display the contents here. Skip a line and you’ll see:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

That too should look familiar; it’s the loop! Scroll down further and you’ll see a couple of template tags -

<?php the_title(); ?>

and

<?php the_content(); ?>

. After that, scroll down to line 35 and you’ll meet a new template tag:

<?php comments_template(); ?>

Just like get_header, get_sidebar and get_footer, this tells WordPress go and find the comments.php file and display the contents here.  You can probably guess where this is going – get the comments.php file open.

GETTING TO GRIPS WITH WORDPRESS’ COMMENTS

Open it up and… eek! It’s complicated. The comments file is notorious for being the thing that must be done but no-one really likes doing. But that isn’t going to stop us, is it? No. Let’s get going. The first part of the code just checks to see if the comments file has been loaded directly, and if it has an error message gets displayed. Next, it checks to see if the current post is password protected, and if it is then the user is asked to enter a password to see the page. Leave this bit of code alone; it’s important it is kept and, well, what has it ever done to you?

Next is the bit we’re interested in: the comments loop. It starts by checking if comments are open:

<?php if ( have_comments() ) : ?>

And if they are then some text is displayed, showing the number of comments a post has. Skip a couple of lines to line 28 where an ordered list is opened and inside that ordered list is <?php wp_list_comments(); ?>. This is another of WordPress’ template tags, and it spits out all of a post’s comments. There are other ways of displaying comments (that offer more customisation), but that is a post for another day; as I said, it’s quite a complicated subject.

Gloss over the next part (which is pretty self explanatory) to line 49. Here starts the form that you see on most blogs – this is the part where you fill out your name, email, website and comment. There isn’t really much need to customise this or change it in any way, so we won’t. Instead, we’ll go back to the single.php file and finish up with that.

FINISHING OFF WITH THE SINGLE POSTS

Open up the single.php file again and scroll down to line 37, just after where we left off. Here is something that again should look fairly familiar; it’s the loop finishing off and saying if no posts are found then display this:. The

<?php endif(); ?>

closes off the loop and then we get to the familiar looking get_sidebar and get_footer, which we learnt about in the previous installment of the series.

CREATING A POST PAGE

This tutorial has focused heavily on posts, without a mention of pages. The good news is that pages run identically to posts and so to create a post page, all you have to do is save another copy of your single.php file as page.php. And you’re done. I did say it was simple!

Creating an awesome archive

According to the WordPress file hierarchy (which we discussed earlier), all archives – date, category, author and tag each have their own template file, but they also all fall back on a single file – the archive.php file. The idea here is that if you’re clever, you can save yourself creating a couple of additional files.

Upon opening the file, you’ll be greeted with the familiar get_header and the loop. Then, on line 14 starts a whole load of PHP if statements – if this is a category archive, display this, if this is a tag archive, display this etc etc. After that, on line 37 the loop swings into action and we have the familiar template tags we learnt in part two. Finally, on line 56 the standard “no posts were found” gets replaced with another if statement, changing it to “no posts were found under this category/tag etc etc”. After that, the familiar get_sidebar and get_footer and the archive page ends.

It’s pretty similar to the index.php page, all that is happening is that there are a couple of ifstatements to change the titles according to the archive.

CREATING AN (EQUALLY AWESOME) HOMEPAGE

Something you might have noticed is that so far we haven’t created a specific homepage. Whilst there is a homepage, that’s just the contents of the index.php file. At this point, it’d be appropriate to introduce a new template file: the home.php file. It’s highest in the hierarchy for the homepage, so WordPress first looks for the home.php file and if that doesn’t exist then it uses the index.php, which is why so far we’ve so far been creating a homepage with just the index.php.

Why can’t I just use the index?

Good question. You can’t because the index file is at the bottom of all template hierarchies – if you don’t have a specific template file for a certain type of page then WordPress displays the page using the index.php file. For that reason it is best to leave the index file as it is and create an additional page, home.php for generating a homepage. It’s also one of those useful little tricks that are good to know as it allows you to stop using WordPress as a blogging platform and start using it as a CMS.

In our example, we’re not going to do anything with our home.php file, other than make it and copy and paste the contents of the index.php file into it, but as someone who is getting started with WordPress theme development, it is something that you should know exists and you’ve always got the option of customising the homepage further yourself.

THE FUNCTIONS.PHP FILE

This is probably the most powerful template file there is. Effectively, it lets you run plugins from within your theme. It’s not a page that gets displayed, it’s a file that lets you run functions that you can display in other files. Common uses include:

• Widgets! Whilst you put where you want widgets to display in the theme files, but they’re powered from the functions.php file.
• Theme options. Theme options pages are too created from the functions.php file. WPShout has a whole tutorial written on the topic here.
• Language – the functions.php file lets you set up the option for multi-lingual theming.

As the functions file is just so complex, I’ll just cover some basics. The code below will create a widget area ‘Widget area 1’ with an opening div before (which closes after) and the widget title gets an H3 tag:

<?php if ( function_exists('register_sidebar') )

register_sidebar(array(

'name' => ' Widget area 1',

'before_widget' => '<div>',

'after_widget' => '</div>',

'before_title' => '<h3>',

'after_title' => '</h3>',

)); ?>

To insert the widget in your sidebar you’ll need to add the following to your sidebar.php file (or wherever you want to widgetise):

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Widget area 1') ) : ?>

<p>This area is widgetised! To make use of this area, put some widgets in the 'Widget area 1' section.</p>

<?php endif; ?>

This is just the start though; take a read of thisto find out how to build your own theme options page.

Concluding the series

I hope this series has given you a good start with developing WordPress themes, and make sure you subscribe by RSS to hone your skills further. As I hope I’ve proved in this post, it needn’t be hard to become aware of what all the bits of code on your theme do, and you never know, perhaps in a year or two I could be reading your blog about advanced uses of WordPress!

This is the nice thing about WordPress it’s all “dynamic”. Once you install WordPress and design a great theme for it, anyone with the right level of administrative capability can log into the Administration Panel and add, edit, or delete content and menu items. But generally, when people ask for “dynamic menus”, what they really want are those appearing and disappearing drop-down menus which, I believe, they like because it quickly gives a site a very “busy” feel.

I must add my own disclaimer: I don’t like dropdowns. Before you get on to my case, I will say it’s not that they’re “wrong” or “bad”; they just don’t meet my own aesthetic standards and I personally find them non-user friendly. I’d prefer to see a menu system that, if subsections are required, displays them somewhere consistently on the page, either by having a vertical navigation expand to display subsections underneath, or showing additional subjections in a set location on the page if a horizontal menu is used.

I like to be able to look around and say, “OK, I’m in the New Items | Cool Drink section and I can also check out Red Dinks and Retro Dinks within this section”. Having to constantly go back up to the menu and drop-down the options to remind myself of what’s available and what my next move might be, is annoying. Still haven’t convinced you not to use drop-downs? OK, read on.

Drop-down menus

So you’re going to use dropdowns. Again it’s not “wrong”; however, I would strongly caution you to help your client take a look at their target users before implementing them. If there’s a good chance that most users are going to use the latest browsers that support the current JavaScript, CSS, and Flash standards, and everyone has great mobility and is “mouse-ready”, then there’s really no problem in going for it.

If it becomes apparent that any percentage of the site’s target users will be using older browsers or have disabilities that prevent them from using a mouse and will limit them to tabbing through content, you must consider not using drop-down menus.

I was especially negative about drop-down menus as, until recently, they required bulky JavaScripting or the use of Flash, which does not make clean, semantic, and SEO-friendly (or accessible) XHTML. Enter the Suckerfish method developed by Patrick Griffiths and Dan Webb.

This method is wonderful because it takes valid, semantically accurate, unordered lists (WordPress’ favorite!), and using almost pure CSS, creates dropdowns. The drop-down menus are not tab accessible, but they will simply display as a single, clear unordered list to older browsers that don’t support the required CSS.

IE6, as per usual, poses a problem or two for us, so there is some minimal DOM JavaScripting needed to compensate and achieve the correct effect in that browser.

If you haven’t heard of or worked with the Suckerfish method, I’m going to recommend you to go online (right now!) and read Dan and Patrick’s article in detail (http://alistapart.com/articles/dropdowns).

More recently, Patrick and Dan have revisited this method with “Son-of-a-Suckerfish”, which offers multiple levels and an even further pared down DOM JavaScript. Check it out at http://www.htmldog.com/articles/suckerfish/dropdowns/.

I also suggest you play around with the sample code provided in these articles so that you understand exactly how it works. Go on, and read it. When you get back, I’ll review how to apply this method to your WordPress theme.

DIY SuckerFish menus in WordPress

All done? Great! As you can see, the essential part of this effect is getting your menu items to show up as unordered lists with sub unordered lists. Once you do that, the rest of the magic can be easily handled by finessing the CSS that Patrick and Dan suggest into your theme’s CSS and placing the DOM script in your theme’s header tag(s), in your header.php and/or index.php template files. Seriously, that’s it!

The really good news is that WordPress already outputs your content’s pages and their subpages using unordered lists. Right-click on the page links in Firefox to View Selected Source and check that the DOM inspector shows us that the menu is, in fact, being displayed using an unordered list.

Now you can go into your WordPress Administration panel and add as many pages and subpages as you’d like (Administration | Page | Add New). You’ll use the Page Parent tab on the right to assign your subpages to their parent.

If you installed the pageMash plugin, it’s even easier! You can drag-and-drop your created pages into any configuration you’d like. Just be sure to hit the Update button when you’re done.

Once you’ve added subpages to a page, you’ll be able to use the DOM Source of Selection viewer to see that your menu is displayed with unordered lists and sublists.

Applying CSS to WordPress

We’re going to use the new and improved “Son-of-a-Suckerfish” method so that our menu can handle multilevel dropdowns. To start, let’s just take Dan and Patrick’s suggested code and see what happens. Their unordered list CSS looks like the following:

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus
because display: none isn't read by screen
readers */
}
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,
#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
/* lists nested under hovered list items */
left: auto;
}

Now in WordPress, our menu item’s ul is within a div id called top_navlist, and the ul ID is referred to as navlist. There may or may not be lots of other unordered lists used in our site, so we want to be sure that we only affect uls and lis within that top_navlist ID.

We’ll simply tweak the CSS a bit to move items to the left (unfortunately, this works best with horizontal Navs that are positioned from the left instead of the right) and make sure to add #navlist to each element in the Suckerfish CSS. Also, we already have a general #top_navlist and #intTop_navlist rule for the div, so we’ll want to make sure that this only affects the ul within that div by making sure it’s named #navlist. So, our navigation CSS styles now look something like the following:

/*////////// NAV //////////*/
#top_navlist {
position: absolute;
top: 260px;
width: 897px;
text-align:left;
}
#intTop_navlist {
position: absolute;
top: 173px;
width: 897px;
text-align:left;
}
#top_navlist h2, #intTop_navlist h2{
display: none;
}
#na vlist{
padding: 10px 10px;
margin-left: 0;
border-bottom: 1px solid #ccc;
font-family: Georgia, Times, serif;
font-weight: bold;
}
#navlist li{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a{
padding: 11px 30px;
margin-left: 3px;
border: none;
border-left: 1px solid #ccc;
background: #8BA8BA url(images/oo_mag_main_nav.jpg) no-repeat top
right;
text-decoration: none;
color: #253A59;
}
#navlist li a:hover{
background-color: #9E9C76;
background-position: right -37px;
border-color: #C5BBA0;
color: #784B2C;
text-decoration: underline;
}
#navlist li.current_page_item a{
border-bottom: 1px solid white;
background-color: #fff;
background-position: right -74px;
}
#navlist li a:visited { color: #253A59; }
/*suckerfish menu starts here*/
#navlist li ul { /* second-level lists */
position: absolute;
border: none;
margin-top: 10px;
margin-left: 70px;
le ft: -999em; /* using left instead of display to hide menus
because display: none isn't read by screen
readers */
}
#navlist li ul li a {
display: block;
width: 150px;
font-family: Georgia, Century Schoolbook, Times, serif;
font-size: 12px;
text-transform:none;
font-variant: normal;
font-weight:bold;
border: 1px solid #666666;
background-color: #ffffff;
background-image: none;
}
#navlist li ul li a:hover {
background-color: #cccccc;
text-decoration: none;
}
#navlist li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 7em;
}
#navlist li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul
ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#navlist li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,
#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
/* lists nested under hovered list items */
left: auto;
}

Applying the DOM script to WordPress

The last bit is the JavaScript that ensures the hover works in IE6. I call it DOM scripting or the DOM script, but it’s basically just a JavaScript that rewrites your markup (how your DOM is being perceived by IE6) on-the-fly. This drop-down effect relies on the CSS hover attribute. IE6 only recognizes the hover attribute if it is applied to the a (link) entity. IE7 has fixed this limitation and it works similarly for Firefox and other browsers. Dan and Patrick’s script appends the additional .sfhover class to the li items in IE6 only.

You’ll need to add this script to your index.php and/or header.php template pages, inside the header tags. The thing to remember here is that Dan and Patrick named their ul tag’s ID as nav and that’s what this script is looking for. Our ul tag’s ID is named top_navlist, so by simply switching out document. getElementById(“nav”); to document.getElementById(“navlist”);, you’re good to roll in IE.

The full script in your header tags should look like the following (I prefer to tuck it into an include and place it in my home.php (or index.php) and header.php files with a JavaScript include.):

<script type='text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("navlist").getElementsByTagNam
e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("
sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

For demonstration purposes, I’ve kept the CSS pretty bare boned and ugly; however, when we check this out in our browser, we now see the following:

It’s working ! Remember, with the preceding code, you can have drop-down menus that go three levels deep (Dan and Patrick’s HTML Dog article shows you how to make it handle as many levels as you’d like).

Control those dropdown levels!
As cool as SuckerFish drop-downs are, refrain from going overboard on those levels! Cascading levels can become really tedious for a user to mouse through and can turn a site with a “busy feel” into a total mess. You’ll find that, with a little care, you can easily organize your site’s page content so that it only requires two levels. From there, if you really need it, you can add an occasional third level without creating too much user distraction.

Allowing only selected pages to display

In our theme, we used the wp_list_pages() template tag to display our pages. You can amend the template tag with an exclude parameter that will hide the pages we don’t want to see, including their subpages (for example, wp_list_pages(“exclude=9&title_li=” ); ). You do have to know what the page’s ID number is. (You can temporarily set your permalinks to “default” to see the page’s ID number in the site’s URL.) The pages themselves will still be available for viewing if you know their direct URL path. Read more about it at http://codex.wordpress.org/Template_Tags/wp_list_pages#Exclude_Pages_from_List.

Hiding pages the easy way with pageMash

If you have intalled the pageMash plugin by Joel Starnes http://wordpress.org/extend/plugins/pagemash/, displaying and hiding pages is super easy! Simply select hide from the option next to your page. The page will still be available via its permalink URL, but will not display in your drop-down menu.

At this point , all that’s left is fixing up the CSS to make it look exactly the way you want. There you go, semantic, SEO, and as accessible-as-possible dynamic menus in WordPress.

Drop-down menu plugins: Now you’re probably already thinking, “Wait, this is WordPress; maybe there’s a plugin” and you’d be right! By searching the “Extend” section of the WordPress.org site, you’ll find that there are a handful of WordPress plugins that allow for drop-down menus under different conditions. Ryan Hellyer has written a plugin that uses the “Son-of-a-SuckerFish” method that we reviewed in detail earlier. You can review it at http://wordpress.org/extend/plugins/ryans-suckerfish-wordpress-dropdown-menu/.

Post templates

Getting rid of the sidebar is a simple way to expand your options. Were we using pages, it would be easy to get rid of the sidebar with a page template, but those don’t exist for posts, do they? Wrong. They do. You just need a plugin which gives you page-like options for choosing your post template:

<?php
/*
Single Post Template: Template Name
Description: This part is optional, but helpful for describing the Post Template
*/
?>

And then with some simple styling you can widen your content area and get rid of the sidebar, offering you more room to create an awesome post.

Multiple sidebars

Say you don’t want to get rid of the sidebar, but instead display a different sidebar. That’s easy if you do multiple sidebars the right way, which, of course, has the following syntax:

• Save new sidebars with the sidebar-name.php format.
• Use <?php get_sidebar(); ?> to display new sidebars: <?php get_sidebar('name'); ?>

You can then create a page template with your different combinations of sidebar and make that blog post just that bit more unique.

Unique titles

Image replacement, emphasis, bold, the lot are all possible thanks to custom fields. Expanding further on this post, unique titles with image replacement are really easy to do. You just need to create a custom field called “post-title” and then you can put into that any kind of HTML you like – perhaps an image or just some emphasis? It’s all easy to do; you’ll need to replace <?php the_title(); ?> with the following code which will search for a custom field, display it if it exists and then fall back on the title.

<?php
$postitle = get_post_custom_values("post-title");
if ( is_array($postitle) ) { ?>
<?php echo get_post_meta($post->ID, "post-title", true); ?>
<?php }	else { ?>
<?php the_title(); ?>
<?php } ?>

Remember that custom fields can hold any kind of information and so you can put whatever you like in them to be displayed as the title – an image, some emphasis or just some text; do whatever you like.

Inline styling

Custom fields to the rescue again; we can use custom fields to add some simple styling to any post. As we’re outside of the loop, we’ll need some extra code, but nothing too complicated:

<?php $css = get_post_meta($post->ID, ‘css’, true); ?>

Needs to go at the top of your header file and then below your stylesheet, you’ll need the following:

<?php echo $css; ?>

And then you can fill in your custom field with some inline styling and perhaps change the background:

<style type="text/css" media="screen">

body{ background: #fff; }

</style>

Create columns of text within the post

This is probably my favourite. Using a simple grid system, it’s possible to put your content into many columns. This post explains all. You may ask why you don’t just use a <p class=”grid1″>-like system. The answer is that WordPress automatically adds in the <p> tag, so the only real option is to use <div>s.

Concluding

So there we have a number of ways to create a really fantastic unique blog post. Go and reap the rewards!

1. Use a framework

Initially, like a lot of people, I wasn’t convinced with frameworks. Now I’m totally won over. Frameworks offer you that crucial starting point for WordPress themes and save you coding the same things over and over again. And again. And again. These days the choice is massive – from highly complex frameworks with their own hooks such as Thematic, Hybrid and Prodigy to the more simplistic Biblioteca. Download a couple, find one you like, customise it to your needs. You’ll have doubled your coding time with just a couple of hours’ work.

2. Awesome SEO

These days bloggers care more and more about having “awesome SEO”. Understandably too. Theme authors are picking up on this too and increasingly themes are being released marketed with said “awesome SEO”. Thanks to the GPL, many of these themes are actually using the same code! As I wrote a couple of weeks ago, write great content, use your Header tags correctly and use the <title> tag effectively and you’ll be fine – for more SEO tips, check out “10 Ways to Improve Your WordPress Theme’s SEO“.

3. Use an advanced theme options page

Again thanks to the GPL, theme options pages, once found only in a select few themes, are now found pretty much everywhere. Creating your own options page isn’t that hard (and needn’t be hard either) – recently WPShout ran “Create an Advanced Theme Options Page” in which, as you might have guessed, we created an advanced theme options page with options such as changing the stylesheet and various other areas of the theme.

4. Don’t use custom fields unneccesarily

Whilst I do love custom fields, I don’t love using them unneccesarily. If you’re making a magazine theme such as the one used on WPShout, you needn’t use custom fields to display images on the homepage or the like (and all this won’t be needed at all with WordPress 2.9 – read more about it here). As WebDeveloperPlus points out, WordPress creates its own thumbnails that can be relatively easily used by any theme using the wp_get_attachment_thumb_url function (codex).

5. Custom write fields!

I do love these. Custom write fields. They’re essentially adding little boxes onto the bottom of the post writing area in WordPress. And they’re brilliant. On WPShout I’m running a child theme of Biblioteca and so have a box “Post options” that lets me change the post’s <title>, meta description and set one of two featured images. Adding these custom write fields to a theme is relatively easy with this tutorial I wrote a while ago. With them up and running, you can now offer a number of options and replace plugins such as the “All in one SEO plugin”. Awesome, no?!

6. Use the template hierarchy cleverly

WordPress’ template hierarchy is a great thing and you can create something really awesome by using it correctly. Here’s a case study. You’re using WordPress as a CMS for a portfolio site. You want to use category archives to display the latest blog posts and your portfolio which has a different design completely. You would first need to create two categories, “Portfolio” and “Blog” and find their IDs (although 2.9 onwards you can just use the slug of the category). Let’s pretend “Portfolio” has an ID of 3 and “Blog” 4. Next, style your pages and then save the two files not as category.php (as you would for a category archive normally) but as category-3.php and category-4.php. You’ve now just created two category archives that will output posts completely differently! Awesome, no?

7. Custom widgets

Custom widgets are the next big thing. That’s for sure. Get ahead of the game by including custom widgets in their theme and subscribe by RSS to WPShout as soon I’ll be writing a tutorial on how to create your own awesome widget.

Download the latest ccna dumps with complete 642-661 notes prepared to help you pass 642-631 on first try.

8. Use sticky posts efficiently and effectively

Used effectively and effectively, you can do a lot of awesome stuff with sticky posts. A number of examples. First, say we just want to highlight sticky posts. With WordPress 2.7′s post_class you can do this by adding some styling for .sticky . The full code would be something like:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>

And with CSS styling:

.sticky{
     background:yellow;
}

As you can see, pretty simple (inspiration for this from Shades of Blue). Taking this further though, you could single out sticky posts and use them instead of that blasted “Featured” category! Mimbo does this particularly well, outputting first a single sticky post and then a seperate loop with the next X posts, excluding the first:

 <?php
	$postCount = 0;
	$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
	query_posts( 'paged=$page&post_per_page=-1&cat=' . get_query_var('cat') );
	while (have_posts()) { the_post();
		if( $postcount == 0 ) {
		//GETS LATEST OR STICKY POST
	?>

<!-- do stuff -->    

		<?php
		}
		elseif( $postcount > 0 && $postcount <= 4 ) {
		//GETS NEXT FOUR EXCERPTS
		?>

<!-- do more stuff -->

<?php endif; endwhile; ?>

9. Multiple sidebars and layouts

An increasing trend this that is done especially well on BinaryMoon.co.uk – having two sidebars – one that gets displayed on the homepage and another that gets displayed in posts:

An effect such as this is quite easy to do with the right template hierarchy. First, create two sidebars and save them as sidebar.php and sidebar-single.php. Next, open up the functions.php file and add the following:

<?php if ( function_exists ('register_sidebar')) {
    register_sidebar ('single');
} ?>

Next, open up the single.php file and change to . And you’re done. This is assuming that you want to keep the homepage sidebar on archives. If not, do it the other way round (ie sidebar-home.php). Read more on this at the codex.

10. Custom YARRP templates

I do love this tip from Alex Cragg – custom templates for the Yet Another Related Posts Plugin. Using jQuery, Alex created a YARRP template that changes the image as you hover over different posts. Check out the demo here and download the templates here.

And with that, we’re done. Hopefully you’ve now got yourself an awesome WordPress theme! If you’ve enjoyed this post, why not [f] or subscribe by RSS?

A paragraph of interesting text.
A paragraph of more interesting text.

And then you’d have two bits of text which would be in columns next to each other. Clever, no?

Implementation

Implementation of this is actually quite simple. You’ll need a grid. If you’re using a theme based on a framework, it’s quite probably got the 960 grid system built in, in which case you can use that. If not, open up your style.css file and either create your own or use something similar to the below which Jeffrey uses on his site:

.g1 { width: 60px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g2 { width: 140px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g3 { width: 220px; margin-left: 10px; margin-right: 10px; float: left; display: inline;}
.g4 { width: 300px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g5 { width: 380px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g6 { width: 460px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; float: left; display: inline; }
.g7 { width: 540px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g8 { width: 620px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g9 { width: 700px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; float: left; display: inline; }
.g10 { width: 780px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g11 { width: 860px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g12 { width: 940px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }

And then when writing, you can utilise your grid by wrapping text as I show above. A really easy (and effective) to make your blog post that bit more unique and exciting.