12
Layout
In this chapter, we will cover:
Adding a skip navigation link for usability
Centering your site's layout in the browser window
Setting up a randomly-rotating header image
Making theme components drag-and-drop
Creating a global toolbar for your theme
Creating tabbed navigation for your theme
Introduction
The basis of any good WordPress theme is a solid layout. The layout that you choose will be
used throughout the site. So picking one suitable for your particular purposes is important.
It is also important to recognize the standard conventions of a blog layout. You want to make
sure that visitors know how to navigate your site and can recognize where different elements,
such as search forms and main content, should be. Following long-standing conventions
regarding blog design makes this a snap.
Adding a skip navigation link for usability
In general, most blog themes have four main sections:
Header with site title and logo
Navigation links and other navigation aids, such as search forms
Main content; the main focus of the page
Site footer, containing extra site information










section508.gov/SSA_BestPractices/lessons/css/skipnav.htm.
Chapter 12
247
The second part of this technique is the target for the skip link. When a user selects the skip
link, the target receives the browser's focus, and the user should be able to immediately read
and peruse your content. To create the appropriate target for your skip navigation link, nd
the HTML element in your theme les that contains the majority of your article content. Most
designers like to name their content containers with an ID of content, so you might want to
start looking for something like that. If you can't nd an element with an appropriate ID, you'll
have to add one. You are looking to have something like this:
<div id="content">
<! content goes here ></div> <! end content >
Save your changes, and update the les on your server. As soon as you have implemented the
two parts of this technique, you should have a functional skip navigation link. If you styled the
skip navigation link such that it is visible, you'll probably have something that looks like the
example shown in the following screenshot:
When users who rely on screen readers or prefer to use their keyboard for navigation visit your
page, they'll be able to instantly skip your navigation links and reach your content.
Layout
248
Try it out by visiting your page and clicking on the link. You'll be able to scroll down to your
content immediately. The following screenshot shows our example theme after clicking on
the Skip Navigation link:
How it works
When a hyperlink (<a>) tag contains a string consisting of a hash sign (#) and then some
other characters, the browser looks within the page for a series of things, in order. First, it
looks for any element in the page that has its id attribute equal to the characters after the
hash sign. If an element is found, then the browser scrolls the viewable area so that the top
of the viewable area coincides with the found element.
If no element with the id attribute equal to the characters after the hash sign is found, then

<div id="wrap">
<?php /*note: the wrapper div may be called "rap",
"wrapper","wrap", or "container" in your theme. The book example
uses the standard "wrap". */ ?>
<h1 id="header">
<a href="<?php bloginfo('url'); ?>/">
<?php bloginfo('name'); ?>
</a>
</h1>
Layout
250
Now, we take a look at the footer.php le and add a closing </div> tag for the wrap div:
<div id="footer">
<p class="credit">
<! <?php echo get_num_queries(); ?> queries. <?php
timer_stop(1); ?> seconds. >
<cite><?php echo sprintf(__("Powered by
<a href=' title='%s'>
<strong>WordPress</strong></a>"), __("Powered by WordPress,
state-of-the-art semantic personal publishing platform."));
?>
</cite></p>
<?php wp_footer(); ?></div>
<! close footer >
</div><! close wrap (wrapper div) >
</body>
</html>
In this code sample, you can see that all of the content for the theme is wrapped in an
element with an id attribute of wrap. Seeing this, we can start to correctly style the theme
to center the theme in the browser.



Layout
252
The browser applies the margins it previously calculated
The element is centered
Please note that this technique will work with all block-level elements that have a specied
width. For example, you can center images or blockquotes in posts, or center widgets within
your sidebar.
Setting up a randomly-rotating header image
To add some real design pizzazz to your WordPress theme, every time the page loads, you
can randomly display different photos or other images in the header section of your theme.
You can use this as a technique to generate interest for your visitors, or just as a fun personal
experiment. With the method in this recipe, you'll be up and running in no time.
Getting started
You should have a basic theme skeleton created, in order to take advantage of this recipe.
In addition, you should also have created a variety of possible header background images,
preferably each of the same size.
How to do it
For the purpose of this recipe, you'll be working under the assumption that you want to
randomly rotate the image displayed in the header section of your theme each time the
page reloads. The blog title will sit on top of the random image.
First, you need to place the images in the correct place so that the code we're going to write
can get to them.
Open the directory that your theme lives in, and create a new subdirectory called
header-images. Inside this directory, place all of the images you want to rotate through your
header. The following are some examples of images you could use for an application like this:


Chapter 12

Layout
254
Next, after creating this function, you're ready to write the appropriate HTML and CSS. You
should know ahead of time what size your images are, so this part is pretty straightforward.
First, write the header HTML (this may belong in either the index.php le or the
header.php le):
<?php
$header_image = wptc_get_header_image();
if( $header_image ) {
$style = "background-image:url('{$header_image}');";
}
?>
<div id="wrap">
<div id="header" style="<?php echo $style; ?>">
<h1><?php bloginfo('name'); ?></h1>
</div>
</div>
Then follow up with the appropriate CSS in the style.css le:
.wrap {
margin: 0 auto;
width: 960px;
}
#header {
background-repeat: no-repeat;
color: #000000;
text-align: center;
height: 120px;
line-height: 120px;
width: 960px;
}