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..

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
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Categories:
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories:
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Categories:
Tags:
Create a App-Like Navigation in Bricks

Create a App-Like Navigation in Bricks

I've promised a few folks in the Facebook group to create a tutorial on how to create an app-like navigation in Bricks like in the…
Categories:
Pro
Bricks Query Loop Cards with Hover Image

Bricks Query Loop Cards with Hover Image

How images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.
Categories:
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Categories: