Have you ever seen a website that has certain content on the sidebar of the home page, but a different sidebar is displayed when you’re looking at a single page? How about nice little welcome messages that go away as you venture into the site? It’s a pretty nice effect, and it’s quite simple to pull off. It does, however, require you to know a little about PHP, but fear not; if you only know HTML, even just a little, you might be able to get by with this trick.
On the Home page, you see featured themes:
…on single posts, you don’t:
The function that allows one to make such magical pages as those described above is called a conditional tag. This tag, as the name implies, tells the page to do things under certain conditions. There are many conditional tags, but the most popular (in my experience) is is_page.
(The full list of conditional tags is on WordPress.org.)
Home Page
The beauty behind the is_page function is that it can be executed many ways. Let’s say you want to welcome your visitors to your site on the home page, but you want that message to go away once they delve beyond that front page. It’s actually quite simple. Use the following code (and type it out; don’t be a copy-and-paster):
<?php if(is_page(’home’) ) { ?>
<p>Welcome to my website. I do hope you enjoy your visit.</p>
<?php } ?>
Note: This is the proper formatting for WordPress 2.1+. Prior versions use
is_home(”)
instead of
is_page(’home’)
In layman’s terms, what we’re saying here is, “If we’re on the home page, show a message that says: ‘Welcome to my website. I do hope you enjoy your visit.’” Everything between
{
and
}
is what the function will tell the page to display as long as the condition is met.
Of course, you can’t just stick that code anywhere. You probably don’t want to put conditional formatting into a post or page because, well, that just doesn’t make any sense. What you’d want to do instead, would be to insert the code into your theme’s index.php file, probably right before the
<?php if(have_posts()) : ?>
line.
The is_page function is excellent for welcome messages and other things that you want to appear specifically on the home page of your site, but it’s perhaps even more useful for formatting sidebars to perfection.
Sidebars
Just as we inserted code into the index.php file, we’ll do the same for sidebar.php. What’s great about formatting the sidebar is that it’s so incredibly easy to do because you can refer to either the page ID, the page title, or the page slug. Here’s an example of a widget-ready sidebar with a conditional tag:
<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<?php if(is_page(’About Us’) ) { ?>
<li><h3>Staff</h3>
<ul><li>John Johnson</li>
<li>Rich Richardson</li>
<li>Arthur McArthur</li></ul>
<?php } ?>
<li><h3>Links</h3>
<ul>Blah blah blah</ul></li>
<?php endif; ?>
</ul>
</div>
The only part that’s different than a standard sidebar.php file is
<?php if(is_page(’About Us’) ) { ?>
and the
<?php } ?>
afterwards.
Basically, what this page is saying is, “If there are widgets, use ‘em; otherwise, show the About Us section and the Links section, but only show the About Us stuff if we’re on the About Us page.”
Pretty easy, right? I bet now you want to implement these conditional tags into widgets. Let’s do it.
Widgets
First, you’ll need to download a plugin called Executable PHP Widget by Otto. This plugin acts just like Text Widgets, but it allows you to include PHP functions as well.
Once installed and activated, go to your Sidebar Widgets page and add a PHP widget to your sidebar. Then, simply leave the title of the widget blank and, in the body, insert the same PHP code we used above to look like so:
Note: I changed the
<h3>
tags to
<h2>
tags to maintain consistency, since that’s what WordPress defaults to for its sidebar section titles.
By default, Widgets add <h2 class=”widgettitle”> tags around the title of a sidebar section. That’s not a big deal unless your theme’s CSS has a specific line-height attribute; if so, what you’ll probably notice is that there’s a gap between the bottom of any other widget and the top of this conditional tag PHP widget. That’s because even blank titles get <h2> tags. To avoid that extra space, you might want to try adding this line to your style.css file like so:
h2.widgettitle {
line-height: 0;
}
To learn more about conditional tags, refer to the WordPress Codex. Have fun!