HTML: Navigation

Last week in my coding series, we discussed headers. More specifically, we discussed how to put a gorgeous logo onto your header, using the background attribute in CSS. It’s a wonderful start, but there’s far more to headers than that, you know. For example, navigation. Although some people put their navigation in the sidebar, the majority of websites have the main navigation as part of the header.

GPS (Blog) Navigation

In order to have something to navigate through, you need to have different pages on your website, right? So you go into the wp-admin section of your WordPress website, like you would when you write a blog post. Create a new page… (not post! There’s a difference… posts are what dynamically go on your blog, whereas pages are static – like your About page, or Contact page, that are always there and pretty much stay the same.)

Once you’ve created several pages, you’ll want them in your navigation, right? So how do you do this? Well, if you wanted, you could hand code the link to each page into the navigation section of your website. However, this would mean that whenever you add a new page to your website, you will need to remember to update it in your code. Which just makes more work for you. Silly, right? Especially when we have… superhero music… the glory of PHP and WordPress!

Ahem. Got a little overexcited there.

But you should be excited! You see, WordPress has created a PHP function (yep, they wrote the function for you! Aren’t they wonderful?) that takes all of the pages in your website, and outputs them into a neat little list, HTML and all. This function is called wp_list_pages($args), and takes in an array of arguments ($args is the parameter) that customize your list of pages. All of these arguments are explained in detail in the WordPress Codex (the place where all of the WordPress functions are documented and explained)… but if you have questions about any of them, you’re always free to ask me in the comments, or even contact me if you’re too shy to ask publicly.

I don’t bite. Promise.

Making a List, Checking it Twice

As I said before, the wp_list_pages($args) function gives us back a list of the pages on your blog. But what does that mean, in HTML terms? It means that the functions gives you back something like this:

<li><a href="http://sushiday.com/services">Store</a></li>
<li><a href="http://sushiday.com/about">About</a></li>
<li><a href="http://sushiday.com/contact">Contact</a></li>
<li><a href="http://sushiday.com/archives">Archives</a></li>

Seems good, right? Each <li></li> is a list item. (And each <a href=""></a> is a link – the url between the quotes after the href is the url that the link points to, and the text between the <a> tags is the text that displays when your browser parses the link like this: <a href="https://sushicodes.com/">SushiCodes</a> displays as SushiCodes.)

That all seems fine and dandy. However… we may have our list items, but our list is not complete. Not yet, anyways. You see, there are two different kinds of lists. You have ordered lists that are numbered, like this:

1. One
2. Two
3. Three

and you have unordered lists, that just use some sort of bullet point without indicating any sort of order, like this:

• Red
• Blue
• Green
• Yellow
• Purple

Because there are two different kinds of lists, you have to differentiate them in your HTML code. If you want an ordered list, then surround your list items with <ol></ol>:

<ol>
 	<li>One</li>
 	<li>Two</li>
 	<li>Three</li>
</ol>

Similarly, if you want an unordered list, then surround your list items with <ul></ul>:

<ul>
 	<li>Red</li>
 	<li>Blue</li>
 	<li>Green</li>
 	<li>Yellow</li>
 	<li>Purple</li>
</ul>

Easy, right? Sure it is!

So. Since the wp_list_pages($args) function only returns the list items, we need to define what sort of list it is. If you wanted, you could very well make it either an ordered or unordered list – it’s up to you! But 99.99% of the time, you’re going to want to use an unordered list… it’s easy enough to get rid of the bullet points if you don’t want them, but it’s kind of silly to number your navigation when those numbers don’t really mean anything, and just clutter up your navigation.

Since almost everyone uses unordered lists for their navigation, it seems like it would make sense for wp_list_pages($args) to just return the entire list, <ul> tags and all, right? However, it’s actually better that they don’t. What if you wanted to add a link to an external page into your navigation… like Sushi Day or Fridgg? You could just do this:

<ul>
 	<?php wp_list_pages(); ?>
 	<li><a href="http://sushiday.com/">Sushi Day</a></li>
 	<li><a href="http://fridgg.com/">Fridgg</a></li>
</ul>

Abracadabra!

This is a nice beginning, but there’s still a lot more to talk about regarding the navigation section of your header, and how to use CSS to make it look great. After all, wp_list_pages($args) just outputs a list… a vertical list of items. But if you want your navigation to be horizontal like how we have it… you’re going to have to do a little CSS magic.

So come back next week, and don’t forget to pack your magic wands…