User:Jdlrobson/Skins for extension developers

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

Modifying subtitle

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

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.

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

Q: I want to append something to the page title

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

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

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

Modifying Menus

Q: How can I disable the toolbox?

A: Use Use SidebarBeforeOutput and remove the TOOLBOX key.

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

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

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

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

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

A: Use SidebarBeforeOutput .

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

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

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

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

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

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

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

Q: I want to hide a link

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

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.

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

Q: I want to add something to the footer

A: Use the hook SkinAddFooterLinks .

Making or integrating with a new skin

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

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)

(extends ContextSource)

All these hooks can be considered safe during skin development

Active hooks still under consideration

Hooks we removed

SkinGetPoweredBy (deprecated in 1.37)

Hooks we moved out of Skins

SkinAfterBottomScripts (actually part of OutputPage now)