WordPress Theme Development: Template Tags

This tutorial gives you an insight into which files you need to create and how to use  the template tags to build a dynamical website with WordPress.

WordPress Themes consist of a number of files that were created with so-called template  tags. The files work together to build the layout of a WordPress site. The template tags are based on PHP but much easier to use. With these template tags you can achieve interaction with a server where the content for the website/blog resides.

Template files

Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates files (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.

When designing a static website, a different file must be created for each page. Within these files, the header, content, sidebar, and footer are all present. WordPress differs from this in that each section of a WordPress web page is contained within its own template file. WordPress then assembles each of these pieces on the fly to generate a complete web page.

In the previous WordPress Theme Development tutorial you already learned about the role of ‘style.css’ in WordPress. Not only does ‘style.css’ contain the CSS-rules. But it is also the first theme file: WordPress doesn’t recognize a theme without a proper ‘style.css’.

A theme also needs at least an ‘index.php’ file. This file usually contains the loop. The loop is the heart of WordPress. It checks if there are any posts (in the database) and if there are will display those posts. While you can have a theme without the loop, it would make the fluidness of the content handling quite difficult to pull off.

Other common files are:

  • sidebar.php, which holds the sidebar content,
  • header.php, for your site’s header, and
  • footer.php, for your site’s footer.
A theme can also consist of a set of files with a (slightly) different structure. Take the Twenty Eleven theme for instance. In the Twenty Eleven theme you have an ‘index.php’. But the ‘index.php’ does not contain the (entire)loop. Most of the loop in the theme can be found in the file ‘content.php’. The ‘index.php’ contains a statement which calls the ‘content.php’ to output the posts with a loop.

You may also have:

  • single.php for single post view, and
  • page.php for static WordPress pages, and maybe
  • search.php for search results, along with
  • comments.php for comment functionality, and
  • category.php for your category listings.

The files mentioned above can all be found in the ‘wp-content’ directory and are all part of what makes up a theme. They do not belong to the WordPress core. The WordPress core or system files can be found in the directories:

  • wp-admin,
  • wp-includes, and in the
  • root directory (= ‘htdocs’ directory if you installed WordPress on your computer with Bitnami).

It’s important to realize that when you are working on WordPress theme development every file you need will be in the ‘wp-content’ folder. If you have one theme or a lot of themes they will all be located in the ‘wp-content/themes’ folder.

Additionally, when you begin to upload media to your website, the wp-content/uploads directory (or some form of it) will automatically be created, and will house all the media on your site.

The only two files in the root directory that are user manageable files are ‘wp-config.php’ and ‘.htaccess’ and we’ll leave the roles of these two files apart for now.

PHP and template tags

WordPress web pages are different from static web pages. In WordPress pages the content is not part of the web page but is retrieved from a database. WordPress uses template tags to retrieve the content from the database. Template tags are placed in various locations in template files. The locations for these template tags are where hardcoded content would normally appear. When you open a static web page you will see a mix of html and content. If you open one of the WordPress theme files mentioned above (e.g. index.php or header.php) you will find a mix of html and template tags. In the beginning this takes some getting used to.

Examples of template tags are:

You can recognize template tags because they start with .

The first is an example of a so-called include template tag. When you see get_header() in the file ‘index.php’ it means that the contents of the file ‘header.php’ will be output at that location.

The second example is used to output the name of the blog. Instead of the name we could also output the URL of the blog.

Which parameters can be used with a given template tag can be found in the codex. This is the WordPress library where can find important information if you are developing WordPress themes. Not the most inviting stuff to read but necessary if you want to check which parameters can be used with a tag, etc.

Another example of template tags is:

This is an example of a so-called conditional tag. This example is used in the WordPress loop to display posts. The template tag start with an if-statement: it’s checking to see if there are any posts. If there are posts a while-statement kicks in. A while-statements repeats a certain code (= function) as long as certain conditions are met. The condition here is that there must be another post. If there is another post than the function ‘the_post’ is fired.

You will find the conditional template tag at the beginning of the loop. Stripped back to its basics, the Loop generally looks like this:

When the while loop is done (all posts that should be returned have been output), it ends with endwhile, and then the loop ends with endif. Should there be no posts that match the criteria of the particular situation, the else clause is called. That usually is where an error message will be shown.

Some template tags can be used everywhere. Others can only be used inside the loop.

Template tags and parameters

Some template tags take one parameter. Others will take none (e.g. the_permalink() ). And some template tags take multiple parameters.

These parameters can be found inside the parenthesis:

  • If the parameter is a string (= bit of text) it’s passed within single or double quotation marks (e.g. ‘name’ for the bloginfo template tag).
  • If the parameter is an integer (e.g. 3000 or -3) you do not need to use quotation marks.
  • Boolean values (meaning they can either be true or false) can not be passed inside quotation marks.

Below you can see some examples:

The first template tag (get_sidebar) is another example of the so-called include tags. The parameters positions the sidebar on the left.

The second template tag will output a tag cloud with the unit for the font set in pixels and the tags ordered by a count of the number of posts that have this post attached to it.

The third example causes the calender to display the day as an abbeviation instead of with just one letter (“Sunday” to be displayed as “Sun”; true causes it to display as “S”).

When multiple parameters are passed they can be separated by an ampersand (&):

But you will also find template tags with parameters separated by commas (,):


The first example is an example of what is often referred to as query-style paramets. This means that the order of the parameters is unimportant and we use ampersands to separate them.

The second is an example of what is often referred to as a function-style parameter. You can recognize them because commas are used to separate the parameters. Here the order is essential and you need to take care that missing a parameter can change the meaning of the other parameters:

In the example above the first parameter will have the effect that the text “Tags:” will be put before the actual tags. If you forget the first parameter then the second one will be used as text before the tags (in this case you would see a comma before the tags). And the third parameter passes after the last tag (having the effect here that you will get a line break after the last tag).


Sometimes you’ll see __() around parameters in the code, or perhaps _e(). These notations are for localization purposes, and help the software find the strings that can be translated. They are always within PHP tags. So if you write this means that the text “This can be translated” can be translated with the use of language files. Language files can be found in a subfolder ‘languages’ of a theme.

Well that is enough theory. In the next tutorial about WordPress Theme Development you will learn to develop a WordPress theme from scratch. Starting with an HTML page and CSS stylesheet I will show you how to convert this into a working WordPress blog theme. In that post I will provide links to the codex for quick reference to the tags that will be used.

For the posts about WordPress Theme Development I made use of several books. If you want to further your understanding of WordPress and how to develop WordPress themes I particularly recommend these books:

  • WordPress theme design – by Tessa Blakeley Silver
  • Smashing WordPress, beyond the blog – by Thord Daniel Hedengren
  • The WordPress Anthology – by Mick Olinik & Raena Jackson Armitage

Add your comment