WordPress development tutorials

Here’s a quick development tutorial on how to make changes to a single WordPress page or post.

Let’s say that you want to change styling for one page on your site, but it doesn’t have unique class or ID for you to target in your stylesheet. You can use the is_page() conditional tag to target a specific WordPress page to make your changes. You can also use the is_single() tag to target an individual post in the exact same way.

You’ll do a conditional check for this page (or post if using is_single() instead) by targeting the page ID, title, or slug. This is the basic idea that we should use:

if( is_page( ID ) ) {
     Do something fun.
}

My example will use this check to add some CSS to the page, but you can use this to add banner images to pages, display a notification to visitors, or remove actions / filters from a page. For example, if you’d like to intentionally spell ‘WordPress’ wrong on a post or page, and you don’t remove the capital_P_dangit() function from your site already, you could use this page check to then disable this function for the specific page only.

Let’s use an example that adds some CSS to a particular page – I’m going to hide my header and footer from this page (I could have also removed the actions that add them instead of simply hiding them). Note that the 'wp' action is the first one that we can use with a conditional tag, as the class object must be available for use, so something like the init action cannot be used.

We’ll build our function that checks for the page and adds the styling, then add it to our site via the wp action.

The CSS will change based on your theme, but you can add styles, new content, or use filters only on a specific page.

You can also use is_page() to inject your code into the page’s content. While you could do this while creating the page, it’s handy to be able to do this programmatically for a specific page template or an array of pages. This could be a banner, ad, or notice that you choose to only add to certain pages, and you won’t have to manage this from the content editor and add it to every single page manually.

Let’s add a notice that provides a coupon code to visitors for our page. This could be a way to reward visitors that check out your terms of service or about page. We can’t use a WooCommerce notice on a non-WooCommerce page, but we can create a div and style it ourselves. Here’s the code snippet to add our notice to the pages we want to use based on their IDs:

function sv_add_page_coupon_notice( $content ) {
	if( is_page( array( 2, 189 ) ) ) {
		echo '<div class="coupon-notice">Thanks for visiting! As a gift, here\'s a coupon code you can use in our shop: <code>20off</code></div>';
	}
	return $content;
}
add_filter( 'the_content', 'sv_add_page_coupon_notice' );

Notice that we use an array of page IDs – this will display on page 2 OR on page 189, and we could mix and match IDs, slugs, and page titles as needed.

You’ll then need to add the styles for this div to your stylesheet and your notice will only be displayed on the appropriate pages.

sample-coupon-notice

You can take conditional checks and content way further than we have here. The conditional tags are infinitely useful and amazing, and will let you conditionally add code or content to your site based on the page, post, category, home page, you name it. You can also use these ideas with the WooCommerce conditional tags if you’d like to execute some code only on WooCommerce pages rather than using the page ID via is_page().

Published by Beka Rice

Beka leads product direction for SkyVerge, focusing on new features for our plugins and Jilt. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

2 Comments

  1. Hi Beka!
    Nice snippet indeed! Very useful for little customization! Thanks.

  2. Thank You

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.