Support » Themes and Templates » Listing Pages In Custom Navigation without “List”s?

  • Hi,

    I’m trying to create a custom navigation for my pages. I know there is a wp_list function but that seems to generate a list with HTML list tags.

    How can I get WordPress to return links of all teh pages (or a selection of the pages) present in WP in one line separated by spaces?

    i.e. if I have the pages PAGE1 PAGE2 and PAGE3;

    how can I make it return: “PAGE1 PAGE2 PAGE3”
    instead of:
    – Page1
    – Page2
    – Page3


Viewing 12 replies - 1 through 12 (of 12 total)
  • Not really a WP question – it’s about learning CSS if you want to mess around with your theme 😉

    Do I have to do it by CSS? Is there no way to loop through each page name and url?

    you need to turn your lists into inline lists and that must be done with the css. This is the code from the codex:

    #navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; border-left: 1px solid #000; }

    #navmenu li {display: inline; border-left: 1px solid #000;}
    #navmenu ul li a {text-decoration:none; margin: 4px;
    padding: 5px 20px 5px 20px; }

    ‘#navmenu ul li.first { margin-left: 0; border-left: none; list-style: none; display: inline; }’

    The last one is so that you don’t get the “|” to show up before the first listed item.

    Then you would put in your index.php or header.php or wherever you wanted the list to show up:

    <div id="navmenu">
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a></li>
    <li><a href="">Page 3</a></li>

    and it should render this list:

    Page 1 | Page 2 | Page 3

    There is a great tutorial here: Tutorial

    Thanks a lot for the help!

    Yeah but I was wondering what would happen to ‘submenus’ with pages that are under a specific page.

    What if originally I have:

    Page 1
    –> Page A
    –> Page B
    Page 2
    Page 3

    I was hoping to create a structure where I could get

    Page 1 | Page 2 | Page 3

    and a “submenu” under that would show the subpages in the same way underneath so clicking on Page 1 would give:

    Page 1 | Page 2 | Page 3
    Page A – Page B

    whereas the bottom line wouldn’t show on the other pages. Any hints? thanks again!

    That sounds complicated! Try seaching for plugins to list child pages – something like should help…

    Thanks for the plugin! I gave it a try and it seems like it echos everything on those pages. How can I get it to not print out the content of all the other pages? I cant seem to get the syntax to work. Do you have an example? Thanks

    I tried adding this to the template but with no success:

    <?php subList('format="<a href="“%link%”" title="“%title%”">%title%</a> "', bool); ?>

    This is what I use for my sub navigation:

    <?php /* Creates a menu for pages beneath the level of the current page */
    if (is_page() and ($notfound != '1')) {
    $current_page = $post->ID;
    while($current_page) {
    $page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
    $current_page = $page_query->post_parent;
    $parent_id = $page_query->ID;
    $parent_title = $page_query->post_title;
    if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_status != 'attachment'")) { ?>
    /* Remove the next line if you don't want to show the parent page
    <li><a href="<?php echo get_permalink($parent_id); ?>"><?php echo $parent_title; ?></a></li>
    <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=&child_of='. $parent_id); ?>
    <?php } } ?>

    Thanks so much! That’s just what I needed! Now how can I do a separate list that lists only the top navigation? I figured if I can do that then I can do exactly what I need!

    Oh yeah: I understand I can make changes CSS-ly by using #navmenu. What if I want two instances of the navigation? Where would I refer to a #navmenu2 for example in my theme code?

    Okay so I got the CSS to work great. Thing is there’s a giant margin on the left. How do I override this?

    “Now how can I do a separate list that lists only the top navigation?”

    You need to use wp_list_pages again, but with the depth parameter set to ‘1’ so it only shows the main pages… (

    The margin on the left… you could try something like:

    #navmenu ul {
    list-style: none;
    text-indent: 0;
    padding: 0;
    margin: 0;

    Awesome! Yeah sorry I figured it out too but my reply must have not posted. Stupid IE 😛

    Thanks so much for the help!

    No worries 🙂

    Yeah, it’s always good to post your solutions, even if it just means that other folks can see what you ended up doing!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Listing Pages In Custom Navigation without “List”s?’ is closed to new replies.