Adding Navigation to Your MediaWiki Wiki

Finding your way

There are two types of people in this world: searcher and navigators. Searchers are the direct people who know what they want, find the search box and type away. Navigators look around and see what other information is out there that might interest them on any given subject. They might not realize what they are looking for. They might just want to go on an expedition. They may just be the type that hates to ask directions.

For the adventurers out there that want to swim through the river of information, it is important to make their path as painless as possible. When it comes to the MediaWiki, there are a few ways to do just that.

You know how there are those cool links at the bottom of the pages in Wikipedia that contain links to similar subjects? Like the page on the Mets’ Daniel Murphy that has links to all the people on the Mets current roster at the bottom of the page. If all that information gets in your way, all you need to do is hide it.

It’s great for Wikipedia, but how do you get it on your own MediaWiki site? There are a couple of things you have to do. One involves template, the other involves modifying MediaWiki:Common.js and MediaWiki:Common.css.

Let’s start with templates. To create templates, all you need to do is create a page called Template:TemplateName (change TemplateName to whatever you want to call your template). Now that you have the page, set it up to look the way that you want and you are ready to use it. Use standard WikiText or html.

You can even be clever about it and send variables to the templates. Here’s an example:

The origin of this dog breed is {{origin}}

To call the template on any page in your wiki, all you need to do is type {{TemplateName}}. If you set up a way to send parameters, like in our dog breed example, call it by typing {{DogBreed|origin=”United States”}}

That’s a very quick overview of templates. You can do a ton of stuff with them, but I don’t want to get too off the topic of navigation. The idea is to create a template with a lot of links that can be used in a lot of places. In the Daniel Murphy example, the same template used to show all the links to the other players also exists on all the other players pages. One template for 40+ team members. Not bad. Saves a lot of time in typing, and to make a change, you update it in one place and all the pages that use the template will have the change as well.

Templates are cool, but having a lot of links all over the place can get to be a bit much. That’s where the second part of my plan comes in. Notice that the box has a little hide/show link on the right hand side. To make sure that all those links don’t get in the way, it’s nice to be able to store them away. To do that, MediaWiki has added an easy way to modify and add the css and javascript files that run in the background for every page. You don’t need any ftp access (you do need administrator privledges) and can make the modifications directly in your browser. The pages that need to get modified are your MediaWiki:Common.js and MediaWiki:Common.css

Disclaimer: I didn’t write any of this code – this is stuff that I put together from both MediaWiki and Wikipedia’s sites. I’m repeating it here because I found it a bit hard to find and get working correctly.

Add this to your MediaWiki:Common.css

Add the following to your MediaWiki:Common.js file:

To use these to get your fancy hide/show sections, you need to use the following html divs:

<div class=”NavFrame collapsed”>
<div class=”NavHead”>Title of the Box</div>

<div class=”NavContent”>

The html/links that you want to use


To see more information on how to use this type of navigation, check out Wikipedia’s explanation.

I happen to use Dynamic List Pages in my navigation sections. That creates a lot of links of pages that are in the same category. To see how it turned out on The Pet Wiki, check out Great Danes. At the bottom of the page you’ll see my handy work.

That gives some nice links that drill down into related areas, but what if I want to get back to the main sections? Don’t worry, MediaWiki has taken care of that too. There’s a nice little page called MediaWiki:Sidebar which lets you easily modify the left side bar of your site. I used it to add links to my main categories: Dogs, Cats, Birds… (you get the idea) so that people will be able to get to the main section that they are looking for. The syntax is pretty simple. For the title of the section, add * and for pages that you want to link to **. Here’s an example from The Pet Wiki:

* navigation
** mainpage|mainpage-description
** Dogs|Dogs
** Cats|Cats
** Birds|Birds
** Rodents|Rodents
** Horses and Ponies|Horses
** Reptiles|Reptiles
** Other Pets|Other Pets
** All Pets|All Pets
** portal-url|portal
** helppage|help

The first part is the page that you want to link to, followed by the title.

There are more ways to add links, but I think that these are the two most effective. Besides providing people with a way to get around your site, adding links has a nice SEO advantage as well. The code provided is totally readable by search engines, and this is a great way to give spiders more access to your pages.

<div xmlns:cc=”” about=””>Image: <a rel=”cc:attributionURL” href=””></a> / <a rel=”license” href=””>CC BY 2.0</a></div>