Website development and design blog, tutorials and inspiration

Creating WordPress Themes

Build your own WordPress theme with ease

By , 22nd January 2011 in PHP

If you're proficient at using CSS and HTML, and are comfortable with a bit of PHP, it's not all that hard to build a custom WordPress theme.
 

WordPress themes have several components, some are required while others are optional.

The required files are style.css which contains all the themes style sheets, but also serves to identify the theme. The other required file is functions.php which contains all the themes custom PHP codes.

Bare minimum theme

At a bare minimum, you should create a theme folder, which contains the above two files. You should leave functions.php as a blank file, and in the style.css file, add the following lines.

  1. /*
  2. Theme Name: Test Theme
  3. Author: Tim Trott
  4. Author URI: http://timtrott.co.uk/
  5. Description: Test theme for tutorial
  6. Version: 1.0
  7. */

Upload these two files to your /content/themes, and create a folder for your theme.

In WordPress you can now activate your newly created theme. When viewing your site, you'll note that it looks like the default twenty thirteen theme. This is because themes inherit from the base twenty thirteen theme. Your new theme will replace the header, footer, sidebars content and CSS as required, and if you don't it will use the default file.

When creating your theme, the following files are some of the files that you can create to hold your custom theme, or you can copy them from the twenty thirteen theme and modify as required.

  • index.php - The core file that loads your theme, the header, the footer, the sidebars and archive templates. It also acts as the homepage if you have not set a static page.
  • header.php - Contains the header of your site and usually the navigation menu
  • footer.php - Contains the site footer, copyright information, scripts and so on
  • sidebar.php - Contains the sidebar content and widget areas
  • single.php - Template for viewing a single post
  • page.php - Template for viewing a single page
  • archive.php - Template for viewing archives, such as date based listings and category listings.
  • search.php - Template for search results
  • comments.php - Template for listing comments and the comment form
  • 404.php - Template for displaying the 404 - Not Found message

In addition to these files, there are several more specific file that are optional and used only if they are present. If they are not present, then one of the files above is used instead.

  • home.php - The homepage template, uses index.php if not specified.
  • single-{post_type}.php - template for viewing a custom post type, uses single.php if not specified
  • page-{slug}.php - Template for a specific page slug, uses page.php if not specified
  • page-{id}.php - Template for a specific page id, uses page.php if not specified
  • category-{slug}.php - Template for a specific category slug, uses category.php if not available
  • category-{id}.php - Template for a specific category id, uses category.php if not available
  • category.php - Template for category listing, uses archive.php if not availabe

The same rules apply for tags, taxonomy, authors and so on. The full list can be seen on the WordPress codex site.

Structure of a Theme

If you are not familiar with the layout of a HTML document you may find the article on the anatomy of a web page helpful.

Each of the themes files contains the HTML content and structure, while the style.css contains the presentation. The theme files also use PHP for dynamically generating content as well as certain template tags. These template tags are PHP functions built into the WordPress core which output specific aspects of the site, from a post title to the comments form.

Page Structure
Page Structure

Common Template Tags

Here is a list of common template tags that can be used in your template.

  • home_url() - Gets the url of the website homepage.
  • single_post_title() - Gets the post or page title
  • single_cat_title() - Gets the category title
  • category_description() - Gets the category description
  • get_permalink() - Gets the current post hyperlink, you can specify a post id to get the url for that post instead.
  • the_content() - Gets the post content
  • the_excerpt() - Gets the psot excerpt / introduction
  • is_single() - Conditional tag which tests if the current url is a post. You can specify a post ID to test if the current page is the specified page.
  • is_page() - Conditional tag which tests if the current url is a page. You can specify a post ID to test if the current page is the specified page.
  • is_search() - Conditional tag which tests if the current url is the search results listing.
  • is_archive() - Conditional tag which tests if the current url is a page is the archive page
  • is_category() - Conditional tag which tests if the current url is a category listing

The full list of template tags can be found on the WordPress codex site.

The Loop

One of the core sections of code you will encounter when developing themes is that of "The Loop". In its most basic form, the loop will loop through all posts matching the criteria of the page being viewed. It could be a date based listing, a category listing or a single post or page. They all come from the loop. The loop generally goes in the index.php file.

The basic loop looks like this:

  1. if (have_posts())
  2. {
  3. while (have_posts())
  4. {
  5. the_post();
  6. }
  7. }

Based on this you can use template tags to test various conditions and output as required.

A more complex loop example looks like this:

  1. <?php if ( have_posts() ) : ?>
  2.  
  3. <?php twentyeleven_content_nav( 'nav-above' ); ?>
  4.  
  5. <?php /* Start the Loop */ ?>
  6. <?php while ( have_posts() ) : the_post(); ?>
  7.  
  8. <?php get_template_part( 'content', get_post_format() ); ?>
  9.  
  10. <?php endwhile; ?>
  11.  
  12. <?php twentyeleven_content_nav( 'nav-below' ); ?>
  13.  
  14. <?php else : ?>
  15.  
  16. <article id="post-0" class="post no-results not-found">
  17. <header class="entry-header">
  18. <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
  19. </header><!-- .entry-header -->
  20.  
  21. <div class="entry-content">
  22. <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
  23. <?php get_search_form(); ?>
  24. </div><!-- .entry-content -->
  25. </article><!-- #post-0 -->
  26.  
  27. <?php endif; ?>

This is actually the lop from the default twenty thirteen templates.

The first line tests to see of there are any posts to show. If there are no parts, then a message is shown stating that nothing was found. This is the basic 404 page.

If posts are found then we hit the loop itself which calls the_post(). This function sets up the post data and loads all the information about the post into a variable called $post. Within the loop, the function get_template_part is called, which in turn loads in the appropriate theme file (single.php, page.php, archive.php etc...)

By investigating the default templates you should now be able to start customising your theme and make your website look unique.

Remember: Do not alter any of the core files, or the files within the default themes as any changes will be overwritten when you update WordPress to a newer version.

Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.