How to Build a WordPress Theme Part 4 – Conditional Tags

How to Build a WordPress Theme Part 4 – Conditional Tags

WordPress Theme Building Course!

This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.

full course
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion

If you think about it, the WordPress Template Hierarchy we’ve discussed in previous lessons works just like a conditional statement in a programming language.

Screen Shot 2014-01-26 at 7.16.03 PM

“If the web page being loaded is a single post, load the single.php template file.”

Simple stuff. The thing to understand is that this logic doesn’t stop at the template level when building WordPress themes.

You can also use this kind of logic inside of your template files with a massive list of predefined conditional tags built into WordPress known as WordPress Conditional Tags.

Let’s have a look at an example from Underscores.

Only Show Excerpts for Search Results

Go ahead and open up your content.php file. Remember, the files that start with “content” in Underscores are used to separate the HTML content from the WordPress-recognized template files of the theme. This is done for organizational purposes.

single.php calls content-single.php. Likewise, page.php calls content-page.php.

However, there are times where general HTML content is needed but it’s not specific to any one template file. That’s what the content.php file is for. Your index.php file, which is used on the main blog listing, uses get_template_part() to call content.php, for example.

In most WordPress themes, the main blog listing displays very similar to search results, right? So really, even though your theme has an index.php for the blog listing, and a search.php for the search results, the HTML “guts” of both can share the standard content.php file… which is what Underscores does.

That makes perfect sense and it keeps things organized. It also minimizes files and reduces the size of your theme while increasing efficiency.

But it’s safe to say that there will be times when you want your blog listing and search results to be just a little different. Say, for instance, you show full length posts on your blog home but you’d only like to show excerpts on your search results. This is exactly what Underscores does, once again.

Instead of creating two different “content” files for index and search, a WordPress Conditional Tag is used inside of the content.php file to serve different results based on which template file is using it.

Here’s a slightly modified (for clarity) section of the Underscores content.php file.

content-condition

What you see is a WordPress Conditional Tag used as a condition in an if statement.

is_search() is the conditional tag. All it does (in this context) is ask if the page WordPress is currently serving to the user’s browser is a search results page. And if it is, do something. In this case, display the post excerpt the_excerpt() wrapped in HTML.

However, if the page being served is not a search results page then the is_search() condition is not met and whatever else is using this content.php file can go ahead and display the full post content the_content() wrapped in HTML.

To sum all of that up one more time, let’s look at exactly how WordPress describes its conditional tags.

The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches.

It doesn’t get any more logical than that. Combined with the template hierarchy, WordPress allows you to organize your theme files even more with easy-to-use conditional tags.

Using WordPress Conditional Tags on Your Own

Here’s a complete list of WordPress Conditional Tags.

For each one that you see, like is_page() or is_category(), you can make them even most specific by using parameters for specificity.

For example, let’s say you wanted to remove the entire page title from one particular page on your WordPress website using your theme. From what we’ve learned in previous lessons, we know that when WordPress loads that page in our browser, it’s going to use the page.php which will call on the content-page.php for the HTML structure of the page content. So that’s the file we need to modify.

The first thing we’d do in the content-page.php is locate the page title.

<img data-attachment-id="350" data-permalink="http://buildwpyourself.com/build-wordpress-theme-part-4-conditional-tags/page-title/" data-orig-file="http://buildwpyourself.com/wp-content/uploads/2014/01/page-title.png" data-orig-size="532,85" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":""}" data-image-title="page-title" data-image-description="" data-medium-file="http://buildwpyourself.com/wp-content/uploads/2014/01/page-title-300×47.png" data-large-file="http://buildwpyourself.com/wp-content/uploads/2014/01/page-title.png" src="http://buildwpyourself company website.com/wp-content/uploads/2014/01/page-title.png” alt=”page-title” width=”532″ height=”85″ class=”aligncenter frame size-full wp-image-350″ srcset=”http://buildwpyourself.com/wp-content/uploads/2014/01/page-title.png 532w, http://buildwpyourself.com/wp-content/uploads/2014/01/page-title-300×47.png 300w” sizes=”(max-width: 532px) 100vw, 532px” />

The problem is that if we simply decided to remove the entire H1 line from the file, every single WordPress Page in our theme would lose its title. That wasn’t the goal. We wanted to target one specific page.

To do that, we need to create a condition that targets one specific page and there are a number of ways we can do that. Check them out here in the WordPress Codex.

The two most common ways to make a basic conditional tag more specific is to use the Post ID or slug of that particular page/post. So if you’re trying to remove the title on, for example, your “About” page and you set that page’s slug to “about,” you can now use that slug in your condition like so: is_page( 'about' )

Brilliant! Now you have a condition that is specific to one particular page (considering no two pages can share the same slug).

In your content-page.php file, you are now free to wrap your page title in a condition.

To do that, we need our condition to basically say, “as long as the page being loaded is not the page with a slug of ‘about,’ go ahead and output the page title.”

Notice the logic I used there. I didn’t ask if a condition was met. I asked if a condition was not met. That’s where we get to use a cool little piece of PHP functionality in our theme. Stick with me here.

! can be used immediately before a WordPress Conditional Tag to reverse the logic. While is_page( 'about' ) means that page is being served, !is_page( 'about' ) means that page is not a page being served.

Here’s the modification in action.

page-title-condition

If the condition is met, which means the page being loaded is not the about page, the page title will be display. If the condition is not met, which means the page being loaded is the about page, the page title will not be displayed.

Seeing the Big Picture

Take more time to review the WordPress Conditional Tags list. Notice all of the possibilities.

Also, look through the Underscores template files for more examples of these conditional tags in use.

An obvious spot is in your archive.php file. There are many different types of archive listings – by author, by date, by category, by tag, etc. Instead of having separate files for all of these different types of archives, they all share the archive.php file.

Keeping that in mind, also consider the fact that you need to display on the archive listing what kind of archive it is… especially if we’re talking about an author archive, of which there could be many depending on how many authors a blog has.

Since the archive.php file is shared, but the type of archive being displayed can be different and its necessary to output that difference to the screen, the archive.php has a massive if statement towards the top of the file to output an archive title at the top of the page letting the users know what kind of archive they are viewing.

Take a look at it for yourself and see if it makes sense to you. If not, read this lesson one more time.

WordPress Theme Building Course!

This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.

full course
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion
4 Comments:
  1. Thanks again, Sean. This and the videos on youtube are an amazing and easy to follow explanation of how everything works. I’m way further along now than I would have been plunking around with various themes and WP books. Kudos and many thanks to you!

  2. Hi Sean,

    I’m loving your tutorial so far! One note: in the latest version Underscores there is a separate content-search.php file for search results. Since you were using the conditional statement in the content.php page as one of your primary examples, this could be a source of confusion.

    Thanks! Looking forward to the rest of the tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *

*