WordPress Keyboard Shortcuts: Add A Keyboard Shortcut to Hide or Show the WordPress Admin Bar

WordPress offers a range of keyboard shortcuts to enhance its users’ productivity. These shortcuts are tailored for Windows and MacOS operating systems and cater to WordPress usage, from content editing to comment management. Let’s explore these shortcuts:

WordPress Block Editor Shortcuts

WordPress Classic Editor Keyboard Shortcuts

Years ago, we built a plugin to hide the admin bar when viewing your site and use popup navigation instead. We called it Teleport. After testing, we noticed that it slowed down the site load times with the methods we deployed, so we no longer updated the plugin.

Keyboard Shortcut to Hide or Show The WordPress Admin Bar

I like WordPress’s built-in admin bar when you’re logged into your site, but not when trying to view the site. So, I wrote a modification that you might wish to deploy on your own… a keyboard shortcut that will hide or show the WordPress Admin bar when you view your site, and you’re logged in!

When the admin bar loads, it slides up. Toggling it will slide the page up or down.

https://cdn.martech.zone/wp-content/uploads/2024/01/hide-show-wordpress-admin-bar-code.mov

Add this code to your child theme’s functions.php:

add_action('wp_enqueue_scripts', 'enqueue_adminbar_shortcut_script');
function enqueue_adminbar_shortcut_script() {
    if (is_user_logged_in()) {
        wp_enqueue_script('jquery');
        add_action('wp_footer', 'add_inline_admin_bar_script');
    }
}

function add_inline_admin_bar_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function(jQuery) {
            var adminBar = jQuery('#wpadminbar');
            var body = jQuery('body');

            // Check if the admin bar exists and set the initial styling
            if (adminBar.length) {
                var adminBarHeight = adminBar.height();
                // Hide the admin bar and adjust the body's top margin
                adminBar.hide();
                body.css('margin-top', '-' + adminBarHeight + 'px');

                jQuery(document).keydown(function(event) {
                    // Toggle functionality on specific key combination
                    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.which === 88) {
                        if (adminBar.is(':visible')) {
                            adminBar.slideUp();
                            body.animate({'margin-top': '-' + adminBarHeight + 'px'}, 300);
                        } else {
                            adminBar.slideDown();
                            body.animate({'margin-top': '0px'}, 300);
                        }
                    }
                });
            }
        });
    </script>
    <?php
}

Explanation

• This script initially checks if the admin bar (#wpadminbar) is present. If it is, the script calculates its height.
• It then hides the admin bar and sets the margin-top of the body element to the negative value of the admin bar’s height using jQuery. This makes the admin bar invisible initially and shifts the page content up.
• The keydown event listener toggles the visibility of the admin bar and adjusts the margin-top of the body to show or hide the admin bar smoothly.