WordPress Templates

WordPress Bare Bones Theming Exercise: Common Template Tags

When we ended part 1 of this exercise, we saw a bunch of posts output to the screen.

Now inspect that page and make sure that the entire HTML skeleton is being output. In other words, make sure that the HTML HEAD is output at the top and that the closing tags are at the bottom of the document.

In this part of the exercise, we are going to edit our template files in order to grab more information from the site database and output it in appropriate places in the page generation process.

Header.php

First, let’s edit header.php.

We’ll begin by making the title of all pages show the name of the page, followed by the name of the site. In a few classes from now, we will cover a better but more complicated way to do this, but we’re aiming for simplicity here in order to get used to a number of WordPress theming idioms.

In between the TITLE tags, add a call to the wp_title function and the bloginfo function:

<title>
<?php wp_title(' | ', true, 'right'); bloginfo('name'); ?>
</title>

There are three lines in the above snippet. Lines 1 and 3 are HTML; line 2 is PHP, so we need to include the opening and closing tags for PHP there. We will do a lot of this jumping in and out of PHP to make themes. In the order the three lines appear here:
we start the title, dynamically retrieve information from the database, then close the title.

Because we will do this process differently in a few classes, I don’t want to spend too much time on it, but in a nutshell, the wp_title() function is retrieving the title of the page, while bloginfo(‘name’) is returning the name of the site. With wp_title, the first parameter we pass to it is the separator that will appear between the site title and the page title ( | ). The second parameter determines whether the function displays the site name or just returns it (for use in further programming). The third parameter controls whether the site name appears to the right or to the left: it’s better on the right, so that the page name is completely visibile in a browser tab.

The bloginfo function can retrieve a lot of information from the Settings and User Profile areas of the dashboard. For more information on the parameters you can include in the function, consult the WordPress developer site page on bloginfo.

Test your site. The site name should now be the page title (again, this is not ideal, of course, because all page titles will be the same. But it’s OK for now.)

Now let’s add the site name and site description to a header area in the header.php file. After the opening BODY tag and before the opening .page-content DIV, add the following:

<header>  	
<h1 class="site-title"><?php bloginfo('name')?></h1>
<div class="site-description"><?php bloginfo('description'); ?></div>
</header>

Here we see another parameter (description) we can pass to the bloginfo function. Test your site: you should now see the name and description output to the page, wrapped in semantically appropriate tags.

Finally, let’s add something very useful to the opening of the BODY tag:

<body <?php body_class(); ?>

Test your page. Now either Inspect the page, or view the Page Source. Notice all the classes that are now on the body tag? When we go to different parts of the site, those classes will change. They will reflect what part of the site your are on.

This will be invaluable when we write the CSS for the site.

Footer.php

Now we’ll edit footer.php.

In between the opening and closing footer tags, insert the following:

   <small>Copyright &copy; 2012-<?php echo date('Y'); ?> <?php bloginfo('name'); ?></small>

What are we doing here? Dynamically inserting the year, so that our copyright notice will always start with the year our site (theoretically) started and continuing into the present year. Then we again retrieve the name of the site. The reason we have two separate PHP operations here is that I wanted to have a space between the year and the site name (not the only way to do it, but it works…).

So why don’t we hard code the site name and descriptions in the above? We could, but if we changed either in the WordPress dashboard, we would then need to change the theme files.

Major Edits: Index.php

We learn in HTML classes that a file called index.html will load automatically when our URL ends at its parent directory.

The index.php file in WordPress can work like that, but it actually does more. Specifically, it is an all-purpose kind of file. It might generate the home page. It might generate all of them. It might not generate any (if there are more-specific template files in the theme). This is determined by the WordPress template hierarchy. We will examine the hierarchy more shortly. At this point, though, index.php will be generating all of our content regardless of where we are on the site..

Here’s our index.php starting point again:

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_footer(); 

To this, add the_title, the_post_thumbnail, the_author, the_category, the_tags, and the_date WordPress functions:

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    	
    	the_title();
    	the_author();
    	the_date();
    	the_post_thumbnail();

        the_content();
        the_category();
        the_tags();

    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_footer(); 

Test the page. Eureka! Tons of information pulled from the database with very little effort. Each post now has seven distinct pieces of content we can use in our page.

Is it pretty yet? No.

Do have a way to make it pretty? Yes.

It’s called HTML and CSS.

Each of these functions can be looked up in the WordPress codex or developer area. It’s as simple as googling them.

the_category()

To start, let’s google the_category(). The first page that comes up in the search results is probably to the WordPress codex. Reading that page, we learn that category links are placed in an HTML LIST by default. Looking at our generated page confirms that.

However, if we pass a separator character to the function, the post’s categories will be separated by that character (put on a single line rather than being put into a list). So amend the call to display the category as follows:

 the_category(' ');

Here we use a space, but we could use commas, bullets, special characters, etc.

If we test the page, we will see that the Category is still a link, but it is no longer marked up as a list.

Go into the Dashboard and edit the first post in the posts area. Put it into another category. Now, when you test the page, you will see both categories, separated by a space.

the_tags()

Similarly, we will google the_tags().

IF we go to the WordPress Codex page link that is returned by google, we will learn that the_tags() can take three parameters as arguments: $before, $separator, and $after.

To demonstrate what these do, change the_tags in your index.php template file to the following, adding two of those parameters separated by a comma:

the_tags('Posted in ', ' | ' );

Or, if you want to get adventurous, slip in some HTML to the_tags() function.

the_tags('<ul><li>','</li><li>','</li></ul>');

That will output your tags in an unordered list. The first parameter comes before the outputting of the tags: it opens the list and then starts the first list item. The next parameter, the separator, comes first between tag1 and tag2 and then between each tag thereafter: so it closes the first list item and opens the next one (and so on). Finally the last parameter comes after the last tag: it closes both the final LI and the UL itself.

Standard