Wikia

Community Central

Comments56

Make yourself a Wikia-MacGyver: Adding custom scripts

Grunny March 7, 2012 User blog:Grunny

Hi, everyone. If you don't know me already, I'm Grunny and I can often be found creating JavaScript tools to make tasks easier for the community. One of the most powerful (and fun!) aspects of MediaWiki is the fact that users can customise their own interface using CSS and JavaScript. Many people may not have any knowledge or experience with coding, but fear not, many tools are already available for you to use just by adding one or two lines to your user subpage.

One of the best places to have a look at for user scripts is the Wikia Developers Wiki where many helpful users have shared useful scripts they have created. I'm going to highlight a few of them here and let you know how you can install them for your own use.

A quick couple of terms you should know:

  • Global.js – Located on Community Central, adding scripts in your own User:YourUsername/global.js will load on every wiki you visit across Wikia
  • Wikia.js – Putting scripts in User:YourUsername/wikia.js on a wiki will load them just on that wiki, so you can put different scripts on different wikis to suit your needs.
  • Common.js – Every wiki can have a Common.js, which will load for all users of that wiki.

AjaxRCEdit

JSBlog1

This is probably the most widely used JavaScript tool on the Developers Wiki. AjaxRC allows you to set pages to automatically refresh once a minute using a checkbox at the top. This is useful for just leaving Wiki Activity or Recent Changes opened and not having to constantly press refresh to keep track of what is changing.

To install AjaxRC for yourself, you can put this in your global.js for it to work for you on all wikis, or wikia.js for it to work on just the wiki you put it on:

importScriptPage( 'AjaxRC/code.js', 'dev' );

If you want to add more pages that you will get the checkbox on, use the following line after the import line adding the pages you want in quotes ('' or "") separated by a comma:

var ajaxPages = ["Special:RecentChanges","Special:Watchlist","Special:Log","Special:Contributions","Special:WikiActivity"];

You can also change the text that appears next to the checkbox (the default just says "AJAX") by adding this line:

var AjaxRCRefreshText = 'Auto-refresh';

Purge buttonEdit

JSBlog2

The ability to purge a page and force it to update can be very useful when a page has gotten stuck and hasn't updated after you've uploaded a new version of a file or made another change. Usually the only way to do this is to add action=purge, which isn't very convenient. Luckily, there's a JavaScript tool to add a useful link to purge a page.

To add the purge link, you can add the following line to your your global.js or wikia.js:

importScriptPage( 'PurgeButton/code.js', 'dev' );

You can change the text of the "Refresh" link by adding the following line:

var PurgeButtonText = 'purge';

ShowHideEdit

Creating areas that can be hidden is a nice way to add content that may not be the focus of the article, such as navigation templates. Many wikis use a script called ShowHide to accomplish this, including Community Central!

This is a good script to add for your whole wiki by adding it to your wiki's MediaWiki:Common.js:

importScriptPage( 'ShowHide/code.js', 'dev' );

Want more?Edit

There are many fun and interesting things you can do, and many more cool little gadgets and tools you can find on the Wikia Developers Wiki, including the list of JavaScript enhancements.

What's your favorite JavaScript or CSS tool? Please share below!

Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.

Around Wikia's network

Random Wiki