I have been doing on a lot of WordPress theme development lately for clients at Blueprint. WordPress was originally more of a blogging platform in its early days, but now it has become a very powerful CMS (content management system). WordPress is great for search engine optimization (SEO), super user-friendly, and quite flexible. Sarah, a fellow developer at Blueprint, already wrote a great blog post on writing plugins for WordPress. Today, I will be sharing how to use conditional tags for WordPress front end development.

What are conditional tags?

Just as custom page templates control the look of different pages, conditional tags in WordPress can be used to display different content on each page. For example, you might be working on a design that has different banners on the home page and inner pages. Maybe you want different content to display in the sidebar for different pages. You can use conditional tags on any theme template file except for functions.php to make those things work.

is_home() vs. is_front_page()

The function is_home() could be used to display certain content on the blog posts page. The function is_front_page() can be used to display specific content on the front page of the site. There is a very important distinction to make. is_home() only works for the page that displays the blog posts, whether it be the front page or another WordPress Page. is_front_page() only works for the front page of the website, regardless of whether it has blog posts or not. That means that if you set the home page of the site as a static Page in WordPress dashboard Settings > Reading, it will display content.

Using Conditional Tags

An example would be to have code like this to display content on the blog posts page:

<?php if(is_home()) { ?> Content goes here <?php } ?>

If you want to add a different background on the banner on the home page than the one on inner pages, you might do this:

<div id="banner"<?php if(is_front_page()) echo ' class="home"'; ?>>

The above code will add the class home on the #banner div when you view the home page, and you can change out the banner background via CSS. Notice how I put a space before class="home" rather than in front of the PHP code? That is so that when it is not the home page, the code will be <div id="banner"> without an extra space inserted before the closing bracket.

is_single() and is_page()

When the function is_single() is used, it will display content on individual blog posts. The function is_page() is similar to that and displays content on an individual Page. The ways to customize these two conditional tags are very similar. You can put post/Page ID, slug name (the part in the permalink that appears after “yourdomain.com/”), or title to really customize it. For example, if you want content to display on the “About Us” page that has the slug about and Page ID of 14, any of these will work.

<?php if(is_page(14)) { ?> Content <?php } ?>

<?php if(is_page('about')) { ?> Content <?php } ?>

<?php if(is_page('About Us')) { ?> Content <?php } ?>

<?php if(is_page(array(14,'about','About Us')) { ?> Content <?php } ?>

It is important to note that these two conditional tags do not make a distinction between ID, slug name, or title, so if you use the first example and have a Page titled “14”, that Page will also display the content you intended for the “About Us” Page.

Conclusion

There are a lot more WordPress conditional tags you can use in WordPress theme development than shown in this blog post. There is really useful documentation in the WordPress Codex if you really want to dive into WordPress theme development. Conditional tags are a great way to customize WordPress themes.

By: Blueprint