• 0

How to Insert custom Quicktags into the WordPress Editor

Wordpress Quicktags First of all, what are WordPress quicktags? You can see them in the picture below, they are the bits of code you can insert when you use the code interface in your WordPress editor.

Wordpress Quicktags

The reason they are so useful is that they allow you to insert start and end tags in a unique and easy way. Start writing and when you need the tag (i.e. bold, list etc.) click on its button and the start tag will be pasted. When you are ready to end the tag, just click on the same button and you will paste the end tag.

This user-friendliness is what I love in WordPress, and they have these quicktags for many of the most common uses. However, you may need to paste tags frequently which are quite long as well, let me show you an example.

For instance, lets say you want to optimize the relevance of your Google Adsense. In such cases you may want to tell the Adsense robot, what is not important (less relevant) in your content. This can be done using following tags:

<!– google_ad_section_start(weight=ignore) –> …. <!– google_ad_section_end –>

Ads by Google

Having to add these sections manually is a pain, especially if you use them a lot, together with the other tag that tells adsense that a section is important. Just like the other quicktag buttons, you can create one for yourself, which will paste these tags for you.

You will need to edit the file “quicktags.js”, which can be found in “/wp-includes/js/” directory of your WordPress installation. I suggest downloading it, creating a back-up and opening with a text editor. You will see some general code at the top, but after that, you should see blocks of code, beginning with “edButtons”. These are all the buttons already in your toolbar.

    edButtons[edButtons.length] =
    new edButton(‘ed_strong’

The above code for example is the left most button that inserts <strong> tags.

Quicktags in wordpress

There are five parameters you can change and should change when creating a new button. The first is the name of the button. This can be found on the second line, ‘ed_strong’ is the name of this button, replace the phrase inside the apostrophes to change it. The lower case “b” in the third line will be shown on the button itself. If you were to replace the letter inside the apostrophe with the word “bold”, the button in the editor would show “bold”. The fourth and fifth line show the start and end tags, replace them with whatever you need. The lower case “b” in the sixth line is the hotkey you can use to access the tag when pressed together with the “alt” key.

That’s all there is to it, here’s what I did so I can paste the long code I showed above quickly.

edButtons[edButtons.length] =
new edButton(‘ed_unimp’
,'<!- google_ad_section_start(weight=ignore) ->’
,'<!- google_ad_section_end ->’

You can use this for pasting anything really, not just code. If you always begin your post with a specific text, and always end by signing off with the same text, you can enter it in this format. It’s not too flexible, but for basic needs it’ll do. But when it comes to tag pasting, this is a great way to save time and frustration.

Spread the love

You may also like...