Add Snippet To Project
Are you tired of the limited options in the default WordPress media toolbar? Do you find yourself frequently needing to customize your upload/insert experience? If so, you’re in luck. In this article, we’ll walk you through the process of creating a custom upload/insert media toolbar in WordPress. By the end, you’ll have a fully customized and personalized toolbar that suits your specific needs. Let’s dive in and take control of your media uploads!
function wpturbo_custom_uploadinsert_media_toolbar($toolbar) {
global $post;
// Check if we are on the edit post page
if (get_post_type($post) == 'post') {
// Add a custom button to the toolbar
$toolbar .= '<button class="wpturbo-custom-button" data-media-toolbar-item="custom-button">Custom Button</button>';
// Add a custom button action
$toolbar .= '
<script>
jQuery(document).ready(function($){
$("body").on("click", ".wpturbo-custom-button", function(e){
e.preventDefault();
// Your custom button action code goes here
});
});
</script>';
}
return $toolbar;
}
add_filter('media_view_settings', 'wpturbo_custom_uploadinsert_media_toolbar', 10, 1);
The code snippet provided allows you to customize the media toolbar in the WordPress editor. This is particularly useful if you want to add a custom button to the toolbar that performs a specific action.
First, we define a new function called wpturbo_custom_uploadinsert_media_toolbar(). This function takes a parameter $toolbar, which represents the current state of the media toolbar.
Next, we use the global keyword to access the global $post variable, which contains information about the current post being edited.
We check if the post type of the current post is 'post' using the get_post_type() function. You can change this to any other post type if needed.
Inside the if statement, we start customizing the toolbar by appending HTML markup to the $toolbar variable. In this example, we add a custom button to the toolbar with the class wpturbo-custom-button and the text "Custom Button".
After adding the custom button, we append a script that will handle the button click event. We use the jQuery document.ready function to ensure that the DOM is fully loaded before attaching the event listener.
The event listener is attached to the body element and listens for a click event on elements with the class wpturbo-custom-button. When the button is clicked, the event handler function is executed. You can replace the comment "// Your custom button action code goes here" with your own JavaScript code to perform the desired action.
Finally, the modified $toolbar variable is returned from the function.
To integrate this custom media toolbar into WordPress, we use the add_filter() function with the 'media_view_settings' filter hook. This filter allows us to modify the settings for the media view, including the toolbar. We pass in the wpturbo_custom_uploadinsert_media_toolbar function as the callback function for the filter. The 10 argument specifies the priority of the filter, and the 1 argument specifies the number of parameters the callback function accepts.
By adding this code snippet to your WordPress theme or plugin, you will be able to customize the media toolbar with a custom button and define its functionality.