How To: Add Google AdSense to Your MediaWiki Site (No Extension Needed)

MediaWiki is free open-source wiki software. It is extremely user friendly and allows anyone to have a fully-functional wiki site in minutes. Some of us like to monetize our sites and may wish to run Google AdSense on our MediaWiki site. In reality, most wiki sites do not run ads by the nature of the content hosted on them. There is also a hidden undertone that because wiki is free and open source software, it should remain as so, as you host your own content on it. Still, some wiki sites publicly available on the Internet are heavily monetized.

Implement Google AdSense Code MediaWiki Header

1. Open the LocalSettings.php file located in your MediaWiki root folder.

2. At the bottom of your LocalSettings.php file, copy the below code replacing your AdSense code. Note: It is recommended to use responsive AdSense codes.

This uses the SiteNoticeAfter hook which will place your Google AdSense code at the header of your MediaWiki site.

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

Implement Google AdSense Code MediaWiki Footer

1. Open the LocalSettings.php file located in your MediaWiki root folder.

2. At the bottom of your LocalSettings.php file, copy the below code replacing your AdSense code. Note: It is recommended to use responsive AdSense codes.

This uses the SkinAfterContent hook and will display an ad below your article content.

$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:block"
     data-ad-client="ca-pub-"
     data-ad-slot=""
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $data .= '</div>';
        return true;
};

Implement Google AdSense Code MediaWiki Sidebar

In order to display ads in your MediaWiki sidebar, you have to do some custom edits to allow the correct sizings.

1. Type the following into your MediaWiki search box and edit the page.

MediaWiki:Vector.css

2. Add the following CSS to Vector.css.

/* 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; }

3. Open the LocalSettings.php file located in your MediaWiki root folder and add the following code at the bottom, replacing with your own AdSense code.

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

So, you don’t need a MediaWiki extension (at the time of this article, there are no reliable AdSense extension available anyhow) to get Google AdSense implemented on your MediaWiki site.