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
Templates are PHP
<figure><a href=“<?php the_permalink(); ?>”><?php if ( has_post_thumbnail() ) {the_post_thumbnail(’medium’); } ?></a></figure>
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
Identifying your Templates
<?php
/*
Template Name: super Cool Design For Your Awesome Content!
*/
?>
Exercise
Adding the Basic Template Parts
- 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
<?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
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
<!– 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
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.