How To Skin a Wiki

So you’ve installed the MediaWiki and you’ve set up a MediaWiki development environment. Now what? The next step is to get down and dirty and skin the thing. Skinning a wiki is the fun part. There is nothing like an amazing user interface to draw people into your site.

As a philosophy, I never start from scratch, at least not when it’s at all possible not too. There are a lot of other people out there who are a lot smarter than me. Why not use things that are tried and true before reinventing the wheel? I have personally found this way of doing things highly successful and efficient.

To skin our wiki, we’ll take MonoBook and modify it to suit our needs. There are a lot of things that are really great about MonoBook. Things that just work in that skin which don’t in other. Other skins that I’ve used break the RSS feeds to the site. That’s a no-no. When I wanted to submit the new pages that were added to a directory project, I found that the RSS was broken. By basing my skin on Monobook, the RSS is now in fine working order.

The MediaWiki people are truly genius. They built the Monobook skin to write the HTML in a way that moves the content to the top of the page. All the menus etc. are under the content. Very cool SEO benefit. Check it out by viewing the source of the page (on The Pet Wiki or any other site that uses Monobook).

Go to where you installed the MediaWiki and look for the skins folder. You’ll find the monobook folder and MonoBook.php.  Copy them and rename them to whatever you want to call your skin. If you’re not sure what you want to call it, don’t worry – skins are very easy to rename. For this article, let’s call it MySkin. Capitalization is important. The folder name should be in lowercase and the php file name should start with a capital letter (I like to capitalize each word in the name – like ThePetWikiSkin.php). It will work if you don’t do this, but it’s always a good idea to follow standard programming conventions.

Open MySkin.php in your development environment. If you are using Eclipse, if you haven’t already, make a project for development and open it from there. The first thing you’ll need to do is change a few of the basics.

Change:

class SkinMonoBook extends SkinTemplate {

/** Using monobook. */

function initPage( OutputPage $out ) {

parent::initPage( $out );

$this->skinname  = ‘monobook’;

$this->stylename = ‘monobook’;

$this->template  = ‘MonoBookTemplate’;

}

to:

class SkinMySkin extends SkinTemplate {

/** Using monobook. */

function initPage( OutputPage $out ) {

parent::initPage( $out );

$this->skinname  = ‘myskin’;

$this->stylename = ‘myskin’;

$this->template  = ‘MySkinTemplate’;

}

Next change:

class MonoBookTemplate extends QuickTemplate {

to:

class MySkinTemplate extends QuickTemplate {

Save MySkin.php. You’re not going to see much yet, but to make sure that your skin actually works, login to your wiki, click “my preferences” at the top right, and go to the skin tab. You should see MySkin in the list. Select it and save your preferences.

It may not look like much yet, but this is the basis for all the fun you will have for making the wiki your own. Congratulations. Next time we’ll get into how to customize your skin to give your site more personality.