Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

Using Custom Functions to Modify Your WordPress Dashboard

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.

Adding Custom Text to Your Footer

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 'Developed by Your Name.';
}
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:

Footer Bottom Before
Footer Bottom After

Adding Custom Links in Your WordPress Admin Bar

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:

Admin Bar Before
Admin Bar After

How to Change WordPress Login Logo

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:

Logo Before
Logo After

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply