Before we get into building templates, let’s come face to face with the one thing we can’t get around — PHP. Rest easy: the PHP used in theme development is not the whole programming language, just a small part. Today we learn only four things.
PHP is an “insertion tag into HTML”
A WordPress template file is HTML with tags planted in it that say “insert WordPress data here.” Those tags are the PHP tags.
<h1><?php bloginfo('name'); ?></h1>The range from <?php to ?> is the tag. This example means “insert the site name here,” and when displayed it becomes <h1>Shimaenagado</h1>. Outside the tag it’s 100% ordinary HTML — so anyone who can write HTML can already write 90% of a template.
Thing to learn 1: echo (display)
echo is the command “output this to the screen.”
<p><?php echo 'Hello'; ?></p>
<!-- Output: <p>Hello</p> -->Ending a statement with ; (a semicolon) is a PHP rule. It’s the same feel as JavaScript.
Thing to learn 2: calling functions (asking WordPress)
The star of theme development is the functions (sets of commands) WordPress provides from the start. You call them in the form name().
<?php bloginfo('name'); ?> <!-- Display the site name -->
<?php the_title(); ?> <!-- Display this post's title -->
<?php the_content(); ?> <!-- Display this post's body -->
<?php echo home_url(); ?> <!-- Give me the top page's URL (display with echo) -->It’s the same form as calling console.log() in JavaScript. You could even say theme development is the work of placing WordPress functions inside HTML.
Thing to learn 3: if (only when it exists)
This is a conditional branch, like “display only when there’s a post.” In templates, we often use a special way of writing that lets you sandwich HTML in between (colon notation).
<?php if (have_posts()) : ?>
<p>There are posts</p>
<?php endif; ?>The range from if (condition) : to endif; is the “only-when-it-exists zone.” The idea is the same as JavaScript’s if; only the way of wrapping has become template-friendly.
Thing to learn 4: while (repeat for as many posts as there are)
On a list page, you repeat the same HTML for as many posts as there are. That’s while. In a WordPress theme, this set of stock phrases is called the Loop.
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
</article>
<?php endwhile; ?>The meaning is “while there are posts (while), pick up the next post (the_post), and output the HTML inside.” If there are 5 posts, <article> is output 5 times. You’ll write this stock phrase over and over in the coming lessons, so even if you don’t memorize it now, your hands will pick it up on their own.
A quick-reference table of the four
Hearing “four things to learn” makes you brace yourself, but each way of writing is short.
| What you want to do | How to write it |
|---|---|
| Display a value as is | <?php echo value; ?> |
| Call a WordPress function | <?php functionName(); ?> |
| Show different things by condition | <?php if (condition) : ?>…<?php endif; ?> |
| Repeat for as many posts as there are | <?php while (have_posts()) : the_post(); ?>…<?php endwhile; ?> |
Almost all the code that comes up in the coming lessons is a combination of these four patterns. When in doubt, come back to this table.
Summary of this lesson
- The PHP tag
<?php ?>is an insertion tag into HTML — outside the tag is ordinary HTML - The tools to learn are just four: echo, calling functions, if, and while. The star is the functions WordPress provides
if (have_posts()) : while (have_posts()) : the_post();— the Loop is “a machine that repeats for as many posts as there are”