WordPress Toolbar (Admin Bar) in Bricks editor

Update on 30 Jul 2023: This is now included in the plugin. No need to manually add the code in this tutorial.


I built the Bricks Navigator to be able to quickly edit any Page or Template directly with Bricks in a single click besides being able to navigate to various Bricks settings pages and it works great both in the WP admin and on the front end except in Bricks editor pages.

That changes today.

Just add this in the child theme’s functions.php:

// Show WP admin bar in Bricks editor.
add_action( 'init', function () {
	// if this is not the outer frame, abort
	if ( ! bricks_is_builder_main() ) {
		return;
	}

	add_filter( 'show_admin_bar', '__return_true' );
} );

and this at Bricks → Settings → Builder → Builder mode (Custom):

/* --- Show WP admin bar in Bricks editor */

body.admin-bar #bricks-toolbar {
	top: var(--wp-admin--admin-bar--height);
}

#bricks-structure {
	top: calc(40px + var(--wp-admin--admin-bar--height));
}

1000s of clicks saved – guaranteed.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

18 comments

Leave a Reply to Sinisa Sinjori (Cancel Reply)