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.

The website for this ride was built using Microsoft FrontPage 2003 and looks fine if viewed with Internet Explorer but looks a real mess if viewed with Firefox.

The problem is that FrontPage out of the box has default settings that assume that websites will be viewed with IE. This includes allowing the use of VML Graphics which are the main culprit for things going wrong.
We tried changing the settings on FrontPage and then re-publishing the website but that didn’t improve things at all. The only solution was to create a totally new website then edit the pages manually to remove the VML stuff that was causing Firefox (and other standards-compliant browsers) to go bananas.
As an example of what happens, where content was positioned manually using FrontPage this would be placed in the correct place by VML if the browser was IE. For other browsers there was a jpg image of the content that was displayed instead. The most obvious sign of this happening is where links don’t work when using browsers other then Internet Explorer (how could they as they are just part of an image).
The only sensible solution was to rewrite everything manually removing hundreds of lines of VML. This had the effect of improving performance as the size of the pages is reduced pretty dramatically. Also used CSS to reproduce the table based design of the original website, so FrontPage out of the box didn’t use any CSS at all.
FrontPage 2003 is hardly leading edge these days but there are quite a few websites out there that were built with this tool, and a lot of them have problems with cross-browser compatibility and modern browser standards. With some refactoring work they can be bought up to modern standards without having to re-create them from scratch.

Being new to WordPress I have been using the standard image upload facilities.  After upgrading to WordPress version 2.7 the Flash uploader stopped working so I resorted to using the browser based version. This was annoying but not annoying enough to make me do something about it. Then I noticed that images which were fine when captured looked fuzzy when viewing the published article, specially when using Internet Explorer.

So what was going on? Well, for one selecting anything other than full size meant the images were being re-sized by the uploader and that reduced the image quality, you notice the difference in quality compared to re-sizing the images yourself in Photoshop.

The other thing is that if you select to insert the image at full-size then it will be uploaded at whatever size it is; if that is too wide then the browser will helpfully scale the image to fit within the column. This creates a passable image in FireFox but a pretty blurred image in Internet Explorer.

As an example, the image below has been scaled to fit, in FireFox you can still more or less read the text in the image, in Internet Explorer the image is pretty much unreadable

Right-clicking on the image in FireFox and selecting properties opens the image properties dialog which will show in the Image Dimensions line (highlighted in the image below) that the image has been re-sized

The answer for me was to revert to sizing the images using Photoshop then uploading the images via FTP to the same location as the uploader. Then there is a choice of selecting the image from a URL using the WordPress uploader or just typing in the URL directly to the post. Personally my chosen route is now to do the all the HTML myself, gives me a feeling of being back in control.

The other issue is the number of different images the uploader creates in the WordPress /uploads directory, it seems to create three images at least for every image that is uploaded, hand-rolling the process means you have one image per image in the post and you have control over the process. If you're like me and you keep altering and uploading the image repeatedly then WordPress creates a whole lot of images which become difficult to control and take up loads of space.

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.