Jump to: navigation, search


Mediawiki Custom Extension Tutorial

This tutorial is part of a series of articles about creating skins, extensions and aspects of Mediawiki that appear to be missing from the Mediawiki documentation, it is for people that want to learn, but lack the necessary knowledge to get started. As with the other articles I've also included the downloadable files, so that you can have a go at creating an extension yourself.

Extension Folders and Files

You can skip the tutorial and download the files at the bottom of the page. As part of the learning process I would suggest changing the extension names etc, you will very likely break it but this will help you to understand how it all fits together a lot quicker.

Create the following folders and files in the Mediawiki extensions folder;

  • extensions
    • YourCustomExtension
      • YourCustomExtension.i18n.php
      • YourCustomExtension.php
      • modules
        • ext.yourjavascript.js
        • ext.output.js
        • ext.yourstylesheet.css
YourCustomExtension.i18n.php
<?php
/**
 *
 *
 * @file
 * @ingroup Extensions
 */

$messages = array();

$messages['en'] = array(
        'yourcustom'   => 'Custom',
	    'yourcustom-desc'           => 'A short phrase describing your extension',
);
YourCustomExtension.php
<?php
if ( !defined( 'MEDIAWIKI' ) ) die();

$wgExtensionCredits['other'][] = array(
	'path' => __FILE__,
	'name' => 'YourCustomExtension',
	'author' => array(
		'[http://www.yoururl.com John Smith ]',
	),
	'descriptionmsg' => 'yourcustom-desc',
	'url' => 'http://www.yoururl.com',
);

$wgExtensionMessagesFiles['YourCustomExtension'] = __DIR__ . '/YourCustomExtension.i18n.php';

$wgResourceModules['ext.YourCustomExtension'] = array(
	'scripts' => array('modules/ext.yourjavascript.js','modules/ext.output.js'),
	'styles' => array('modules/ext.yourstylesheet.css'),
 
	'localBasePath' => __DIR__,
	'remoteExtPath' => 'YourCustomExtension',
);

$wgHooks['BeforePageDisplay'][] = 'addSomeExtension';
 
function addSomeExtension( OutputPage &$out, Skin &$skin ) {
   $out->addModules( ext.YourCustomExtension' );
 
   return true;
}

Note: I've included a file entitled ext.output.js, this is what I use to call the JavaScripts, this isn't how the Mediawiki Core team do it, but I find its better to keep all the code together rather than use Mediawiki:Common.js, which is also prone to breaking when you include JavaScript variables.

Installation
require_once "$IP/extensions/YourCustomExtension/YourCustomExtension.php";
Use Case - Love Bootstrap but want to use Vector?

Using the following tutorial you can create a custom bootstrap extension for Mediawiki that works with Vector.

  • extensions
    • Bootstrap
      • bootstrap.i18n.php
      • bootstrap.php
      • modules
        • ext.bootstrap.css
        • ext.bootstrap.js
        • ext.bootstrap-theme.css
        • ext.output.js
        • ext.theme.css
bootstrap.i18n.php
<?php
/**
 *
 *
 * @file
 * @ingroup Extensions
 */

$messages = array();

$messages['en'] = array(
        'bootstrap'   => 'Bootstrap',
	    'bootstrap-desc'           => 'Bootstrap extension for Mediawiki',
);
bootstrap.php
<?php
if ( !defined( 'MEDIAWIKI' ) ) die();

$wgExtensionCredits['other'][] = array(
	'path' => __FILE__,
	'name' => 'Bootstrap',
	'author' => array(
		'[http://www.yoururl.com John Smith ]',
	),
	'descriptionmsg' => 'bootstrap-desc',
	'url' => 'http://www.yoururl.com',
);

$wgExtensionMessagesFiles['Bootstrap'] = __DIR__ . '/bootstrap.i18n.php';

$wgResourceModules['ext.bootstrap'] = array(
	'scripts' => array(
            'modules/ext.bootstrap.js',
			'modules/ext.output.js',
        ),
	'styles' => array(
            'modules/ext.bootstrap.css',
            'modules/ext.bootstrap-theme.css',
            'modules/ext.theme.css'
),
 
	'localBasePath' => __DIR__,
	'remoteExtPath' => 'Bootstrap',
);

$wgHooks['BeforePageDisplay'][] = 'addBootstrap';
 
function addBootstrap( OutputPage &$out, Skin &$skin ) {
   $out->addModules( 'ext.bootstrap' );
 
   return true;
}
Install
require_once "$IP/extensions/Bootstrap/bootstrap.php";
Application

Use the Bootstrap docs to apply the styles to your wiki.

Use Bootstraps docs in combination with our docs as some of the classes need to be modified to work with Mediawiki e.g. buttons.