Wider Picture

For a long article, you might prefer a wider layout than normal, but still retain a sidebar to display related information. You also might want to add more structure and formatting to the story itself. Figure 17-18 shows an example of a multiple-page article with headings and images, along with a sidebar of related stories and links to resources. In this section, I will take you through the necessary changes to achieve this look.

The first step is to change the appearance of the paging links described in the previous section. In the include file main-content.php, which defines The Loop that outputs the articles (see Chapter 16 for more information about The Loop), change the call to wp_link_pages. Add parameters to produce the Next Page and Previous Page links you can see in Figure 17-18. Listing 17-11 shows the changes in the code (highlighted in bold).

Listing 17-11. Paging Link Code in main-content.php

<div class="feedback" align="right"> <?php wp_link_pages('before=<p>&next_or_number=next'

.'&nextpagelink= [Next Page]&previouspagelink=[Previous Page] '); ?>

<?php comments_popup_link(_('Comments (0)'),_('Comments (1)'),...

Friday, August 19th 2005

Enhancing The Visitor Experience posted @ 12:06 pm in [ Information Architecture ]

Anticipate Visitor Needs

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libera tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxirne placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. —1914 translation by H. Rackham

Other articles

Enhancing The Visitor

Experience The Psychology of

Navigation A research agenda for

Information Architecture Public Broadcasting Metadata Dictionary Project Personal Information

Architectures The myth of User-Centered Information Architecture


PaidContent.org Wired News geek ramblings WordPress Planet Subscriptions And all that Malarkey Designing for Civil Society Jeffrey Zeldman Presents:

The Daily Report Geek News Central Slashdot:


Register Login

Leave a Reply

[Previous Page] [Next Page]


Name [required)

g s m [email protected] Mail (will not be published) (required)

Figure 17-18. The completed learning layout

Next comes some style tweaking. To do something more attractive with the images, which otherwise display sequentially in the text, add two rules to allow you to float images to the left or right as you feel appropriate. Floating an image in this way allows the text to flow around the image. Add a margin to prevent the text from flowing too closely to the images. Also add two .storycontent rules to adjust the margins of the article paragraphs and headings to add a little more white space to the article. If text is too dense, it can be hard for your visitors to read. Listing 17-12 shows the new rules added to the style sheet.

Listing 17-12. New Style Rules in styles.css

.imageleft { float: left; margin-right: 1.5em; margin-bottom: 0.5em;

.imageright { float: right; margin-left: 1.5em; margin-bottom: 0.5em;

.storycontent p {


.storycontent h2 { margin-top:1.5em; margin-bottom:0.5em;

In order to choose which way an image floats, you just need to add the appropriate class attribute to the image tag in the article. Figure 17-19 shows the code in the article, in this case floating an image to the left.

Figure 17-19. The class in the tag will cause the image to float left.

For the layout's one sidebar, you could add more code to one of the existing sidebar files to include the information you want. But for this example, let's add a completely new sidebar. Create a new building block sidebar-c.php to use in the layout by copying sidebar-b.php. Listing 17-13 shows index.php. Similar to the code for the other sidebars, you test for the blog displaying a single page and change the main content width appropriately. You then use the single-page test to choose whether to include the new sidebar or both the old ones. The result is that on single pages, the new sidebar is displayed, and on all other pages, both sidebars A and B are displayed.

Listing 17-13. Adjusting the Layout Based on the Single-Page Test in index.php

<div id="pagecontent"> <?php if (is_single()) { $main_content_class = 'main-content-wide';

$main_content_class = 'main-content-norm';


include_once('sidebar-c.php'); } else { include_once('sidebar-a.php'); include_once('sidebar-b.php');

Sidebar C will contain almost all new content. The reader will want recent articles in the same category available as a possible next destination. Also, a list of links to external related resources is a valuable addition to the page. You can use WordPress's built-in Link Manager to collate the list of links. So, let's take a brief side trip to the Link Manager, before continuing with the new sidebar.

Top Sources For Free Backlinks

Top Sources For Free Backlinks

Discover a guaranteed method of building permanent backlinks from authority websites in your niche - FREE. Eliminate time consuming back-link tasks by downloading a free copy of this automated program and maximize your incoming links.

Get My Free Ebook

Post a comment