Skin:Vector/Customize

Custom HTML

Up to MediaWiki 1.35 there are no easy way to customize skin. Most of the changes should be made by modifying the skin code only. The exceptions are Sidebar and interface labels and messages. As a result, any engine update will delete any changes, since skin files would be replaced. The current approach is to keep custom HTML (JavaScript, PHP, etc.) code in separate files and add them in VectorTemplate.php.

Below are some examples on adding custom HTML code in different places of VectorTemplate.php (skins/Vector/includes/). Consider that the skin code depends on MediaWiki version and could differ.

MediaWiki 1.35

Logo link

To change link from site logo we will change return value of buildSidebar() function:

return [
	'has-logo' => $this->isLegacy,
	'html-logo-attributes' => Xml::expandAttributes(
		Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
			'class' => 'mw-wiki-logo',
			'href' => Skin::makeMainPageUrl(),
		]
	),
	'array-portals-rest' => array_slice( $props, 1 ),
	'data-portals-first' => $firstPortal,
	'data-portals-languages' => $languages,
];

Change line 6 to:

'href' => 'https://our.domain.org/',

Sidebar. Custom search portal

To add search field of an external search engine (or several), we should copy the code generated by that service into new file 'custom-search.htm' (skins/Vector/includes/) and find the lines:

case 'SEARCH':
   break;

It is in function buildSidebar(). Replace these two lines with the following code:

case 'SEARCH':
   /* custom search engines begins */
   $html = file_get_contents('custom-search.htm', FILE_USE_INCLUDE_PATH);
   $portal['html-items'] .= $html;
   $props[] = $portal;
   /* custom search engines ends */
   break;

This code will appear in sidebar as set in page Special:Sidebar by the following line:

* SEARCH

Footer. Custom row

Row in footer is an area below wiki page content as wide as content is. To add 'custom-footer.htm' right below content find these lines:

private function getFooterData() : array {
   $skin = $this->getSkin();
   $footerRows = [];
   foreach ( $this->getFooterLinks() as $category => $links ) {

And replace them with:

private function getFooterData() : array {
   $skin = $this->getSkin();
   $footerRows = [];

   /* custom footer row begins */
   $footerFile = file_get_contents('custom-footer.htm', FILE_USE_INCLUDE_PATH);
   $items[] = [
      'id' => "footer-item-custom",
      'html' => $footerFile,
   ];
   $footerRows[] = [
      'id' => "footer-custom",
      'className' => null,
      'array-items' => $items
   ];
   /* custom footer row ends */
   
   foreach ( $this->getFooterLinks() as $category => $links ) {

Footer. Custom icon

Icon in footer is an image like MediaWiki banner. Some counters or partnership logos could use such images. It is at the very bottom of a footer. To add 'custom-icons.htm' before MediaWiki banner (but to the same row) find these lines in getFooterData() function:

$footerIcons = $this->getFooterIcons( 'icononly' );
if ( count( $footerIcons ) > 0 ) {
   $items = []; 
   foreach ( $footerIcons as $blockName => $blockIcons ) {

And replace them with:

$footerIcons = $this->getFooterIcons( 'icononly' );
if ( count( $footerIcons ) > 0 ) {
   $items = [];
 
   /*custom footer icons (counter, etc.) begins */
   $footerFile = file_get_contents('custom-icons.htm', FILE_USE_INCLUDE_PATH);
   $items[] = [
	  'id' => "footer-item-custom",
	  'html' => $footerFile,
   ];
   /* custom footer icons ends */

   foreach ( $footerIcons as $blockName => $blockIcons ) {