Opens in a new tab
24th Feb '23
/
20 comments

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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Codrops Dynamic Shape Overlay in Bricks

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks. We shall display a WordPress menu in the overlay after an…
Categories:
Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories:
Pro
Sticky Scrolling in Bricks Builder

Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024 This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section…
Categories:
Tags:
Plain HTML pages in Bricks

Plain HTML pages in Bricks

How to output only raw HTML on the page with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.
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
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories:
Pro
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Categories:
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Categories:
Tags: