This post shows how to insert code that displays ads in MediaWiki. The proposed methods use hooks instead of modifying the skin. This has two advantages:

1. No need to modify each skin separately. This allows users to change skins and ads will be presented to them in the same logical place.
2. It makes upgrades simpler. Hooks reside in LocalSettings.php which isn’t modified by MediaWiki version upgrades, unlike skins.

The examples below show how to insert ads into the header, footer and sidebar of each page. I’ve used the Google Adsense ad-serving code, but it could be easily replaced by the ad-serving code of any other ad network.

Header

We use the SiteNoticeAfter hook to place our ad code directly below the site-notice and above the article header.

The following snippet should be added to your LocalSettings.php. You should modify the ad-code between the EOT lines to match yours. A 728x90px leader board fits well and usually has large number of available ads in AdSense.

$wgHooks['SiteNoticeAfter'][] = function(&$siteNotice, $skin) {
        $siteNotice .= <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        return true;
};

Footer

The SkinAfterContent hook. allows us to display a banner right after the article content.

Most horizontal ads would fit nicely for this location. As before, the ad code goes between the EOT lines. This time, however, we need to wrap it in a <div> to center-align the ad.

$wgHooks['SkinAfterContent'][] = function(&$data, $skin) {
        global $myAdCode;
        $data .= '<div style="text-align:center;">';
        $data .= <<< EOT
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;

        $data .= '</div>';
        return true;
};

Sidebar

Placing an ad in the sidebar, turns out to be a little trickier than the header and the footer. The SkinBuildSidebar allows us to insert ads between the Navigation portal and the ToolBox portal in the sidebar. However there are few caveats:

The first one, is that in the default Vector skin, the portals are collapsible. This may be a nice feature, but I’m not sure having an option to hide ads is such a good idea. Hence we add a little JavaScript snippet that makes the ad portal permanent.

Secondly, each portal in the sidebar has a title. The title of the portal containing the ads will be “Ads”. If your wiki is non-english, you’ll probably want to translate it. To do so, you simply need to create the page MediaWiki:Ads in your wiki and write the translation there.

Thirdly, the sidebar is a too narrow for 160x600px vertical skyscraper, which is the narrowest recommended vertical placement size. You could either use narrower ad size, which as Google AdSense warns have significantly less stock, or increase a bit the size of the sidebar. Increasing the size of the sidebar should be done per skin. For the default vector skin, the can be done by editing the MediaWiki:Vector.css page (creating it if necessary) and adding the following lines:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#p-Ads div.body {margin: 0em !important; }
div#footer, #mw-head-base, div#content { margin-left: 12em; }
#left-navigation { margin-left: 12em; }

If your wiki is in RTL language, you need to use a modified snippet:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#p-Ads div.body {margin: 0em !important; }
div#footer, #mw-head-base, div#content { margin-right: 12em; }
#left-navigation { margin-right: 12em; }

Below is the code that needs to be placed in LocalSettings.php. Again, you should replace the ad code between the EOT lines.

$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
        $out = <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:160px;height:600x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
        $bar['Ads'] = $out;
        return true;
};

The three types of ads can be previewed in this wiki.