Post Pic

How to: Include external pages in WordPress navigation

Imagine that you’re running a blog, but also have an online shop, a phpBB forum and some static pages. Do you’d like to be able to include theses pages in WordPress navigation, just like slamdunk asked in the forum? If yes, just read on.

The solution to this problem is fairly simple. As the wp_list_pages() function returns only <li>...</li> elements, we just have to add static links to our external pages, just as shown below:

<ul>
<?php wp_list_pages('title_li='); ?>
<li><a href="forum.php">Forum</a></li>
<li><a href="shop.php">Shop</a></li>
</ul>

That's all. These two external links looks exactly the same as the ones from WordPress.

24 Responses

Jan 27 2009 10:43

You should switch </li> and </a> it’s not valid markup as it is written.

regards /Jonas

Jan 27 2009 10:54

@Jonas: You’re right! What a mistake. I’m correcting it right now.

Jan 29 2009 12:04

Ha !! So simple… thanks for opening our eyes. :)

Jan 30 2009 00:13

One way I’ve done this before is to use the Redirection plugin> Then I don’t have to update any themes I might switch to in the future.

Jan 30 2009 00:26

@Kevin, that’s a nice hack! Thanks for sharing :)

Jan 30 2009 00:32

The second <li> row is still wrong :)

Jan 30 2009 00:45

@Jonas: Bouh, I definitely need some more coffee. Thanks anyways ;)

Jan 30 2009 19:25

Jean-Baptiste rules!

Jan 30 2009 21:20

How do you ensure that they will be in alpha order with the rest of the links? Any tips? Thanks!

Jan 31 2009 00:06

If you use the Redirection plugin to do this you can order the list however you like.

Feb 02 2009 18:16

This is great! While I needed to know this, I also was wondering how to call the pages from outside of WordPress. For example, if I am in the forum, how do I call the list of pages from WordPress? The forum (ex. myblog.com/forum) is in a different directory so what is the best method to call those pages?

Right now, the phpBB forum uses its own header/css, thus I need to manually program those pages in to appear in the phpBB header. Is there a better way to do this?

Feb 02 2009 22:21

I know you probably meant to, but you ought to add a slash to the front of forum.php and shop.php. That way they won’t give you a 404 if you try to access them from a post or archive.

Feb 03 2009 03:37

Very well timed post. I’m working on a site redesign for one of my sites and need to include a link to external pages within the navigation. Even better that it’s so simple. Of course sometimes it’s the simple ones that get over looked :-)

Apr 30 2009 16:33

I just facepalm meself for seeking plugin to do this..

thanks for the tips.

May 13 2009 17:34

I wrote a perfect plugin for that. Get it from here
http://wordpress.org/extend/plugins/redirector/

Jun 16 2009 18:56

Here is how I accomplished this exact thing without having to use any plugins or change any code in my wp files.

Note: This method will only work if you have activated the “Pretty Urls” option of yor WordPress blog, but then again, most of us have that activated anyway.

I’m going to use an example of someone running a WP blog and wanting to add a forum. The main blog will be in the root of your website
Your blog —> http://www.yoursite.com/

The forum part will be installed in a folder named “forum” inside your root folder.

Your forum —> http://www.yoursite.co/forum/

Here is how I did it:

1. Create an empty page in your WP Admin Control panel and name it Forum. The page-slug for this page should be “forum”. Publish this page.

2. Install your preferred forum script inside the “forum” folder in your hosting account. Make sure that you’re installing the forum script into the “forum” folder an not into a sub-directory inside that folder. This is very important.

3. That’s it.

Here is how/why it works:

1. When you create the new “Forum” page in your WP Admin CP and give it a page-slug “forum”, it will automatically be part of your navigation section. And since you’re using “pretty urls”, the link will look like this: http://www.yoursite.com/forum/

2. The actual “Forum” page is empty as far as WP is concerned, but since there is a folder named “forum” in your hosting account and its path is http://www.yoursite.com/forum/ will force the browser to parse whatever it finds in that folder when the link is clicked.

So there you have it. No need for redirection plugins… no need for hard-coding of php files… and it works like a charm.

Hope this helps.
Sebastian

Jan 15 2010 05:43

Thank you very much sir, worked like a charm

Jun 05 2010 02:12

I just needed to add an external link in my navigation also, well not really an external link but a link to another directory outside of my root wordpress install. The way I done this was pretty simular to the way Sebastian described.

I just created a new blank page in wordpress and in the page title I used this HTML:

It worked like a charm and placed the link in the nav. A few things I should point out though about this technique. For some strange, unknown reason it only seemed to work if the anchor text was two words or one word with a space at the end. I have no idea why that is, very weird. Also, like Sebastian’s technique you have to have clean pretty seo friendly permalinks for this to work.

My server is set up with a wordpress install in the root and two other wordpress installs in two other directories. Giving me three seperate wordpress installations with three different websites. I used this technique to link to the other two wordpress sites from the navigation of my root wordpress site. Very confusing…hope you understood.

Seen as I have two wordpress sites installed in their own directory, Sebastian’s technique may actually work better for me thinking about it because if I name the title the same name as the directory I’m sure that the directory site will parse instead of a blank page. I will have to give it a go.

But my technique can be used by anyone even if they haven’t got a script installed in a directory, if it’s just a html page it will work.

Jun 05 2010 02:13

sorry my last post didn’t show the code I used. It turned the code into an anchor link. Basically, in the title you just use the same html you would use for a text link. Thats it!

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required