Line25

Create a Typography Based WordPress Blog Theme

Read the full post

Over the past couple of weeks I’ve posted the design process of my latest WordPress theme. We’ve gone through the Photoshop design stage, the HTML5 and CSS3 coding stage and now we’ll go through the templating stage to finish off the Typo design as a fully working WordPress theme.

Typo WordPress theme demo

Revisit last week’s tutorial to see the coded prototype. Since that tutorial I’ve made a couple of little tweaks here and there, including support for Internet Explorer. If you’re new to the series the WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.

View the final WordPress theme demo

The WordPress template files

Being a pretty simple design we’ll be creating the theme with the usual group of template files. Our static HTML5 prototype file will be split up across these template files in order to create the various WordPress page types. All the image and CSS files are also copied over to the WordPress theme folder.

Style.css template file

The CSS styling from the static prototype is pasted into the WordPress style.css file, then a series of theme details are added to allow the theme to be recognised by WordPress.

Header.php template file

View the annoted code

The first portion of code from the prototype index.html file is copied into the header.php file. Everything from the Doctype to the end of the <head> is placed in the header.php file, then additional WordPress template tags are added to provide extra functionality or to replace sections of static code that need to be dynamic. Examples include <?php wp_title();?> to render the post or page title and <?php wp_list_pages('title_li=' ); ?> to display a list of all the pages. The title_li parameter removes the default setting that renders a “Pages” heading above the list.

Index.php template file

View the annoted code

The HTML code from where we ended with the header.php file is then copied right down to where the sidebar begins, then the WordPress loop is added to check for content. Our static HTML file includes three dummy posts, but these can be removed as WordPress will use the same layout for each post found using the code between the while and endwhile tags. Inside this loop the HTML structure still exists, but elements that need to be dynamic are swapped for the relevant WordPress PHP tag, for instance <?php the_permalink(); ?> will render the URL of the post inside the anchor and <?php the_category(', '); ?> will insert a link to the post’s category. All the dummy content from the HTML file can be swapped with just one tag: <?php the_content(''); ?>. WordPress will insert all the content saved in the database from the online editor in its place.
At the top and bottom of this file are calls to other template files in order to piece together a full page. <?php get_header(); ?> calls and inserts the header.php file while <?php get_sidebar(); ?> calls and inserts the sidebar.php file and so on.

Sidebar.php template file

View the annoted code

The next section of content from the HTML file is the sidebar area, between the two <aside> HTML5 tags. The same principle applies where any dummy content is swapped for a WordPress PHP tag to dynamically insert the content from the blog. Examples include <?php wp_list_categories(); ?>, with a series of parameters customising the layout. In this particular theme there’s a lot of custom tags used to allow the end user to personalise their theme using a special settings page. All the tags beginning with omr_ call for custom settings such as the About excerpt and social links. Check out BuildInternet’s handy guide to creating a custom settings page.

Footer.php template file

View the annoted code

The remaining code from the HTML file is then placed in the footer area. There’s no real dynamic elements in the footer, but an extra snippet of code that should be added is the <?php wp_footer(); ?> tag. This is where WordPress can insert any additional content from plugins, such as Javascript code.

Archive.php & Search.php template files

View the annoted code

View the annoted code

The main structure of the page is created using header.php, index.php, sidebar.php and footer.php, but the index.php file is only used on the homepage (if the homepage displays recent posts). Alternatives to the index.php file are used for different features of the blog, such as browsing posts based on a filter such as by category, by date or by author. Or when browsing posts based on a search result. This is where the archive.php and search.php files come into play. Their content is pretty much identical to the index.php file, except they have some additional titles to help describe the content that is being shown.

Page.php & Single.php template files

View the annoted code

View the annoted code

When a single post or page is viewed the index.php, archive.php or search.php files is switched out for either the page.php or single.php template files. These files are very similar again, but their layout often omits some features such as the anchor on the title, the post info, read more link and the pagination links as these are no longer required when the content is viewed individually. The single.php file also includes the comments section, which is called using the <?php comments_template(); ?> tag.

Comments.php template file

View the annoted code

The comments.php file is one of those files that you can re-use over almost every theme you make as it rarely changes. The whole comments list is created with one tag: <?php wp_list_comments(); ?>, then the actual content needs styling with CSS. The file then includes the comments form.

Finishing touches

Once all the template files have been created they can be installed and tested on a live WordPress blog. Now is the time to alter settings and add a range of content to test the theme works under a range of scenarios. I always create a post with a range of headings, blockquotes and lists to style up every potential piece of content.

The final theme demo

Typo WordPress theme demo

The whole process of building a theme basically involves pasting a bunch of template tags in between your HTML. Finding the correct tag to use is usually pretty simple thanks to the WordPress Codex which lists the the whole library of template tags available. Otherwise, using a blank dev theme can be useful so you can copy and paste snippets of code where you need them.

View the Typo WordPress theme demo

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.

  • http://theseopackages.com Sara

    Great tutorial, Nice to understand by beginer level.

    http:.//theseopackages.com

    • http://www.linetoweb.com Raj Mehta

      Nice tutorial

      thanks for sharing this

      :)

  • http://www.idesignit.co.il/ Elron

    Very good tutorial!
    helped alot.

    can you upload the theme download? (especially the comments.php)

    • http://twitter.com/chrisspooner Chris Spooner

      I'll be eventually posting it in the Access All Areas section of Blog.SpoonGraphics for members to download and use.

      • http://designwoop.com David

        I always enjoy reading your 3 part WP posts and I was going to suggest making them available for download – looks like your on it though :)

  • http://www.juliodinicola.es Julio Di Nicola

    Great tutorial for beginners… A nice way to understand WordPress basics

  • Janoo

    cool and great effort……..

  • http://designi1.com José Pacheco

    you´ve a nice hand type! :D great tut… as others said is way easy to undestant the basis of wp.

  • http://www.usanetsolutions.com/ Alicia

    Beautiful tutorial! Very easy to understand and helpful.

    <a href=”http://www.usanetsolutions.com” title=”Miami Web Design”>Miami Web Design</a>

  • fab

    I tried but i can't link my templates to my stylesheet !
    I would be happy to have the source file of the header !

  • tyrone

    There are load of errors and problems with this Chris, I think you need to take a look at the files and do an update.

    Search don't work properly, footer is missing, you've got div footer_container is your html. css files but it's missing in this post.
    Though i'd give you the heads up, otherwise a nice post as usual.

  • http://numismatechnologies.com/ Numisma Technologies

    This is very useful information for all the computer users and i think we can learn a lot from it. Thanks for sharing.

  • http://twitter.com/joelcarr Joel Carr

    This is exactly what I have been needing! I thank you Chris for the very well written free tutorial.

  • pip0

    we need a joomla template tutorial :P
    Nice work…i like it

  • http://www.yourdigitalspace.com Swamykant

    Simple and easy to follow tutorial. Nice work.

  • http://www.mjcreations.co.uk Mark

    Thanks for this series of tutorials, helped me learn a thing or two!

  • http://cobases.com Michael

    Currently I am trying to create and modify some wordpress themes but I can say that it looks easy only on paper.

    Ok, modification of themes to adjust to your needs is simple but starting from almost ground zero is really difficult if you plan to get "premium" look for your design. But everyone have to start from somewhere, and it's my start

  • http://webdevelopergeeks.com webdevelopergeeks

    Nice tut for beginners. You made it ridiculously easy. Keep it up.

  • http://www.charmhandbags.com chanel

    Good tutorial. Thanks for sharing such instructive information.Nice job.