WordPress Toolbar (Admin Bar) in Bricks editor

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));
}

.bricks-panel,
#bricks-preview,
#bricks-structure {
	height: calc(100vh - 40px - var(--wp-admin--admin-bar--height));
}

1000s of clicks saved – guaranteed.

Get full access to all 220+ Bricks tutorials with BricksLabs Pro

15 comments

Leave your comment