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

  1. 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.
  2. 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.
  3. 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.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 526 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Pro
Stacking Post Cards in Bricks

Stacking Post Cards in Bricks

How we can stack posts in a query loop so they stick on top of the previous one when scrolling.
Categories:
Tags:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Categories:
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Categories:
Tags:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Categories:
Tags: