Wordpress Navigation Bar

ByLiew Cheon-Fong

Many have asking me about how to add the top navigation bar to the Wordpress like my blog. I was doing it manually by adding CSS and HTML code. To make it easier for general bloggers, I made the following Wordpress Navigation Bar hack.

wordpress navigation bar

Table of Contents

What it does?

Add a navigation bar under template header image. The navigation bar has a tab that link to blog URL and auto add Wordpress ‘pages’ link tabs.

How to apply?

There are two ways to apply:

  1. Copy and paste the Wordpress Navigation Bar code to the end of /wp-content/themes/default/header.php.
  2. OR, Easier method. Download the modified header.php, extract it to /wp-content/themes/default/ (replace existing header.php file).

Credits:

  • CSS code ripped from BinaryBonsai
  • Idea to use wp_list_pages() enlighten by Pool theme
Note: This hack is designed for Wordpress default theme(kubrick) only. However, you may modify it as you want.

FAQ

  1. How do adjust the position of the navigation bar?
    Simply modify the values of “top” and “left” under “#supernav”.
  2. How to list Pages by menu order?
    Find:
    <?php wp_list_pages('title_li='); ?>
    then, replace it with:
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    More details are available at WordPress Codex/wp list pages.
  3. How do I add custom URL into the navigation bar?
    Sorry, you can’t. The hack code only creates tabs based on your WordPress Pages.
Share this:

Similar Posts