QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Add Buttons to WordPress Text Editor

Add Buttons to WordPress Text Editor

This post is a part 1 of Create a WordPress Post Editor Button to Add Shortcode post series.

In this tutorial we will see how to add buttons to WordPress text editor. This can be useful while creating a shortcode where you want to add the shortcode tags with just a click instead of typing it.

We need to use WordPress Quicktags API to add a button to the WordPress text editor.

Here is an example code snippet which adds a button to the WordPress code editor and wraps the selected text using [code][/code] tags.

function shortcode_button_script()
{
    if(wp_script_is("quicktags"))
    {
        ?>
            <script type="text/javascript">
               
                //this function is used to retrieve the selected text from the text editor
                function getSel()
                {
                    var txtarea = document.getElementById("content");
                    var start = txtarea.selectionStart;
                    var finish = txtarea.selectionEnd;
                    return txtarea.value.substring(start, finish);
                }

                QTags.addButton(
                    "code_shortcode",
                    "Code",
                    callback
                );

                function callback()
                {
                    var selected_text = getSel();
                    QTags.insertContent("[code]" +  selected_text + "[/code]");
                }
            </script>
        <?php
    }
}

add_action("admin_print_footer_scripts", "shortcode_button_script");

Here is how it looks

Screen Shot 2015-03-18 at 9.41.47 pm

Mar 18, 2015Narayan Prusty
Adding Buttons to WordPress Visual EditorWordPress Disable Automatic Update Emails
Comments: 1
  1. Imre
    6 years ago

    Hi! Very useful, but how can I put 2, 3 or more buttons into it? What do I need to duplicate and change? Thank you!

    ReplyCancel

Leave a Reply to Imre Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Javascript Create File Object From URL
  • WordPress Frontend Twitter OAuth Login
  • WordPress Settings API Tutorial with Examples
  • Adding Buttons to WordPress Visual Editor
  • WordPress Frontend Facebook Login
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license