royjemee

Royjemee

March 27, 2022

13 Min read

How to Create WordPress Custom User Dashboard Like a Pro?

A WordPress Custom User Dashboard provides users with an immersive, streamlined, and top-notch experience to help them manage a website as per their desire. It allows users to improve functionality, modify the design scheme, and configure the posts, pages, media, and other key elements of a website as they like.

A well-customized Dashboard involves a collection of standard widgets, a secure login page, an organized menu, and so on. How do you create a WordPress Custom User Dashboard efficiently and quickly? To be honest, it’s not a difficult task at all.

But it’s crucial to adhere to some steps to transform your site’s Dashboard. Lucky you, as this post is crafted to guide you toward the right pathways. Let’s delve deeper and explore the substantive information.

Creating WordPress Custom User Dashboard

Your WordPress Dashboard might be cluttered with a myriad of useless widgets, menu items, and other elements. It may not match your standards and brand identity. So it’s your onus to customize the admin area to make it transparent, unique, and impressive.

It’s not a tedious task at all if you can properly assess your website’s requirements. You also need to follow some constructive steps based on the need to transform your Dashboard. However, here is the step-by-step guide you can abide by to create a WordPress Custom User Dashboard.

Install the Right Plugins

It’s undeniable that you can’t carry out a successful customization process without the help of some effective plugins. You surely need to accumulate a few handy plugins that fulfill the overall purposes of customization by enhancing functionality, look, and efficiency.

In general, you can add Admin Color Schemes, Admin Columns, Admin Menu Editor, User Role Editor, and many other plugins separately, as all of them have distinctive uses.

WP Adminify

WP Adminify is a WordPress Dashboard Customizer plugin designed to simplify and enhance the user experience for website administrators. With this plugin, users can personalize the WordPress admin Dashboard to suit their specific needs and preferences.

WordPress Dashboard Customizer Plugin

Brand Customization: The plugin allows users to add their own branding elements, such as logos and colors, to the WordPress admin area, giving it a unique and professional look.

Admin Menu Editor: Modify your Admin Menu text, URL, Color, Icon, Add separator, Add Custom Menu, permissions, and many more. You will fall in love with the drag and drop menu organize system and modern UI.

Hide or Display Dashboard Widgets: Admins can choose to hide or display specific dashboard widgets based on their relevance, reducing clutter and improving workflow efficiency.

Color Schemes: WP Adminify offers various color schemes and styles, enabling users to match the WordPress Dashboard's look and feel with their website's branding or personal taste.

Admin Column Editor: Add or remove the existing admin column from your Dashboard. It supports any post type and taxonomy. Also, with the support of ACF, Pods Framework, and Metabox - you can add dynamic data from these plugins.

Change Dashboard Login URL: It's easy to change your WordPress login URL and redirect all visitors who are trying to log in to your website Dashboard by the default /wp-admin/ login url.

Restrict User Access: WP Adminify comes with Restrict User access features for the maximum options it provides. For example, you can create a Custom Dashboard Widget for only a specific user or User role.

More Features: It's impossible to mention all the features in this blog post. Check this WP Adminify Feature page and see how many features this 3MB plugin offers.

Admin Menu Editor

Admin Menu Editor plugin

The Admin Menu Editor provides you with the ability to manually modify the content of your  WordPress Dashboard menu. This includes the capacity to reorganize menu items, control their visibility, and perform various other customization actions.

User Role Editor

User Role Editor Plugin

The User Role Editor WordPress plugin simplifies role and capability management. Add or modify roles with ease, adjust capabilities, and fine-tune user permissions effortlessly. Create new roles from scratch or duplicate existing ones. Remove unused roles and redefine default assignments. Customize user-specific capabilities and handle multiple roles per user. Plus, easily add or remove capabilities left behind by uninstalled plugins.

WPS Hide Login

WPS Hide Login is a lightweight WordPress plugin that enables a secure URL change for the login form page, enhancing website security. It doesn't alter core files or rewrite rules, only intercepting page requests. Deactivation reverts the site to its original state.

Add or Remove Dashboard Widgets

By default your Dashboard comes with some pre-loaded widgets. You need to customize those widgets as per your needs and choices to improve productivity, usability, and performance. In simple terms, WordPress allows you to add widgets that are indispensable for your Dashboard and remove widgets that you actually don’t need.

It's easy to remove the Dashboard widget by using the Screen Options. Just uncheck your Widgets name and it will be removed from your WordPress Dashboard. 

Hide WordPress Dashboard Widget using Screen options

To Develop a new Custom Widget you can read this Dashboard widgets API docs. You maybe not familiar with coding, here I can refer you to this Custom Dashboard Widget module by WP Adminify. Take a look at the following screenshot, I've created the custom Dashboard Widget using WP Adminify Plugin.

Creating Custom Dashboard Widgets

To add a custom Dashboard widget you can create a simple plugin yourself too. The process is very simple, just navigate to your Plugin folder then create a folder like "My Dashboard Widget" then inside this folder create a PHP file and paste the following code in the PHP file. 

<?php /* Plugin Name: Custom Dashboard Widget Description: Adds a custom dashboard widget with a greeting message. Version: 1.0 Author: Your Name */ function custom_dashboard_widget() { echo '<h2>Hello, World!</h2>'; echo '<p>Welcome to your custom dashboard widget. You can customize this widget to display any information or functionality you desire.</p>'; } function add_custom_dashboard_widget() { wp_add_dashboard_widget('custom_dashboard_widget', 'Custom Widget Title', 'custom_dashboard_widget'); } add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

Code Breakdown - 

The custom_dashboard_widget function contains the content you want to display within the custom dashboard widget.

In this example, I'm showing a simple "Hello, World!" message along with a welcoming paragraph. You can customize this function to display any content or functionality you desire.

add_custom_dashboard_widget function registers the dashboard widget. It uses the wp_add_dashboard_widget function with three parameters: the widget ID (custom_dashboard_widget), the widget title (Custom Widget Title), and the callback function (custom_dashboard_widget) that defines the widget's content.

We hook the add_custom_dashboard_widget function to the wp_dashboard_setup action to ensure that our custom dashboard widget is added to the WordPress dashboard.

Customize the Dashboard Menu

The default Dashboard menu may not be applicable to you at all times. Therefore, you need to customize the menu in a way that brings positive results for you. Once you personalize the menu, you can add, hide, or modify all the dashboard items. A customized menu can also help you limit the users access to the admin area.

To perform this major part of customization, you can get help from a top-notch plugin. I love to recommend WP Adminify, as it comes with a free module called Admin Menu Editor that allows you to get control over the Dashboard.

Once you install and activate a menu editor plugin in the typical way, you can start personalizing it by changing the titles, URLs, icons, and other elements. You can also organize the menu items as you like using a drag-and-drop mechanism. Moreover, you can efficiently change menu permissions and roles and move menu items to the submenu with ease.

Admin Menu Customizer by WP Adminify

Change Admin Menu text & Icon using Code

To change the text and icon of WordPress admin menu items you can use the following code to your themes "functions.php" file. I recommend you create a child theme so that you never lose your data while the theme is updated.

function custom_admin_menu_changes() { global $menu; // Get the admin menu global variable // Change the text and icon for an existing menu item (e.g., Posts) foreach ($menu as $key => $item) { if ($item[0] == 'Posts') { $menu[$key][0] = 'News'; // Change the menu text $menu[$key][6] = 'dashicons-format-aside'; // Change the menu icon break; } } } add_action('admin_menu', 'custom_admin_menu_changes');

Using the code you can change your "Posts" menu to "News" and 'dashicons-format-aside' with the menu item you want to change, the new text you want, and the new icon class.

Customize the Login Page

Like any other aspect of your Dashboard, you can personalize the login page to have maximum security, and user experience. You need to customize the page in a modern, aesthetic way so that it captures the user's attention at first sight. It can also help you include an extra layer of security and ensure smart branding on your website.

WP Adminify Login Customizer Templates

You can start by changing the color schemes and button appearance, then add a new background image and a custom logo. After that, you need to intuitively modify the login and contact forms. Finally, try to add a custom stylesheet if possible to make the login page more vibrant and captivating. You can use any login customizer plugin or WP Adminify. But if you love to personalize your Login page with code, then read the following steps. 

Change login page Logo

There is a very simple solution to change the WordPress login page logo using your active Themes function.php file. Make sure to upload your logo to your website media library first. Then copy and paste the following code inside your function.php file properly. 

function custom_login_logo() { echo '<style type="text/css">#login h1 a, .login h1 a { background-image: url(' . get_stylesheet_directory_uri() . '/your-custom-logo.png); width: 300px; /* Set the desired width */ height: 80px; /* Set the desired height */ background-size: contain; /* You can use 'cover' or 'contain' based on your logo size */ }</style>'; } add_action('login_enqueue_scripts', 'custom_login_logo');

Do you see /your-custom-logo.png inside the code? Now just copy the logo URL and replace this /your-custom-logo.png demo image path with your actual logo URL. Now reload and check your Login page. 

Change login Page background

After changing the logo, it's time to change the Login page background color or add an image to your background. Follow the similar steps as you did in the logo. Just copy the following code and paste it inside your function.php file.

function custom_login_background() { echo '<style type="text/css">body.login { background: #333; /* Change to the desired background color */ } body.login::before { content: ""; background-image: url(' . get_stylesheet_directory_uri() . '/your-custom-background.jpg); /* Replace with your background image */ background-size: cover; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }</style>'; } add_action('login_enqueue_scripts', 'custom_login_background');

Again, replace 'your-custom-background.jpg' with the URL of your custom background image and adjust the background color or other styles as needed.

Add Custom Admin Page (optional)

It's optional, if you think it's necessary to present some necessary information to your users - then you can create a custom Admin Page. For example, you can create a "To Do List" page for Editors in your WordPress Dashboard. You can create a simple plugin for custom Admin Page by following this Create Custom Admin Page tutorial.

But if you don't want to write code yourself, then feel free to use WP Adminify plugin and it offers an awesome Custom Admin Page feature. It supports any page builder available in the market. 

Admin Page module by WP Adminify

Add new Column in WordPress Page or Post

Adding an admin column in WordPress pages and posts is a practical way to smooth your content management. It enables you to display information right on the Dashboard, making it more accessible and efficient for site administrators and editors.

Whether you want to showcase featured images, Advanced custom fields, or any other data, the process is straightforward. You can use any other WordPress Admin columns plugin for can check the WP Adminify Admin Columns Module too. 

If you are using WP Adminify plugin, then just enable the "Admin Columns" module then navigate to the dedicated options panel. You can add, remove, define width, drag and drop sorting, and more with this plugin. 

Woocommerce product Custom admin column customize

Now let's dive into the process of adding Admin Columns using your function.php file. You'll need to add custom functions to your theme's functions.php file. 

How to add Featured Image Column in Page & Post?

I'm going to show you how easy it is to add a "Featured Image" column to your WordPress Dashboard page or post. It will help your editor to check the featured image of each page without navigating to the page or post editor interface. 

Just copy the following code and paste it inside your Active Themes function.php file. (Recommend to use Child theme)

// Add Featured Image Column Header function add_featured_image_column_header($columns) { $columns['featured_image'] = 'Featured Image'; return $columns; } add_filter('manage_posts_columns', 'add_featured_image_column_header'); add_filter('manage_pages_columns', 'add_featured_image_column_header'); // Add Featured Image Column Content function add_featured_image_column_content($column_name, $post_id) { if ($column_name == 'featured_image') { // Get the featured image URL $featured_image = get_the_post_thumbnail_url($post_id, 'thumbnail'); // Change 'thumbnail' to your preferred image size. // Display the featured image as a thumbnail if ($featured_image) { echo '<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="' . esc_url($featured_image) . '" alt="Featured Image" style="max-width: 60px; height: auto;" />'; } else { echo 'N/A'; } } } add_action('manage_posts_custom_column', 'add_featured_image_column_content', 10, 2); add_action('manage_pages_custom_column', 'add_featured_image_column_content', 10, 2);

Let me explain the code now:

  1. add_featured_image_column_header function adds a new column header called "Featured Image" to both the post and page columns.
  2. add_featured_image_column_content function displays the featured image as a thumbnail in the "Featured Image" column. If there's no featured image, it displays "N/A."
  3. The code uses the manage_posts_columns and manage_pages_columns filters to add the new column header.
  4. The code uses the manage_posts_custom_column and manage_pages_custom_column actions to add the content to the custom column.

After implementing the code, navigate to the page or post to check your featured image. You will see a "Featured Image" column like the following screenshot having each featured image for different post.

Featured image admin column using code

Suggestions: You can add any shortcode, or functions inside the Admin Column. It's impossible to write all possible admin columns for your Dashboard. Check the Admin Columns module and you will get a bunch of custom columns by default.

Change Login Page URL (Enhance Security)

This has nothing to do with your WordPress Main Dashboard customization, but it can definitely enhance the security of your WordPress Dashboard. Now-a-days anyone knows the WordPress default login URL. To prevent unwanted login failure and brute force attack, you must change your default WordPress login URL. 

The process is very simple for WP Adminify plugin users. Just navigate to WP Adminify options panel > Modules> Make sure to check if the "URL Redirections" module is enabled or not. If it's enabled then navigate to "URL Redirection" options. You will see something like the following screenshot. 

Change WordPress login page URL

Now just input your "New Login URL" and also you can input any slag in "Redirect Admin" option too. That's all about changing your WordPress default login URL. 

function custom_login_url_redirect() { // Check if the current request is for the login page if (strpos($_SERVER['REQUEST_URI'], '/wp-login.php') !== false) { // Redirect to the custom login URL wp_redirect('https://example.com/custom-login'); exit; } } add_action('init', 'custom_login_url_redirect');

If you are not a WP Adminify user, there is a alternative solution for you too. Just copy and paste the following code inside your function.php file. Make sure to replace "https://example.com/custom-login" with your actual custom login URL too.

WordPress Dashboard Customization Tips

Customizing the WordPress user dashboard is all about playing around with the design layout, menu structure, navigation, user area, and so on. You’re bound to tinker with both major and minor stuff to come up with a pixel-perfect custom dashboard. To make your customization process more subtle, elegant, and impeccable, try to comply with the following practices:

Keeping the Dashboard simple & clutter-free

Keep in mind that simplicity can bring you more than you expect. Always try to keep the Dashboard simple, as over-optimization and overpitch design can hinder your data visualization. Make it intuitive to navigate and easy to access so that a non-technical user can also deal with it.

Always maintain a clutter-free Dashboard to prioritize the user’s attention. There's no chance of compromising the clean design to ensure optimal accuracy and clarity when you’re customizing the dashboard.

Consistency in Branding and Design

Consistency in Branding and Design elements is a core criterion that you need to practice to customize a dashboard perfectly. Always try to create a user-centered design paradigm and keep the visual elements unified.

Ensure a coherent design in the header, footer, menubar, navigation bar, and sidebar of the dashboard. Make a blend of impactful color, typography, and logo to illustrate and highlight your branding.

Prioritizing the most Important Information

As the dashboard is the center controller of a website, you need to determine what is crucial to encompass and display on it. Based on the priority level, you have to provide the information while you’re customizing it. To say it straight, you need to define what widgets should appear on top or at the bottom of the page.

Besides, it’s important to showcase the corresponding data and information in the same column or section. To ensure quick actions, always introduce more semantic placement and make the top-level admin menus easily recognizable.

Regularly Updating the Dashboard

To avoid stagnancy and show the latest data and trends on your dashboard, it’s imperative to update it on a regular basis. In addition, you need to integrate updated features and fix arising bugs constantly.

Never forget to make the dashboard compatible with the latest versions of plugins and themes. Try to schedule regular data updates to remove inaccurate and obsolete information from the dashboard.

Benefits of WordPress Custom User Dashboard

A customized WordPress Admin Dashboard offers a bunch of outstanding benefits such as improved user experience, enhanced security, excellent data management, maximized productivity, and so on. Once you properly tweak your Dashboard, the chance of meeting all your requirements and reaching your projected goals becomes easier.

However, it’s important to break down the major benefits of a personalized user Dashboard to stimulate and help you grow your business online. Here are some of the standout ones:

Improved User Experience

Once you customize the Dashboard accordingly, you will have a supreme user experience. That’s because a properly customized Dashbaord is always easier to use, more valuable, and more effective than a typical one. It includes organized data details using custom fields and widgets to help users search, modify, and navigate them more easily.

Increased Productivity

A polished and well-structured WordPress Dashboard can increase productivity to a great extent. Once the Dashboard becomes easy to navigate, you can quickly and effectively perform your desired actions without encountering any setbacks. Even a new user can deal with the page in an uninterrupted way without asking for your help or looking up tutorials.

Enhanced Branding

A dashboard equipped with unique branding and identity can optimally gain users’ satisfaction and trust. That’s why it’s essential to add your own branding to it to make sure your audience is hooked. By personalizing your dashboard, you can easily add your own logo, welcome message, tagline, color palettes, graphics, and other standout branding elements that speak for your website.

Better Data Management

A dashboard can be referred to as a standard when it organizes and presents data and information in a concise, clear, and legible manner. But no dashboards are standard by default; you need to personalize them to transform them by elevating the overall interface. Once you customize the dashboard by including key data management tools, it becomes easy to handle.

Mistakes to avoid While Customization

It’s no wonder that some common mistakes can disrupt the overall operation of the custom dashboard sooner or later. Hence, in the course of customizing your WordPress dashboard, you must be keen on avoiding those mistakes. Here are some of the standout ones:

Ignoring Security Concerns

A website can be susceptible to security issues. Malicious attacks can hinder its growth. So it’s crucial for you to keep a sharp eye on security concerns. You shouldn’t be neglectful in keeping the plugins updated, using strong passwords, and using security plugins.

To strengthen the security, you need to enable two-factor authentication and make regular backups that can reduce the risks of security. But if you don’t care for the safety of your data and information, you will surely compensate for it in the future.

Overcomplicating the Dashboard

It’s inevitable to customize the dashboard with the necessary items and data. But sometimes, you may tend to incorporate excessive stuff in the admin area that can make it too complicated to interact with.

The overcomplicated design and layout may interrupt functionality and responsiveness as well. In particular, it may seem cumbersome to navigate through the options over time. Hence, you need to keep it as simple as possible to unlock the full potential of WordPress.

Ignoring user feedback

You can take users’ feedback as a blessing. Accept users' suggestions and optimize the admin area accordingly. Always listen to what others say about renovating and revamping the dashboard, as your first priority is user convenience.

But if you ignore users' feedback, it can have negative outcomes. Try to keep the dashboard clean and lightweight. Manage a section where users can express their views on your admin page and service. These are truly beneficial.

A dashboard is the central hub of a website, as the entire operation is controlled within it. However, the controlling process becomes more smooth, effective, and subtle when the dashboard is properly customized. A personalized dashboard helps to enhance the user experience, productivity, performance, and smooth management.

And it’s straightforward to personalize the dashboard. All you need to do to build a WordPress custom user dashboard is install the right theme and plugins first. Then just customize widgets, menus, and the login page as per your requirements. Once you customize it properly, you will find a streamlined user experience that is inevitable for quick progression.

Get notified about Updates & Offers

Subscribe to get Updates & Offers

Table of Contents

    Coupons
    icon

    Navigate on your Dashboard faster with WP Spotlight!

    Try It Now