cc licensed flickr photo shared by ElDave
The main navigation of most WordPress sites is driven by cycling through all of the content that are WordPress pages– which is nice, but sometimes you have content that you don;t want cluttering the navbar. Or maybe you want to insert something that is not a Page into the navbar. I’ve been amazed that so few people seem to know how to subvert it, and below is a little trick I use when I want to wedge some other kind of WordPress content into the navbar by Pages process.
Mostly this is in your HEAD… I mean the header.php file of your templates that generates it as an Unordered List:
|
1 2 3 4 5 6 7 |
<div id="nav"> <ul> <li class="<?php if (is_home()) {echo 'page_item current_page_item'; } ?>"> <a href="<?php echo get_settings('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li' ); ?> </ul> </div> |
The first li item creates the Home link, and in thes case applies some CSS logic if the home page is in view. The rest of it happens in the PHP code statement that uses the WordPress fucntion to return a list of all Pages and putting each one in an <li> tag and set to link from the title.
To customize which Pages are used, you need to find the WordPress ID of the pages you want to include or exclude; the easy way is to go to the Edit Pages part of your dashboard, mouse over the page links, and look for the part of the URL that says id=X
If you don’t want all your pages, you can either exclude certain ones, say ID 5 and 11 by changing the line above to:
|
1 |
<?php wp_list_pages('exclude=5,11&title_li' ); ?> |
Or, if in a current case, I have tons of pages but only want say 5 of them in my navigation, I can use:
|
1 |
<?php wp_list_pages('include=3,5,12,23,34&title_li' ); ?> |
If you want to have more control over the order of links than alphabetical, add this little bit of code (broken in half for readability):
|
1 2 |
<?php wp_list_pages('include=3,5,12,23,34 &title_li&sort_column=menu_order' ) ?> |
and for each page, you can modify the value of the Order field for your Page (under attributes) using integers to define the load order.. I love how it says below this box:
Pages are usually ordered alphabetically, but you can put a number above to change the order pages appear in. (We know this is a little janky, it’ll be better in future releases.)
It has been just as janky for like 5 years 😉
What if you want one of your nav links to connect to something outside your blog? If you can live with it before or after the list of pages, you can just card code an extra <li> item
|
1 2 3 4 5 6 7 8 9 |
<div id="nav"> <ul> <li class="<?php if (is_home()) {echo 'page_item current_page_item'; } ?>"> <a href="<?php echo get_settings('home'); ?>/">Home</a></li> <li><a href="http://cogdogblog.com/">Good Stuff</a></li> <?php wp_list_pages('title_li' ); ?> <li><a href="http://flickr.com/photos/cogdog">Photos</a></li> </ul> </div> |
See, not too hard to customize.
And now the magic tricks– I had a case today 9and elsewhere) where I wanted something like a WordPress Category or Tag Name to be part of my navbar flow, and needing it to be somewhere in the middle of my page orders (thus I could not use the extra <li> insertion).
I do this by a little misdirection. Let’s say I use a tag for my resource site called “Tips” to organize all my posts that are helpful tips- I thus have some sort of URL like http://www.mycoolstuff.org/tag/tips that I want to be part if my nav set of links.
First I create a fake placeholder WordPress page called My Cool Tips, which you can get to via the URL http://www.mycoolstuff.org/my-cool-tips
I then go into by Apache server settings for this domain, and add a permanent redirection like:
|
1 |
RedirectPermanent /tips http://www.mycoolstuff.org/my-cool-tips |
What this does is to tell my webs serve to take any request coming towards my site at http://www.mycoolstuff.org/my-cool-tips is immediately re-routed to http://www.mycoolstuff.org/tag/tips
but because WordPress thinks that this URL is a page, it sits it in my navbar like a Page, but any links to it are sent to the tag page archive.
Now, often, like on a hosted web server, you do not have access to the server apache configuration files. No problem! You can just slap it at the top of the .htaccess document inside your WordPress home directory.
I’ve done that here on CogDgBlog- I have a static page that sites outside of WordPress (it uses the WP include to access the nav bar, but it is not managed by WordPress; it is a stand alone PHP doc:
http://cogdogblog.com/best.php
But that URL is a bit…. “janky”, so in my .htaccess file, I added at the top:
RedirectPermanent /best http://cogdogblog.com/best.php
which sends any request to http://cogdogblog.com/best to the actual URL.
WordPress is great, but it is greater when you start tweaking and janking its insides out!
