WordPress Underscores & Basic Loop Exploration

Basic Setup

For this exercise, we will learn about the WordPress Template Hierarchy, the WordPress Loop, and some basic WordPress template tags.

First of all, please download this zip archive. Inside it you will find a folder of screenshots and a folder with a Duplicator installer and archive combination.

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

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

Go to the root level of your local server (localhost:8888 on Mac), click the themingbasics 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).

Download A Starter Theme

Go to https://underscores.me, fill in the form, and download a starter theme. In the ADVANCED options section, click on SASSIFY! if we have covered SASS in class. Otherwise, leave it unclicked.

Install the theme into wp-content/themes.

Now activate the theme in the WordPress dashboard.

Go to the front page of your site. What you will see is that the underscores-based theme you just created has all of the functionality you would expect from a modern WordPress theme, but none of the styling.

The idea here is that you will build your own styling onto the starter theme rather than spend time overruling someone else’s styling decisions.

Set Up Netbeans

Explanations of how to use Netbeans with WordPress are here.

The WordPress Template Hierarchy

When a user goes anywhere in a WordPress site, the URL determines which theme file will be used to generate the page.

This is what is meant when people speak of the WordPress Template Hierarchy. For more information, consult these links:

• The WordPress Template Hierarchy Documentation
• The WordPress Template Hierarchy Infographic

A useful tool for a WordPress developer is the Show Current Template plugin. It will show in the Admin menu bar which template files are involved in generating the current page.

In a nutshell, if a particular template file is available, WordPress will use it. If it is not available, it will use the next available file. The second link in the list above makes evident all of the possibilities in an easily understandable infographic.

For example, looking at that infographic, we learn that when the user clicks on any archive content (author link, tag link, category link, date link, etc), any number of files could be used to generate the content.

The key here is specificity. If we click on a link to an author’s posts (me, for example), a slightly simplified hierarchy is like this:

1. author-nicename.php
2. author-id.php
3. author.php
4. archive.php
5. index.php

Going in order, WordPress will use the first template it finds in the theme. If author-kevin.php exists, that file will be used. If not, it will look to see if author-5.php (assuming Kevin is author number 5).

Otherwise, it will use author.php.

But if author.php is not in the theme, then archive.php will do it, if it exists.

Finally, if no more specific template file exists, WordPress will use index.php to generate the page. In this way index.php is the template file of last resort. 

You could, in fact, make a basic theme with just three files:

• index.php
• styles.php
• functions.php

Add A Couple More Theme Files

Let’s add a couple more files. Technically speaking, these are not necessary, but I like to leave the index.php file untouched.

In your underscores starter theme, create a new file called front-page.php and home.php.

If we have a static home page (specified in Settings > Reading), it will be generated by front-page.php, while the blog posts page will be generated by home.php

Into it, copy the following code. You can remove anything that was put there by default by your editing program (such as Netbeans).

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

Now go to the front page of your site.

What we are going to do is build on this loop in class in order for you to get comfortable with how WordPress pulls content from the database and displays it in the browser.

The template tags we will use will be these (and perhaps a few more):

• the_title();
• the_feature_image();
• the_tags();
• the_category();
• the_excerpt();