Static Pages in WordPress

At first, most bloggers don’t consider the need for a static page. Maybe one that has some about details on, but nothing more. As time goes on they may add one or two more pages, then a couple more. If they’ve stuck with the same theme then they’re most likely manually coding in the page links into their site, or they come manually coded in the case of some of the free themes available. Good idea? Well not necessarily, not if you intend to maybe change the page slug, or add a new page, and forget that the process isn’t automated on the front end. One of the first free themes I used had manually coded page tabs and I couldn’t work out why my additional page wasn’t displaying until I realised this (I was a bit of a WordPress newbie at the time!).

Making your pages dynamic is pretty easy, understanding how flexible your page navigation can be will help too. Pages can be quite powerful parts of your WordPress site yet often get overlooked.

Create Your Pages

Before you can display page links on the front end you need to create a few pages. About, Contact Me/Us, Links, Portfolio, can all sometimes be found on a blog. The basics of creating a page are pretty similar to creating a post, however there are two additional options you can control within the add/edit page section.

The first is Page Template. You will only see this if you have one or more page templates in your theme (Kubrick comes with a links page template for example). I’ll explain how to create your own page templates another time, however some themes will come with them ready coded. Changing your page template from the default to a specific one will mean that additional code could be within the template, triggering the output of additional information. For example a links template usually lists all of your links specified in your blogroll without you needing to see the code that does this in the page content area.

The second is Page Order. You can control the order of your pages by assigning a number to each. Then in the list pages template tag you can specify to list the pages in your selected page order, ascending or descending.

The Page List Template Tag

The template tag used to dynamically list your pages on your site is wp_list_pages(). Used without parameters this displays a list item with the heading of Pages and an unordered list, the pages will be listed alphabetically. A few of the more used parameters are

sort_column

Allows you to determine what aspect to use to control the sorting of the list. menu_order will sort using the page order you’ve specified in the page order option (as explained earlier in this post), ID will resort on the page ID, so in order of when the pages were created.

sort_order

By default it will sort ascending, add this parameter and desc if you want to reverse the order.

exclude

This accepts a comma separated list of page IDs to exclude from the list. Handy to remove pages you do not want appearing in your list, such as a thank you page that people see after completing a contact form. Usage is exclude=1,2,3.

include

The opposite of exclude, this accepts a comma separated list of page IDs to display, if it’s not in the list it won’t be displayed in the menu.

depth

Allows you to control whether the subpages are displayed or not, or how they’re displayed (nested list or part of the main pages list). A value of -1 displays all pages in one single list (as opposed to nested list), 1 means that only your main top level pages are displayed and 2 or higher specifies the depth of how many pages to display.

title_li

Allows you to control the heading of the list, setting it blank means just an unordered list will be output.

You’ll possibly notice that most of these parameters are similar to those of wp_list_categories() as written about last week.

A simple example of using these parameters would be the following:

< ?php wp_list_pages('sort_column=menu_order&title_li=&depth=1&exclude=5,6') ?>

The above code would the output an unordered list, in menu order, only displaying the top level pages, and not displaying the pages with IDs of 5 and 6.

Styling Your Page Navigation

I’ve sometimes seen people say that they would manually code their page links in so that they could easily style them. However the output that WordPress produces provides a lot of scope for control and styling as you can see below:

<li class="pagenav">Pages
 <ul>
  <li class="page_item current_page_parent"><a href="/?page_id=1" title="page title">page parent</a>
   <ul>
    <li class="page_item current_page_item"><a href="/?page_id=2" title="page title">selected page</a></li>
   </ul>
  </li>
  <li class="page_item"><a href="/?page_id=3" title="page title">another top level page</a></li>
 </ul>
</li>

Every list item for a page has the class of ‘page_item’. Then the currently selected page also has a class of ‘current_page_item’. If the current page is a child of another page, the parent page will also have an additional class of ‘current_page_parent’.

Page Related Plugins

There are plenty of plugins related to static pages. A couple that I find very useful are

Exclude Pages

Rather than using the exclude parameter, this plugin does the same job but gives you a checkbox option with each page to include or exclude that page from the menu output.

Search Everything

If you want your pages to be searched when the search box is used on your site then you need this plugin! Bizarrely WordPress’s default search only searches the post content (needed for all versions before WordPress 2.5). It can still be useful on WordPress 2.5 to exclude the search from certain posts, pages, categories etc.

Reveal IDs for WP 2.5

The new admin in WordPress 2.5 doesn’t visually show the page/category/link/post IDs. This plugin will bring them back.

Custom Page Link Title Attributes

A plugin written by myself. After realising that the output of the page links included a title attribute that was identical to the anchor text of the link (i.e. a complete waste of time having it!), I wrote a plugin that would prevent the default title attribute from being output and also give an additional option in the page admin to specify custom title attribute text. Much better for accessibility and usability.

Written by Sarah from Stuff By Sarah
Posted on April 27th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

12