Using Custom Functions to Modify Your WordPress Dashboard
In this tutorial, we’re going to show you how to modify your WordPress dashboard by writing a few custom functions hooked to WP actions and filters. You can get familiarized with actions and filters here.
During this process, we’ll be using a child theme to store our code. This is the right way to go about it because by doing so, our modifications will be preserved when the main theme gets updated.
So, before we continue, make sure to have child theme uploaded to your WP installation. Creating a child theme is quite simple and, as you can see, it comes in handy in many situations.
WP backend footer custom text is a nice and simple way to personalize your dashboard. To do this, simply add the following code snippet to your child theme’s function.php file:
function modify_admin_footer() {
echo '';
}
add_filter( 'admin_footer_text', 'modify_admin_footer' );
Our functionmodify_admin_footer is hooked on admin_footer_text filter. What it means is that we’re using an existing WordPress filter and we’re passing our output to it in order to override its default value. So, instead of “Thank you for creating with WordPress”, we now have our custom text and link in the WP backend footer.
Below you can see the before and after pictures:
In order to save yourself time while managing WordPress, you can also place your favorite custom links in the WordPress Admin Bar. For example, you can put links to a database settings page and to all your blog posts. Add this code snippet to your child theme’s function.php file:
function modify_admin_toolbar( $admin_bar ) {
// admin toolbar first level item
$admin_bar->add_menu( array(
'id' => 'quick-links',
'title' => 'Quick Links',
'href' => '#',
'meta' => array(
'title' => __( 'Quick Links'),
),
) );
// admin bar second level item
$admin_bar->add_menu( array(
'id' => 'quick-link-one',
'parent' => 'quick-links',
'title' => 'All Settings',
'href' => admin_url( 'options.php' ),
'meta' => array(
'title' => __( 'All Settings'),
'class' => 'quick-links-class'
),
) );
// admin bar second level item
$admin_bar->add_menu( array(
'id' => 'quick-link-two',
'parent' => 'quick-links',
'title' => 'All Posts',
'href' => admin_url( 'edit.php' ),
'meta' => array(
'title' => __( 'All Posts' ),
'class' => 'quick-links-class'
),
) );
}
add_action( 'admin_bar_menu', 'modify_admin_toolbar', 100 );
Our function modify_admin_toolbar is hooked on admin_bar_menu with priority set to 100. You can change this priority to any integer and see how the position of new menu items is changing.
When hooking to admin_bar_menu action, we’re also passing an $admin_bar variable, which is actually being used by a default WP function that is handling admin bar rendering. This variable is an object, and with $admin_bar->add_menu we’re accessing the object’s method which is handling the admin menu items.
First, we have created one menu item called Quick Links without the parent attribute. By omitting the parent attribute we’re telling the method to render the link as a first level admin bar item.
Then, we have created two new menu items called All Settings and All Posts with Quick Links as defined parent attribute. This parent attribute matches an id of our first level admin bar item, making them appear as sub-menu items. For href attribute, we have used a WP function called admin_url().
The before and after pictures can be seen below:
Finally, we’re going to show you how to change the default WP image on your login screen. Obviously, you will need to have your logo prepared in advance and accessible via internet.
We’re placing our custom logo named custom-logo.png in our child theme’s folder. The default WP logo size is 84px x 84px, and we have created ours with the same dimensions.
In order to change your logo, add this code snippet to your child theme’s functions.php file:
function modify_admin_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/custom-logo.png);
height: 84px;
width: 84px;
background-size: 84px 84px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'modify_admin_logo' );
This time, our functionmodify_admin_logo is hooked on login_enqueue_scripts action and its output is a CSS snippet that will override the default WP logo with ours.
Once again, here are the pictures of how our logo looks like before and after our modification:
If you’re not a big fan of messing around with code, the WP Adminify plugin is just the thing for you. This plugin can help you create custom WordPress Dashboard. It comes with 20+ modules like WordPress White Label, Dark Mode, Login Customizer, Custom Dashboard Widget, Menu Editor, Admin Column, Admin Page and more.
You can remove all unwanted default dashboard widgets or add different types of widgets like text, video, shortcode, or script. You’ll see 9 UI templates and a custom UI builder on the option panel. Using WP Adminify, it’s easy to change the dashboard background. admin bar, footer copyright text, and more.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
