Frequently Asked Questions:

Create a drop-down list of your pages in your nav bar

A few people have asked me how to create a drop-down menu of your pages in your top navigation bar area. Here’s how:

In your WP Admin area, go to “Design” => “Theme Editor” => “topnav.php”. On a blank line in the middle (depending on where you want it to go) paste in this line of code on an empty line:

<?php wp_list_pages('orderby=name&title_li=<a href="#">Pages</a>'); ?>

Then, save your changes and, assuming you have some pages written, you should have a perfectly functioning drop-down list of your pages.

NOTE: Because you’re adding another feature to the nav area, you may run out of room and get your header bumped down covering up your bio. If this happens, maybe delete one of your nav items, like the search, or follow the directions here to squeeze it in so it fits.

Related resources:
Why is my header is covering up my bio?
How do I delete the search feature, or something else from the nav area?

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Tuesday, May 6th, 2008 and is filed under Customizing ProPhoto, Frequently Asked Questions. You can leave a response, or trackback from your own site.

35 Responses to “Create a drop-down list of your pages in your nav bar”

  1. On June 30th, 2008 at 4:26 pm robin said:

    Jared, I’ve added my pages to my dropdown. I’d like to remove the Blogroll from the topnav, which you’ve explained how to do, but I’d like to swap it out for my tags instead. I don’t understand the code enough to be able to just swap it out. Is there a way to add a menu to pick the tags?

  2. On July 1st, 2008 at 7:07 am Jared said:

    @robin: I’m not aware of how to do this, although I’m guessing it might be possible. i would try searching the wordpress codex for template tags related to “tags”.

  3. On July 6th, 2008 at 11:51 am Raquita said:

    can I move the topnav bar under the slide show before the bio??

  4. On July 6th, 2008 at 12:01 pm Jared said:

    @Raquita: this can be done, but it is too complex for a simple tutorial. you can either a) try to hack your way through it, b) hire a web developer to modify it for you, or c) hire us to do it. if you’re interested in c) email Matt at prophotoinstall at gmail dot com and let him know what you’re looking for, and he’ll give you a price.

  5. On July 14th, 2008 at 4:02 pm debra parker said:

    Jared, I just added this to my top nav bar. I was wondering if there is a way to make the font larger on the drop down screen.

  6. On July 15th, 2008 at 1:40 pm Jared said:

    @debra parker: yeah, on your stylesheet (line 224 ish) look for this chunk:

    #ppt_topnav li ul a {
    width: 104px;
    padding: 5px 8px;
    font-size: 80%;
    }

    change the “80%” to a higher number, or to a pixel amount like 14px. (don’t mess with the semi-colon!)

  7. On July 17th, 2008 at 3:13 pm Lisette Price said:

    Jared,

    My new categories are not showing up. The drop down menu is showing only “uncategorized” and not any of the new ones I created. They are showing up under categories on the admin side and where I can select them when writing a post just not on my blog. I have the same code in as the one for pages with “pages” replaced with the word “categories”. It’s the code that was already there. I’ve also emptied my cache a million times. I’m not sure what I’ve done! haha :) Do you have any ideas?

  8. On July 18th, 2008 at 6:26 am Jared said:

    @Lisette Price: that’s odd. is it possible that you’re not creating new categories, but rather “child” categories? i don’t think the drop down will show child categories. check and make sure that your categories are full-fledged categories.

  9. On July 18th, 2008 at 1:33 pm Lisette Price said:

    I’m clicking on “manage” then “categories” then “add new” and creating them that way. Is this wrong? I know I have to be doing something wrong that’s right in front of my face my face! haha

  10. On July 18th, 2008 at 3:13 pm Lisette Price said:

    Jared,

    I figured it out. I didn’t have anything posted within my categories besides the uncategorized ones. When I tested a new post and gave it a category that was already there (ie: weddings) it showed up in the drop down menu on the blog. So I’m guessing they won’t show up unless you have post marked in that category!

  11. On July 19th, 2008 at 2:35 pm Jared said:

    @Lisette Price: oh, here’s a thought – the categories won’t appear in the drop down until there are posts in that category, i think. is it possible you don’t have any posts categorized that way yet?

  12. On July 19th, 2008 at 2:36 pm Jared said:

    @Jared: whoops, you already figured that out. sorry!

  13. On July 29th, 2008 at 2:27 pm Lisa said:

    Is there a way to make the main page a “home page”, so that when someone clicks on the link to a different page they can easily get back “home”?

  14. On July 30th, 2008 at 6:15 am Jared said:

    @Lisa: i’m not sure what you mean by making the main page a “home page”.

    your logo is always a link to get back to the home page of the blog

  15. On August 14th, 2008 at 1:23 pm Melissa Koehler said:

    I know this might be a stupid question, but how do I add Pages?

  16. On August 15th, 2008 at 10:20 am Jared said:

    @Melissa Koehler: go to “Write” => “Page”

  17. On October 2nd, 2008 at 11:38 pm Mikael said:

    ah man, I added that line of text over another line and now my nav bar is all wacked out. They are lapped over one another. The Pages tab doesn’t show either.

  18. On October 3rd, 2008 at 5:30 am Jared said:

    @Mikael: yeah, something is messed up. i can’t tell exactly what you did wrong from your source. why don’t you email me through the support tab so i can dig deeper.

  19. On October 21st, 2008 at 7:30 am Julie North said:

    I have added the drop down menu of my pages but i want to change the name to: Important Info and I want to change the names of the other links at the top as well. How do I do that?

    Also, how do I add another link like blog roll – which i would like to name – inspiration?

  20. On October 21st, 2008 at 9:31 am Jared said:

    @Julie North: just carefully edit the word “Pages” inside that code you pasted in and change to “Important Info”.

    for your blogroll, just add new links under “Manage” => “Links” and put them in a new category called “Inspiration” and they will automatically appear as a new dropdown list of links.

  21. On October 22nd, 2008 at 3:23 pm Julie North said:

    HI,
    I have tried that numerous times now and i get an error. I am able to fix the error when I retype the word Pages. Thanks, Julie

  22. On October 22nd, 2008 at 5:31 pm Jared said:

    @Julie North: it might be the space that is monkeying with it. try typing ‘Important Info’ instead of ‘Important Info’ and see if that works.

  23. On October 23rd, 2008 at 8:21 pm Julie North said:

    I think I must be crazy because those two options look exactly the same to me. I also have tried one word changes and the same thing happens. I have tried it at least 20 times and it is not working. Could it be a problem with the fact that I added the drop down menu to the pages?

  24. On October 24th, 2008 at 6:15 am Jared said:

    @Julie North: whoops, my text got changed, lets try again. you should type:

    Important%20Info
  25. On October 27th, 2008 at 12:41 pm Allison said:

    Is there anyway to make your top nav bar titles link to a “page”? Instead of having a drop down for the pages?

  26. On October 27th, 2008 at 1:38 pm Jared said:

    @Allison: yeah, just add in a simple link to the page’s URL like so:

    <li><a href="http://www.mysite.com/blog/my-page-url">Link Text</a></li>

    paste it into the middle of your topnav.php between two items.

  27. On November 2nd, 2008 at 3:39 pm jerryr said:

    Hi – Can you create a drop down of your ‘recent posts’ ???

    - jerryr

  28. On November 3rd, 2008 at 9:47 am Jared said:

    @jerryr: yeah, just put in a line in your topnav.php file between items like so:

    < ?php wp_get_archives( 'type=postbypost&limit=10' ); ?>

    and you can change the “10″ to however many you want to appear.

  29. On November 3rd, 2008 at 10:30 am Allison said:

    Hi jared,

    when I tried pasting your link to pages. It went to my bluehost admin??

    this is the line I inserted:
    contact

    can you see a mistake in that. I don’t actually have a website, just the blog and I want the top link to just go to a “page” I created within wordpress.

    Thank you!
    Allison

  30. On November 3rd, 2008 at 10:31 am Allison said:

    oops let me try the line again:

    “contact“

  31. On November 3rd, 2008 at 10:34 am Allison said:

    Ahhh… how do I post a line of text from the code?
    that link is not my site at all…

    let me try again:

    (code before)”http://www.myblogsite.com/contact”>contact(code after)

  32. On November 3rd, 2008 at 12:13 pm jerryr said:

    Jarad –
    For the

    How do you code for the HREF A tag ? not an expert yet in PHP ?
    what would the code look like the a link (example ‘Recent Posts’) with a drop down of the 10 most recent posts ?

    Next question – what about blogroll (links) – I delete the code by mistake

    Thanks – jerryr

  33. On November 3rd, 2008 at 12:28 pm jerryr said:

    ok – i figured it out:

    Recent Posts

    What about for the blogroll (links) ????

    thanks – jerryr

  34. On November 3rd, 2008 at 4:16 pm Jared said:

    @jerryr: to put your blogroll links back, paste this line of code exactly into your topnav.php between items:

    <?php wp_list_bookmarks('title_before=&title_after=&category_before=li class="%class">'); ?>

  35. On November 3rd, 2008 at 4:24 pm Jared said:

    @Allison: allison, you have to get your exact URL for your contact page after you create it, then use that link. if that doesn’t make sense, shoot me an email through the support tab.

Leave a Reply