Details
Overview
This snippet allows you to toggle the WordPress admin bar using a keyboard shortcut.
Press Alt + B (or Cmd + B on Mac) to instantly show or hide the admin bar. The script also remembers your last choice using localStorage, so the same state is applied automatically the next time you visit the site.
In short, it gives you a quick way to hide the admin bar while working or previewing your site, and bring it back whenever needed with a simple shortcut.
Setup
Add External Scripts
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Add HTML
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Add Custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
Add Custom Javascript
Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
document.addEventListener("DOMContentLoaded", () => {
const bar = document.getElementById("wpadminbar");
if (!bar) return;
const key = "wp_adminbar_hidden";
bar.style.display = localStorage.getItem(key) === "false" ? "block" : "none";
document.addEventListener("keydown", e => {
if ((e.altKey || e.metaKey) && e.key.toLowerCase() === "b") {
const hidden = bar.style.display === "none";
bar.style.display = hidden ? "block" : "none";
localStorage.setItem(key, hidden ? "false" : "true");
}
});
});Add Custom PHP
Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.