Web Development WordPress

Customize a WordPress Dashboard Without Plugins

In this post, you will learn how to customize your WordPress dashboard manually, thus avoiding the plugin hell issues.

thumbnail

Editor’s Note

WordPress is a popular CMS that has been around for years. It has tons of features for each and every purpose. If no feature covers certain functionality, users are sure to find a fill-the-gap plugin among thousands of available solutions

As useful as plugins are, though, they can cause what has been dubbed as the plugin hell. Too many add-ons may conflict with one another, disrupting the normal operation of the site. A vendor may also decide to discontinue supporting their plugin, thus creating security threats

Valerie Muradian believes that users shouldn’t rely on plugins alone. In many cases, they can benefit by learning about the native WordPress capabilities and implementing them with their own hands. An example that she describes in her post below is manually customizing the WordPress dashboard. Read it. It will be interesting. 


We all love WordPress for its flexibility and possibilities for customization. No matter how many new, shiny website builders appear on the market (and it feels like we get a new one every week or so), a lot of people prefer to stick with WordPress. It’s reliable, it’s been around for years, and if you need to add a new feature to your website — there is always a plugin for that!

Plugins or Code?

A lot of my clients love WordPress and run multiple websites using this platform. What they notice over the years, though, is that “too many plugins” is a real thing. When there are plugins for anything, even tiny things that can be achieved with one line of code, they don’t hesitate to install it. Why not? Some of them are free, they are easy to use, most of them get regular updates and quality support. But then, the website gradually becomes slower and the menu panel gets crowded with links, buttons, annoying requests to rate this plugin and leave a 5-star review. The updates also pile up and sometimes, one update can ruin your day by breaking everything.

Don’t get me wrong — plugins are great but sometimes it’s better to modify the code a little bit instead of adding another plugin to the pile. Some things can be achieved by copying and pasting a piece of code or by just learning more about the native features of WordPress. A good example would be a WordPress dashboard. Yes, that boring gray page a lot of people don’t even use.

Below, I’ll share a few code snippets that can be easily added to your function.php page (located in Appearance > Theme Editor). If you are a confident WP user, chances are you edited that file before. But even if it’s your first time, just be careful and always do a full website backup before adding anything to that file.

1. Add a Custom Widget with Buttons and Links

Widgets are those small boxes you see on any standard WordPress dashboard. Basically, they are just boxes with information that can be moved around, opened, or closed. The most popular ones you probably saw a lot are standard widgets from WordPress — At a Glance, Activity, WordPress News. Let’s add another block in this area — the widget you will actually use.
Almost all website owners have some important links, information, or things they want to be reminded about. This can be achieved with a few lines of code:


//add a custom dashboard widget for admins
add_action('wp_dashboard_setup', 'my_custom_dashboard_widget');
  
function my_custom_dashboard_widget() {
    global $wp_meta_boxes;
    wp_add_dashboard_widget('custom_help_widget', 'Admin Links', 'custom_dashboard_help');
}
 
function custom_dashboard_help() {
    echo 'My text. My link <a href="https://mywebsite.com" target="_blank">here</a>.
    <button type="button">My button</button></a>.';
}


Copy the whole block and change the content in the custom_dashboard_help() function after the echo. If you want your link to open on a new page, leave the target=”_blank” next to the link. To customize the widget even further, you’ll need to know the basics of HTML and CSS that you can easily find online.

Getting errors? Double-check your closing and opening quotes and tags.

2. Add a Custom Settings Page

Noe, when we can add links and buttons, it’s time to create a settings page with your custom content. It can be anything from a simple how-to guide or a text reminder to global fields and buttons that perform some actions.

In this example, we have a new page settings page with a globally defined field that can be used anywhere on the website, a button to update the value in that field, and another button that runs a clear_shows() function. This is a very basic example but it’s a good start if you need more than a standard WP settings page can provide.

The code below will create a new page with a new menu item called Global Custom Fields under settings and the following URL:

https://{your-website}/wp-admin/options-general.php?page=functions

<?php 
// Custom Theme Settings
add_action('admin_menu', 'add_gcf_interface');
function add_gcf_interface() {
    add_options_page('Global Custom Fields', 'Global Custom Fields', '8', 'functions',     'editglobalcustomfields');
}
function editglobalcustomfields() {
?>
<div class='wrap'>
    <h2>Update Season</h2>
    <form method="post" action="options.php">
        <?php wp_nonce_field('update-options') ?>
        <p><strong>Season:</strong><br />
            <input type="text" name="season" size="45" value="<?php echo get_option('season'); ?>" />
        </p>
        <p><input type="submit" name="Submit" value="Update Options" /></p>
        <button onclick="clear_shows()">Advance to a new season</button>
        <input type="hidden" name="action" value="update" />
        <input type="hidden" name="page_options" value="season" />
    </form>
</div>
<?php
} 
?>

At first, the new season field will be empty but enter a date and run an update — now that value can be used anywhere on the website by simply calling the name of the field:

<?php echo get_option('season'); ?>

If you are familiar at all with HTML, you should have no issues with removing fields or adding new areas. Just make sure that each new field has a unique label and unique name.

3. Remove the Widgets You Don’t Use

Remember those boring, standard widgets from WordPress that we’ve seen earlier? Here is another useful piece of code to declutter your dashboard that simply hides the widget you don’t use. The code below hides 3 common WordPress widgets but you can remove any widget using the same technique.

function remove_dashboard_meta() {
    remove_meta_box('dashboard_incoming_links', 'dashboard', 'normal'); //Removes the 'incoming links' widget
    remove_meta_box('dashboard_plugins', 'dashboard', 'normal'); //Removes the 'plugins' widget
    remove_meta_box('dashboard_primary', 'dashboard', 'normal'); //Removes the 'WordPress News' widget
    remove_meta_box('dashboard_right_now', 'dashboard', 'normal'); //Removes the 'At a Glance' widget
}
add_action('admin_init', 'remove_dashboard_meta');

4. Change the Color Scheme of the Dashboard

This one is simple and doesn’t require any code. In my experience, a lot of users forget about this standard WordPress feature that allows setting a unique color palette for each user. In order to do this, go to Users > All Users and click on the Edit link under the user you want to customize the dashboard for.

There is nothing wrong with using a WP login page but customizing its appearance can make a big difference and reinforce your brand. Again, you can use a plugin or follow this helpful guide from WordPress. If you decide to do the changes yourself, all you need to do to change the logo is to modify the CSS styles of your header files. Once you find the right file, replace the site-login-logo.png file with the file name of your logo.

6. Add an Interactive Chart to Your Dashboard

The last tip is probably my favorite simply because I’m a visual person and it’s hard for me to imagine a functional dashboard without any charts. But don’t worry — we are not going to write the code for charts ourselves. Instead, we can use any online charting tool or a very popular data visualization software called Tableau.

If you don’t have a Tableau license, try experimenting with charts from Tableau Public first. Once you are there, open the gallery and choose any chart you like. Below, you’ll see a share button that opens a menu with an embed code.

Copy this code and try adding it to the custom widget we created at the beginning of this post. Again, you’ll need to use echo, surround your code with double quotes and put a semicolon in the end.

As a result, you’ll see a fully interactive data viz on your dashboard! Using the same approach, you can add more stuff from other websites that provide embed code for their content.


Top-Quality WordPress Development Services from GetDevDone

We are sure you found Valerie’s material engaging and useful. Apart from the Dashboard, many other WordPress areas can be customized to suit your specific business needs. 

In many situations, this involves more than just adding a few lines of code and calls for assistance from professionals such as the GetDevDone WordPress development team.  

With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world’s most popular CMS.

Contact us for any WordPress-related task, from building brand-new custom themes or customizing existing ones to page load speed optimization and security.

Helping your business succeed is our top priority!

Valerie Muradian

Valerie is a top writer, software developer, and book lover. She writes on the latest technologies, self-development, life-long learning, creativity, and everything in between. | Follow her on Twitter | Read her on Medium