This is How to Add a Customized Button to the WordPress Menu Admin Page
As a WordPress developer, you may have encountered the need to add a custom button to the WordPress Menu Administration page. However, you might have found that there are no available hooks in that exact location that you can use for this purpose.
But don't worry, there's a solution! In this article, we'll guide you through a step-by-step process to add a customized button to the WordPress Menu Admin Page using some jQuery sorcery.
Understanding the Challenge
The WordPress Menu Administration page, located at wp-admin/nav-menus.php
, doesn't have any built-in hooks that you can leverage to add a custom button. This can be a bit frustrating, as you might want to add a button that performs a specific action, such as triggering a REST API call or executing some custom functionality.
Fortunately, there's a workaround that involves using jQuery to append the custom button exactly where you want it and then attaching a click handler to retrieve the current menu ID and make the desired AJAX call.
Step 1: Create a WordPress Plugin
To add the custom button to the WordPress Menu Admin Page, we'll create a WordPress plugin. This will ensure that the functionality is encapsulated and can be easily installed, activated, and deactivated on your WordPress site.
Start by creating a new file in your WordPress plugin directory, for example, wp-admin-menu-custom-button.php
, and add the following plugin header:
/*
Plugin Name: WP Admin Menu Custom Button
Description: Adds a custom button to the Menu Administration page.
Author: Your Name
Author URI: https://your-website.com
Author Email: your-email@example.com
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
Replace the plugin name, description, author information, and license details with your own.
Step 2: Add the Custom Button to the Admin Footer
Next, we'll use the admin_footer
action to add our custom button to the Menu Administration page. This action is triggered at the end of the WordPress admin footer, which is the perfect place to insert our custom code.
Inside the plugin file, add the following function:
function wp54428_add_custom_button_to_menu_screen() {
$screen = get_current_screen();
if (
isset($screen->id)
&& 'nav-menus' == $screen->id
) {
?>
<script>
jQuery(function($) {
// Let's use the Save menu button as a reference point for all of our actions
var save_menu_button = $("#save_menu_header");
// We're currently seeing the Edit Menu screen, so let's do our thing
if (!save_menu_button.closest('.menu-edit').hasClass('blank-slate')) {
// Append our custom button next to the Save/Create button
save_menu_button.before('<a href="#" id="my_custom_button" class="button button-primary button-large">My Custom Button</a> ');
// Click handler for our custom button
save_menu_button.parent().on("click", "#my_custom_button", function(e) {
e.preventDefault();
// Test to check that we are getting the menu ID correctly
alert(save_menu_button.closest('.menu-edit').find("#menu").val());
// @TODO
// Send the ID to the REST API via AJAX
});
}
});
</script>
<?php
}
}
add_action('admin_footer', 'wp54428_add_custom_button_to_menu_screen');
Let's break down what's happening in this code:
- The
wp54428_add_custom_button_to_menu_screen()
function checks if the current admin screen is the "nav-menus" screen, which is the WordPress Menu Administration page.
- Inside the function, we use jQuery to target the "Save menu" button, which we'll use as a reference point to append our custom button.
- We check if the current screen is the "Edit Menu" screen (not the "Blank Slate" screen), and then we append our custom button before the "Save menu" button.
- We attach a click handler to the custom button, which currently just alerts the ID of the current menu. This is where you'll add your custom functionality, such as making a REST API call.
Step 3: Retrieve the Current Menu ID and Make a REST API Call
Now that we have the custom button in place, we can use it to retrieve the current menu ID and make a REST API call. In the click handler for the custom button, replace the // @TODO
comment with the following code:
// Get the current menu ID
var currentMenuID = save_menu_button.closest('.menu-edit').find("#menu").val();
// Make the REST API call
jQuery.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'my_custom_button_action',
menu_id: currentMenuID
},
success: function(response) {
console.log('REST API call successful!', response);
// Handle the response as needed
},
error: function(xhr, status, error) {
console.error('REST API call failed:', error);
// Handle the error as needed
}
});
In this code, we first retrieve the current menu ID using the find("#menu")
selector on the .menu-edit
element. This is the same way we tested the value in the previous step.
Then, we make an AJAX call to the WordPress ajaxurl
endpoint, which is a global variable that points to the URL of the AJAX handler. We send the action
parameter to identify our custom AJAX action, and the menu_id
parameter to pass the current menu ID to the server-side code.
On the server-side, you'll need to create a function to handle the AJAX request and perform the desired actions, such as making a REST API call. Here's an example:
function my_custom_button_action() {
$menu_id = $_POST['menu_id'];
// Perform your custom actions here, such as making a REST API call
$response = array(
'message' => 'REST API call successful!',
'menu_id' => $menu_id
);
wp_send_json_success($response);
}
add_action('wp_ajax_my_custom_button_action', 'my_custom_button_action');
In this example, the my_custom_button_action()
function receives the menu_id
parameter from the AJAX request, and then you can perform your custom actions, such as making a REST API call. Finally, the function sends a success response back to the client-side code.
By following these steps, you've successfully added a customized button to the WordPress Menu Admin Page and integrated it with a REST API call. This approach allows you to extend the functionality of the WordPress Menu Administration page to suit your specific needs.
Remember to test your plugin thoroughly and make any necessary adjustments to the code to fit your project's requirements. Good luck with your WordPress development endeavors!
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your WordPress website and directly generate recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.