To add the site title and description, do the following:
header.php
file that you created in the previous chapter.<hgroup class="screen-reader-text"> <h1>OpenSource</h1> <h2>Online Magazine</h2> <p><em>Using Open Source for work and play</em></p> </hgroup>
<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>
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:
<h1>
element with a #site-title
ID. This ID will help us to style the title if we need to.<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.<?php bloginfo('name'), ?>
.<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.
For more on the bloginfo
tag and ways you can use it in your themes, see http://codex.wordpress.org/Function_Reference/bloginfo.