How to Add a Button to the TinyMCE Editor in WordPress
Last modified: January 13, 2020
TinyMCE editor is the default WordPress text editor that we all use on a daily basis. This is what TinyMCE looks like as default when you just install WordPress.
As you might have known, it’s possible to add custom buttons to the TinyMCE editor to add functionality. You may have installed plugins in the past that added buttons that create Shortcodes on in your post or added some other type of functionality.
How to Add a Button to TinyMCE?
In this tutorial we are going to create 2 different buttons that we will add to our TinyMCE and each button will server a different functionality.
Side note: It’s possible to create these buttons within a plugin, however we are going to add them to the theme directly. If you want to add them to a theme, check out our previous tutorial about creating a WordPress plugin from scratch and since you are at it, you can read our tutorial about creating a shortcode in a plugin.
* This button will show the rest of the post and open up an offer from a vendor
PHP file
The first step in creating a custom button is adding a PHP
in your theme’s root folder, let’s call it swpbtn-shortcode.php
Add the following code to the file:
<?php add_action( 'after_setup_theme', 'swp_theme_setup' ); if ( ! function_exists( 'swp_theme_setup' ) ) { function swp_theme_setup(){ /********* TinyMCE Buttons ***********/ add_action( 'init', 'swp_buttons' ); } } /********* TinyMCE Buttons ***********/ if ( ! function_exists( 'swp_buttons' ) ) { function swp_buttons() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } if ( get_user_option( 'rich_editing' ) !== 'true' ) { return; } add_filter( 'mce_external_plugins', 'swp_add_buttons' ); add_filter( 'mce_buttons', 'swp_register_buttons' ); } } if ( ! function_exists( 'swp_add_buttons' ) ) { function swp_add_buttons( $plugin_array ) { $plugin_array['swpbtn'] = get_stylesheet_directory_uri().'/assets/js/tinymce_buttons.js'; return $plugin_array; } } if ( ! function_exists( 'swp_register_buttons' ) ) { function swp_register_buttons( $buttons ) { array_push( $buttons, 'swpbtn' ); return $buttons; } }
Include the File
Add the following include within your functions.php file:
include "swpbtn-shortcode.php";
This will make sure the file is being called when the site loads.
Add the TinyMCE JS File
Now we need to add a JS file for the button’s functionality. If you notices in the code above, we already declared where that file will be:
get_stylesheet_directory_uri().'/assets/js/tinymce_buttons.js';
So in this case my theme has a folder called assets
and within it there is a folder called js
and within that folder I added a file called tinymce_buttons.js
This is the code within that file:
(function() { tinymce.PluginManager.add( 'swpbtn', function( editor, url ) { // Add Button to Visual Editor Toolbar editor.addButton('swpbtn', { title: 'Scan WP - Click button to add a Shortcoe', cmd: 'swpbtn', image: url + '/scanwp.png', }); editor.addCommand('swpbtn', function() { var selected_text = editor.selection.getContent({ 'format': 'html' }); var open_column = ''; var close_column = ''; var return_text = ''; return_text = open_column + close_column; editor.execCommand('mceReplaceContent', false, return_text); return; }); }); })();
The “title” above is what you will see when hovering above the button in the TinyMCE.
The image is an image file that I added to the JS
folder which is the button image.
If you followed the code, you’ll notice that we’re creating a shortcode that we will declare in a minute within the functions.php
file. The shortcode will create a button.
Create the Shortcode
Now we need to create the Shortcode to make sure that something actually happens when we publish our post.
Within your functions.php
file, add the following:
function swp_btn_func( $atts ) { $a = shortcode_atts( array( 'link' => '', 'name' => 'Try it Out', 'color' => 'green', ), $atts ); return '<div class="swp-btn"> <a style="background-color:' . $a['color'] . ';" class="" href="' . $a['link'] . '" target="_blank">' . $a['name'] . '</a> </div>'; } add_shortcode( 'swp-btn', 'swp_btn_func' );
So – our shorcode’s name is: “swp-btn” as you also saw in the code above and it accepts 3 parameters:
- color (user as background color)
- Link
- Name (which is actually the text of the button)
Add Style to the Shortcode Button
Finally we just need to add some style to the Shotcode which will turn into a button on the post. Let’s head over to our stylesheet, which ever file your theme uses and add some style to this:
.swp_scode_btn{ text-align: center; margin: 20px 0px; } .swp_scode_btn a{ color: #fff !important; padding: 10px 30px } .swp_scode_btn a:hover{ text-decoration: none; opacity:.50; }
You can play around with this of course but it just makes the button a little more stylish.
The Moment of Truth
All we need to do now is to try it out!
Here are the steps:
- Add a new post
- Make sure your button is visible in the TinyMCE. If not – click the kitchen sink button to show all the buttons
- Click your button
- You will see this
- Add values, for example:
- Publish the post (or preview)
- See your button in action!
Now Let's Try a Button That Doesn't Use a Shortcode
That wan’t too hard now was it?! Well, now we’re going to head on to our next button. This button will display a nice quotation within a post.
Here’s the way it will will work:
- You write text you want to be quoted
- You mark the text with your mouse
- Click the button
- You will now see quotation marks before and after the text
Here we go!
Add PHP File
Create a php file called swp-btnquote.php
and add it to your theme’s root folder. Add the following:
<?php add_action( 'after_setup_theme', 'swp1_theme_setup' ); if ( ! function_exists( 'swp1_theme_setup' ) ) { function swp1_theme_setup(){ /********* TinyMCE Buttons ***********/ add_action( 'init', 'swp1_buttons' ); } } /********* TinyMCE Buttons ***********/ if ( ! function_exists( 'swp1_buttons' ) ) { function swp1_buttons() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } if ( get_user_option( 'rich_editing' ) !== 'true' ) { return; } add_filter( 'mce_external_plugins', 'swp1_add_buttons' ); add_filter( 'mce_buttons', 'swp1_register_buttons' ); } } if ( ! function_exists( 'swp1_add_buttons' ) ) { function swp1_add_buttons( $plugin_array ) { $plugin_array['swpquote'] = get_stylesheet_directory_uri().'/assets/js/tinymce_quotebutton.js'; return $plugin_array; } } if ( ! function_exists( 'swp1_register_buttons' ) ) { function swp1_register_buttons( $buttons ) { array_push( $buttons, 'swpquote' ); return $buttons; } }
*Notice we changed the prefix for functions from swp
to swp1
so the functions don’t clash.
Add a JS File
Add the following in the JS file just like above:
(function() { tinymce.PluginManager.add( 'swpquote', function( editor, url ) { // Add Button to Visual Editor Toolbar editor.addButton('swpquote', { title: 'Insert quote', cmd: 'swpquote', image: url + '/logo.png', }); editor.addCommand('swpquote', function() { var selected_text = editor.selection.getContent({ 'format': 'html' }); if ( selected_text.length === 0 ) { alert( 'Please select text' ); return; } var open_column = '<h2 class="swp_quote"><img src="quote1.png" alt="">'; var close_column = '<img src="quote2.png" alt=""></h2>'; var return_text = ''; return_text = open_column + selected_text + close_column; editor.execCommand('mceReplaceContent', false, return_text); return; }); }); })();
*Note: make sure you add 2 quote images in the JS
folder so this works.
Call it from the Functions.php File
include "swp-btnquote.php";
Just like above you should add some style here but I’m sure you got the hang of that by now.
All you have to do now is try out your button.
As you can see, the button works a little different here. You need to first write the quote, then mark it and the code we wrote in the function wraps it which creates pure HTML
, no shortcode what so ever.
Final Thoughts
Were you able to follow? I hope so! This is a really cool feature that you can add on your clients’ sites and will show them you really went the extra mile for them.
I did not add the full code in a zip file since this isn’t a plugin and would probably get messy. If there are enough requests, I’ll add a post about turning this into a plugin as well.
Let me know what you thought in the comments below.
Good Luck!
*PS – the code in this post was mostly taken from somewhere else on the web a while ago, though I’m not sure where it’s from so I can’t mention them. Just FYI.