This is How to Load a WordPress Shortcode with a Custom Button
The Power of Shortcodes in WordPress
WordPress shortcodes are a powerful tool that allow users to embed complex functionality into their content with a simple text-based snippet. From adding contact forms and calendars to displaying product grids and video players, shortcodes make it easy to add rich features to your website without having to write extensive code.
However, one of the challenges of working with shortcodes is making them easily accessible to your content creators. While you can provide your team with a list of available shortcodes, having them remember the exact syntax and where to place them can be cumbersome.
This is where custom buttons in the WordPress visual editor come in handy. By creating a custom button, you can give your users a one-click solution to insert a shortcode, ensuring a smooth and efficient content creation process.
Introducing the TinyMCE API
To create a custom button in the WordPress visual editor, we'll be leveraging the TinyMCE API. TinyMCE is the rich text editor used by WordPress, and it provides a robust set of tools and APIs for developers to extend its functionality.
The TinyMCE API allows you to register custom buttons, define their behavior, and even integrate them with your own custom code or shortcodes. This gives you the ability to create a seamless user experience for your content creators, while also ensuring that the required functionality is easily accessible.
Step-by-Step: Adding a Custom Button to Load a Shortcode
Now, let's dive into the process of creating a custom button to load a WordPress shortcode. For this example, we'll be using a simple shortcode that displays a call-to-action (CTA) box.
1. Define the Shortcode
First, let's create the shortcode that we want to integrate with our custom button. In this case, we'll create a shortcode called [cta_box]
that displays a CTA box with a title, description, and a button.
// functions.php
add_shortcode('cta_box', 'render_cta_box');
function render_cta_box($atts) {
$atts = shortcode_atts(array(
'title' => 'Call-to-Action',
'description' => 'This is a sample call-to-action box.',
'button_text' => 'Learn More',
'button_link' => '#'
), $atts);
$output = '<div class="cta-box">';
$output .= '<h3>' . $atts['title'] . '</h3>';
$output .= '<p>' . $atts['description'] . '</p>';
$output .= '<a href="' . $atts['button_link'] . '" class="cta-button">' . $atts['button_text'] . '</a>';
$output .= '</div>';
return $output;
}
This shortcode accepts four optional parameters: title
, description
, button_text
, and button_link
. You can customize the HTML output and the default values as needed for your use case.
2. Register the Custom Button
Next, we'll register the custom button in the WordPress visual editor. We'll do this by hooking into the mce_buttons
and mce_external_plugins
filters provided by the TinyMCE API.
// functions.php
add_filter('mce_buttons', 'register_cta_box_button');
add_filter('mce_external_plugins', 'add_cta_box_button_plugin');
function register_cta_box_button($buttons) {
array_push($buttons, 'cta_box_button');
return $buttons;
}
function add_cta_box_button_plugin($plugins) {
$plugins['cta_box_button'] = plugin_dir_url(__FILE__) . 'js/cta_box_button.js';
return $plugins;
}
In the register_cta_box_button
function, we're adding a new button with the identifier cta_box_button
to the list of available buttons in the visual editor.
In the add_cta_box_button_plugin
function, we're registering the JavaScript file that will define the behavior of the custom button. In this case, the file is located at js/cta_box_button.js
relative to the current PHP file.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
3. Implement the Custom Button Functionality
Now, let's create the cta_box_button.js
file that will define the behavior of our custom button.
// js/cta_box_button.js
(function() {
tinymce.PluginManager.add('cta_box_button', function(editor, url) {
editor.addButton('cta_box_button', {
title: 'Insert CTA Box',
icon: 'icon cta-box-icon',
onclick: function() {
editor.insertContent('[cta_box title="Call-to-Action" description="This is a sample call-to-action box." button_text="Learn More" button_link="#"]');
}
});
});
})();
In this JavaScript file, we're using the TinyMCE API to define the behavior of our custom button. Specifically:
- We're registering a new plugin called
cta_box_button
with the TinyMCE PluginManager.
- Within the plugin, we're adding a new button with the identifier
cta_box_button
.
- We're setting the button's title, icon, and the action to be performed when the button is clicked.
- In the
onclick
function, we're inserting the [cta_box]
shortcode with some default parameters into the editor.
The icon
property in the button definition refers to a custom CSS class that you can use to style the button's appearance. You'll need to add the CSS for this icon in your theme or plugin's stylesheet.
.cta-box-icon {
background-image: url('path/to/your/icon.png');
background-size: 16px 16px;
}
4. Enqueue the Custom Button Script
Finally, we need to enqueue the JavaScript file that defines the custom button's behavior. We can do this by hooking into the admin_enqueue_scripts
action in WordPress.
// functions.php
add_action('admin_enqueue_scripts', 'enqueue_cta_box_button_script');
function enqueue_cta_box_button_script() {
wp_enqueue_script('cta-box-button', plugin_dir_url(__FILE__) . 'js/cta_box_button.js', array('jquery', 'tinymce'), '1.0.0', true);
}
In this code, we're using the wp_enqueue_script
function to load the cta_box_button.js
file in the WordPress admin area. We're also including the jquery
and tinymce
dependencies, which are required for the TinyMCE API to function correctly.
Putting it All Together
Now that we've completed all the steps, let's recap the complete process:
- We defined a simple
[cta_box]
shortcode that displays a call-to-action box.
- We registered a custom button in the WordPress visual editor using the TinyMCE API.
- We implemented the custom button's functionality in a JavaScript file, allowing users to easily insert the
[cta_box]
shortcode with pre-defined parameters.
- We enqueued the custom button's JavaScript file in the WordPress admin area.
With this setup, your content creators can now easily insert the [cta_box]
shortcode by clicking the custom button in the visual editor. This provides a seamless and efficient way to add rich content to your WordPress website, without having to remember the exact shortcode syntax.
The beauty of this approach is that it can be applied to any WordPress shortcode, allowing you to create custom buttons for a wide range of functionality. By empowering your content creators with these tools, you can streamline the content creation process and ensure a consistent, high-quality user experience across your website.
If you're looking for ways to further optimize your WordPress website's performance and user experience, be sure to check out Flowpoint.ai. Flowpoint's AI-powered analytics and optimization tools can help you identify technical issues, improve user engagement, and boost your website's conversion rates