Support » Themes and Templates » Making a horizontal navigation bar based on information from wp_list_pages?

  • Resolved SchuminWeb


    So I’m trying to add a horizontal navigation bar with drop-downs, etc. based on the wp_list_pages function to my custom theme. I am looking to make this a native feature of my theme rather than using a plugin, because all of the various plugins that I’ve tried have been less than satisfactory.

    I have been unable to find any documentation anywhere about how to build a menu based on this. That brings me to a more fundamental question: is it even possible to build a navbar using this function as a base? I’m really at a loss…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Andrew Nevins


    You can build a nav bar with wp_nav_menu() (outputs HTML).

    You will need to style the HTML if not already.



    Forum Moderator

    before the introduction of wp_nav_menu() in wp3.0 , all page menus were build on wp_list_pages();

    basic code, for instance:

    <div id="page_nav">
    <?php wp_list_pages('title_li=' ); ?>

    some css for this (from an old test theme based on the ‘kubrick default’ theme):

    #page_nav { margin:2px 20px 2px 20px; float:left; background-color: #eee; width:1040px; }
    #page_nav ul {
      float: left;
      padding-left: 0;
    #page_nav ul li {
      float: left;
      padding-left: 0;
    #page_nav a {
      padding-top: 7px;
      padding-bottom: 5px;
      text-decoration: none;
      border-right: 1px solid #777;
      margin: 0;
    #page_nav a:hover {
      background: #ccc;
    #page_nav li { position: relative; }
    #page_nav ul ul ul {
      position: absolute;
      top: 0;
      left: 120px; /* should be 20px wider than width in '#page_nav ul ul a ' below */
    #page_nav ul ul {
      position: absolute;
      z-index: 500;
      top: 25px;
      left: 0px;
    #page_nav ul ul a { background: #ddd;
      width: 100px; /* fixed width fold-out */
    #page_nav ul ul {
      display: none;
    #page_nav ul li:hover ul
    {display: block;}
    #page_nav ul ul,
    #page_nav ul li:hover ul ul,
    #page_nav ul ul li:hover ul ul
    {display: none;}
    #page_nav ul li:hover ul,
    #page_nav ul ul li:hover ul,
    #page_nav ul ul ul li:hover ul
    {display: block; }
    #page_nav ul li.current_page_item a {
      background-color: #ddd; color: #000;

    That’s awesome, thank you very much! I believe that I can build on this from here. Greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making a horizontal navigation bar based on information from wp_list_pages?’ is closed to new replies.