Highly integrate WordPress with Mediawiki

WordPress is the most popular blog software which can provide us opportunities to create beautiful and powerful websites. Mediawiki is also a very famous wiki software which can be applied to build our own knowledge pool like Wikipedia. Although some people may use WordPress to set up a small wiki system using plugins while others may use Mediawiki to blog their personal experiences, it cannot be more professional to use each of them to do things they are good at. Then the question comes as, is it possible to integrate them at the same time to make your website more functional?

The answer is absolutely YES! Just take hawkinqian.com as an example. I use WordPress and Mediawiki to serve as my personal blog system and wiki system respectively, and they both function pretty well and also integrates pretty well visually. That’s what I would like to talk about, the way to highly integrate WordPress and Mediawiki.

To integrate WordPress and Mediawiki, it includes three important steps:

Install both software on your server;
Integrate user management system of both software;
Integrate themes to make them have a consistent style visually.

1. Install WordPress and Mediawiki

If you are interested in this article, then the installation procedure would not be a problem for you. However, you should pay a little bit more attention on a few details. For example, to make your site looks like a wholeness, it will be better to put your wiki system in a subdomain. URLs like “wiki.yourdomain.com” will make your site address shorter and can be remembered by users easily. In addition to subdomain issue, you should also make your wiki pages’ urls prettier through some configurations. The url rules used in my site is as follows and you can put them into LocalSettings.php file at the root of your wiki folder:

$wgScriptPath = "http://www.yourdomain.com/w";
$wgServer = "http://wiki.yourdomain.com";
# Rewrite url
$wgArticlePath = "/view/$1";
$wgUsePathInfo = false;

You should also add rewrite rules into your web server configure file. If you are using Nginx, the rewrite rule should like this:

rewrite ^([^\.]*)/view/(.+)$ $1/index.php?title=$2 last;
rewrite ^([^\.]*)/view/(.+):(.+)$ $1/index.php?title=$2&$3 last;

The same thing is much easier in WordPress settings. You can use its permalink function to beautify your pages’ urls.

Finally, don’t forget to listen to the subdomain and include your standalone subdomain rewrite rule file (in XXXX.conf file):

server_name wiki.yourdomain.com;
...
include rewrite/(your subdomain rewrite file name).conf;

2. Integrate user management system

As independent web software when they are public released, WordPress and Mediawiki both have their owner user management system (UMS). If they are integrated as a whole site, we just need one UMS. But which one? I chose the one of WordPress for its perfect function libraries. Just think about the situation that all replies do not have avatars if you choose Mediawiki’s UMS…

Integrating both software’s UMS is not an easy thing, because you should solve following problems:

Auto register a new user in one software when a new user registers at another one;
Auto log in in one software when a user logged in at another one;
Auto log off in one software when a user logged off at another one;
Auto change user’s password in one software when a user changed password at another one;
and so on…

It sounds really difficult, but we can easily handle it by using a Mediawiki plugin called WPMW to achieve this. The plugin’s address is: WPMU plugin address.

Then you can directly put the downloaded file AuthWP.php into Mediawiki’s extensions folder. Next use following code to include this plugin, put the codes into LocalSettings.php:

# Add wordpress integration support
$wgAuthWPRelPath = '..';
require_once('extensions/AuthWP.php');
$wgAuth=new AuthWP();

Variable $wgAuthWPRelPath should be your WordPress’ relative path to the plugin.

Next step, we should modify some user priorities settings to avoid unexpected operations from normal users (If you want your wiki pages can be modified by anyone, then skip this step).

Put these codes into your LocalSettings.php file:

# Permits of Anonymous
$wgGroupPermissions['*']['createaccount'] = false;
$wgGroupPermissions['*']['read'] = true;
$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['*']['createpage'] = false;
$wgGroupPermissions['*']['createtalk'] = false;
# Permits of Users
$wgGroupPermissions['user']['move'] = false;
$wgGroupPermissions['user']['edit'] = false;
$wgGroupPermissions['user']['createpage'] = false;
$wgGroupPermissions['user']['createtalk'] = false;
$wgGroupPermissions['user']['upload'] = false;
$wgGroupPermissions['user']['reupload'] = false;
$wgGroupPermissions['user']['reupload-shared'] = false;
$wgGroupPermissions['user']['minoredit'] = false;
# Permits of Administrators
$wgGroupPermissions['sysop']['move'] = true;
$wgGroupPermissions['sysop']['edit'] = true;
$wgGroupPermissions['sysop']['createpage'] = true;
$wgGroupPermissions['sysop']['createtalk'] = true;
$wgGroupPermissions['sysop']['upload'] = true;
$wgGroupPermissions['sysop']['reupload'] = true;
$wgGroupPermissions['sysop']['reupload-shared'] = true;
$wgGroupPermissions['sysop']['minoredit'] = true;

Now only admin can create and modify wiki pages. Users can only register to your site through WordPress and the same account will be automatically registered in the Mediawiki.

3. Integrate themes and skins

The layout frameworks in WordPress is called themes, while they are called skins in Mediawiki. In most situations, your wordpress theme will look very different from your Mediawiki’s default skins. However, a good site design should make all elements of your site in a consistent style. This part will show you how to design your own style wiki skin.

We will start from the default skin called “Vector”. All skin files are located in the “skins” folder. Each skin are consist of following files and folders:

Skinname.php
Skinname.deps.php
Skinname/
js, css or images in Skinname/

Skinname.php is the core file we need to write code in. Copy all files related to Vector skin (you should know which files to copy now, if don’t, please see above instruction). Rename all “Vector” words to your own skinname, like “hawkinwiki.php”, “hawkinwiki/”.

Open skinname.php and replace all “vector” with your own skinname. Add following codes in the head of skinname.php:

/**
 * Include wordpress APIs
 */
$wp_dir = dirname(dirname(dirname(__FILE__)));
require($wp_dir . '/wp-load.php');

Notice that dirname() function here means to get the file path of a specific file. We use nested dirname() function to point to the root path of WordPress (you should check to see how this works by your own).

Find the following code in Vector.php:

class VectorTemplate extends BaseTemplate {

And replace “Vector Template” with “yourskinname Template”.

Next find following codes:

// Output HTML Page

Remove all codes under above code until “” line. We will next write our layout codes between them.

If you are familiar with WordPress theme development, the following codes should be very familiar to you:

<?php get_header(); ?>
<div id="content" class="eight columns" role="main">
    <!-- post-content -->
    <div id="wiki-content" class="post-box">
        <a id="top"></a>
        <div id="mw-js-message" style="display:none;"<?php $this->html( 'userlangattributes' ) ?>></div>
        <?php if ( $this->data['sitenotice'] ): ?>
        <!-- sitenotice -->
        <div id="siteNotice"><?php $this->html( 'sitenotice' ) ?></div>
        <!-- /sitenotice -->
        <?php endif; ?>
        <!-- firstHeading -->
        <h1 id="firstHeading" class="firstHeading">
            <span dir="auto"><?php $this->html( 'title' ) ?></span>
        </h1>
        <!-- /firstHeading -->
        <!-- bodyContent -->
        <div id="bodyContent">
            <!-- subtitle -->
            <div id="contentSub"<?php $this->html( 'userlangattributes' ) ?>><?php $this->html( 'subtitle' ) ?></div>
            <!-- /subtitle -->
            <?php if ( $this->data['undelete'] ): ?>
            <!-- undelete -->
            <div id="contentSub2"><?php $this->html( 'undelete' ) ?></div>
            <!-- /undelete -->
            <?php endif; ?>
            <?php if( $this->data['newtalk'] ): ?>
            <!-- newtalk -->
            <div class="usermessage"><?php $this->html( 'newtalk' )  ?></div>
            <!-- /newtalk -->
            <?php endif; ?>
            <!-- bodycontent -->
            <?php $this->html( 'bodycontent' ) ?>
            <!-- /bodycontent -->
        </div>
        <!-- /bodyContent -->
    </div>
<!-- /post-content -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Just list some simple explanations here about the functions:

get_header() is to get header part including navigation menus;
get_sidebar() is to load sidebars in your WordPress site;
get_footer() is to get footer information.

Moreover, please note that all HTML id, CSS class or even code structures in the above codes can be customized to your own needs.

There’s one thing worth to say, it’s about the sidebar customization. If you don’t want your wiki page shares the same sidebar in WordPress, then you could replace get_sidebar() with your own codes. In Vector skin, it has predefined a private function class::renderNavigation() to render the modules in sidebar, following are the customized sidebar used in my site:

$this->renderNavigation( 'SEARCH' );
$this->renderNavigation( 'VIEWS' );
$this->renderPortals( $this->data['sidebar'] );
$this->renderNavigation( 'ACTIONS' );

The third line will render the navigation sidebar for you, but you can easily customize the content structure in it not through the codes, just using web page editing through MediaWiki:Sidebar page of your wiki system. In my case, it’s “http://wiki.hawkinqian.com/view/MediaWiki:Sidebar”. Edit that page according to your own navigation preference, star symbols mean different indent levels. Your can find more details in here.

* navigation
** mainpage|mainpage
** Special:RecentChanges|Recent changes
* new heading
** portal-url|portal
** http://www.mediawiki.org|MediaWiki home

Finally, put following line into LocalSettings.php to make your own skin default (please notice that the skin’s name here should be lowercase, or it won’t work properly):

$wgDefaultSkin = 'yourskinname';

Now, I would be very glad to tell you that the whole integration work has been done. Just save the file and refresh your page right now!

Hawkin Qian

钱浩祺

Highly integrate WordPress with Mediawiki

1. Install WordPress and Mediawiki

2. Integrate user management system

3. Integrate themes and skins