Help:Customizing toolbars

MediaWiki portlets as seen in Vector legacy skin.

The left sidebar and the top personal toolbar can be customized by editing skin.js or common.js. skin.js applies to only the current skin, where common.js applies to all skins.

Overview

General usage:

$.when( mw.loader.using( 'mediawiki.util' ), $.ready ).then( function () {
    mw.util.addPortletLink( 'portletId', 'href', 'text', 'id', 'tooltip', 'accesskey', 'nextnode' );
} );

Where:

• mw.util.addPortletLink: the ResourceLoader function to add links to the portlets.
• portletId: portlet id— the section where the new menu item is to be placed. Valid values:
  • p-navigation: Navigation section in left sidebar
  • p-interaction: Interaction section in left sidebar
  • p-tb: Toolbox section in left sidebar
  • p-coll-print_export: Print/export section in left sidebar
  • p-lang: Languages section in left sidebar
  • p-wikibase-otherprojects: In other projects section in left sidebar
  • p-personal Personal toolbar at the top of the page
  • p-views Upper right tabs in Vector only (read, edit, history, watch, etc.)
  • p-cactions Drop-down menu containing move, etc. (in Vector); subject/talk links and action links in other skins
• href: Link to the Wikipedia or external page
• text: Text that displays
• id: HTML id (optional)
• tooltip: Tooltip to display on mouseover (optional)
• accesskey: Shortcut key press (optional)
• nextnode: Existing portlet link to place the new portlet link before (optional)

The optional fields must be included in the above order. To skip a field without changing it, use the value null.

Href

Links to Wikipedia pages are of the form '/wiki/page name'; example: '/wiki/Special:NewPages'.

External links are formatted using the full URL; example: 'http://example.org'.

There are a number of configuration variables that can be used to create more complex links. A configuration variable is read using the function mw.config.get('variableName'):

• wgArticlePath: Local path, starting at the root, to reference articles, containing a "$1" placeholder that may be replaced by a page title to get a valid URL to that page.
• wgPageName: The full name of the page, including the localized namespace name, if the namespace has a name (the main namespace (number 0) doesn't), and with blanks replaced by underscores.
• wgServer: The server URL, not terminated by "/".

Given a valid page title title, a valid URL may be constructed using mw.config.get('wgArticlePath').replace('$1', title)

mw.config.get('wgServer') + mw.config.get('wgArticlePath').replace("$1", "Special:ArticleFeedbackv5/"+ encodeURI( mw.config.get( 'wgPageName' ) ) )

However, for local links it may be more advisable, and simple, to use the method mw.util.getUrl (description, API documentation):

mw.util.getUrl( 'C++' )                        // "/wiki/C%2B%2B"
mw.util.getUrl( 'C++', { action: 'history' } ) // "/enwiki/w/index.php?title=C%2B%2B&action=history"

Examples

Wherever username is shown, replace it with the desired user name; likewise, replace pagename with the desired page name.

Add portlet to a user subpage on the left toolbar:

mw.util.addPortletLink ('p-tb', '/wiki/User:username/pagename', 'My pagename');

Add portlet to Special:NewPages on the left toolbar:

mw.util.addPortletLink ('p-tb', '/wiki/Special:NewPages', 'New Pages');

Open the current page in Checklinks on the left toolbar:

mw.util.addPortletLink ('p-tb', 'http://toolserver.org/~dispenser/cgi-bin/webchecklinks.py/' + encodeURI( mw.config.get( 'wgPageName' ) )
   + '?client=script&citeweb=on&overwrite=&limit=20&lang=' + mw.config.get( 'wgContentLanguage'), 'Checklinks');

Open the current page in Reflinks on the left toolbar:

mw.util.addPortletLink ('p-tb', 'http://toolserver.org/~dispenser/cgi-bin/reflinks.py?lang=' + mw.config.get( 'wgContentLanguage' ) + '&page=' + encodeURIComponent( mw.config.get( 'wgPageName' ) ) + '&autoclick=wpPreview', 'Reflinks');

Open page in Reflinks, on the personal toolbar; formatted in multiple lines:

mw.util.addPortletLink(
'p-personal',
'http://toolserver.org/~dispenser/cgi-bin/reflinks.py?lang=' + mw.config.get( 'wgContentLanguage' ) + '&page=' + encodeURIComponent( mw.config.get( 'wgPageName' ) ) + '&autoclick=wpPreview',
'Reflinks');

Add a portlet to open user subpages to the personal toolbar, placed before the Preferences portlet:

 mw.util.addPortletLink(
 'p-personal',
 '/wiki/Special:PrefixIndex/User:username',
 'subpages',
 'pt-subpages',
 'Your subpages',
 null,
 '#pt-preferences'
 );