In this lesson we’ll go through post thumbnails, a feature introduced in WordPress 2.9. A post thumbnail is an image chosen by the author as the representative image for a post. Having an image to each post makes the site more interesting to look at. Keep in mind that the post thumbnail is not a part of the post’s body content, so it will not appear unless you choose it to.

In our design we want a wide and quite narrow thumbnail above each post on our front page. We also want the same post thumbnail but smaller and square for our featured posts section (the slider we’ll create at the very top of the front page). In this lesson we’ll first add and define these new image sizes and then tell WordPress where to display them. Along the way we will also add some code to exclude images that appear in posts, as not to make the front page look like a mess.

In lesson 1 we learned that WordPress has a hierarchy of templates to choose from, depending on the situation, and the index.php is the final fallback. As for now our theme consists of the index.php only, which means that this template will be used at any situation, whether the user is on the front page, clicked a post or a category. It’s time to create more templates to our themes, most importantly the single post template with the comments template.

In this lesson we will look at the single post view (single.php), single page view (page.php), the comments template (comments.php), archive template (archive.php), the search result template (search.php), and finally the 404 Error template for whenever the user has reached an URL that doesn’t exist (404.php). It’s a pretty long post with codes for each template, but don’t be intimidated – in most of the templates we just copy the index.php, rename the file and makes some small modifications. These are the basic templates for a well-working theme, but there exist many more. You are free to create as many of WordPress templates as you wish, but the single post, single page, and comments templates are the important ones.

Now that we have a theme that displays posts on the front page, it’s time to add some meaningful content in the sidebar. WordPress allows users to decide what to have in the sidebar using widgets. Using a GUI in WordPress admin users can place, remove and rearrange elements without the need of editing any theme files.

In this lesson we will define a widget area – a place where the user can arrange widgets. To do so we need to write some code in our sidebar.php, but also tell WordPress that our theme support widgets by creating the functions.php and adding some code. The functions.php is a file we will revisit frequently during this tutorial since it’s here we store our PHP functions and WordPress configurations.

In this lesson we’ll finally get started with creating files, write some code and activate the theme in WordPress so we can see it in action. We will begin with very basic HTML and some dummy content, but we’ll establish the structure and begin to query WordPress for some information such as the blog’s name and stylesheet directory. In later lessons we’ll query WordPress for much more information, such as posts and widgets.

In the previous lesson I showed you the design and the HTML structure (Click here for the visual representation given in the previous lesson) we are to create, and how it is split into separate files – the header.php, sidebar.php and sidebar.php, and the core index.php template which includes the previously mentioned templates. We also need to create the stylesheet, style.css because all the details of a WordPress theme are contained within the stylesheet.