The first thing is to find the path to the theme that you are using, for the default theme the path is:

⁄wordpress⁄wp-content⁄themes⁄default

For other themes the path will vary so make sure you have identified the correct one for the theme you have in use.

Then using your favourite text editor open up the following files:

• functions.php
• header.php

Note: Before you make any changes to these files make sure you have a backup

In functions.php add the following code in an appropriate place.

function list_pages($pages) {
$options = get_option( 'widget_pages' );
foreach ($options as $key=>$value) {
        if ( $pages == $options[$key]['title'])	{
			$sortby = $options[$key]['sortby'];
			$exclude = $options[$key]['exclude'];
        	if ( $sortby == 'menu_order' ) {
				$sortby = 'menu_order, post_title';
				}
			$out = wp_list_pages( apply_filters('widget_pages_args',
					array('title_li' => '',
					'echo' => 0,
					'sort_column' => $sortby,
					'exclude' => $exclude) ) );
        	if ( !empty( $out ) ) {
				?>
				<li><?php echo $out; ?></li>
				<?php
				}
        	}
		}
}

Then add the following line of code in the header.php file. The correct location will vary by theme but generally it will be within the header div.

<ul><?php list_pages('Header1'); ?></ul>

The effect of this will be to list the pages defined by the Pages widget that has a title of Header1, you can edit the the parameter above for list_pages to match the one you are already using. This should work with WordPress 2.8 onwards but probably will not work with previous versions to that.

⁄wordpress⁄wp-content⁄themes⁄default

For other themes the path will vary so make sure you have identified the correct one for the theme you have in use.

Then using your favourite text editor open up the following files:

• sidebar.php
• header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the list of page links.

<ul><?php wp_list_pages('title_li='); ?></ul>

Copy the line of code above from the sidebar.php file and paste it in to the header.php file

This will copy the page links from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the page links float right, where you place them is down to personal preferences.

⁄wordpress⁄wp-content⁄themes⁄default

Then using your favourite text editor open up the following files:

• sidebar.php
• header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the search box (What this code does is to insert the contents of the searchform.php file at this point in the page. The searchform.php file contains the code to produce the search box and the search button).

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Cut the line of code above from the sidebar.php file and paste it in an appropriate location in the header.php file.

This will move the search form from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the title float left and the search form float right, where you place the search form is down to personal preferences.

How do you make sure your carefully crafted pages don’t fall to pieces when viewed with Safari on Mac OS or collapse in a heap under MSIE 5.0 for Windows?

You can maintain multiple operating systems and perhaps run emulations or virtual machines but it all can be very time consuming and troublesome.

So stumbling across Browsershots seemed to offer a solution to all these issues, you submit your URL and it comes back with screenshots of your webpage for a wide variety of browser and platform combinations.

In their own words what it offers is to:

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Having used it for a while, and found various horrors lurking in what looked like perfectly viable designs, I can thoroughly recommend this service, and best of all it is free, although if you find it useful you can pay for priority processing. You may have to wait a few minutes for the screenshots to be captured and listed on the page, but that is worth it if like me you don’t can’t afford the various paid services or the cost of having a complete test suite.

There doesn’t seem to be an easy answer to this question that will work with most browsers. The method shown here works fine for my requirements but that’s not to say there aren’t better ways of doing this out there.

The requirement I had was for a restaurant that required a table with three columns; the text of the menu item, special colour characters for vegetarian or wheat free dishes,  and the price of the item. The image below shows an example of the menu.

The text column is left aligned text with a width of 85%. The second column is centre aligned with a width of 5%.  The third column with the price has to be horizontally right-aligned, vertically top aligned, with bold text and a width of 10%.

There are several ways of doing this, one approach is to style each cell in the column but the resulting code is not easily changed and can be very tedious for tables with a large number of cells, plus it is going back to using tables for presentation

An alternative approach is to use pure CSS by constructing the table with <div>tags and not using html table markup at all. This works but does result in divitis with loads of nested div tags.

The best solution I’ve found, and no doubt there are others as good or better out there,  is to use the :first-child pseudo-class.  This pseudo-class matches the first occurrence of the specified element within another element. You can request the first cell within each row in the table with the end result being a column.  So the the CSS  style sheet containing:

div.menu_box td:first-child {
width: 85%
}

Would result in the first column of the table having a width of 85% of the enclosing element, in this case the menu_box div.

To select the second column in the table just use the adjacent sibling combinator which is a plus symbol. This will select an element that immediately follows another element with the same parent,  in this case we select a <td> tag that immediately follows another <td> tag when they are both children of the same menu_box div parent.

Adding this to the style sheet results in:

div.menu_box td:first-child {
width: 85%;
}
div.menu_box td:first-child + td {
width: 5%; text-align: center;
}

Following the same pattern, to make the third column right-aligned and bold we just need to add another adjacent sibling plus (+) sign and another td selector to give:

div.menu_box td:first-child {
width: 85%;
}
div.menu_box td:first-child + td {
width: 5%; text-align: center;
}
div.menu_box td:first-child + td  + td {
width: 10%;
text-align: right;
font-weight:800;
vertical-align: top;
}

This works with most modern browsers, but doesn’t work with IE 6 or previous.

That requires some extra CSS (shown in bold below) to make up for the fact that older versions of IE don’t have support the solution outlined above, but does have support for some non-standard attributes in the

tag (which the more modern standard-compliant browsers like FireFox do not support).  So to get something that works correctly with most browsers you have to use two different methods combined as shown below.

div.menu_box col.c1, td:first-child {
width: 85%;
}
div.menu_box col.c2, td:first-child + td {
width: 5%; text-align: center;
vertical-align: top;
}
div.menu_box col.c3, td:first-child + td  + td {
width: 10%;
text-align: right;
font-weight:800;
vertical-align: top;
}

The col.c1, col.c2 and col.c3 selectors are used within a tag in the HTML table as shown below.

<div class="menu_box">
<table border="0">
<colgroup>
  <col class="c1"></col>
  <col class="c2"></col>
  <col class="c3"></col>
</colgroup>
...table rows and cells go here....
</table>
</div>

To test browser compatibility I used the free service at http://browsershots.org where you can test a page and receive images of the page for each platform/browser/version combination.