How to Create Custom WordPress Admin Dashboard for your customers?

Let’s be clear: WordPress default admin dashboard is one big mess. Therefore, in this tutorial I’m going to show you how to create custom WordPress admin dashboard which contains shortcuts and/or tutorial videos for your customers. Take a look at the screenshot below because (click to enlarge) this is what we’re going to build today. Oh, and best of all – we’re not going to use any page builders or extra plugins here.

Also, take a look at the video because it’ll give you a better overview about what and how you’re going to do.

How to Create Custom WordPress Admin Dashboard

Video: How to Create Custom WordPress Admin Dashboard

How to Create Custom WordPress Admin Dashboard

Step 1: Remove default WordPress dashboard widgets

You have two opitons here:

  1. Open Screen options and remove all widgets manually
  2. Remove all the default widgets with code snippet

I’m going to use the second option. Therefore, paste this code here below inside your child theme’s functions.php file or better yet – use Code Snippets plugin for this and all other snippets in this tutorial.

function wpsh_remove_dashboard_widgets() {

	remove_meta_box( 'dashboard_primary','dashboard','side' ); // WordPress.com Blog
	remove_meta_box( 'dashboard_plugins','dashboard','normal' ); // Plugins
	remove_meta_box( 'dashboard_right_now','dashboard', 'normal' ); // Right Now
	remove_action( 'welcome_panel','wp_welcome_panel' ); // Welcome Panel
	remove_action( 'try_gutenberg_panel', 'wp_try_gutenberg_panel'); // Try Gutenberg
	remove_meta_box('dashboard_quick_press','dashboard','side'); // Quick Press widget
	remove_meta_box('dashboard_recent_drafts','dashboard','side'); // Recent Drafts
	remove_meta_box('dashboard_secondary','dashboard','side'); // Other WordPress News
	remove_meta_box('dashboard_incoming_links','dashboard','normal'); //Incoming Links
	remove_meta_box('rg_forms_dashboard','dashboard','normal'); // Gravity Forms
	remove_meta_box('dashboard_recent_comments','dashboard','normal'); // Recent Comments
	remove_meta_box('icl_dashboard_widget','dashboard','normal'); // Multi Language Plugin
	remove_meta_box('dashboard_activity','dashboard', 'normal'); // Activity
}
add_action( 'wp_dashboard_setup', 'wpsh_remove_dashboard_widgets' );

// Remove Elementor Overview widget
function disable_elementor_dashboard_overview_widget() {
	remove_meta_box( 'e-dashboard-overview', 'dashboard', 'normal');
}
add_action('wp_dashboard_setup', 'disable_elementor_dashboard_overview_widget', 40);

// remove WooCommerce Dashboard Status widgets
function remove_dashboard_widgets(){
remove_meta_box( 'woocommerce_dashboard_status', 'dashboard', 'normal');    
}
add_action('wp_user_dashboard_setup', 'remove_dashboard_widgets', 20);
add_action('wp_dashboard_setup', 'remove_dashboard_widgets', 20);

// Remove Site Health from the Dashboard
add_action(
    'wp_dashboard_setup',
    function () {
        global $wp_meta_boxes;
        unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_site_health'] );
    }
 );

Step 2: Create one-column admin dashboard

Now, by default WordPress admin dashboard has four column layout but we’re going to make it to show up as one-column. Therefore, use this snippet here below.

// One column dashboard
function single_column( $columns ) {
    $columns['dashboard'] = 1;
    return $columns;
}
add_filter( 'screen_layout_columns', 'single_column' );
 
function one_column_dashboard(){
	return 1;
}
add_filter( 'get_user_option_screen_layout_dashboard', 'one_column_dashboard' );

Step 3: Create custom WordPress Admin Dashboard items

Next, we’re goint to create a custom WordPress admin dashboard which contains foru-column shortcuts to your main acitvities and two-column layout for tutorial videos. And last – there are contact details and contact form at the bottom.

Just take a look at the comments inside the code and you’ll figure out what is what. Couople of things to point out.

If you want to chage links then change these parts in the code (see the highlighted parts). <a href=”/wp-admin/edit.php?post_type=page” class=”pages”>Edit pages</a>

If you want to change the icon than change class in class=”pages” and customize it accordingly. See the styling chapture below.

// Create custom WordPress admin dashboard items

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
wp_add_dashboard_widget('custom_help_widget', 'DASHBOARD', 'custom_dashboard_help');
}
function custom_dashboard_help() {
	// ROW WITH HEADING	
	echo '
	<div class="default-container">
	<h2>YOUR MAIN SHORTCUTS</h2>
	<hr>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make </p>
		</div>';
	
// COLUMNS WITH SHORTCUTS	
	echo '<div class="icon-container"> 
	
  	<div class="column">
	<a href="/wp-admin/edit.php?post_type=page" class="pages">Edit pages</a>
	</div>
  	<div class="column "><a href="/wp-admin/post-new.php?post_type=page" class="add">Add new page</a></div>
	  <div class="column"><a href="/wp-admin/edit.php" class="edit-posts">Edit posts</a></div>
	<div class="column"><a href="/wp-admin/post-new.php" class="add">Add post</a></div>
	<div class<div class="column"><a href="/wp-admin/edit.php?post_type=page" class="edit-products">Edit products</a></div>
  	<div class="column"><a href="/wp-admin/post-new.php?post_type=page" class="add">Add new product</a></div>
	<div class="column"><a href="/wp-admin/edit.php?post_type=shop_order" class="edit-orders">Orders</a></div>
  	<div class="column"><a href="/wp-admin/nav-menus.php" class="edit-menu">Navigation</a></div>
  </div>';
  
	// ROW WITH HEADING	
	echo '<div class="default-container"><h2>VIDEO TUTORIALS</h2><hr></div>';
	// COLUMNS WITH VIDEOS	
	echo '<div class="video-container">
  
  	<div class="video-column">
	<iframe width="100%" height="315" src="https://www.youtube.com/embed/TruS3HKb6HY?controls=0" title="Woocomemrce pricing rules" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Woocommerce pricing rules
	</div>
  
	<div class="video-column"><iframe width="100%" height="315" src="https://www.youtube.com/embed/ewbmDafQnIc?controls=0"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Orders CSV export</div>
	
	<div class="video-column"><iframe width="100%" height="315" src="https://www.youtube.com/embed/03dJacd856s?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Block visibility options</div>
	  
	<div class="video-column"><iframe width="100%" height="315" src="https://www.youtube.com/embed/2o60hLc-fVg?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Reusable blocks management</div>

</div>';
  
	// COLUMN WITH CONTACT FORM	
	echo '<div class="default-container">
	<h2>CONTACT US</h2><hr>
	<p>Phone: +1 2345 6789 | email@email.com</p>
		</div>';
	echo do_shortcode( '<div class="default-container">
	[fluentform id="1"] 
	</div>');
	
// Don’rtemove this one here below	
}

Step 4: Add styles to your custom WordPress admin dashboard

If you dont’t add styles to your custom WordPress admin dashboard then it will look even more messy than default dashboard. Therefore, add this code to your Code Snippets.

Once again, I added comments for you inside the code so it will be easy to figure out what is what. For example, if you added a link to your orders, your link has class=”orders” and you want to change the icon, then see this part in the CSS code: .orders:before

I’m using built in Dashicons which you can find here. Also, I’m using Ubuntu font but you can change it by youself. See the video above to see how.

// Add custom dashboard with styles

add_action('admin_head', 'custom_dashboard');
function custom_dashboard() {

  echo '<style>
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap");

/* Make dashboard full width */
#wpbody-content #dashboard-widgets #postbox-container-1 {
    width: 100%;
}

/* Remove default dashboard column border */
.postbox {
border: none;
}

/* Customize columns */
.icon-container p { /* regular text */
	font-size: 16px;
	text-align: center;
}  
hr { /* divider */
  height: 3px;
  background: #ebebeb;
  border: none;
  outline: none;
  width:20%;
  margin:1em auto;
  position: relative;
}
iframe {
margin-bottom: 1em;
}
.icon-container { /* customize icon shortcut columns. Add or remove 1fr for adding or removing columns */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; / * four columns */
  padding: 20px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}
.video-container {  /* customize video columns */
  display: grid;
  grid-template-columns: 1fr 1fr ; /*two columns*/
  padding: 20px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}
.default-container {  /* customize heading and contact form containers */
  display: grid;
  grid-template-columns: 1fr ; /* one column */
  padding: 20px 20px 0px 20px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}
.column, .video-column {
 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

@media (max-width: 520px) { /* for screens up to 520px. Modifies all container types */
  .icon-container, .video-container, .default-container {
    grid-template-columns: none;
	padding: 0px;
  }
}
@media (min-width: 521px) and (max-width: 767px) { /* for screens between 521 and 775px. Modifies only icon shortcut columns */
  .icon-container {
    grid-template-columns: 1fr 1fr;
	padding: 0px;
  }
}
@media (min-width: 768px) and (max-width: 990px) { /* for screens between 786 and 990px. Modifies only icon shortcut columns */
  .icon-container {
    grid-template-columns: 1fr 1fr 1fr;
	padding: 0px;
  }
}
    .column, .video-column { /* customize icon shortcut columns */
      background: #fff; 
	  color: #000;
	  padding: 30px; 
	  transition: background-color 0.5s ease;
	  text-transform: uppercase;
	  font-family: "Ubuntu", sans-serif;
	  font-size: 16px;
	  text-align: center;
	  text-decoration: none;
	  margin: 3%;
    } 
	.column:hover, .video-column:hover {  /* customize icon shortcut and video column hover style */
	background: #f9f9f9;
	}
	  .video-column { /* customize video columns */
	  padding: 10px 10px 20px 10px; 
    } 
		.column a, .video-column a { /* link colors */
	color: #000 !important;
	text-decoration: none;
	}
	
	/* SHORTCUT ICON CUSROMIZATION. It uses Dashicons, see here https://developer.wordpress.org/resource/dashicons/#menu-alt */
	
	.edit-pages:before { /* Edit pages */
	font-family: "dashicons"; 
	content: "\f123";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	.edit-posts:before { /* Edit posts */
	font-family: "dashicons"; 
	content: "\f109";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	.add:before { /* Add icon */
	font-family: "dashicons"; 
	content: "\f132";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	.edit-menu:before { /* Navigation icon */
	font-family: "dashicons"; 
	content: "\f329";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	.edit-orders:before { /* Orders icon */
	font-family: "dashicons"; 
	content: "\f163";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	.edit-products:before { /* Products icon */
	font-family: "dashicons"; 
	content: "\f174";
	font-size: 34px;
	margin-right: 7px;
	display: block;
	color: #2681B0;
	}
	}
  </style>';
}

Final words: here is your custom WordPress admin dashboard

So, if you did everything correctly then you should have a totally different WordPress dashboard. If you have any uestions or comments then open the video in Youtube and ask your questions there.

Useful WordPress tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72