Skip to main content

​
Overview

Citizen uses a component-based architecture to organize UI elements. All components implement the CitizenComponent interface and are located in includes/Components/. Namespace: MediaWiki\Skins\Citizen\Components

​
CitizenComponent Interface

The base interface all components must implement. 
interface CitizenComponent {
    public function getTemplateData(): array;
}

​
getTemplateData

Returns template data for Mustache rendering. 
public function getTemplateData(): array
​
return
array
Associative array of template variables for Mustache rendering

​
Core Components

​
CitizenComponentPageHeading

Manages page heading display including titles and taglines. Location: includes/Components/CitizenComponentPageHeading.php

​
Constructor

public function __construct(
    UserFactory $userFactory,
    GenderCache $genderCache,
    UserIdentityLookup $userIdentityLookup,
    LanguageConverterFactory $languageConverterFactory,
    Language $lang,
    MessageLocalizer $localizer,
    OutputPage $out,
    Title $title,
    string $titleData
)
​
userFactory
UserFactory
required
Factory for creating User objects
​
genderCache
GenderCache
required
Cache for user gender information
​
userIdentityLookup
UserIdentityLookup
required
Service for looking up user identities
​
languageConverterFactory
LanguageConverterFactory
required
Factory for language variant conversion
​
lang
Language
required
Language object for localization
​
localizer
MessageLocalizer
required
Message localization service
​
out
OutputPage
required
OutputPage object for the current page
​
title
Title
required
Title object for the current page
​
titleData
string
required
Raw title HTML from parent template

​
Template Data

public function getTemplateData(): array
​
html-tagline
string
Page tagline HTML (namespace tagline, user info, or site tagline)
​
html-title-heading
string
Modified page heading HTML with styled parentheses
Usage Example: 
$pageHeading = new CitizenComponentPageHeading(
    $userFactory,
    $genderCache,
    $userIdentityLookup,
    $languageConverterFactory,
    $lang,
    $localizer,
    $out,
    $title,
    $titleData
);
$data = $pageHeading->getTemplateData();
// Returns: ['html-tagline' => '...', 'html-title-heading' => '...']

​
CitizenComponentPageTools

Manages the page tools menu including article tools, languages, and share functionality. Location: includes/Components/CitizenComponentPageTools.php

​
Constants

public const TOOLBOX_ID = 'p-tb';

​
Constructor

public function __construct(
    Config $config,
    MessageLocalizer $localizer,
    Title $title,
    User $user,
    PermissionManager $permissionManager,
    int $numLanguages,
    array $pageToolsMenu,
    array $languagesData,
    array $variantsData
)
​
config
Config
required
Configuration object
​
localizer
MessageLocalizer
required
Message localization service
​
title
Title
required
Current page title
​
user
User
required
Current user
​
permissionManager
PermissionManager
required
Permission manager for access checks
​
numLanguages
int
required
Number of available languages
​
pageToolsMenu
array
required
Page tools menu data from sidebar
​
languagesData
array
required
Language links data
​
variantsData
array
required
Language variant data

​
Template Data

public function getTemplateData(): array
​
data-article-tools
array
Article tools menu data
​
is-visible
bool
Whether page tools should be shown (based on CitizenShowPageTools config)
​
has-overflow
bool
Whether there are any article tools to show
​
has-languages
bool
Whether language links or variants are available
​
is-uls-ready
bool
Whether Universal Language Selector is ready (currently always false)
​
int-language-count
int
Number of available languages
​
is-sharable
bool
Whether the page can be shared (exists and is content page)
​
msg-citizen-share
string
Localized share button text
Visibility Configuration: The CitizenShowPageTools config accepts:
  • true: Always visible
  • false: Never visible
  • 'login': Only visible if logged in
  • 'permission-*': Only visible if user has permission (e.g., 'permission-edit')

​
CitizenComponentSearchBox

Provides enhanced search box with keyboard shortcuts and powered-by message. Location: includes/Components/CitizenComponentSearchBox.php

​
Constructor

public function __construct(
    MessageLocalizer $localizer,
    ExtensionRegistry $extensionRegistry,
    array $searchBoxData
)
​
localizer
MessageLocalizer
required
Message localization service
​
extensionRegistry
ExtensionRegistry
required
Registry for checking loaded extensions
​
searchBoxData
array
required
Base search box data from parent template

​
Template Data

public function getTemplateData(): array
​
array-keyboard-hint
array
Array of keyboard hint data (↑↓ for select, / for open, Esc for exit)
​
msg-citizen-search-footer
string
Powered-by message (CirrusSearch or MediaWiki)
​
msg-citizen-search-toggle-shortcut
string
Search toggle shortcut display text
​
html-random-href
string
URL to Special:Randompage
Usage Example: 
$searchBox = new CitizenComponentSearchBox(
    $localizer,
    $extensionRegistry,
    $parentData['data-search-box']
);
$data = $searchBox->getTemplateData();

​
CitizenComponentMainMenu

Organizes sidebar navigation into main menu structure. Location: includes/Components/CitizenComponentMainMenu.php

​
Constructor

public function __construct(
    array $sidebarData
)
​
sidebarData
array
required
Sidebar data from parent template

​
Template Data

public function getTemplateData(): array
​
data-portlets-first
array
First portlet menu data (processed through CitizenComponentMenu)
​
array-portlets-rest
array
Remaining portlet menus (each processed through CitizenComponentMenu)

​
Other Components

Citizen includes additional components for specific UI elements:
  • CitizenComponentBodyContent - Wraps main content, handles collapsible sections
  • CitizenComponentButton - Renders button elements
  • CitizenComponentFooter - Site footer with links
  • CitizenComponentKeyboardHint - Keyboard shortcut hints
  • CitizenComponentLink - Link elements
  • CitizenComponentMenu - Menu container
  • CitizenComponentMenuListItem - Individual menu items
  • CitizenComponentPageFooter - Page metadata footer
  • CitizenComponentPageSidebar - Sidebar content
  • CitizenComponentSiteStats - Site statistics display
  • CitizenComponentStickyHeader - Sticky header behavior
  • CitizenComponentTableOfContents - Table of contents
  • CitizenComponentUserInfo - User information display

​
Creating Custom Components

To create a new component:
  1. Implement the CitizenComponent interface
  2. Add constructor with required dependencies
  3. Implement getTemplateData() method
  4. Return array of template variables
namespace MediaWiki\Skins\Citizen\Components;

class MyCustomComponent implements CitizenComponent {
    public function __construct(
        private readonly MessageLocalizer $localizer,
        private readonly array $data
    ) {}

    public function getTemplateData(): array {
        return [
            'custom-field' => $this->data['value'],
            'msg-custom' => $this->localizer->msg( 'custom-message' )->text()
        ];
    }
}
  • SkinCitizen - Main skin class
  • Hooks - Hook handlers that modify component data

Build docs developers (and LLMs) love

Get started for freeTalk to us