unGrid

There are many, many WordPress themes out there that have been coded fairly poorly, some of them are outright disgusting. So I think it is about time that we take a walk down 'Theme Coding 101', and go back to the basics of coding a WordPress theme.

This is not the only way to write the WordPress loop, however it should be used a reference point on which to base your loop on, with correct tags and code formatting.

What is the Loop?
Let's imagine that you didn't have a skeleton inside you, you basically couldn't stand up or function, that is exactly what the WordPress loop is, the skeleton of your WordPress installation. The loop cycles through all the posts, grabbing the required data to display them, from the heading, the post content, tags and categories, plus any other information stored with each post.

>
		', '

'); ?>

			 |
			
			| ', ' '); ?>
		

			
			' . __('Pages:','example') . '&after=

'); ?>
		

			 
			 | ' . __('Tagged', 'example') . ' ', ', ', ''); ?>
			| 
		


	

Starting the Loop
The first and easiest part of forming a new WordPress theme.

Let's break this into various steps. The first part checks whether there are any posts to display, one of the most critical parts of a blog is the content, so we have to check whether there is any to display. Next, we have to cycle through the posts IF there are some, and only if there are some to cycle through. And finally, the_post(), basically grabs the data from each post, and inserts it into the global variable, $post.

Without this first line of the theme, the blog will basically fall apart.

Showing the Post Contents
We need to start out with a div element to surround each post as it is displayed. So to start with, we should be posting this line of code.

To keep with web standards, and to use id within an element, it needs to be unique, so we grab the post ID using the_ID(). post_class() is a new function built into 2.7, and allows post-specific classes to be tied to a post to allow specific categories and tags to be displayed differently.

Post Title
The next part of the loop grabs, and displays the Post Title. There are a number of ways, but I have a preference for this method.

', '

'); ?>

Lets look at that line of code in detail. the_title() is pretty straight forward. It displays the title of the blog post. But to help display the blog post, the_title() is divided into three (3) parts, what to display before the title, after the title, and 'display' (whether to display it or return a value).

get_permalink() grabs the URL of the post.

the_title_attribute() should be used more often. It is often left out of themes and many people default back to the_title. Basically it deals with quotation marks and leaves valid xHTML.

For single.php and page.php you can use single_post_title() in place of the_title().

Post Meta Details (The Byline)
I personally prefer to call them meta details, simply because they are a bit like the meta tags you place in HTML page headers. There are a number of things you can do in this area.

	 |
	
	| ', ' '); ?>

Depending on your preference, we can link to the author, or the author's posts. If we were to use the_author(), it would only display the author's name. If we wanted to direct the reader to a list of articles that the author has posted, we would use the_author_posts_link().

Displaying the date/time of an article post is done simply using the_time(). It can be customised using the PHP date display rules.

If you want to make it simple for the author and logged in users with edit priviledges to be able to edit a post easily, we can add edit_post_link()

Keep and eye out for the next installment of how the WordPress Loop should be written.

--
This post is inspired by Justin Tadlock.