Line25

Building a Stylish Blog Design Layout in WordPress

Read the full post

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.

View the coding tutorial

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.

Collection of WordPress files

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.

/*
Theme Name: Chris Spooner V3
Theme URI: http://www.chrisspooner.com/
Description: Chris Spooner WordPress Theme Version 3.
Version: 3.0
Author: Chris Spooner
Author URI: http://www.blog.spoongraphics.co.uk
*/

At the top of the CSS file, you’ll need to specify some details about your theme in order for it to be detected by WordPress.

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.alignleft {
	float: left;
	margin-right: 15px;
}

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

View fullsize code annotations

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

View fullsize code annotations

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

View fullsize code annotations

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

View fullsize code annotations

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

View fullsize code annotations

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

View fullsize code annotations

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

View fullsize code annotations

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.

View the theme in action at ChrisSpooner.com

View the final theme in action

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

26 Comments

  1. Ben says:

    Really useful tutorial Chris, i'm looking to build a theme pretty soon and shall use this as a helpful guide.

  2. Tina says:

    Hey,

    thx for the tutorial.

    I have just one question: How did you make those handwritten comments on the screenshots? Special software or Photoshop?

    Cheers

    • Simple: Screenshot from Coda – Paste into Photoshop – Add text – Draw arrows!

      I wish I could say I use some super duper special software to create annotated code snippets… But I don't :-(

  3. Like this one, your posts are always super useful – thanks for taking the time to put them together :)

  4. Brussells says:

    Awesome Tutorial! Very informative and easy to follow. Thanks Chris.

    Live site looks great – personally prefer the beige rather than the grey but guess that's personal choice.

    • Brussells says:

      Ah – I could have sworn that was grey yesterday LOL. AH – just discovered my laptop shows it as grey more than beige. How bizarre!

  5. Peter says:

    Thanks for this tutorial.

    Why isn't the wordpress codex written as clearly as this…

  6. Andrew Searles says:

    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.

    • I always start with the HTML and CSS as static files then develop the theme from them yeah. I find this the easiest method but of course there's more than one way to skin a cat (or however it goes!)

      Starting with an existing theme is a great technique if you're new to WordPress, as you can see how the code works together with the HTML. I recently did this with my first Tumblr theme.

  7. Thank you soooo much for posting this

  8. Alisha says:

    You are AMAZING, thank you for this – love all your tutorials.

  9. Jake Mize says:

    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.

  10. Alex says:

    Great tutorial. Thanks for share.

  11. Philip Brown says:

    This has been a great series of posts. Not many other sites give you this broad overview of the entire process. You should do some posts like this as you are really awesome at explaining.

    How about designing and developing an ecommerce site for example?

  12. 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?

  13. fuzzimo says:

    Very well organized tutorials! Love the designs on all your sites.

  14. Calvin says:

    Thanks for the tutorial. I like this tutorial and have got many new things after reading this

  15. This is really helpful. Thank you!

  16. Arian says:

    You could add one more line to your functions.php file

    remove_action('wp_head', 'wp_generator');

    Good write up.

  17. Madhyam Tech says:

    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.

  18. Andy says:

    Really useful stuff, could have done with this tutorial when I first started looking at WordPress, thanks for the info!

  19. Tech Guy says:

    Great tutorial, great design as well. I think Ill give it a shot ..Thanks!

  20. Swat Chap says:

    very good wordpress tutorial! Thanks

  21. Great article but please guide how to create a Cms website in wordpress.

  22. ying says:

    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.

  23. Tom says:

    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?

Sorry, comments are now closed