Add Custom Keyboard Shortcuts in WordPress Admin Panel
Explanation
Want to speed up your workflow in the WordPress admin area? You can add custom keyboard shortcuts to make navigation quicker and easier. Here's how this code helps you do just that:
- Load Custom Script: The code hooks into WordPress to load a special JavaScript file when you're in the admin area. This file is where the magic happens, allowing you to define your shortcuts.
- Pass Data to JavaScript: It uses a feature called localize script to send data from PHP to JavaScript. This is useful for security, like verifying actions with a nonce (a unique token).
- Define Shortcuts: In the footer of the admin pages, it adds a script that listens for specific key combinations. For example:
- Ctrl + Shift + A takes you to the "Add New Post" page.
- Ctrl + Shift + D brings you back to the Dashboard.
These shortcuts are customizable. You can change the key combinations or add new ones by modifying the JavaScript part. Just ensure the key codes match the keys you want to use.
Remember, this code is for the admin area, so it won't affect the front end of your site. It's a handy way to make your admin tasks more efficient!
Code
<?php
// Hook to enqueue custom JavaScript for admin area
add_action('admin_enqueue_scripts', 'wp_dudecom_enqueue_admin_shortcuts_script');
function wp_dudecom_enqueue_admin_shortcuts_script() {
// Enqueue the custom JavaScript file
wp_enqueue_script('wp-dudecom-admin-shortcuts', get_template_directory_uri() . '/js/wp-dudecom-admin-shortcuts.js', array('jquery'), null, true);
// Localize script to pass data from PHP to JavaScript
wp_localize_script('wp-dudecom-admin-shortcuts', 'wpDudecomShortcuts', array(
'nonce' => wp_create_nonce('wp_dudecom_shortcuts_nonce'),
));
}
// Hook to add custom keyboard shortcuts
add_action('admin_footer', 'wp_dudecom_add_keyboard_shortcuts');
function wp_dudecom_add_keyboard_shortcuts() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Define custom keyboard shortcuts
$(document).on('keydown', function(e) {
// Example: Ctrl + Shift + A to open the Add New Post page
if (e.ctrlKey && e.shiftKey && e.keyCode === 65) {
e.preventDefault();
window.location.href = '<?php echo admin_url('post-new.php'); ?>';
}
// Example: Ctrl + Shift + D to open the Dashboard
if (e.ctrlKey && e.shiftKey && e.keyCode === 68) {
e.preventDefault();
window.location.href = '<?php echo admin_url(); ?>';
}
});
});
</script>
<?php
}
?>Instructions
File Location: Add the following code to your theme's functions.php file or a custom plugin file.
Prerequisites: Ensure you have access to your WordPress theme files and a basic understanding of JavaScript and PHP.
Implementation Steps:
- Access Your Theme Files: Use an FTP client or your hosting provider's file manager to navigate to your WordPress theme directory.
- Edit
functions.php: Open thefunctions.phpfile located in your active theme's directory. - Add the Code: Copy and paste the provided PHP code into the
functions.phpfile. This code will enqueue a JavaScript file and define keyboard shortcuts for the admin panel. - Create JavaScript File: In your theme directory, create a new folder named
jsif it doesn't already exist. Inside this folder, create a file namedwp-dudecom-admin-shortcuts.js. This file will be used to define additional JavaScript if needed. - Save Changes: Save the changes to your
functions.phpfile and ensure the JavaScript file is correctly placed in thejsdirectory. - Test the Shortcuts: Log in to your WordPress admin panel and try using the keyboard shortcuts:
- Ctrl + Shift + A to open the "Add New Post" page.
- Ctrl + Shift + D to navigate to the Dashboard.
If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance with WordPress implementations and advanced functionality.