Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Scalable WordPress Navigation Using Sort Order

0 (0 Likes / 0 Dislikes)
What we're going to cover today is a simple but elegant way of using sort order in your WordPress site that is page-intensive. So in other words, a site which uses a lot of pages, not necessarily (or not just) a lot of posts. So quickly take notice that our navigation right now has several top-level elements in it, and most of those elements have a drop-down or several drop-downs underneath. We're going to use sort order to easily create this navigation so that everything falls in the order we want across the top and in the drop-downs. So let's take a look at the back end and see how that's done. So on the back end, we have our pages listed and we have our sub-pages underneath those, already in place. Obviously, you have to go in and create your pages if you haven't already, but once you do, and you've assigned each of your sub-pages to the parent page, what we've done is gone in and in the Order field— you can do this in full Edit or Quick Edit mode— we've given it a particular order. In this case, we're using four-digit sort orders. And we'll explain why we use four digits, not just one-two-three-four-five in a couple of minutes. So we know, based on our sort order, that this is the first page. 1000 is going to be the first page that we want to show up in our nav. A sub-page will have also the sort order of 1000 to start with, but then it's got a "sub-number", if you will: 10. And you'll notice as we move through these, that we're moving in increments of ten. So the next sub-page under About Us, or the second one, is 1020. The third one—you can probably guess—is 1030. And so on. Because these numbers are ascending, or you've got 1010, 1020, 1030, the sort order is going to put them for us in the order from low to high numbers. So when we get to our second top-level page, in this case The Studio, We're going to give that one a sort order of 2000. The reason we do this is it is the second page in our nav, and we want to be able to quickly and easily at any point in the future look at that sort order and know what place that falls in our navigation. So it's just a very easy way to do that. Now, going back to why we're using four-digit numbers: the primary reason that I've done that is that if I—down the road—want to insert another page somewhere into my navigation, so let's go back up into under About Us, and say we wanted to put a page in between Mission and Values. Rather than having to go through and renumber things, if we just did this as sort order one-two-three-four, we'd have to change this one to three, change three to four, four to five, and so on, now what we can do is we could come in here, create another page, give that an order of 1015, and it will automatically show up between 1010 and 1020. So again, this is a really easy way to do it, but it is a pretty elegant solution for making sure that you get you pages ordered in the proper manner. This way, when we go in and we use the wp_list_pages function to create our navigation, and we put the order clause in there, it will order them correctly for us. And then of course, this carries on into the other top-level pages, so they will be in the proper order, and using 1000, 2000, 3000, and so on, is just a way of keeping them logically separated into columns rather than creating About as 1000, and The Studio as 1080, or 1060, or whatever would come after our last sub-page, we're starting to kind of lose scalability and we're also losing the ability to ever just look at that sort order and instantly know where that falls in the navigation. If you do that, use wp_list_pages, and include the order clause in there, it should put things in the right order for you and give you lots of flexibility for the future.

Video Details

Duration: 4 minutes and 35 seconds
Country: United States
Language: English
License: Dotsub - Standard License
Producer: Scott Ellis
Views: 165
Posted by: wordpresstv on Aug 7, 2009

Creating navigation which reflects the items you want in the order you want can seem a little tricky, but Scott Ellis demonstrates a simple solution that also provides great flexibility for adding future content without having to redo what you have done.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.