Wednesday 8 December 2010

Add HTML Sitemap to Wordpress Website

I know, this is a Blogger Blog, but I'm going to give instructions on how to add an HTML sitemap to a Wordpress website.

After scouring the web and nearly giving myself a headache I found a solution, so this will hopefully save others those near headaches.

I'll ramble here a little to begin with, to make getting to the crux of the problem easier, but you're welcome to just leap to the formula below.

You see, when you find the site that provides the code for a Wordpress HTML sitemap, it gives all the information, but not quite all the information on how to implement it - this was the frustrating part.

So I was armed with the 'plugin' code and the 'shortcode' to activate the sitemap, but didn't really get the installation instructions of: "Add the shortcode to the page(s) of your choice". You see an HTML sitemap is a page alone, it shouldn't be added to specific pages, it should usually be on a page called: sitmap.php/htm/html &c.

I wanted my sitemap to be linked from the footer of every page of the site.

So to start with you'll need the 'plugin' code, which is courtesy of Angelo Mandato; there's 3 options: you can download the zip code from here, or go to the installation page, where at the top right of the page there's a big red button, or use the instructions below, which I've stated as being easier.

Being easier, I'd advise you to log-in to your Worpress Dashboard and click on 'Plugins' (left-hand menu), a little drop down menu reveals 'Add New' click here, on this page there's a search box, type in 'HTML Sitemap' and click on 'Search Plugins'. At the top of the list you'll see: 'HTML Page Sitemap', version '1.1.1' - click on install.

Okay, 1st of 3 jobs completed.

Now to create the interaction between the 'plugin' and the 'shortcode' which is [html-sitemap], you'll firstly need to click on 'Pages' (in the left-hand menu) of your Wordpress Dashboard, in the drop down menu you'll need to click on 'Add New', this will create the new sitemap page. Where it asks for 'title' enter 'Sitemap', in the 'content' box you need to add your 'shortcode', which is [html-sitemap], make sure you use square brackets. Now because you don't want this page in the main navigation, it is advisable to give it a parent, so in the 'Page Attributes' (right-hand menu), click on the 'no parent' drop down and put it under 'Other Info' or something similar, click on 'publish page'.

Okay 2nd of 3 jobs done.

Now we need to get the sitemap visible on every page of the site. Back to the Wordpress Dashboard, in the left-hand menu click on 'Appearance', the drop down menu offers the link 'Editor', click on this. In the right-hand menu of the new page all the 'Templates' are listed, go down till you find 'Footer' (footer.php), click on this and you'll see the content of your site's footer links. You will most likely have the following in the footer already:



Right after this add the following:



Naturally change the 'MYWEBSITE' to your own website and the .com to .de, .nl or .co.uk. Click on the blue button 'Update File'.

That's it job 3 of 3 completed.

Go to your website, press the 'F5' key, you may have to do this twice (that's computers for you), and in your footer you should now see your newly created link to your site's HTML sitemap, click on the link to test it, and you should find a nicely laid out sitemap indexing all your site's pages.

Now naturally you may want the sitemap to be more detailed, for this I will reference you back to Angelo's site, where he explains this further, but for me I just needed a nice clear HTML sitemap and no further headaches.