User:Jdlrobson/Skins for extension developers

Some notes around how skins will work after the changes in MediaWiki 1.35.

Modifying subtitle edit

Q: I want to add JS/CSS specific to a skin edit

A: For this there are 2 mechanisms - for an already existing module, use skinScripts or skinStyles keys in ResourceLoader. For a new module you have built use the BeforePageDisplay hook and call OutputPage::addModule or OutputPage::addModuleStyles. Use the second skin parameter to limit this change to certain skins.

I want to modify the subtitle. edit

A: Use OutputPageBeforeHTML and clearSubtitle, getSubtitle, and addSubtitle as appropriate.

Q: I want to append something to the page title edit

A: Usually modifying the subtitle is a better approach but if you do have need to update the title use OutputPageBeforeHTML and call setPageTitle

For skins using BaseTemplate edit

Q: I want to pass some data down to a skin rendered via BaseTemplate edit

A: Use OutputPage->getProperty and OutputPage->setProperty alongside one of the OutputPage hooks.

Modifying Menus edit

Q: How can I disable the toolbox? edit

A: Use Use SidebarBeforeOutput and remove the TOOLBOX key.

Q: I want to add a link to one of the existing sidebar menus edit

A: Use SidebarBeforeOutput . This supports additions to toolbox and languages since 1.35.

Q: I want to add a link to the personal tools edit

A: Use SkinTemplateNavigation::Universal and modify the 'user-menu' key.

Q: I want to add a new "portal" menu to the sidebar. edit

A: Use SidebarBeforeOutput .

Q: I want to add a tab alongside user page and discussion edit

A: Use SkinTemplateNavigation::Universal and modify the 'namespaces' key.

Q: I want to add another article view alongside edit and history edit

A: Use SkinTemplateNavigation::Universal and modify the 'views' key.

Q: I want to add another action alongside move and delete. edit

A: Use SkinTemplateNavigation::Universal and modify the 'actions' key.

Q: I have a link that should only be added to certain pages e.g. special pages edit

A: Use the appropriate hook and inspect the Title object.

Q: I want to hide a link edit

A: Add a stylesheet to hide the component. Otherwise please make a feature request for core to provide a method of disabling.

Q: I want to add HTML after a menu edit

A: Use SkinAfterPortlet to add HTML. Check the `portlet` parameter for the name of the menu. For toolbox for example the identifier is "tb".

Q: I want to modify a custom menu that is specific to a certain skin. For example - in CologneBlue I want to remove the #syslinks menu. edit

A: You'll need to make sure your hook runs after CologneBlue's hook. This can be done by registering a hook late using SetupAfterCache hook.

// Use setup after cache hook to register hook after skin hooks have been installed
$wgHooks['SetupAfterCache'][] = function () {
	global $wgHooks;
	$wgHooks['SkinTemplateNavigation::Universal'][] = function ($skin, &$menu) {
		if($skin->getSkinName() === 'cologneblue'  ){
			$menu['cb-syslinks'] = [];

Modifying the Footer edit

Q: I want to add something to the footer edit

A: Use the hook SkinAddFooterLinks .

Making or integrating with a new skin edit

When making a new skin or integrating with an existing one, please be careful around which hooks you rely on. Follow the best practices listed above. In this section I'll try and compile advice around what building blocks can be considered reliable in the long term future.

Deprecated hooks edit

Please avoid relying on these hooks (or using them!) during your development or at least be aware of the long term plans surrounding them

Active hooks (To organize) edit

(extends ContextSource)

All these hooks can be considered safe during skin development

Active hooks still under consideration edit

Hooks we removed edit

Hooks we moved out of Skins edit