Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024

This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the content of a Bricks section template.

This gives you unlimited flexibility to visually develop your dashboard page for your or your client’s usage.

Bricks template:

WP Dashboard:

Note that the name after “Welcome” in the heading is dynamically generated and is the Display name for the user viewing the dashboard page.

Similarly, the name and email address in the form (Bricks element) are dynamic.

Limitations

Does not work seamlessly when Bricks’ CSS loading method is inline. Works fine with ‘External files’ method. It is possible to still make it work with the Inline option but would involve manually copying the generated CSS and pasting it in the code. Since the dashboard won’t frequently change, it should be ok.
The native Bricks’ Forms element does not work when it’s inside the dashboard (or any WP admin) page. You’d have to use a 3rd party forms plugin like WS Form.
Dynamic data tags won’t be rendered. You’d have to use Code element(s).

Step 1

Create a new Bricks template of the type section with your desired dashboard design/content.

You could alternatively download the template from our example (screenshot above) from the link below and import it at Bricks → Templates.

Dashboard Template Download Link (mirror) [File name: template-dashboard-2024-07-10.json]

If you’d like to use the icons: Edit the template with Bricks and replace the three icons. Make sure SVG uploads are enabled for the admins.

Note that any CSS from theme style(s) won’t work. In such cases, you should apply styling for your elements in the Dashboard template. If you are not sure what this means, just ignore it.

For the “Welcome <logged-in user’s name>” heading text, we have the following in a Code element:

<?php

echo '<h2>Welcome ' . wp_get_current_user()->display_name . '</h2>';

?>

Step 2

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php

// Remove all the meta boxes on the WordPress dashboard page
add_action( 'wp_dashboard_setup', function () {
	// if the current user is not an admin or an editor, abort
	if ( ! current_user_can( 'manage_options' ) && ! current_user_can( 'edit_others_posts' ) ) {
		return;
	}

	// Remove Welcome panel
	remove_action('welcome_panel', 'wp_welcome_panel');

	// Remove the rest of the dashboard widgets
	global $wp_meta_boxes;

	$dashboard_screens = ['dashboard', 'dashboard-network', 'dashboard-user', 'dashboard-site'];

	foreach ( $dashboard_screens as $screen ) {
		if ( isset($wp_meta_boxes[$screen]['normal']['core'] ) ) {
			unset( $wp_meta_boxes[$screen]['normal']['core'] );
		}

		if ( isset( $wp_meta_boxes[$screen]['side']['core'] ) ) {
			unset( $wp_meta_boxes[$screen]['side']['core'] );
		}

		if ( isset($wp_meta_boxes[$screen]['advanced']['core'] ) ) {
			unset( $wp_meta_boxes[$screen]['advanced']['core'] );
		}

		// Removing non-core widgets (possibly added by plugins or themes)
		if ( isset( $wp_meta_boxes[$screen]['normal']['high'] ) ) {
			unset( $wp_meta_boxes[$screen]['normal']['high'] );
		}
		
		if ( isset( $wp_meta_boxes[$screen]['side']['high'] ) ) {
			unset( $wp_meta_boxes[$screen]['side']['high'] );
		}
		
		if ( isset( $wp_meta_boxes[$screen]['advanced']['high'] ) ) {
			unset( $wp_meta_boxes[$screen]['advanced']['high'] );
		}
	}
}, 100 ); // hook at a later priority (100) to ensure the code runs after most plugins

add_action( 'admin_notices', function () {
	// if the current user is not an admin or an editor, abort
	if ( ! current_user_can( 'manage_options' ) && ! current_user_can( 'edit_others_posts' ) ) {
		return;
	}

	global $pagenow;

	if ( $pagenow === 'index.php' ) {
		if ( ! isset ( BricksDatabase::$page_data['preview_or_post_id'] ) ) {
			BricksDatabase::$page_data['preview_or_post_id'] = false;
		}
	
		echo do_shortcode( '[bricks_template id="108"]' );
	}
} );

/**
 * Load custom CSS on the dashboard.
 */
add_action( 'admin_enqueue_scripts', function( $hook ) {
	// if the current user is not an admin or an editor, abort
	if ( ! current_user_can( 'manage_options' ) && ! current_user_can( 'edit_others_posts' ) ) {
		return;
	}

	// Load only on /wp-admin/index.php
	if ( 'index.php' !== $hook ) {
		return;
	}

	// Load Bricks' frontend CSS files OR inline styles (default: inline style)
	if ( BricksDatabase::get_setting( 'cssLoading' ) !== 'file' || bricks_is_builder() ) {
		wp_enqueue_style( 'bricks-frontend', BRICKS_URL_ASSETS . 'css/frontend.min.css', [], filemtime( BRICKS_PATH_ASSETS . 'css/frontend.min.css' ) );
	} else {
		wp_enqueue_style( 'bricks-frontend', BRICKS_URL_ASSETS . 'css/frontend-light.min.css', [], filemtime( BRICKS_PATH_ASSETS . 'css/frontend-light.min.css' ) );
	}

	if ( is_rtl() ) {
		wp_enqueue_style( 'bricks-frontend-rtl', BRICKS_URL_ASSETS . 'css/frontend-rtl.min.css', [], filemtime( BRICKS_PATH_ASSETS . 'css/frontend-rtl.min.css' ) );
	}

	// Add any custom CSS here
	$css = '
		html body {
			background: #f0f0f1;
			color: #3c434a;
			font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
			font-size: 13px;
			line-height: 1.4em;
			min-width: 600px;
		}

		#dashboard-widgets-wrap,
		.welcome-panel .welcome-panel-close,
		.wrap h1 {
			display: none;
		}

		.welcome-panel {
			background-color: transparent;
		}

		.welcome-panel p {
			line-height: 1.7;
		}
	';

	wp_add_inline_style( 'dashboard', $css );
} );

Replace 108 with the ID of your Bricks Dashboard template.

References

https://digwp.com/2014/02/disable-default-dashboard-widgets/

/wp-content/themes/bricks/includes/setup.php

https://make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/