← All posts

Custom WordPress Admin Dashboard with Bricks and WP Admin Cleaner

wp admin cleaner

When a client logs in to their new site, the first thing they see is the default WordPress dashboard. It's cluttered, it looks dated, and it has nothing to do with the site you built for them. In this video we build a custom WordPress admin dashboard in Bricks Builder and set it as the admin home screen with WP Admin Cleaner. Editors get your branding, your contact details, an intro video and a library of tutorials, and you reuse the styles you already made for the front end.

Why replace the default dashboard

Your front end is designed and on brand, but the admin screen your client sees every day isn't. That gap makes the site feel unfinished, and editors don't know where to start or who to call. With a custom dashboard, logging in looks and feels like the rest of the site.

The demo site is a real estate homepage built from the default Bricks library. The goal is to show that same look inside wp-admin.

Build the dashboard page in Bricks

The dashboard is a normal WordPress page, so you build it with the tools you already know.

  1. Go to Pages → Add New, name the page Dashboard and publish it.
  2. Click Edit with Bricks.
  3. If your Bricks templates add a header and footer to every page, make sure this page doesn't get them. You only want the content, because it will sit inside the admin screen.

To match your front end, open an existing page in Bricks (the video uses Home), copy a section you like, and paste it into the Dashboard page. The video reuses the Call To Action section (image on one side, heading, text and button on the other). Pasting it brings the styles with it, so you don't have to style anything again.

Add contact details and an intro video

An editor who gets stuck needs to know how to reach you, and a short getting-started video answers most first-day questions before they turn into support emails.

  1. Change the heading to a welcome message.
  2. In the Rich Text element, add an email line and a phone line.
  3. Link the Contact Us button to your agency website, so clients have your full contact details in one click.
  4. Delete the image and add a Video element in its place. Set Source to YouTube and paste the YouTube video ID. The video uses a Bricks "Getting Started" video as the example.

The dashboard now has a welcome block with an intro video on the left and contact details on the right, styled like the rest of the site.

Set it as the Custom Dashboard

This is the step that swaps out the WordPress admin home screen, and it takes seconds.

  1. Copy the Dashboard page URL (from the address bar or the Copy button after publishing).
  2. Go to Tools → WP Admin Cleaner → Custom Dashboard.
  3. Paste the link and click Save changes.

Now click Dashboard in wp-admin. Instead of the default widgets, you see your Bricks page. Anything you add to that page shows up for your client, so you can keep adding sections. In the video we paste another section from the homepage to show how easily you can add more.

Register a Docs custom post type

A single intro video only covers so much. Editors keep asking how to change the navigation or add a page, and a small documentation library right on the dashboard means they can answer those questions themselves.

  1. Go to Plugins → Add New, search for "cpt" and install and activate Custom Post Type UI.
  2. In CPT UI → Add/Edit Post Types, create a post type called Docs.
  3. Add a few Docs posts. In the video, each one contains an embedded YouTube tutorial and some text, with titles like Manage Bricks settings, Change navigation, Add new page using Bricks Library, Change fonts using Font Hero and Write or edit posts.

Build the tutorials query loop

You don't want to edit the dashboard every time you write a new tutorial. A query loop lists every Docs post automatically, so a new tutorial shows up on the dashboard as soon as you publish it.

Back in the Dashboard page in Bricks:

  1. Add a Container (named Contain Docs in the video). Inside it, add a Div, and inside the Div a Heading.
  2. Select the Div and turn on Use query loop. Set Type to Posts and Post type to Docs.
  3. Style the Div as a card: give it a background, set Width to 100%, and add a border radius of 10px under Border. Under Layout, set overflow to hidden.
  4. On the Contain Docs container, set Display to grid and Gap to 1rem.
  5. Give the Heading 10px padding on all sides so the cards are easier to click.
  6. Set the Heading text to the dynamic data {post_title}.
  7. Under Link to, choose Dynamic Data → {post_url} and turn on Open in new tab.
  8. Above the loop, add a Heading such as Editor Tutorials with some top margin (32px in the video).

Preview the admin dashboard and you get a list of cards, one per Docs post, each opening the tutorial in a new tab.

Create the Docs single template

Without a template, clicking a tutorial opens a page with no layout. A single template makes every Docs post render the same way, and you set it up once.

  1. Go to Bricks → Templates → Add New and create a template called Docs.
  2. Edit it with Bricks and add a Container with a Post Title and a Post Content element inside.
  3. In Bricks → Settings, enable the option shown in the video and click Save changes.
  4. Back in the template, open Template settings → Conditions, add a condition, set it to Post type and choose Docs.
  5. Add some top and bottom margin to the container (3rem in the video).

Reload a Docs post and it shows the title, the embedded video and the text in your site's design.

Final result: full editor dashboard

When the client or editor logs in, they see:

  • A welcome block with a getting-started video
  • Your email, phone and a Contact Us link
  • An Editor Tutorials list that opens each guide in a new tab

They can watch a tutorial, close the tab, open the next one, and contact you if they're still stuck. It all uses the same styling as the front end, so the site looks the same whether they're in wp-admin or on the live pages.

Who is this for

  • Agencies and freelancers building client sites with Bricks Builder who want the admin area to look like part of the site they delivered.
  • Site builders with non-technical editors who spend time answering the same "how do I…" questions and want a self-serve tutorial library in the dashboard.
  • Anyone who dislikes the default WordPress dashboard and wants to replace it with a page they design visually, without writing code.

FAQ

How do I replace the WordPress admin dashboard with a custom page? Build the page you want (here with Bricks Builder), copy its URL, then go to Tools → WP Admin Cleaner → Custom Dashboard, paste the link and save. The Dashboard screen in wp-admin will now show your page.

Should the dashboard page have a header and footer? No. If your Bricks templates add a header and footer to every page, set things up so the dashboard page only shows its content. It's displayed inside wp-admin, which already has its own navigation.

How do I add documentation for editors inside the WordPress dashboard? Register a Docs custom post type (the video uses Custom Post Type UI), write one post per tutorial, then add a Bricks query loop to the dashboard page with Post type set to Docs. Each card links to its post with {post_url} and opens in a new tab.

Why do my Docs posts look unstyled when I open them? They need a single template. Create a Bricks template with Post Title and Post Content elements and set its condition to Post type → Docs.

Can I reuse my front-end design on the admin dashboard? Yes. Copy sections from an existing Bricks page and paste them into the dashboard page. Their styles come with them, so the admin screen matches the rest of the site.

Get WP Admin Cleaner → dplugins.com

Related posts