WordPress Templates

WordPress Bare Bones Theming Exercise

This exercise will demonstrate a number of important WordPress features, including

  • the WordPress template hierarchy
  • common template tags
  • the loop
  • conditions in WordPress
  • get_template_part

We will take a simplified approach, in order to get the broadest sense of how WordPress themes work and not get bogged down in too many details.

Some Sample Content

First of all, please download this zip archive. When you unpack the ZIP file, you will find a Duplicator installer and archive combination, and a single screenshot file.

Copy the installer and the archive from inside the DuplicatorPackage folder into your MAMP htdocs folder. Put them in a folder called iwillmakeatheme.

Then start up MAMP and make a new database called iwillmakeatheme.

Go to the root level of your local server (localhost:8888 on Mac), click the iwillmakeatheme folder and then run the Duplicator installer.

As part of the installation process (step two or three), create a new ADMIN account with your name as the user and password (for ease of recollection. This is just a lab exercise, so we are not worried about a site being hacked here).

Once you get through the Duplicator site installation, go to the front of your site. Viewing the content in the twentysixteen theme (the only theme included in this Duplicator package), you will see that you have a bunch of posts, mostly with lorem ipsum text, but with feature images, different authors, tags, categories, etc.

Theme Content

Create Your Theme

Inside the wp-content/themes folder inside your iwillmakeatheme installation, create a new folder. Name it iwillmakeatheme.

A basic WordPress theme requires only two or, arguably, three files.

The first of these must be called style.css(note that the name is not plural).

Inside that file add the following at the top, including the comment tags:


/*
Theme Name: I Will Make A Theme
Author: your name...
Description: A theme I am building to learn about theme building.
*/

Make Some Basic Template Files

One of the main reasons for the existence of Content Management Systems like WordPress is that they cut down on a lot of repetition. 

For example, the header and footer of most websites often don’t change at all. So, make three new files: 

  • header.php
  • footer.php
  • index.php

Inside header.php, add the following:


<?php ?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
  </head>
  <body>
  <div class="page-content">

Inside footer.php, add the following

<?php ?>

</div> <!-- end .page-content -->
<footer>
  <small>Site by insert-your-name</small>
</footer>
</body>
</html>

Apart for the opening PHP tag in each file, what’s clear if you look at them is that the two files together make a complete HTML document.

In other words, some of the tags that are started in the header file (html, body, .page-content) are not closed until the footer file.

The Index Template File and Our First WordPress Loop

Now make another template file called index.php

Inside that file, add the following:

<?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(); 

This is obviously a more complex file than the previous ones we’ve made, but what’s happening here is that when the user goes to a page that uses the index.php file (a process determined by the wordpress template hiearchy), the server starts building an html page to send to the user’s browser.

  • The first instruction in this template file ( get_header(); )is to put the contents of the header.php file into the html file being created.
  • The last instruction ( get_footer(); ) is to put the contents of the footer.php file into the html file being created.
  • Between the header and the footer in this template file is the most important code in a WordPress template: the loop.
  • The loop firsts asks the database: do we have posts? What comes next depends on the answer.
  • If we do have posts, the next code starts outputting them until there are no more left.
  • If we don’t have posts, the message “Sorry, no posts matched your criteria” is output to the file.

Make sure all your files are saved. Now activate your theme (in the Dashboard: Appearance > Themes).

Go to the front page of your site. You will see either a blank page, an error message, or a bunch of posts (with no images, authors, categories, etc yet, but that’s coming).

If you are not seeing a bunch of posts, check that all your files are saved, that they have the correct names and extensions, and that the syntax is exactly the same as shown above.

If you do see posts, congratulations: you’re ready for part two of this exercise: common template tags.

Standard