Skip navigation

Navigating Your WordPress Site

How visitors nagivate through your site is critical to how long they stay on your site. While having quality content helps, their ability to move from one post to another, or through the archives and categories, finding the information they need about the site, you, and the content, is very important to a successful website.

WordPress makes that easy as most of the WordPress Themes come with built-in navigational aids. But you might want to customize or enhance the navigation process through your site, so let’s look at how you navigate through your WordPress site.

Navigating the Sidebar

sidebar exampleThe sidebar is probably the most common and powerful navigational tool on your website. Depending upon your Theme and site needs, this is where you will typically find access to:

You can also increase your navigation by adding plugins or template tags that showcase:

  • Most Recent Posts
  • Most Recent Comments
  • Random Posts

post meta data section example in the sidebarBy adding a Post Meta Data Section to your sidebar, you can further increase your navigation. The post meta data section usually holds information about your post, such as the time and date it was posted, but it also may include the categories and the next and previous post in the same category to help people find more information related to the post’s subject. The Default WordPress Theme, and Themes based upon it, generally put the post meta data in a box at the bottom of the post in the single post view, but you can move this into your sidebar quite easily, giving people more options to find the information they may be searching for.

Speaking of search, the search form in your sidebar also helps people find their way to the information they need on your site. You can increase the power of your search bar by adding a link to an “advanced search” page or simply a link to your site’s site map, giving the user more options.

search form in the sidebar exampleThere are many ways of making your sidebar more powerful through the use of Dynamic Menu Highlighting and javascript or CSS based drop down menus.

The code within a WordPress sidebar can be complex to understand as most WordPress Themes feature the sidebar information in nested lists. If you are unfamiliar with nested lists, see Styling Lists with CSS and for help on disecting and restyling your entire sidebar, or just bits and pieces, see Customizing Your Sidebar.

The Header

Some Themes feature navigation in the header, often called the masthead. These usually feature CSS Horizontal menus where the links go across horizontally instead of vertically, like in the sidebar. Most Themes feature only the Pages on your site, such as Contact and About. You can also add links to categories or specific pages manually.

Some Themes also feature a search form in the header, directing people to immediately seek the information they need on your site.

In general, the header of your site should only host the most important information as it can get really cluttered. For more information on modifying and customizing your WordPress header, see Designing Headers.

The Footer

example of footerOften overlooked, the footer is a key location for finding navigational links on your site. You can use the Template Tags for listing pages or categories to help people find the informaton they need. Or you can use manual links to direct the visitor.

The footer is also good for listing copyright, comment policies, registration/membership policies, and other information you need linked for legal or informational purposes.

Next and Previous Pages and Posts

WordPress features two template tags to generate next and previous links within your WordPress site. Each one is designed to work on specific post views. WordPress has two post views: single and multi-post views.

previous and next navigation links for multiple post views The next and previous pages links add nagivation to multi-post pages by using the post navigation link. If you are on the front page and get to the bottom of the posts visible on that page, you will see a link to “previous post” to click, which will then take you to more posts that “run off” your front page view. Same with categories, archives, search and other multi-post views.

next previous post linksFor single post views, the previous post link and next post link template files help the visitor move from the next and previous posts from that one chronologically. So the previous post would be the last one posted and the next post would be the one posted after the current one. These links’ parameters can also be modified to keep the next and previous post links within their category, but only the parent category, not the child category, and it is only available in the most current upgrade versions of WordPress.

In Post Navigation

While using WordPress template tags inside of posts entered in the Write Post panel really doesn’t work, you can still add links inside of posts that will help navigation of your site.

Begin by linking specific references in your post text to related articles on your site. For instance, if I wanted to call your attention to our article on Getting Started With WordPress then I would just include the link to the article manually. You can use the absolute or relative link method, though I recommend you use the relative link method to avoid creating pingbacks and trackbacks within your site.

You can also manually create a series of links to articles inside of a container or CSS box within your post. Set up some CSS styles for the container, remembering to include the title and the text styles. You can even add the entire layout of the container to your Quicktags buttons in the quicktag.js which generates the quicktag buttons you see in the Write Post Administration Panels. With one click, the container, title, and sample list could be generated and you just have to fill in the blanks.

Example of Skippy in-series plugin in use for article series in WordPressFor more information on styling lists, menus, and other graphic in-post containers, see CSS Unleashed – Experiments with Lists, Menus, Tables of Content, and More.

Connecting series of articles got easier with Skippy’s In-Series Plugin. Using Custom Fields, you enter in the series name and add the custom field and then enter in the number order that post is in the series. After adding the plugin tag to your single post template, when viewing an article within the series, it will list the series in order as links, so the user can quickly move between the connected series articles.

Navigating Your WordPress Site

We’ve covered the basics, and there are many more ways to increase navigation on your site. If you have a few recommendations or ideas, please mention them in our comments below. If you need more specific information on handling all the different navigation possiblities with WordPress, see Good Navigation Links and take time to check out the many navigation plugins on the WordPress Codex.

Digg Digg | Del.icio.us Del.icio.us | Blinklist BlinkList | Furl Furl
Spurl Spurl | Reddit | Add to Simpy Simpy | Add to RawSugar RawSugar


Site Search Tags: , , , , , , , , , , , , ,
Copyright Lorelle VanFossen

4 Comments

  1. Alphie
    Posted July 19, 2007 at 8:08 am | Permalink

    Hey, it’s me again. I won’t post about the Custom Listing Plugin, like many other people I have many issues with it since I upgraded to 2.2.1. I hope the author of this powerful plugin will do something for the WP Community since it seems like we are million using his plugin :)

    My problem is about Category behavior since the upgrade. 2.2.1 modified the function the_category and now I can’t make it work like before… I’ve searched over the Internet and someone explains it here: http://nslog.com/2007/05/25/wordpress_22_changes_category_order_behavior. another guy posted on the WordPress.org forum with no reply yet here: http://wordpress.org/support/topic/126632

    Maybe someone here can help, I’m almost desperate about it. Thx! ^^

  2. Posted September 20, 2007 at 1:23 am | Permalink

    Very cool post.. WIll Definitely help new bloggers.. Thanks..

  3. Posted July 6, 2013 at 5:46 am | Permalink

    Sidebar Question.

    Hello Lorelle, Thank you again for a great article. I have a question that have been keeping me awake.
    On the new Main Sidebar I have a widget called “Blog Subscription Jetpack” (part of the twenty twelve WordPres theme). I would like my blog subscription box to stand out and I wanted to put a border line around it, but for the life of me, I stayed up until 3:00 am, trying to find the CSS for that widget and I never did. Do you know where I can make changes to the appearance of of that widget?

    • Posted July 7, 2013 at 12:21 am | Permalink

      Use Firebug in Firefox or Chrome to identify the HTML associated with that Widget. Thanks.


21 Trackbacks/Pingbacks

  1. [...] Navigating Your WordPress Site [...]

  2. [...] Lorelle om wordpress [...]

  3. [...] No Road Blocks: A road block for a search engine crawler moving through a website is any element that confuses, distracts, or stops a search engine crawler or spider from moving through your site. Examples of road blocks include HTML/XHMTL errors, lack of connecting and navigational links, lack of text, a table-based design, 404 page not found errors or other dead or moved links, and bad Apache .htaccess or robots.txt files. [...]

  4. [...] How Do People Move Around on Your Blog? How does your navigation on your blog work? Do you have next and previous post links on every post? Do you have categories, tags, or other links to help navigation? Are the navigation links clearly defined? Easy to find? [...]

  5. [...] The options listed above come with most WordPress Themes, basically by default. These are the navigation features considered standard for most blogs. The Regulus Theme also includes WordPress Plugins and WordPress Tags, like Most Recent Posts, allowing even more customization. [...]

  6. [...] Sempre hi ha coses per retocar i millorar en un blog, i gràcies a la influència dels altres llocs que habitualment visito, trec idees pel desenvolupament i manteniment d’aquest que esteu llegint ara mateix. He trobat força incòmode navegar pel meu blog. En quan arribes al final de la plana principal t’has de dirigir als arxius per poder veure els posts anteriors al cinquè més recentment publicat. Puix que hi haurà gent que potser no fa servir cap feed-reader per estar al dia de les meves notícies, aquest sistema els hi deu incomodar d’allò més. Adicionalment, una feature que sempre agraeixo en les meves lectures diàries és la disponibilitat de links a les pàgines i als posts següents; per tant no tenia més remei (moralment) que facilitar als meus lectors aquesta comoditat. Buscant informació per la xarxa, vaig trobar aquest blog on s’explica el tema de la navegació a través de sites WordPress. Per tal d’afegir la navegació a través de les diferents pàgines del blog cal insertar el troç de codi explicat aquí: [...]

  7. [...] Help Me Visit Your Blog: And the number one problem I find with blogs is lack of good site navigation. WordPress’s premiere WordPress Theme, Kubrick, started a trend that made me crazy. The blog post page (single post view) features no site navigation other than next and previous posts. No sidebar, no recent posts, no most popular posts, no categories, no Pages, no tags, nothing. Unfortunately, a lot of Themes are now based upon Kubrick, spreading this flaw all over the web. When I arrive on your Kubrick-based blog from a search engines, I’m landing there because that post came up in the search results. If I want to look around and see what else might be of help, and find out more about the author and this blog, the only way is to go to the front page which offers this information is by clicking the header or blog title. That’s not much help. Help the visitor move around on your blog, find the information they need, and find out what you are all about and what you have to say on all your subjects. [...]

  8. [...] Navigating Your WordPress Site [...]

  9. [...] Navigating Your WordPress Site [...]

  10. [...] I dealt with a lot of basic design elements found within a WordPress Theme such as “Navigating Your WordPress Site”, “Problem Solving the WordPress Header”, “Dissecting the WordPress Post Title Link”, and many other “WordPress Design Details”. [...]

  11. [...] Have you forgotten your basic blog navigation links like next and previous posts? This is another way of getting more views of your post titles. For many WordPress Themes, these next and previous post links simply say Next and Previous, not a strong incentive to find out what posts are indeed next and previous from the one the visitor is on, is it? So let’s add some post titles to those navigational links to encourage their clickability. [...]

  12. [...] Navigating Your WordPress Site [...]

  13. [...] When a blog post scrolls off the bottom of the front page, it is still accessible through various navigation methods on a blog. [...]

  14. [...] Navigation to key areas of reader’s interest is paramount. Links to the most critical navigation elements such as concerts, contact, and about the artist must be on each page to encourage the easy reach for more information. [...]

  15. [...] Navigating Your WordPress Site [...]

  16. […] Navigating Your WordPress Site […]

  17. […] Navigating Your WordPress Site […]

  18. […] Navigating Your WordPress Site […]

  19. […] Navigating Your WordPress Site […]

  20. […] but when you dig through the different page views, pay close attention to the details, especially navigation, to make sure that the usability functions on this Theme are what you want to live with for a […]

  21. […] A search engine crawls through your site following a path from one link to another. Make sure your site navigation leads the reader as well as search engines to all your posts and pages by including related and/or […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,569 other followers

%d bloggers like this: