CUSTOMIZING YOUR BLOG S LAYOUT in Visual Basic .NET

Generator Data Matrix in Visual Basic .NET CUSTOMIZING YOUR BLOG S LAYOUT

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 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)'),... </div>

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 { margin-bottom:0.75em; } .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.

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'; } else { $main_content_class = 'main-content-norm'; } include_once('main-content.php'); if (is_single()) { include_once('sidebar-c.php'); } else { include_once('sidebar-a.php'); include_once('sidebar-b.php'); } > </div><!-- /pagecontent --> 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.