50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

WordPress Toolbar (Admin Bar) in Bricks editor

wp-admin-bar-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.

Leave your comment