bencic.net

I was searching through the net looking for some way to place a horizontal menu at the top header for my new WordPress site. Finally I found a site which pointed/guided me to editing the “header.php” of my theme “Default” (the one which comes with WordPress)

These next steps will demonstrate how to edit the header.php file using the admin area of your WordPress site. This may not be the best way to handle this but here goes…

1) Navigate to the admin area of your website. This is usually http://YourDomain/wp-admin

2) Click on the “Design” link from the main menu

3) A sub menu will appear underneath the main menu. Click on the “Theme Editor” link of the “Design” sub menu

4) I am assuming that you are using the “Default” theme which come with WordPress, if not then change the theme by select it at the “Select theme to edit” dropdown box and click select.

5) On the right side of the page under “WordPress Default theme files” click on the link “Header” to view the contents of “header.php”

6) You should now see the contents of “header.php”.

7) Modifying the code

look for the following at the bottom of the “header.php”

<div id="header">
    <div id="headerimg">
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
</div>
<hr />

Insert the following code after the ..div class=”description”… line. this utilizes the function wp_list_pages() with options to show

<div align="center" id=navmenu>
    <ul>
        <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
        <?php wp_list_pages('sort_column=menu_order&amp;amp;depth=1&amp;amp;title_li='); ?>
        <!-- Commented Out <?php wp_register('<li class="admintab">','</li>'); ?> -->
        <?php wp_loginout('<li class="login">','</li>'); ?>
    </ul>
</div>

It should end up looking something similar to this

<div id="header">
    <div id="headerimg">
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>

        <div align="center" id=navmenu>
            <ul>
                <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
                <?php wp_list_pages('sort_column=menu_order&amp;amp;depth=1&amp;amp;title_li='); ?>
                <!-- Commented Out <?php wp_register('<li class="admintab">','</li>'); ?> -->
                <?php wp_loginout('<li class="login">','</li>'); ?>
            </ul>
        </div>

    </div>
</div>

8\) Thus far we have added the code to place list items on the header however, we need to force the list to display without bullets and horizontally as apposed to a vertical list

somewhere inside the style tags

<style type="text/css" media="screen">

</style>

Insert the following code,
this will make the list items show up on one line. you may need to tweak the style, padding to suite..

#navmenu ul {position: relative; top: 36px; padding: 0; list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: white; }

click the save button and whalah. You should now have a horizontal menu list a the top header

If there is anything I missed or can make a better suggestion please comment…

Tags: web

This entry was posted on Thursday, December 13th, 2007 at 8:55 pm and is filed under IT Related. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.