Listing Pages In Custom Navigation without "List"s? (13 posts)

  1. opq
    Posted 10 years ago #


    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


  2. moshu
    Posted 10 years ago #

    Not really a WP question - it's about learning CSS if you want to mess around with your theme ;)

  3. opq
    Posted 10 years ago #

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

  4. JaneLitte
    Posted 10 years ago #

    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

  5. opq
    Posted 10 years ago #

    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!

  6. 3stripe
    Posted 10 years ago #

    That sounds complicated! Try seaching for plugins to list child pages - something like http://jaredquinn.info/software/wordpress-plugin/sublist/ should help...

  7. opq
    Posted 10 years ago #

    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); ?>

  8. 3stripe
    Posted 10 years ago #

    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 } } ?>

  9. opq
    Posted 10 years ago #

    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?

  10. opq
    Posted 10 years ago #

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

  11. 3stripe
    Posted 10 years ago #

    "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... (http://codex.wordpress.org/Template_Tags/wp_list_pages)

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

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

  12. opq
    Posted 10 years ago #

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

    Thanks so much for the help!

  13. 3stripe
    Posted 10 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic