Aug 15 2008

The Menu

Category: Berlitz Edinburgh Website, Wordpress, wp-andreas09steven @ 5:21 pm

The original wp-andreas09 template puts all the ‘pages’ into the horizontal menu and lists categories in the sidebar. Berlitz Edinburgh will have a lot of pages and I want those to be listed in the sidebar and to have only a few fixed pages along the horizontal bar.

First step was just to get the pages to list themselves in the sidebar. This was straightforward using the wp_list_pages function. I simply added this code to the sidebar.php file of the wp-andreas09 theme.

<li><h2>Main Menu</h2>
<ul>
  <?php wp_list_pages('sort_column=menu_order&title_li=&hierarchical=1'); ?>
</ul>
</li>

sort_column=menu_order does as the name suggests.

title_li= has a null value and means that Wordpress won’t insert the ‘pages’ title at the top of the list.

hierarchical=1 was supposed to indent the sub pages but didn’t. Here was my problem. But the problem was easily solved by modifying the CSS a little bit….

I then used Garrett Murphy’s Page Link Manager to add the functionality to ‘hide’ certain pages. These can then be linked to in my ‘fixed’ horizontal menu. This is perfect for giving you the flexibility to layout the menus as you want. Now all that’s left is to make the horizontal menu a fixed one (not associated with the Wordpress function that assigns pages to it).

First of all, I needed to remove said Wordpress function. It is in the header.php file:

<?php if (is_page()) { $highlight = ""; } else {$highlight = "current"; } ?>
<div id="mainmenu">
<ul class="level1">
<li class="<?php echo $highlight; ?>"><a href="<?php
echo get_settings('home'); ?>">Home</a></li>
<?php
if(function_exists("wp_andreas09_nav")) {
wp_andreas09_nav("sort_column=menu_order&list_tag=0&show_all_parents=1&show_root=1");
}
?>
</div>

Then I simply added my own page links:

<div id="mainmenu">
<ul class="level1">
<li class="<?php echo $highlight; ?>"><a href="<?php
echo get_settings('home'); ?>">Home</a></li>
<li><a href="http://www.berlitz-edinburgh.co.uk/?page_id=29">Where to Find Us</a></li>
<li><a href="http://www.berlitz-edinburgh.co.uk/?page_id=26">Contact Us</a></li>
</div>

The links were obtained by just clicking ‘view page’ in the Wordpress Editor.

So now I am blessed with a horizontal menu that can link to ‘hidden’ pages and a side menu that displays the pages included in the ’site navigation’. Even better…if I want one of the hidden pages to appear in both the horizontal menu and the side menu, I can just ‘unhide’ the page and then it’s done!

One problem….the sub pages are not indented in the side menu as I expected. Hmmm….guess that’s what I’ll have to figure out next….

Leave a Reply