In a previous article I mentioned that I run a local instance of Mediawiki. More recently, I’ve wanted to view my local wiki on my mobile device, however Mediawiki doesn’t support this by default. Thankfully, there is an Extension for that: MobileFrontend.
The one drawback is that the menu in the mobile layout is apparently hardcoded, and doesn’t read from MediaWiki:Sidebar. This was a problem for my site, which uses a few main pages as gateways to much of the content.
One possible solution was to simply add the important links to the main page. I also found an open enhancement request, but it could take a while to resolve.
Then I found an alternative. The steps presented here are modified based on my needs, but you can find the original here: Extension discussion.
Replace [uniquename], [link text] and [url] as appropriate.
The original steps used an extended code block similar to the existing Random link block. Choosing not to use $this->msg just simplifies the change and avoids needing to edit \extensions\MobileFrontend\i18n\en.json.
If we want images to appear beside our links we’ll need to generate svg files. There are a few existing ones we can reuse, alternatively I used Flaticon to generate some additional ones. Place any additional icons in \extensions\MobileFrontend\resources\mobile.mainMenu.icons.
Replace [uniquename] with the same value used in SkinMinerva.php, and [svc file name] with the name of a file from \resources\mobile.mainMenu.icons.
When testing the results on my mobile phone I initially had issues with caching, and the changes weren’t reflected when touching the hamburger (the three-line icon that toggles the menu: ). You can check the page Special:MobileMenu to be sure though.