WordPress Plugin: Login Easily With Teleport

WordPress Keyboard Shortcuts: Hide or Show 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

MacOS

Option + Control + o: Opens the block navigation menu.
Option + Control + n: Navigates to the next part of the editor.
Option + Control + p: Navigates to the previous part of the editor.
fn + Option + F10: Navigates to the nearest toolbar.
Command + Option + Shift + m: Switches between Visual and Code Editor.

Windows

Ctrl + Shift + o: Opens the block navigation menu.
Ctrl + Shift + n: Navigates to the next part of the editor.
Ctrl + Shift + p: Navigates to the previous part of the editor.
Fn + Ctrl + F10: Navigates to the nearest toolbar.
Ctrl + Shift + Alt + m: Switches between Visual and Code Editor.

WordPress Classic Editor Keyboard Shortcuts

MacOS

Command + y: Redoes the last action.
Command + Option + [number]: Inserts heading sizes (e.g., Command + Option + 1 for h1).
Command + Option + l: Aligns text to the left.
Command + Option + j: Justifies text.
Command + Option + c: Centers text.
Command + Option + d: Applies strikethrough.
Command + Option + r: Aligns text to the right.
Command + Option + u: Creates an unordered list.
Command + Option + a: Inserts a link.
Command + Option + o: Creates a numbered list.
Command + Option + s: Removes a link.
Command + Option + q: Formats text as a quote.
Command + Option + m: Inserts an image.
Command + Option + t: Inserts the ‘More’ tag.
Command + Option + p: Inserts a page break tag.
Command + Option + w: Toggles fullscreen mode in the visual editor.
Command + Option + f: Toggles fullscreen mode in text editor.

Windows

Ctrl + y: Redoes the last action.
Alt + Shift + [number]: Inserts heading sizes (e.g., Alt + Shift + 1 for ).
Alt + Shift + l: Aligns text to the left.
Alt + Shift + j: Justifies text.
Alt + Shift + c: Centers text.
Alt + Shift + d: Applies strikethrough.
Alt + Shift + r: Aligns text to the right.
Alt + Shift + u: Creates an unordered list.
Alt + Shift + a: Inserts a link.
Alt + Shift + o: Creates a numbered list.
Alt + Shift + s: Removes a link.
Alt + Shift + q: Formats text as a quote.
Alt + Shift + m: Inserts an image.
Alt + Shift + t: Inserts the ‘More’ tag.
Alt + Shift + p: Inserts a page break tag.
Alt + Shift + w: Toggles fullscreen mode in the visual editor.
Alt + Shift + f: Toggles fullscreen mode in text editor.

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!

MacOS

Option + Control + x: Toggle the admin menu bar.

Windows

Ctrl + Shift + x: Toggle the admin menu bar.

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

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() {
    ?>


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.