How To Display a Banner Only On Posts From a Category In WordPress

I regularly participate in WordPress.org forums to help out fellow WordPress users with all sorts of issues that crop up as they develop their WordPress websites. It’s a great place to hang out and it’s my way of giving back to the awesome WordPress community.

It’s doing so that gave me the idea of setting up this blog, therefore nothing seems more natural than tackling here any odd question that I happen to answer in the forum, or anything that might be related to my answer to a forum post, only going into a bit more detail.

One forum user asked for help on how to display a banner ad only on posts from a given category in WordPress. Here’s the solution.

Step 1: Creating the Child Theme

To display a banner ad on a post page involves adding some mark-up inside a theme’s template file. This means that, when the theme is updated by his/her author and you install the new version as is, all modifications added in the previous version will be wiped out. To avoid this inconvenience, get into the habit of creating a child theme and applying your customizations to the child theme. This by itself will protect your personal touches from future theme’s updates.

I previously created a Tonal Child theme on my local server, just for developing and experimenting, and I’ll be applying my modifications to this theme, rather than to the Tonal parent theme.

Step 2: Copying Over single.php

Next on the list is creating a new file inside my child theme named single.php to replicate single.php from the parent theme. Since the banner is going to be displayed on the top of a single post page, single.php is the file to use.

Here’s what’s in the WordPress Codex Theme Development page about single.php:

single.php
The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.

Next, it’s simply a matter of opening single.php in the parent theme into my code editor, copying all its content and pasting it into single.php inside the child theme. The file is ready to receive my modifications without compromising the original theme.

Step 3: Deciding On The Mark-Up For The Banner

Now it’s the time to think about the mark-up for the banner. Banner ads have standard measurements. If you need to know these, hop over to Designers Toolbox and take a peek. The mark-up for a mock banner ad in my example is just a simple <div> tag containing a <h2> element.

Step 4: The Magic Formula: in_category WordPress Function

The requirement here is that the banner appear only on the post pages that belong to a given category. WordPress has a handy little function for this: in_category($category, $_post).

It takes two parameters: the category and the post. The latter is optional, and if omitted, WordPress defaults to the current post. Here’s the code snippet that I placed before the Loop at the top of the main container:

<?php if (in_category ('category1')) {  ?>
		
  <div class="banner-ad">
   <h2>This is a banner ad</h2>
  </div>
		
<?php } ?>

Translated into English, the code above means: if the current post is in category1 (which is the category slug), then display this mark-up.

All done! Only posts belonging to the category1 category will display the banner at the top of the page.

To Sum Up

Answering WordPress forum posts is fun, educational, and great for community fostering. This is a sample of the kind of questions that pop up in the forum. As I tackle general interest questions in the WordPress forum, I’ll be offering a more detailed treatment of my answer here on WPThemeMakeover.

What About You? How Do You Like Hanging Out in the WordPress Forums?
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s