Time for action – adding the site title and description to your theme

To add the site title and description, do the following:

  1. Open the header.php file that you created in the previous chapter.
  2. Find the following code:
    <hgroup class="screen-reader-text">
  <h1>OpenSource</h1>
  <h2>Online Magazine</h2>
  <p><em>Using Open Source for work and play</em></p>
</hgroup>
  3. Replace it with the following:
    <hgroup class="screen-reader-text">
  <h1 id="site-title">
    <a href="<?php bloginfo('url'), ?>" title="<?php bloginfo('name'), ?>"><?php bloginfo('name'), ?></a>
  </h1>
  <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
  4. Save your file.

What just happened?

We added some PHP code to tell WordPress to insert our site's title and description in place of the static code that was there before. Let's have a closer look at the code:

  • First we have an <h1> element with a #site-title ID. This ID will help us to style the title if we need to.
  • Inside the <h1> tag is a link with the href attribute of <?php bloginfo( 'url' ); ?> which WordPress uses to fetch the site's URL. This link also has a title attribute of <?php bloginfo('name'), ?>, which is the site title.
  • Inside the link is the site title itself, displayed using <?php bloginfo('name'), ?>.
  • After the <h1> element is an <h2> element displaying the site description (or tagline), using <?php bloginfo( 'description' ); ?>. This element has an ID of #site-description so we can target it for styling if we need to.

These changes won't make any difference to our site as it's displayed in the browser, because the contents of the <hgroup> element are hidden offscreen. But it does change the underlying code. Let's have a look at what WordPress generates as the source code in our header now:

<hgroup class="screen-reader-text">
  <h1 id="site-title">
    <a href="http://rachelmccollin.co.uk/opensourcemagazine" title="Open Source Magazine">Open Source Magazine</a></h1>
  <h2 id="site-description">Using Open Source for work and play</h2>
</hgroup>

As you can see, it's using the bloginfo tag to provide browsers (and users, if you set your CSS up that way) with information on the site. Having added this code to your header.php file, if we need to change the site title or description in future we just do this in the Settings screen and don't need to touch the code. And if you or anyone else uses your theme for another site, this will work out of the box.

Note

For more on the bloginfo tag and ways you can use it in your themes, see http://codex.wordpress.org/Function_Reference/bloginfo.

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

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