Adding External Links To Your Page Navigation In Wordpress.

This tutorial will provide you with a simple method of adding external links to your Wordpress site Page navigation.

For this example I have set up a separate sub domain, you can find the site at examples.globalevangelists.com and although I am a huge fan and I thoroughly recommend the Hybrid theme by Justin Tadlock, I realize that not everyone will take advantage of Justins themes.

So I decided to use a basic theme design from the Wordpress repository called Blass2 1.6.2 by 1000ff The reason I decided to use this theme was to show how you can apply this method of adding external links to your main navigation menu on almost any Wordpress theme.

Ok so lets add a new link to our page navigation. If you take a look at the image below you will see how the navigation looks before we start.

This is basically an out of the box installation of Wordpress with a couple of test pages set up, what we want to do is add a link to another website to this navigation menu.

In this example, I am going to link back to my main blog, but make the link look like it is just another page in my navigation menu.

The first step is to log into your Wordpress admin area.

Once logged in, go to the Editor in the Appearance section to the left of your screen.

Once you have opened the theme editor, look for the header.php. Click on the link to open this file.

Once you have the header.php file open, make sure you create a copy of the code, Just click inside of the php editor and highlight the entire code, then copy and paste your code onto a separate text editor and save it to your computers hard-drive, If something goes wrong you can always upload this file again using your ftp client.

Ok so now that we have our back up copy of the header.php ready to reinstall if we need to, we can start hacking at our code.

In the header file you will need to locate your page menu, this is usually listed as nav or it could be simply called menu.

Your menu is usually inside a div, and depending on your theme, the code will look something like this.

What we need to do is replace the default php code with our new html links.

So now we know what we need to change, lets get our new links.

We have a couple of options here, we can manually create them, or we can simply get the existing html links from our browser, I prefer the second option.

Open a new tab or window and load up your sites home page.

Once your site has loaded into your browser, right click somewhere on the page and choose the option to View Page Source.

In the screen that opens is the source code of your webpage.

We need to find the navigation links, so we can copy these links and paste them into our header.php file.

A good trick is to copy the page title of one of your pages and do a search of the source code, Use the keyboard shortcut, on the mac it’s command+f ,

Paste in your page title and look for the result.

You can see in the image below the highlighted text, this is the text I searched for using the above method, as you can see these are the links I want to copy for my header navigation.

I know the above image is a little hard to see but in your source code you will see some code that looks like the following,

`

                        <ul id="nav">
<li class="page_item"><a href="http://examples.globalevangelists.com">Home</a></li>
<li class="page_item page-item-2"><a href="http://examples.globalevangelists.com/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-7"><a href="http://examples.globalevangelists.com/?page_id=7" title="Archives">Archives</a></li>
<li class="page_item page-item-3"><a href="http://examples.globalevangelists.com/?page_id=3" title="Test Page 1">Test Page 1</a></li>
<li class="page_item page-item-5"><a href="http://examples.globalevangelists.com/?page_id=5" title="Test Page 2">Test Page 2</a></li>

                        </ul>

`
Copy all of the links within these two tags and paste them onto a text editor, we will need to create our new link from this code.

The next step is grab our new URL.

Go to the website you want to link to and grab the full URL from your browsers address bar and paste it into your text editor, now what we want to do is copy one of the links from our source code menu and replace the original URL with our new URL link as follows.

Change this URL from the source code,

`

<li class="page_item page-item-5"><a href="http://examples.globalevangelists.com/?page_id=5" title="Test Page 2">Test Page 2</a></li>

`
To this…
`

<li class="page_item "><a href="http://www.globalevangelists.com/" title="My Blog">My Blog</a></li>

`

Notice how the URL is now pointing to my blogs home page, I have also Changed the title of the link to My blog, what I have also done is removed the page item id number.

So now I add my new link to all of my current links so my code now looks like this,

`

<li class="page_item"><a href="http://examples.globalevangelists.com">Home</a></li>
<li class="page_item page-item-2"><a href="http://examples.globalevangelists.com/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-7"><a href="http://examples.globalevangelists.com/?page_id=7" title="Archives">Archives</a></li>
<li class="page_item page-item-3"><a href="http://examples.globalevangelists.com/?page_id=3" title="Test Page 1">Test Page 1</a></li>
<li class="page_item page-item-5"><a href="http://examples.globalevangelists.com/?page_id=5" title="Test Page 2">Test Page 2</a></li>
<li class="page_item" ><a href="http://www.globalevangelists.com/" title="My Blog">My Blog</a></li>

`

I then copy all of the above links and replace the php links in my header.php file and save all my changes by clicking on the Update File button on the bottom of the page.

Make sure you paste the code between the two UL tags, so you would replace…

This

`<ul id=”nav”>

<li><a href=”<?php bloginfo(‘url’); ?>”>Home</a></li>

<?php wp_list_pages(‘depth=1&title_li=’); ?>

</ul>

`
To this…

`

                        <ul id="nav">
<li class="page_item"><a href="http://examples.globalevangelists.com">Home</a></li>
<li class="page_item page-item-2"><a href="http://examples.globalevangelists.com/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-7"><a href="http://examples.globalevangelists.com/?page_id=7" title="Archives">Archives</a></li>
<li class="page_item page-item-3"><a href="http://examples.globalevangelists.com/?page_id=3" title="Test Page 1">Test Page 1</a></li>
<li class="page_item page-item-5"><a href="http://examples.globalevangelists.com/?page_id=5" title="Test Page 2">Test Page 2</a></li>
<li class="page_item" ><a href="http://www.globalevangelists.com/" title="My Blog">My Blog</a></li>
                        </ul>

`

Now if we go to back to our site and have a look at the page navigation, we should see our new link at the end of our menu which looks like an ordinary page link.

And that’s all there is to it.

Just don’t forget to have a backup copy of your header.php file and remember, when you change your theme you will have to repeat these steps over, what you have done here is only changed the links in this theme, not your Wordpress install.

Popularity: 72% [?]

More On This Topic...

• Adjusting The Reading Settings In Wordpress
• Check Your Privacy Settings
• Managing The Discussion Settings In Wordpress
• How To Add Categories In Wordpress