Last active
August 13, 2025 10:19
-
-
Save will83/a2f58996a45fa239587d32fead846f39 to your computer and use it in GitHub Desktop.
Adjust Wordpress admin bar 782px breakpoint with SM/MD tailwind breakpoint
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Customize WordPress admin bar breakpoints (782px → 767px) | |
| */ | |
| class AdminBarBreakpointCustomizer { | |
| private const OLD_BREAKPOINTS = ['782px', '783px']; | |
| private const NEW_BREAKPOINTS = ['767px', '768px']; | |
| public function __construct() { | |
| add_action('wp_enqueue_scripts', [$this, 'customizeAdminBarCSS'], 100); | |
| add_action('template_redirect', [$this, 'customizeAdminBarBump']); | |
| } | |
| /** | |
| * Replace admin bar CSS with custom breakpoints | |
| */ | |
| public function customizeAdminBarCSS(): void { | |
| if (is_admin() || !is_admin_bar_showing()) { | |
| return; | |
| } | |
| $this->dequeueOriginalAdminBarCSS(); | |
| $customCSS = $this->getModifiedAdminBarCSS(); | |
| if ($customCSS) { | |
| $this->enqueueCustomAdminBarCSS($customCSS); | |
| } | |
| } | |
| /** | |
| * Replace the default margin-top bump with custom breakpoint | |
| */ | |
| public function customizeAdminBarBump(): void { | |
| if (is_admin() || !is_admin_bar_showing()) { | |
| return; | |
| } | |
| remove_action('wp_head', '_admin_bar_bump_cb', 0); | |
| add_action('wp_head', [$this, 'renderCustomBumpCSS'], 0); | |
| } | |
| /** | |
| * Remove original admin bar styles | |
| */ | |
| private function dequeueOriginalAdminBarCSS(): void { | |
| wp_dequeue_style('admin-bar'); | |
| wp_deregister_style('admin-bar'); | |
| } | |
| /** | |
| * Get modified admin bar CSS with new breakpoints | |
| */ | |
| private function getModifiedAdminBarCSS(): ?string { | |
| $cssPath = $this->getAdminBarCSSPath(); | |
| if (!file_exists($cssPath)) { | |
| return null; | |
| } | |
| $css = file_get_contents($cssPath); | |
| return $css ? $this->replaceBreakpoints($css) : null; | |
| } | |
| /** | |
| * Get path to WordPress admin bar CSS file | |
| */ | |
| private function getAdminBarCSSPath(): string { | |
| $suffix = (defined('SCRIPT_DEBUG') && SCRIPT_DEBUG) ? '' : '.min'; | |
| return ABSPATH . WPINC . "/css/admin-bar{$suffix}.css"; | |
| } | |
| /** | |
| * Replace breakpoints in CSS content | |
| */ | |
| private function replaceBreakpoints(string $css): string { | |
| $patterns = [ | |
| 'max-width: ' . self::OLD_BREAKPOINTS[0], | |
| 'max-width:' . self::OLD_BREAKPOINTS[0], | |
| 'min-width: ' . self::OLD_BREAKPOINTS[1], | |
| 'min-width:' . self::OLD_BREAKPOINTS[1] | |
| ]; | |
| $replacements = [ | |
| 'max-width: ' . self::NEW_BREAKPOINTS[0], | |
| 'max-width:' . self::NEW_BREAKPOINTS[0], | |
| 'min-width: ' . self::NEW_BREAKPOINTS[1], | |
| 'min-width:' . self::NEW_BREAKPOINTS[1] | |
| ]; | |
| return str_replace($patterns, $replacements, $css); | |
| } | |
| /** | |
| * Enqueue custom admin bar CSS | |
| */ | |
| private function enqueueCustomAdminBarCSS(string $css): void { | |
| // Add our custom rule before registering | |
| $customRule = ' | |
| #wpadminbar { | |
| position: fixed; | |
| top: 0; | |
| overflow: hidden; | |
| } | |
| @media (min-width: 1280px) { | |
| #wpadminbar { | |
| overflow: visible; | |
| } | |
| } | |
| '; | |
| // Append it to the modified CSS | |
| $css .= "\n" . $customRule; | |
| wp_register_style('admin-bar', false, ['dashicons'], null); | |
| wp_enqueue_style('admin-bar'); | |
| wp_add_inline_style('admin-bar', $css); | |
| } | |
| /** | |
| * Render custom admin bar bump CSS | |
| */ | |
| public function renderCustomBumpCSS(): void { | |
| echo '<style id="admin-bar-inline-css"> | |
| @media screen { html { margin-top: 32px !important; } } | |
| @media screen and (max-width: 767px) { html { margin-top: 46px !important; } } | |
| @media print { #wpadminbar { display: none; } } | |
| </style>'; | |
| } | |
| } | |
| // Initialize the customizer | |
| new AdminBarBreakpointCustomizer(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment