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:

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

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

#test {
    /*...*/
}
#test ul {
    /*...*/
}
#test li, #test a {
    /*...*/
}

Choose a script

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
• User:YOURNAME/common.js will load only for you
• On English 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) {
        importArticle({
            type: 'script',
            article: 'u:dev:MediaWiki:InfoWidgets/code.js'
        });
        window.widgetsLoaded = function() {
            myWidget = Widgets.newPages();
            myWidget.selector = '#test';
            Widgets.add(myWidget);
        }
    }
});

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 pre-configured widget descriptions here:

myWidget = Widgets.stubs();

Here's the current list of pre-configurations:

• 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:

Widgets.add(firstWidget);
Widgets.add(secondWidget);
// etc.

And that's that.

Next

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