Lab 12: WordPress Templates

We’ve talked about WordPress themes before. Today we go a little more in depth into wordpress templates, which are the heart of any theme.

Stepping Into Templates is an excellent introduction to WordPress templates. I advise you read it, and we will do some of the exercises in class. More advanced documentation can be found in the Theme Development page, and also elsewhere on the WordPress codex. I strongly advise you to use this powerful resource.

One way to think about template files is as black boxes, which need to be “opened up” when you have a problem, but otherwise stay safely closed behind the scenes. When you open the template up, each piece of it is also a black box: these pieces can either be ignored, or opened up themselves. Your main job will be to figure to which boxes you need to open, and how to find out more about each piece.

Templates

Finally, just a note on how pages are generated in wordpress out of templates. Quickly read this page on the wordpress website. Can you tell where the template divisions are in a page from our site? Try inspecting the sourcecode or (nuch better!) uing the Developer Toolsin your browser.

Templates are PHP

Templates are PHP documents. We have talked a little tiny bit about PHP, but not much. It is a language like other languages, but designed for the web. As a result, php files have a strange structure: they mix pieces of PHP code with pieces of plain HTML markup. So, you will see things like this:

Notice that this is a piece of plain-old HTML, except for a little piece of php embedded in it:

<?php if ( has_post_thumbnail() ) {the_post_thumbnail(’medium’); } ?>

All PHP code is contained in tags that start with <?php and end with ?>. This way, you can write your markup in HTML, and embed dynamic content using PHP.

Exercise

Create a new template file in the main directory of your theme (grunterie). Call it page-YOURNAME.php

Identifying your Templates

Every custom template you write should have a name, so that it can be used in the WordPress editor interface (and for other reasons as well.) The Template Name is stored as a special comment at the very beginning of the template file. It will look like this:

<?php

/*

Template Name: super Cool Design For Your Awesome Content!

*/

?>

Exercise

Add this text to your template

Adding the Basic Template Parts

Every page has three main areas: The header, the footer, and the content.

the header contains both the <head> element – with all the included CSS and javascript, metadata, etc. – and the opening <body> tag, as well as the header that you see at the top of every page.
the footer closes up the </body> and </html> tags, but before doing so, adds everything you want to put at the bottom of every page – the copyright notice, for instance, and in some cases navigation elelemtns or widgets.
the content contains everything else – all the complex layout that comes in between. For instance, it contains both the sidebar and the WordPress Loop.

To see how it works, Let’s make an ultra-simple template.

Exercise

Add some structure to your template by adding these lines:

<?php * first get the header * ?>

<?php get_header(); ?>

<?php * then get the sidebar * ?>

<?php get_sidebar(); ?>

<?php * finally get the footer * ?>

<?php get_footer(); ?>

Now, create a new page on your website (+ button in the interface) and assign in your template file. Make sure you type a title and some content. What does it look like when you “view page”?

Adding the Loop

You will only get your content to display by adding the so-called “loop”. Most of this is pretty dark magic (and some developers really hate WordPress because of this design!). It is, in fact, a “loop” in php – a while loop that repeats for as many posts as are intended to be displayed on the page (for us, it is almost always only one page, except when we build searches).

Exercise

Add this code to your template file:

<!– Row for main content area –>

<div class=“small-12 large-12 columns” id=“content” role=“main”>

<figure><a href=“<?php the_permalink(); ?>”><?php if ( has_post_thumbnail() ) {the_post_thumbnail(’medium’); } ?></a></figure>

</div>

<?php * Start ’the loop’, the mysterious wordpress magic * ?>

<?php while (have_posts()) : the_post(); ?>

  <article <?php post_class() ?> id=“post-<?php the_ID(); ?>”>

   <header>

    <h1 class=“entry-title”><?php the_title(); ?></h1>

    <?php reverie_entry_meta(); ?>

   </header>

   <div class=“entry-content”>

    <?php the_content(); ?>

   </div>

                        <?php $featured_img = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), ’single-post-thumbnail’ ); ?>

                        <?php if ($featured_img) { ?>

                            <div class=“lightbox-img featured-img-wrap”>

                              <a href=“<?php echo $featured_img[0]; ?>” rel=“lightbox”><img src=“<?php echo $featured_img[2]; ?>” /></a></div>

                        <?php } ?>

   <footer>

    <?php wp_link_pages(array(’before’ > '<nav id“page-nav”><p>’ . __(’Pages:’, ’reverie’), ’after’ => ’</p></nav>’ )); ?>

    <p><?php the_tags(); ?></p>

   </footer>

   <?php comments_template(); ?>

  </article>

<?php endwhile; // End the loop ?>

This is the main “loop” that grunterie uses for pages. Where should it go in your file? And what happens when you use it?

Template Tags

So, templates are combination of static HTML layout, and dynamic PHP-generated content. The PHP functions we use in templates are called template tags. There are hundreds of them, and most are listed here. We have already seen three of them in some detail: get_header(), get_footer(), and get_sidebar(). What do they do, and how do you think they work?

Three is one more important tag in the same category: get_template_part('partA', 'partB'). The syntax is described in detail in the Codex – can you find it? Can you read it?

Every template tag takes parameters – sometimes optional, sometimes required. THere is a lot more info here. It’s worth reading.

Exercise

Find the template tags inside the Loop. change some of them to display other information!

Designing Templates

You should be now have ideas for your layouts. We will spend the rest of class implementing them; I will continue to update this page with more details as it becomes clear what you need!