Skip to content

Instantly share code, notes, and snippets.

@will83

will83/gist:a2f58996a45fa239587d32fead846f39

Last active August 13, 2025 10:19
Show Gist options
  • Save will83/a2f58996a45fa239587d32fead846f39 to your computer and use it in GitHub Desktop.
Save will83/a2f58996a45fa239587d32fead846f39 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. will83 revised this gist Aug 13, 2025. 1 changed file with 112 additions and 95 deletions.
    207 changes: 112 additions & 95 deletions gistfile1.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,115 +1,132 @@
    <?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']);
    }

    /**
    * Customize WordPress admin bar breakpoints (782px → 767px)
    * Replace admin bar CSS with custom breakpoints
    */
    class AdminBarBreakpointCustomizer {
    private const OLD_BREAKPOINTS = ['782px', '783px'];
    private const NEW_BREAKPOINTS = ['767px', '768px'];
    public function customizeAdminBarCSS(): void {
    if (is_admin() || !is_admin_bar_showing()) {
    return;
    }

    public function __construct() {
    add_action('wp_enqueue_scripts', [$this, 'customizeAdminBarCSS'], 100);
    add_action('template_redirect', [$this, 'customizeAdminBarBump']);
    }
    $this->dequeueOriginalAdminBarCSS();
    $customCSS = $this->getModifiedAdminBarCSS();

    /**
    * Replace admin bar CSS with custom breakpoints
    */
    public function customizeAdminBarCSS(): void {
    if (is_admin() || !is_admin_bar_showing()) {
    return;
    }
    if ($customCSS) {
    $this->enqueueCustomAdminBarCSS($customCSS);
    }
    }

    $this->dequeueOriginalAdminBarCSS();
    $customCSS = $this->getModifiedAdminBarCSS();
    /**
    * Replace the default margin-top bump with custom breakpoint
    */
    public function customizeAdminBarBump(): void {
    if (is_admin() || !is_admin_bar_showing()) {
    return;
    }

    if ($customCSS) {
    $this->enqueueCustomAdminBarCSS($customCSS);
    }
    }
    remove_action('wp_head', '_admin_bar_bump_cb', 0);
    add_action('wp_head', [$this, 'renderCustomBumpCSS'], 0);
    }

    /**
    * Replace the default margin-top bump with custom breakpoint
    */
    public function customizeAdminBarBump(): void {
    if (is_admin() || !is_admin_bar_showing()) {
    return;
    }
    /**
    * Remove original admin bar styles
    */
    private function dequeueOriginalAdminBarCSS(): void {
    wp_dequeue_style('admin-bar');
    wp_deregister_style('admin-bar');
    }

    remove_action('wp_head', '_admin_bar_bump_cb', 0);
    add_action('wp_head', [$this, 'renderCustomBumpCSS'], 0);
    }
    /**
    * Get modified admin bar CSS with new breakpoints
    */
    private function getModifiedAdminBarCSS(): ?string {
    $cssPath = $this->getAdminBarCSSPath();

    /**
    * Remove original admin bar styles
    */
    private function dequeueOriginalAdminBarCSS(): void {
    wp_dequeue_style('admin-bar');
    wp_deregister_style('admin-bar');
    }
    if (!file_exists($cssPath)) {
    return null;
    }

    $css = file_get_contents($cssPath);
    return $css ? $this->replaceBreakpoints($css) : null;
    }

    /**
    * Get modified admin bar CSS with new breakpoints
    */
    private function getModifiedAdminBarCSS(): ?string {
    $cssPath = $this->getAdminBarCSSPath();
    /**
    * 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";
    }

    if (!file_exists($cssPath)) {
    return null;
    }
    /**
    * 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);
    }

    $css = file_get_contents($cssPath);
    return $css ? $this->replaceBreakpoints($css) : null;
    /**
    * 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;
    }

    /**
    * 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";
    @media (min-width: 1280px) {
    #wpadminbar {
    overflow: visible;
    }
    }
    ';

    /**
    * 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);
    }
    // Append it to the modified CSS
    $css .= "\n" . $customRule;

    /**
    * Enqueue custom admin bar CSS
    */
    private function enqueueCustomAdminBarCSS(string $css): void {
    wp_register_style('admin-bar', false, ['dashicons'], null);
    wp_enqueue_style('admin-bar');
    wp_add_inline_style('admin-bar', $css);
    }
    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>';
    }
    /**
    * 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();
    // Initialize the customizer
    new AdminBarBreakpointCustomizer();
  2. will83 revised this gist Aug 13, 2025. No changes.
  3. will83 renamed this gist Aug 13, 2025. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.php
    View file
    File renamed without changes.
  4. will83 created this gist Aug 13, 2025.
    115 changes: 115 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    <?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 {
    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();