Wikipedia’s Navbox template

2013 Jun 06: These directions are changing as Wikipedia switches to use Scribunto for templates. Check the comments for copying the files from my wiki. ^_^

I’ve been working on my instance of MediaWiki for a while now, and Kevin is starting to drop a bunch of info in it concerning Kay Seif. I wanted a nifty navigation box somewhere, but I didn’t want to build a table or something myself. I read Wikipedia all the time, so I am familiar with the Navbox template, though only from using it as navigation. I knew I wanted to use it, but looking at the talk page for it is intimidating. However, after getting it over, I realized it was actually really easy, and just in case someone else is having trouble, here is how to do it in six steps (they basically mirror the steps given, but are hopefully easier to follow).

Real quick, these steps assume you have shell access to your server, as well as being able to install software from your distro’s repositories. Also, the namespaces assume you use the defaults when it was installed, such as having a MediaWiki namespace. Everything else is copy and paste!

Detailed setup

You actually need to do all the steps to get them working, so the order is kinda arbitrary.

Step One: ParserFunctions

Install the ParserFunctions extension. Standard stuff, download, add the bits to your LocalSettings.php, and visit Special:Version to check if it is installed. The extension page has installation instructions.

Step Two: HTML Tidy

There will be mentions to the non-HTML Tidy version of the Navbox template, but this step is so easy it doesn’t matter, except that it will be easier to keep in sync with the regular templates if they change (more on that later).

HTML Tidy is a library that cleans up HTML as it is parsed. It is available for lots of languages, but we need the PHP version for MediaWiki. Check your server’s distro for what the package is called. In Ubuntu it is php5-tidy.

sudo apt-get install php5-tidy

Step Three: Navbox template

This part actually kept me busy for a while, but mainly because I knew enough to be tricked by transclusion. That is to say, I couldn’t figure out where the template was, because the page itself has all this content on it explaining usage and such. The template itself is really intense, so I got confused for a bit there. Anyhow, it is easy, just copy the content when you view the source.

To keep things simple, copy it to Template:Navbox in your wiki as well. I am betting there are some template references coded in there, so for now let’s keep the same names.

Step Four: Navbar template

Same as step one, copy the source of the Template:Navbar. Navbar is what adds the “VTE” links at the top of the Navbox, which link to the View, Talk and Edit page for the template you are viewing. Very helpful for easily changing the content used for navigation.

Step Five: MediaWiki:Common.css

You can of course style it however you want, and there is plenty of documentation for that, but to start we want to get it all over exactly as it looks on Wikipedia, which means copying the stylesheet for it as well. This part actually taught me about these special pages in MediaWiki, it is pretty cool. Normally you would track down a CSS file somewhere and change it, which I was dreading since I use git to hold my instance. Turns out it is the same as the templates, just copy and paste.

In this case, go copy the MediaWiki:Common.css source, and paste it in the same place in your instance. Done!

Step Six: MediaWiki:Common.js

Same as the CSS, grab the source from MediaWiki:Common.js, and paste it in the same place in your wiki. This code allows you to use the collapsible styles, which are pretty cool to have.

Testing it out

I needed the Navbox for a group of articles that are related, so I had a few ideas of what I was going to make already. Make sure to read the usage documentation once through, it all makes sense. Also, I always preview my templates a lot before saving them, so you can see what they will look like.

To start, you will probably want to create a new template, and include the Navbox in it. There are plenty of examples on Wikipedia, so check them out.

Also, if you have an account on Wikipedia, you can watch the templates and interface pages, in case they are updated! I think that is pretty awesome. ^_^

Condensed steps

  1. Install ParserFunctions
  2. Install HTML Tidy
  3. Copy over Template:Navbox
  4. Copy over Template:Navbar
  5. Copy over MediaWiki:Common.css
  6. Copy over MediaWiki:Common.js
  7. Profit!

6 thoughts on “Wikipedia’s Navbox template”

  1. I’m trying to replicate your success, but when viewing the source of the Template:Navbox page, all I get is

    {{#invoke: Navbox | navbox }}{{documentation}}

    When I copy this over to my mediawiki install, I get a script error, but (as far as I can tell) no sort of debug response. I know you did this a year ago, but any help?

    1. Oh, wonky. Looks like they moved that template over to Lua. I will have to look into that, to see if I want to switch over as well…

      Anyhow, if you want the pre-Lua version, you can always use the one I have in my wiki. Go to and put in Template:Navbox, and check all three boxes (that way it will pull all the other templates with it). You should be able to import that and have it work. And of course you can check my Common.css and Common.js as well. ^_^

      1. Thanks much! As is usual with this sort of thing, immediately after posting, I dug around a bit more and figured out that I needed to grab the lua modules to make it work. The navbar still breaks on my implementation, so I think I will grab yours. Thanks again.

        1. Right on! Where is your wiki?

          How are the Lua templates going? I am not sure if I have the need on my little wiki. I wonder if the performance improvements can be felt at my level.

  2. Thanks for posting this article, it has helped me a lot. I seem to have everything in place and can easily emulate a navbar and box like your one here

    However, and it may be something very easy as I’m very new to all this, I cannot seem to get the hide/show option to show up on my one =( Do you know what I could be missing or doing wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *