Adding buttons to wp-admin editor

You can add two types to the editor, the first one below adds a button to the “Text” version of the editor. The second enables and adds the “Format” dropdown to the “Visual” version of the editor.

For the text version we’ll need to create the shortcode that’s going to be applied by the button.

/*
 *  Do Shortcodes
 *************************************************************/
function list_shortcode( $atts, $content = null ) {
    return '<div class="blocked-list">' . $content . '</div>';
}
add_shortcode( 'list', 'list_shortcode' );

function video_shortcode( $atts, $content = null ) {
    return '<div class="responsive-iframe">' . $content . '</div>';
}
add_shortcode( 'video-wrapper', 'video_shortcode' );

With the shortcodes in place, we just need to create a button that’ll add it to our editor. In our functions, below the shortcode above add the following function that’ll add the buttons.

The code is commented so you should be able to see what to add/change for your own projects.

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( // add the button
                    "code_shortcode", // id
                    "Blocked list", // label
                    callback // then the callback for this button
                );
                QTags.addButton(
                    "code_video_shortcode",
                    "Video",
                    callback2
                );

                function callback()
                {
                    var selected_text = getSel(); // Gets the selected element
                    QTags.insertContent("[list]"+selected_text+"[/list]"); // list shortcode we added above
                }

                function callback2()
                {
                    var selected_text = getSel();
                    QTags.insertContent("[video-wrapper]"+selected_text+"[/video-wrapper]");
                }
            </script>
        <?php
    }
}

add_action("admin_print_footer_scripts", "shortcode_button_script");

Finally the “Format” dropdown that’s visible in the extended visual editor.

This will go in your functions.php code is commented.

/*
 *  MCE Button additions
 *************************************************************/

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'Flex Box',  // label for the dropdown item
            'block' => 'div',  // Inline or block
            'classes' => 'flex-box', // Class for style purposes
            'wrapper' => true, // true or false to wrap selected text
            
        ), 
        array(  
            'title' => 'Font 30',  
            'inline' => 'span',  
            'classes' => 'font-30',
            'wrapper' => true,
            
        ), 
        array(  
            'title' => 'Font 25',  
            'inline' => 'span',  
            'classes' => 'font-25',
            'wrapper' => true,
            
        ), 
        array(  
            'title' => 'Font 20',  
            'inline' => 'span',  
            'classes' => 'font-20',
            'wrapper' => true,
            
        ),  
        array(  
            'title' => 'Small font',  
            'inline' => 'small',  
            'wrapper' => true,
        ), 
        array(  
            'title' => 'Superscript',  
            'inline' => 'sup',  
            'wrapper' => true,
        ),
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  
    
    return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );  

Finally just add the CSS to your stylesheets.