Building a Stylish Blog Design Layout in WordPress

Over the last couple of weeks we’ve been through the process of creating a stylish blog design in Photoshop, coding it up into a static HTML and CSS concept, and now we’ll put the whole thing together as a fully working WordPress theme. Follow this step by step walkthrough of the various WordPress theme files, and see how the HTML is split up and injected with PHP tags to provide the complete blogging functionality.

At the end of the last tutorial, we were left with a working HTML and CSS concept of the blog homepage. Since then, a generic inner page has been styled up, to give the CSS for page elements such as comments, author description etc that appear when viewing a complete blog post.

WordPress theme anatomy

A WordPress theme consists of multiple PHP files. Each one of these files is called from the index.php, so your header, footer and sidebar are separate files that are inserted into the index to render a full web page. Furthermore, there’s different template files that can be used in place of the index depending which portion of the site the user is viewing, these include archive.php, single.php, and page.php. Inside each one of these template files is a series of WordPress PHP tags which add the special functionality and transform the static HTML and CSS code into a working theme. Be sure to keep the WordPress Codex bookmarked for reference when building your themes, it includes a detailed description of every tag and all its parameters.

The first step when creating any new theme is to create the series of files and copy across any image, Javascript or CSS assets your design uses into a new folder.

While you’re editing the CSS, you’ll also want to add some styling for the classes added by the WordPress WYSIWYG editor for aligning text and images to the left, right and center.

Header.php Template File

The header.php includes all the information from the head of your HTML document, as well as the upper portion of your code that remains the same throughout each page (The opening container tag for instance). The HTML right down to before the start of the page content is copied from the static HTML file and pasted into header.php. Then select tags and elements are replaced with PHP tags in order for WordPress to inject the dynamic information. <?php bloginfo('stylesheet_url'); ?> automatically renders a link to /wp-content/themes/*theme-name*/style.css. Where you need to specify the link to the theme directory, you can use <?php bloginfo('template_url'); ?>. Before the closing </head> tag, the WordPress <?php wp_head(); ?> tag tells any plugin files where to insert their own code.

Other tags used in the lower portion of the header file include <?php echo get_option('home'); ?> which renders a link to the blog homepage, and <?php wp_list_pages(); ?> which lists out the WordPress generated page into <li> tags (so don’t forget to wrap it in a <ul>). This pages tag also has some parameters, firstly sort_column=menu_order arranges the pages according to how you specify them as opposed to alphabetically, and title_li= removes the default ‘Pages’ heading from the list. It’s worth noting that this tag could be used elsewhere in the theme, like the sidebar for example. Likewise, you could list out the categories here instead.

Index.php Template File

The index file follows on from the header.php, so the HTML right down to the sidebar from the static file is pasted into the index file. Being the file that is loaded first, the header.php file is called using the <?php get_header(); ?> tag. Inside the HTML content area, the WordPress loop checks for posts then spits out a bunch for code for each post it finds. This is specified between the while and endwhile; PHP tags. Inside this loop we can insert the dynamic post information into the existing HTML elements from our static content, such as <?php the_permalink(); ?> to render the link to the post, <?php the_title(); ?> to render the post title and <?php the_content(''); ?> to render the actual post text.

After the list of posts, pagination tags are inserted using <?php next_posts_link('Older posts'); ?> and <?php previous_posts_link('Newer posts'); ?>. The text inside the parentheses can be altered to any wording you desire. At the bottom of the index file, the sidebar and footer files are called using <?php get_sidebar(); ?> and <?php get_footer(); ?>, which will insert the content from sidebar.php and footer.php wherever the tags appear in the theme file.

Archive.php & Search.php Template Files

The archive.php and search.php template files are basically alternatives to the index.php template file. They do the same job, but are used in different areas of the website. The index file is used on the blog homepage, whereas archive is used when browsing any kind of grouping of posts, whether it’s by category, month or author. The search file is used when viewing search results. Both files use the same structure and tags as the index file, but include some extra elements to provide feedback to the user. The archive file uses a range of conditional tags to check where the posts are coming from, this then allows you to set a page heading with the relevant information (‘Browsing the Tutorials category’, or ‘Browsing posts from August, 2010’).

Similarly, the search template file can include the simple <?php the_search_query(); ?> tag to render a heading such as ‘Search results for WordPress’.

Single.php & Page.php Template Files

While the index, archive and search files display a list of posts, the single.php and page.php template files are used to display the individual posts and pages. They both begin with similar HTML – The header is still called using <?php get_header(); ?> and the WordPress loop displays the post information and content. The main difference is instead of pagination, you might include additional functionality like <?php related_posts(); ?> (plugin specific tag) to render related posts, or <?php comments_template(); ?> to load the comments section, particularly for single blog posts.

Comments.php Template File

The comments template file is called from single.php to insert the comments section at the bottom of your blog post. This file renders out the comments into an <ol> element and is pretty much self-contained in the <?php wp_list_comments(); ?> tag. Elsewhere in the template file, comment pagination is taken care of with the <?php previous_comments_link('Older') ?> and <?php next_comments_link('Newer') ?> tags (if the option is set in the WordPress settings), while the comments form appears underneath, surrounded by a <?php if ( comments_open() ) : ?> statement to check whether comments are open or closed for this particular post.

Sidebar.php & Footer.php Template Files

Like the header.php file, the sidebar and footer are called from the other template files to insert the relevant HTML in the correct places to form a complete web page. My sidebar.php file only contains a modified version of the wp_list_categories(); WordPress tag, but any cocktail of information could be rendered here.
The footer.php file closes out HTML elements that have been opened elsewhere in the theme files, particularly the container div and page body. My footer design also includes a range of extra information, most of this information is generated by Javascript, or is controlled outside of the WordPress functionality, but the footer does still include the WordPress <?php wp_footer(); ?> tag to allow any plugins or WordPress itself to inject code into the right place in the theme (A Google Analytics plugin would likely insert the tracking code using wp-footer();).

404.php, Functions.php & Everything Else

We’ve covered the main types of WordPress theme files, but it doesn’t have to stop there. Two other popular files include,404.php which allows you to design a custom error page for your blog, and functions.php, which allows you to customize the inner workings of WordPress without altering the core WordPress code, not to mention the complete list of WordPress template files, many of which I’ve personally never used before. There’s also the option of custom page templates to take advantage of, these files allow you to set up a unique layout for a certain type of WordPress page – This is particularly handy for creating an archives list, or a portfolio page layout.

The Final WordPress Theme

When all the HTML is split across the various theme files and the WordPress template tags inserted into the right places, the theme is now ready to install and test. All the post information from the WordPress install should be injected into the theme and rendered out as HTML, taking all the styling clues from your CSS file.

Question. Is this how you make all of your custom wordpress templates? Start in Photoshop, move to HTML and CSS and then insert your WordPress theme tags? I'm asking because I'm about to create this site as a custom template in wordpress. My original plan was to get a template that was close and then start modifying it until it looks like what I want. But I feel that that could get really overwhelming really quickly. Starting from a working HTML and CSS file and then cuting it up and inserting the WordPress Theme tags is an interesting idea.

What about people downloading the new 3.0 version of WP. Based on what I read, it looks like this wouldnt allow the user to take advantage of some of the new features they released. Is that right? Either way, its a great tutorial. Thanks for posting.

I am seriously thinking of creating a wordpress site but have had a blogger site for the past three years. It seems a shame to abandon a site with such a long history. How does one make the final decision?

Thanks for the tutorial. I like this tutorial and have got many new things after reading this.
My Description is Madhyam Technologies, India based web company offering affordable web services to its clients, serves an eye-catching and crispy layouts. Also offer flash animation and logo designing, SEO, Shopping Cart Development, ERP, CMS, CRM Services etc.

Thanks to the upcoming World Basketball Festival, we now get a “USA” Air Jordan 2010 Team. It seems as if more people like the Air Jordan 2010 Team than the original Air Jordan 2010 because of the windowless side panels. I’m not one of those people who likes the team better; I think the original
<a href="http://www.nikeshoescompany.com/">Nike Shoes</a> 2010 Shoes looks much better.Since this <a href="http://www.nikeshoescompany.com/">jordan Shoes</a> Team is made for the USA team, the colorway should be clear. White can be seen on the side panels, toe, shoe laces, tongue, part of the midsole and the entire outsole. Navy blue covers the toe, heel, inner lining and above the midsole. Red accents appear on the tongue, toe, heel, lace panels and the midsole. The sneaker is constructed of perforated white leather with larger perforations placed on the side panels.

Hey Chris, Nice tutorial. Can you tell me what would be involved if I wanted a wordpress driven site, which isn't a blog (with comments, posts etc. possibly just a blog section on one page)? What would differ to the steps above?

Subscribe for email updates

About Line25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.