• This article is outdated, as Classic Editor was removed.
  • This won't work in Visual Editor and 2017 Wikitext Editor. In 2010 wikitext editor, they can be added. See this documentation for information on adding custom buttons to WikiEditor.
  • Support for these custom edit buttons ended in MediaWiki 1.32, which means they are currently unsupported. Use on your own risk! Read more here.

Editors who use the classic source mode editor may be interested in adding custom edit buttons to the editor's toolbar. These buttons allow special characters or chunks of text to be inserted into the edit box.

The basic toolbar

The default toolbar looks like this:


You may add custom buttons in your personal wikia.js so that only you can see and use them, or you may add them to MediaWiki:Common.js to make them available to all users on the wiki.

A customized edit bar would look something like this:


How do I use the buttons?

While editing a page in source mode, clicking one of the buttons will insert a symbol or piece of text. For example, clicking the button_bold.png button will insert the following text where the cursor is: '''Bold text'''. If you highlight some text that you want to make bold, clicking this button will put the ''' on either side of the highlighted text so that it will be made bold when the page is published. The other buttons work in a similar way, try clicking some and seeing what they insert.

How do I create and upload button images?

The first thing to do is create a 23x22 image in any image editing program (you can use this file as a template). Then upload it as you would any other image.

Note: If your image serves a function that other communities may find useful, please upload the image to Community Central (and be sure to tag it with [[Category:Custom edit buttons]].). You can view buttons others have uploaded at Category:Custom edit buttons.

How do I edit the JavaScript file?

Find the correct JavaScript (.js) page to add it to - see Help:Advanced CSS and JS for help with this.

Add a new mwCustomEditButtons section on the JS page. You will add one section to the array for each custom button you wish to add. Here's an example of what the page content should look like:

if (mwCustomEditButtons.length) {
    mwCustomEditButtons[mwCustomEditButtons.length] = {
        "imageFile": "//",
        "speedTip": "Redirect",
        "tagOpen": "#REDIRECT [" + "[",
        "tagClose": "]]",
        "sampleText": "Insert text"
    mwCustomEditButtons[mwCustomEditButtons.length] = {
        "imageFile": "//",
        "speedTip": "Strike",
        "tagOpen": "<s>",
        "tagClose": "</s>",
        "sampleText": "Strike-through text"
    mwCustomEditButtons[mwCustomEditButtons.length] = {
        "imageFile": "//",
        "speedTip": "Line break",
        "tagOpen": "<br />",
        "tagClose": "",
        "sampleText": ""
    mwCustomEditButtons[mwCustomEditButtons.length] = {
        "imageFile": "//",
        "speedTip": "Comment visible only for editors",
        "tagOpen": "<!-- ",
        "tagClose": " -->",
        "sampleText": "Insert comment here"

If you want to add a new button, copy this section:

mwCustomEditButtons[mwCustomEditButtons.length] = {
    "imageFile": "//",
    "speedTip": "Comment visible only for editors",
    "tagOpen": "<!-- ",
    "tagClose": " -->",
    "sampleText": "Insert comment here"

Then paste it after the last closing brace and semicolon: };. From there, replace each value to match what you want the button to do. The values are:

The full URL to the image.
You may find the full URL to the image by going to the image description page and clicking the hyperlink below the image to see the full-size image. Use the URL from the resulting image-only page.
The image must be stored on your local wiki or on Community Central — it must use a URL.
The tool-tip text (shown when you hover the mouse over the button).
The opening tag
The closing tag (omitted if there is no sample text needed).
The text that will be automatically highlighted upon insertion (between the two other tags), this is intended to be replaced by you when you type. Leave this blank if you don't need to put anything between the opening and closing tags.

Once you have published the page and refreshed your browser's cache, your custom buttons will appear when you edit a page in source mode.

See also

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.