Add Quicktags – WordPress Snippet Generator

Use this tool to generate custom Quicktags for your theme or plugin consumers to use to style or modify their content.

  • General
  • Quicktag #1
  • #2
  • #3
  • #4
  • #5.
  • #6

General

Item
Input

Quicktag #1

Item
Input

Quicktag #2

Item
Input

Quicktag #3

Item
Input

Quicktag #4

Item
Input

Quicktag #5

Item
Input

Quicktag #6

Item
Input

Register Custom Quicktags

Add this code to your functions.php file. Scroll down to learn more.

      
// add more buttons to the html editor
function {{themeSlug || 'your_theme_slug'}}_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton( '{{quicktag1Id}}', '{{quicktag1Display}}', '{{quicktag1OpenTag}}', '{{quicktag1EndTag}}', '{{quicktag1AccessKey}}', '{{quicktag1Title}}', {{quicktag1Priority}}, '{{quicktag1Instance}}' );
        QTags.addButton( '{{quicktag2Id}}', '{{quicktag2Display}}', '{{quicktag2OpenTag}}', '{{quicktag2EndTag}}', '{{quicktag2AccessKey}}', '{{quicktag2Title}}', {{quicktag2Priority}}, '{{quicktag2Instance}}' );
        QTags.addButton( '{{quicktag3Id}}', '{{quicktag3Display}}', '{{quicktag3OpenTag}}', '{{quicktag3EndTag}}', '{{quicktag3AccessKey}}', '{{quicktag3Title}}', {{quicktag3Priority}}, '{{quicktag3Instance}}' );
        QTags.addButton( '{{quicktag4Id}}', '{{quicktag4Display}}', '{{quicktag4OpenTag}}', '{{quicktag4EndTag}}', '{{quicktag4AccessKey}}', '{{quicktag4Title}}', {{quicktag4Priority}}, '{{quicktag4Instance}}' );
        QTags.addButton( '{{quicktag5Id}}', '{{quicktag5Display}}', '{{quicktag5OpenTag}}', '{{quicktag5EndTag}}', '{{quicktag5AccessKey}}', '{{quicktag5Title}}', {{quicktag5Priority}}, '{{quicktag5Instance}}' );
        QTags.addButton( '{{quicktag6Id}}', '{{quicktag6Display}}', '{{quicktag6OpenTag}}', '{{quicktag6EndTag}}', '{{quicktag6AccessKey}}', '{{quicktag6Title}}', {{quicktag6Priority}}, '{{quicktag6Instance}}' );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', '{{themeSlug || 'your_theme_slug'}}_add_quicktags' );

    

WordPress is one of the most popular content management systems out there. It’s not only easy to use, but is also incredibly flexible. This makes it an equally enticing choice for users who want a simple blogging solution and those who prefer to edit their content in HTML.

Both the WYSIWYG editor and text editor in the WordPress back-end feature a toolbar that allows users to edit their content easily. The HTML text editor, however, displays a set of default quicktags that enables users to style their content without having to enclose the text in opening and closing tags by hand.

We’ve designed this code snippet generator tool to help WordPress developers add custom quicktags to their themes. We’ll start off by explaining what quicktags are in more detail and why you might need to use them. Once that’s done, we’ll explain how you can use this code snippet generator tool to add custom quicktags to your WordPress themes.

What Are Quicktags in WordPress and Why Should I Use Them?

If you’ve ever used the WordPress editor, then chances are you’re familiar with the Text tab. For those of you who don’t already know, the Text tab allows users to make edits using HTML. For some users, editing posts and pages in HTML is easier than using the visual WYSIWYG editor because it gives them better control over their content.

WordPress editor's Text tab.

The toolbar buttons in the Text tab are quicktags that allow users to easily edit and format the content without switching back to the Visual tab. For instance, if you wanted to italicize text, you’d highlight it and click on the i quicktag button. The quicktag would then automatically enclose the highlighted text in <em></em> tags.

How Do I Use This Add Quicktags Code Snippet Generator Tool?

We’ve put together this quicktags code snippet generator tool to help WordPress developers add custom quicktags to their site’s HTML text editor. By using this tool, you can add up to six different quicktags at a time by simply filling out the required fields. Once you’re done, this tool will generate a custom code snippet for you to add to your WordPress theme’s functions.php file.

Let’s take a closer look at each field one by one:

  • General Tab

    • Theme Slug: Enter your theme’s slug into this text field in all lowercase letters, numbers and/or underscores. This value will be used to prefix functions and variables that would otherwise be incompatible with the WordPress core or any installed themes or plugins. Typically, this is the same string as the text domain, with underscores in place of hyphens.
  • Quicktag #N Tab

    • Quicktag #N ID: Enter the HTML ID for the quicktag button.
    • Quicktag #N Display: Enter the HTML value for the quicktag button here.
    • Quicktag #N Open Tag: Enter the starting tag that you’d like to have inserted like <tag>. Alternatively, you can also enter a callback that should be executed when the button is clicked.
    • Quicktag #N End Tag: Enter the ending tag that you’d like to have inserted like </tag>. If the tag doesn’t need to be closed then leave the field empty.
    • Quicktag #N Access Key: Enter the shortcut access key for the quicktag button.
    • Quicktag #N Title: Add an HTML title value for the quicktag button here.
    • Quicktag #N Priority: Enter the position where you’d like to have the quicktag button be displayed in the HTML text editor’s toolbar. 1 to 9 represent first, 11 to 19 represent second, and 21 to 29 represent third. This field accepts an int value.
    • Quicktag #N Instance: Setting this value limits the button to a specific instance of quicktags. If this value is left blank, it will be added to all instances.
  • Code Tab

    • Once you’ve entered values for all of the required fields, head over to the Code tab. You’ll find that the Register Custom Quicktags text area is populated with a custom code snippet for adding custom quicktag(s) to your WordPress theme.

How Do I Add the Generated Code Snippet to My Website?

The quickest way to add the generated code snippet to your site is by pasting it directly into your current theme’s functions.php file. You can edit it directly by heading over to Appearance > Editor from the admin panel.

Alternatively, you can download the theme’s functions.php file to your desktop via an FTP client. Next, open it up in a text editor and paste the code at the bottom of the file. Click the Save button and re-upload it to your theme’s directory. Once you’re done, the newly added quicktags will be available for use.

Keep in mind that the function should not be called before the init action.

Conclusion

Quicktags make it easier for WordPress users to edit and style their content in the HTML editor. Manually enclosing text in HTML tags can become quite difficult over time – especially if you’re dealing with longer posts. Although the WordPress HTML editor comes with a handful of default quicktags, there’s always room to add more.

We hope that this code snippet generator tool saves you some effort from having to hand code quicktags into your WordPress site.

Do you have any questions about the Add Quicktags code generator tool? Which quicktags did you create for your WordPress theme with this tool? Let us know in the comments section below!


Written exclusively for

Nimbus Themes Publishing Logo

About the Author

Evan Scoboria is the co-founder, and developer at Shea Media LLC, the team behind Nimbus Themes, this magazine, and a bunch of very happy clients. He co-founded Shea Media with his wife Kendall in 2009. Evan enjoys hunting, fishing, code, cycling, and most of all WordPress!

Read all posts

Post a Comment

Your email address will not be published. Required fields are marked *