WordPress Toggle Admin Bar

wp-toggle-admin-bar.php

<?php
/**
 * Plugin Name: WP Toggle Admin Bar
 * Plugin URI:  https://rtcamp.com/
 * Description: A simple plugin to toggle the WordPress admin bar visibility for logged-in users.
 * Version:     1.0.0
 * Author:      rtCamp
 * Author URI:  https://rtcamp.com/
 * License:     GPL2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Contributor: Manish
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Displays a button to toggle the WordPress admin bar, specifically for logged-in users.
 *
 * @hook wp_after_admin_bar_render
 *
 * @global bool is_user_logged_in() Checks if the current user is logged in.
 */
function wp_toggle_admin_bar_button_toggle() {

	if ( is_user_logged_in() && ! is_admin() ) {
		printf(
			'<a href="#" class="dashicons dashicons-wordpress" id="btn-show-admin-bar" title="%1$s">%2$s</a>',
			esc_attr__( 'Show WP Admin Bar', 'wp-toggle-admin-bar' ),
			esc_html__( 'Show WP Admin Bar', 'wp-toggle-admin-bar' )
		);
	}
}

add_action( 'wp_after_admin_bar_render', 'wp_toggle_admin_bar_button_toggle' );


/**
 * Enqueues inline JavaScript and CSS for the admin bar toggler,
 * but only for logged-in users.
 *
 * This function registers dummy handles for the script and style first,
 * then uses wp_add_inline_script and wp_add_inline_style to attach
 * the actual JavaScript and CSS generated by other functions.
 * Finally, it enqueues these registered (and now populated) handles.
 *
 * @hook wp_enqueue_scripts
 *
 * @global bool is_user_logged_in() Checks if the current user is logged in.
 */
function wp_toggle_admin_bar_enqueue_scripts() {

	if ( is_user_logged_in() && ! is_admin() ) {
		wp_register_style( 'wp-toggle-admin-bar-css', '', [], '1.0.0' );
		wp_register_script( 'wp-toggle-admin-bar-js', '', [], '1.0.0', true );

		wp_add_inline_style( 'wp-toggle-admin-bar-css', wp_toggle_admin_bar_style() );
		wp_add_inline_script( 'wp-toggle-admin-bar-js', wp_toggle_admin_bar_script() );

		wp_enqueue_style( 'wp-toggle-admin-bar-css' );
		wp_enqueue_script( 'wp-toggle-admin-bar-js' );
	}
}

add_action( 'wp_enqueue_scripts', 'wp_toggle_admin_bar_enqueue_scripts' );

/**
 * Toggle admin bar script.
 *
 * @return bool|string
 */
function wp_toggle_admin_bar_script() {
	ob_start();
	?>
	<script>
		const AdminBarToggler = {
			adminBarToggleBtn: null,
			showAdminBarBtn: null,
			adminBar: null,
			body: null,
			root: null,
			originalAdminBarHeight: '32px',

			/**
				* Initializes the AdminBarToggler module.
				* Caches DOM elements, creates the toggle button, sets initial height,
				* initializes the admin bar state, and adds event listeners.
				*/
			init() {
				this.cacheElements();
				this.createToggleButton();
				this.setInitialHeight();
				this.initAdminBar();
				this.addEventListeners();
			},

			/**
				* Caches references to essential DOM elements for efficient access.
				*/
			cacheElements() {
				this.adminBar = document.getElementById( 'wpadminbar' );
				this.body = document.body;
				this.root = document.documentElement;

				// adminBarToggleBtn will be updated after creation, but initially cached if it exists.
				this.adminBarToggleBtn = document.getElementById( 'btn-toggle-admin-bar' );

				// Cache the 'show admin bar' button, if it exists elsewhere in the HTML.
				this.showAdminBarBtn = document.getElementById( 'btn-show-admin-bar' );
			},

			/**
				* Creates the "hide/show admin bar" toggle button element and appends it to the DOM.
				* This button is inserted before '#wp-admin-bar-wp-logo' in the WordPress admin bar.
				*/
			createToggleButton() {
				const toggleLi = document.createElement( 'li' );
				toggleLi.role = 'group';
				toggleLi.id = 'admin-bar-toggle-li';

				const toggleLiAnchor = document.createElement( 'a' );
				toggleLiAnchor.id = 'btn-toggle-admin-bar';
				toggleLiAnchor.className = 'dashicons dashicons-arrow-up-alt2'; // Initial state: "show" icon (pointing up, implying bar is hidden).
				toggleLiAnchor.title = 'Show WP Admin Bar';
				toggleLiAnchor.href = '#'; // Prevents page reload.
				toggleLi.appendChild( toggleLiAnchor );

				// Add the icon to the admin bar before #wp-admin-bar-wp-logo.
				const wpLogo = document.getElementById( 'wp-admin-bar-wp-logo' );
				if ( wpLogo ) {
					wpLogo.before( toggleLi );
				}

				// After creation, update the cached element reference.
				this.adminBarToggleBtn = document.getElementById( 'btn-toggle-admin-bar' );
			},

			/**
				* Sets the initial CSS custom property (--wp-admin--admin-bar--height)
				* based on whether the admin bar is initially visible or hidden.
				* It stores the original computed height for later use.
				*/
			setInitialHeight() {
				// Retrieve the actual computed height of the admin bar to store as original.
				if ( this.adminBar ) {
					// Get the current computed value or use the default.
					this.originalAdminBarHeight = getComputedStyle( this.root ).getPropertyValue( '--wp-admin--admin-bar--height' ) || this.originalAdminBarHeight;

					// If the body does not have the 'admin-bar' class (meaning it's initially hidden),
					// set the height custom property to 0px.
					if ( !this.body.classList.contains( 'admin-bar' ) ) {
						this.root.style.setProperty( '--wp-admin--admin-bar--height', '0px' );
					}
				}
			},

			/**
				* Sets up event listeners for the admin bar toggle button and any other
				* elements that should trigger the admin bar's visibility toggle.
				*/
			addEventListeners() {
				// Listen for clicks on the primary toggle button.
				if ( this.adminBarToggleBtn ) {
					this.adminBarToggleBtn.addEventListener( 'click', this.toggleAdminBar.bind( this ) );
				}

				// Listen for clicks on a separate "show admin bar" button, if it exists.
				if ( this.showAdminBarBtn ) {
					this.showAdminBarBtn.addEventListener( 'click', this.toggleAdminBar.bind( this ) );
				}
			},

			/**
				* Initializes the display state of the admin bar.
				* If the body already has the 'admin-bar' class (meaning WordPress intends it to be visible),
				* this function ensures it starts hidden, adjusting styles accordingly.
				*/
			initAdminBar() {
				if ( this.adminBar ) {
					// Add the base toggle class for animations.
					this.adminBar.classList.add( 'admin-bar-toggle' );

					// If the body class indicates the admin bar is visible by default (WordPress default),
					// remove that class and explicitly set the height to 0px to hide it initially.
					if ( this.body.classList.contains( 'admin-bar' ) ) {
						this.body.classList.remove( 'admin-bar' );
						this.root.style.setProperty( '--wp-admin--admin-bar--height', '0px' );

						// Update the toggle button's title to reflect that it will "Show" the bar.
						if ( this.adminBarToggleBtn ) {
							this.adminBarToggleBtn.title = 'Show WP Admin Bar';
						}

						// Ensure no margin-top is applied if the bar is hidden.
						this.root.style.setProperty( 'margin-top', '0px', 'important' );
					}
				}
			},

			/**
				* Toggles the visibility of the WordPress admin bar.
				* This method adds/removes CSS classes for animation and updates the
				* '--wp-admin--admin-bar--height' CSS custom property.
				*
				* @param {Event} event The click event object.
				*/
			toggleAdminBar( event ) {
				if ( this.adminBar ) {
					// Toggle the animation class on the admin bar.
					this.adminBar.classList.toggle( 'admin-bar-toggle' );

					// Toggle the 'admin-bar' class on the body to adjust layout.
					this.body.classList.toggle( 'admin-bar' );

					// Ensure the toggle button has the correct initial dashicon class.
					if ( this.adminBarToggleBtn ) {
						// By default, the toggle button should be 'arrow-up-alt2' (Show Admin Bar) if hidden.
						// This line ensures it's always set to 'up' initially, then the conditional logic
						// below will update it based on the *new* state.
						this.adminBarToggleBtn.classList.remove( 'dashicons-arrow-down-alt2' );
						this.adminBarToggleBtn.classList.add( 'dashicons-arrow-up-alt2' );
					}

					// Update the CSS variable for admin bar height based on the new state.
					if ( this.body.classList.contains( 'admin-bar' ) ) {
						// If 'admin-bar' class is present, the bar is now visible.
						this.root.style.setProperty( '--wp-admin--admin-bar--height', this.originalAdminBarHeight );

						// Change button icon and title to 'Hide'.
						if ( this.adminBarToggleBtn ) {
							this.adminBarToggleBtn.classList.remove( 'dashicons-arrow-up-alt2' );
							this.adminBarToggleBtn.classList.add( 'dashicons-arrow-down-alt2' );
							this.adminBarToggleBtn.title = 'Hide WP Admin Bar';
						}
					} else {
						// If 'admin-bar' class is absent, the bar is now hidden.
						this.root.style.setProperty( '--wp-admin--admin-bar--height', '0px' );

						// Ensure no margin-top is applied when hidden.
						this.root.style.setProperty( 'margin-top', '0px', 'important' );

						// Change button icon and title to 'Show'.
						if ( this.adminBarToggleBtn ) {
							this.adminBarToggleBtn.classList.remove( 'dashicons-arrow-down-alt2' );
							this.adminBarToggleBtn.classList.add( 'dashicons-arrow-up-alt2' );
							this.adminBarToggleBtn.title = 'Show WP Admin Bar';
						}
					}
				}

				event.preventDefault(); // Prevent default anchor link behavior (e.g., scrolling to top).
			}
		};

		// Initialize the object when the DOM is fully loaded.
		document.addEventListener( 'DOMContentLoaded', () => {
			AdminBarToggler.init();
		} );
	</script>
	<?php
	return ob_get_clean();
}

/**
 * Toggle admin bar style.
 *
 * @return bool|string
 */
function wp_toggle_admin_bar_style() {
	ob_start();
	?>
	<style>
		#wpadminbar {
			transform: translateY(0);
			transition: all .3s;
			visibility: visible
		}

		#wpadminbar.admin-bar-toggle {
			transform: translateY(-100%);
			transition: all .3s;
			visibility: hidden
		}

		#wpadminbar #wp-admin-bar-root-default #admin-bar-toggle-li #btn-toggle-admin-bar {
			color: red;
			font-family: dashicons;
			margin: 0;
			padding: 0 .52083vw;
			vertical-align: middle
		}

		#btn-show-admin-bar {
			background-color: #333;
			border-radius: .26042vw;
			color: #ccc;
			font-size: 0;
			height: 1.30208vw;
			left: .52083vw;
			opacity: .7;
			padding: .26042vw;
			position: fixed;
			-webkit-text-decoration: none !important;
			text-decoration: none !important;
			text-indent: -9999em;
			text-transform: uppercase;
			top: 1.30208vw;
			transition: all .3s;
			width: 1.30208vw;
			z-index: 1000000
		}

		#btn-show-admin-bar:before {
			font-size: .83333vw
		}

		#btn-show-admin-bar:hover {
			opacity: 1;
			transition: all .3s
		}

		.admin-bar #btn-show-admin-bar {
			display: none
		}

		@media(max-width:1024px) {
			#btn-show-admin-bar {
				left: 10px;
				padding: 5px;
				top: 25px;
				width: 25px
			}

			#btn-show-admin-bar:before {
				font-size: 14px
			}
		}

		@media screen and (max-width:782px) {
			#wpadminbar #wp-admin-bar-root-default #admin-bar-toggle-li {
				display: block
			}
		}

		@media(max-width:600px) {
			#btn-show-admin-bar {
				display: none !important
			}
		}
	</style>
	<?php
	return ob_get_clean();
}