Add a container

To begin place a div where ever you want on what ever page of your wiki you choose and style it any which way you like:

<div id="test">(JavaScript disabled)</div>

The contents of the container will be removed, so this might be a good place to tell the visitors there's something they miss when they came with JavaScript turned off.

Important is to give your container a unique identifier. An ID attribute is the most obvious choice - a class might do as well... Just make sure there's a unique jQuery selector.

The content the InfoWidgets will write into your div will look like this:

    <li><a href="/wiki/title1">title1</a></li>
    <li><a href="/wiki/title2">title2</a></li>
    <!-- etc. -->

So you might want to add these rules to your stylesheet:

#test {
#test ul {
#test li, #test a {

Choose a script file

Before you start adding magic to your container you need to decide where to add the JavaScript. So here's Randomtime's handy guide to JavaScript files:

  • MediaWiki:Common.js is for JavaScript that will load on either skin
  • MediaWiki:Wikia.js will load for all users using the default (Oasis) skin
  • User:YOURNAME/wikia.js (or common.js) will load only for you
  • On Community Central only, you can create a global.js - which will load on all sites across Fandom, but only for you.

Almost the same rules apply to CSS files by the way. MediaWiki:Common.css is the notable exception. It does not seem to be loaded anywhere at all.

Add JavaScript

Now here's a complete example of an InfoWidget:

$(function() {
    if ($('#test').length) {
            type: 'script',
            article: 'u:dev:MediaWiki:InfoWidgets/code.js'
        window.widgetsLoaded = function() {
            myWidget = Widgets.newPages();
            myWidget.selector = '#test';

Let's go through the lines:

  • You need to embed the Widget initialization into a call of the ready function to make sure it won't run until the entire document (and thus the div container) has fully loaded.
  • Next you should test for the container you want to fill:
if ($('#test').length) { /*...*/ }

That ensures all that widgety code is only loaded for the page that does contain the widget.

  • The next line loads the InfoWidgets code from this very wiki:
importArticle({ /* ... */ });
  • Since the InfoWidgets code is loaded asynchronously you have no way of knowing when it will be good and ready. That's why you need to wrap your code in a function it can call once it's loaded:
window.widgetsLoaded = function() { /*...*/ }

The name must be "widgetsLoaded" and it must be attached to the window object.

  • We'll use one of the preconfigured widget descriptions here:
myWidget = Widgets.stubs();

Here's the current list of preconfigurations:

method listing
Widgets.activeTalks() Talk pages that were recently created or edited
Widgets.contribs() the visitor's contributions (if he's logged in)
Widgets.newPages() the newest pages of your wiki
Widgets.recentChanges() pages that were recently edited
Widgets.stubs() pages in the category "Article stubs"
Widgets.wantedPages() missing pages/red links
Widgets.watchlist() the visitor's watchlist (if he's logged in)
  • There's one last thing that's still missing from your widget description: The selector of your container:
myWidget.selector = '#test';
  • And finally add the widget description(s) to the render queue:
// etc.

And that's that.


Read the Advanced Guide to find out about additional options and how to create your own InfoWidgets.