WP 3 Navigation

When using WP, you have many opportunities to navigate through the contents of your website. The primary navigation is what we commonly refer to as the “main navigation” of the site. It is obvious that you should refer to it in reference to moving through the core content of the website. There are other ways WP provides you opportunities to explore/find content on a website.

Many WP sites have a “sidebar”. This is a column that has secondary content which is useful in finding more specific or new content. Another is the “footer”. Found always at the bottom of the page and provides opportunities to navigate.


In your short time of working with WP you have experienced pages of content. One example on our course website is the “Calendar Outline” link in the main navigation. It is a page that was present at the beginning. It is core content to the course that will not change in any mass percentage. A few things may change but never to be removed or forgotten. This is a classic example of a “Page”. Found in the main navigation.

Each week you have been adding your own content to the website. Your content is valuable, but yet not core to the course. Your addition to the site is in page form but is referred to as a “Post”. Not often found in the navigation but commonly located from links in the sidebar.


Every time you added your Post to the website database it is stuck in a “bucket” to collect similar things. This “bucket” is called a “Category”.

I found this on WordPress.com, which does a good job at explaining what the differences are:

Categories allowed for a broad grouping of post topics, but when you wanted to describe a post in more specific terms, more categories were required. That led to very long category lists inside the blog and very long lists in Categories Widgets.

So we now have tags, too.

Tags are similar to categories, but they are generally used to describe your post in more detail.

To drive the concept home a little better, there is this video:


Certainly! Here is an example of how it can apply to your project.

If you want to upload a photo every day and you want people to see all your photos. Create a Category for “photographs”. Each time you add a photo. Make a new post and select “photographs” category. It will appear automatically with the rest of your photographs.

This is a rough explanation of the concept. One example I have created is on MYDARNDEST website. Each time I add a project to a category, for instance, a Poster would go into my “print design” category. This saves me from manually editing my navigation each time to make the site grow.

How did I get them to appear in a grid?
Using an plugin called Customizable Post Listings, I was able alter the PHP and create a function to pull an image, title, excerpt and link on this page. An advanced technique but something that can be hacked to make work. If you don’t have the patience to manipulate the code, please don’t over-commit to this process.

I have included my code here: Custom Post List
The function I wrote is between lines 701 -> 714. Use with care.


Using an updated WP theme like “Twentyten” it has php code that allows you to build a navigation bar(s) in your website. Allowing you to arrange order and rename page titles from the dashboard.

Using our course website as the example, you are familiar with the pages, posts, categories found on the website.
Here is how you make a menu:

  1. Create A Menu Name
  2. Choose Theme Location and choose new menu name.
  3. Add Pages, Categories or Custom Links
  4. Save Menu
  5. View website and see results.

By dragging the bars around in the menu edit region, you can order navigation and subset (aka Nest) navigational elements from the primary menu items.

Categories you choose to add to the navigation will show according to the theme file called category.php. This file has code to show entire posts with titles. They can be broken up by using a “break” when editing the post. Here is an example of a website that uses the technique of including categories in the main navigation bar. Storyline Public Relations. This is project that I finished 2 weeks ago for a friend and colleague, Kristine Thompson. Under the “Blog” item in the navigation are titles of Kristine’s clients that she includes news that corresponds. Each client name is a category. This technique made created what may have been an incredibly labor based process to make happen quickly.


Conveniently, all the CSS is created to make the navigation appear in the Menu Bar. Including Secondary and Tertiary links. This programming spawned from this: SUCKERFISH DROWDOWN published in 2003 on A LIST APART by Patrick Griffiths of HTML dog.

It uses CSS to redefine HTML lists <ul><li> tags. The best way to learn how this works is to deconstruct a menu that works. I use this resource as a base to make sure my code is going to work in menus I create. http://cssmenumaker.com/

This takes a little time to wrap your head around but is a brilliant way of adding beautiful horizontal or vertical navigation bars to your web site using HTML and CSS. Please practice this, it’s good for you.

No comments yet.

Leave a Reply