Move the WordPress page links to the header

The default theme for WordPress places the links to pages in the sidebar. Moving them to the header is relatively easy to do if you’re comfortable making minor changes to the code.
The first thing is to find the path to the theme that you are using, for the default theme the path is:

⁄wordpress⁄wp-content⁄themes⁄default

For other themes the path will vary so make sure you have identified the correct one for the theme you have in use.

Then using your favourite text editor open up the following files:

  • sidebar.php
  • header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the list of page links.

<ul><?php wp_list_pages('title_li='); ?></ul>

Copy the line of code above from the sidebar.php file and paste it in to the header.php file

This will copy the page links from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the page links float right, where you place them is down to personal preferences.

This entry was posted in Design, WordPress and tagged , . Bookmark the permalink.

8 Responses to Move the WordPress page links to the header

  1. JamesD says:

    Thanks for the useful info. It’s so interesting

  2. Ashley says:

    When I move the links to the header.php file the excluded pages are included, how do i correct that?

  3. jamespiggot says:

    Ashley,
    Do you have any exclude (or conversely include) arguments in wp_list_pages, so for example to exclude certain pages the code would look something like:

    <ul><?php wp_list_pages('exclude=17,38'); ?></ul>
    

    If that is the case did you copy those arguments to the header?
    Or do you have a plugin that excludes pages? Let me know what you have done and I can probably help you fix things.
    James

  4. Ashley says:

    I didnt have any arguments posted because i was hoping the page widget (Exclude page ids) would take care of it. trying to make it as simple as possible since i am building it for a non-web-savvy person. Would prefer they not edit the code.

  5. jamespiggot says:

    Yes that is a problem, the page widget is more complex although it does eventually use the same wp_list_pages procedure, it generates the arguments from the metadata held for the widget. You may be able to get the effect you are looking for by creating a sidebar that is displayed horizontally under the header. The other option to explore is using the hierarchy of pages to limit which pages are displayed in which location. The ideal would be to have the capacity to show certain pages in the header and certain pages in the sidebar, that can be done by setting the filters manually on wp_list_pages but that is not really for non-technical users as you say. Another option is to use custom tags on pages and then filter them out on wp_list_pages.

  6. Ashley says:

    As for the tags on the pages, how do i do that? I see i can put tags on posts but not actual pages.

    thanks so much for the help.

  7. jamespiggot says:

    Sorry, meant custom fields rather than custom tags. You add a custom field to each page, for example viewheader with value equal to YES if you want to display it in the header. Then you check for the custom field and generate the filter for wp_list_pages.

  8. jamespiggot says:

    Ashley, I have just posted another article that describes how to list the pages using the settings in the page widget, if you’re interested have a look at move-the-wordpress-pages-to-the-header-revisited in this blog.

We would love to hear from you so please leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.