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:
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:
So you might want to add these rules to your stylesheet:
Choose a script file
- MediaWiki:Wikia.js will load for all users using the default (Wikia) skin
- User:YOURNAME/Wikia.js (or Monobook.js, Common.js) will load only for you
- On Central only(!), you can create a global.js - which will load on all sites across Wikia, 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.
Now here's a complete example of an InfoWidget:
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:
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:
- 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:
The name must be "widgetsLoaded" and it must be attached to the window object.
- We'll use one of the preconfigured widget descriptions here:
Here's the current list of preconfigurations:
|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:
- And finally add the widget description(s) to the render queue:
And that's that.
Read the Advanced Guide to find out about additional options and how to create your own InfoWidgets.