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

Related Tutorials..

Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Categories:
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
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:
How to Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Categories:
Tags: