Time for action – using a conditional tag to hide our home page's title

Now we'll use a conditional tag to completely remove the home page title.

  1. Open your style.css file and remove the styling you just added to hide the home page title. Check your home page in the browser, it should be displaying the title again.
  2. Open the page-no-sidebar.php file, which is the template file our About Us page uses.
  3. Find the following code:
    <h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2>
  4. Add a conditional tag around it so it reads:
    <?php if ( !is_front_page () ) { ?>
  <h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2>
  <?php } ?>
  5. Save your template file.
  6. Now repeat this process for the page.php template file and save that.
  7. Switch to your browser and refresh the home page.

What just happened?

We added a conditional tag to tell WordPress to not output the post title on the site's front page. Let's have a look at that code:

  • <?php if ( !is_front_page () ) { ?> checks if the user is not on the front page (by inserting an exclamation mark). The } ?> at the end is important as the braces will contain the code to output if the condition is met, and ?> closes PHP so that the next line of HTML can be read by the browser.
  • The next line is unchanged, it's the output of our h2 element and its contents.
  • Finally, <?php } ?> tells the browser we're using PHP again. We use the closing brace (}) to end the code that's output if the condition in our conditional tag is met, and then uses ?> to close PHP again.

When you refresh your home page again you'll see that the title isn't displayed. It looks exactly the same as the previous screenshot which was the result of using CSS to hide the title.

But the difference is in the code. Let's see the HTML that WordPress outputs for our home page now:

<article class="post-16 page type-page status-publish hentry" id="post-16">
  <div class="entry-content"><!--//post-->
    <p>Lorem ipsum...

The h2 element and its contents have gone completely. Much better!

Tip

Before moving on to the next section, we'll just take a moment to restore our Reading settings to the way they were, so that the blog page is shown as the home page instead of a static page. Don't undo the changes you've made to your template files though. If you should ever change the Reading settings back in the future, or someone else who needs a static home page should use your theme, this conditional tag will be useful.

Have a go hero – other ways of showing conditional content

Can you think of any other ways of hiding the title in our home page?

Yes, you could use a template file. You could either set up a custom page template for use on the home page, or (even better) create a front-page.php file which WordPress will automatically use to display home page content. In your new template file, you'd remove the h2 element and its contents altogether. We've used the conditional tag to create a whole new template file just to remove one line of code seems a bit disproportionate.

Can you think of any other uses for conditional tags? Try to identify how you might use them in other places in your theme, and give it a go.

Note

For a full list of the conditional tags available and how to use them, see http://codex.wordpress.org/Conditional_Tags.

The Theme Customizer

You could quite happily stop where you are and you'd have a great theme. It's structured well, it makes use of the bloginfo tag to display site information, it has a menu and some cool widgets, as well as using template files and conditional tags to display the right content in the right place.

But if your theme is going to be used by other people, you can add more options to help make their lives easier. By activating the Theme Customizer, you can let users tweak settings such as colors and fonts or add content to be displayed in the theme. These are great features if you're going to release your theme to the public, but can also be useful for client sites.

The Theme Customizer was introduced with WordPress 3.4. The Theme Customizer for the default Twenty Eleven theme looks like the following screenshot:

The Theme Customizer

To give your theme users access to the Theme Customizer you need to add some code to your functions.php file, and then you need to add the relevant code for each option you want to provide them with. We'll start by adding Theme Customizer functionality to our theme.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset