WordPress: Add items to the ‘At a glance’ widget

by Posted on

The WordPress dashboard includes a handy widget that displays some brief information about your site at a glance – rather creatively, it’s titled  ‘At a Glance’. By default it shows you the number of posts, pages and comments on your site allowing you to click through to edit each of those sections if you have the right permissions.

When building a plugin with a custom post type, it’s often a good idea to add your post type to the widget as it makes things more accessible and generally more user friendly for everyone. Using the snippet below you can add any number of custom post types to this widget (I’ve also included some useful CSS to customise the icons displayed):


<?php
add_filter( 'dashboard_glance_items', 'custom_glance_items', 10, 1 );
function custom_glance_items( $items = array() ) {
$post_types = array( 'post_type_1', 'post_type_2' );
foreach( $post_types as $type ) {
if( ! post_type_exists( $type ) ) continue;
$num_posts = wp_count_posts( $type );
if( $num_posts ) {
$published = intval( $num_posts->publish );
$post_type = get_post_type_object( $type );
$text = _n( '%s ' . $post_type->labels->singular_name, '%s ' . $post_type->labels->name, $published, 'your_textdomain' );
$text = sprintf( $text, number_format_i18n( $published ) );
if ( current_user_can( $post_type->cap->edit_posts ) ) {
$items[] = sprintf( '<a class="%1$s-count" href="edit.php?post_type=%1$s">%2$s</a>', $type, $text ) . "\n";
} else {
$items[] = sprintf( '<span class="%1$s-count">%2$s</span>', $type, $text ) . "\n";
}
}
}
return $items;
}
?>

view raw

function.php

hosted with ❤ by GitHub


#dashboard_right_now a.post_type-count:before,
#dashboard_right_now span.post_type-count:before {
content: "\f109";
}

view raw

style.css

hosted with ❤ by GitHub

All you need to do is replace the $post_types array with an array of the post types that you want to add to the widget. You’ll see that the snippet includes a security check so that only users with permission to edit each post type will be able to click through and do so.

The CSS will replace the circle with the same icon that the Posts post type uses. You can replace the content attribute there with one of the icons from this set – just select your icon and copy the relevant CSS from the link provided.

6 Thoughts

  1. Any ideas as to how I can utilise the custom post types own icon that is used in the menu? It would be great to have the custom posts dashicon used in the At A Glance panel.

    Reply

    1. You’ll need to find out the value of the content property used in the CSS for that icon. If you inspect the menu icon in your browser look for the div with the wp-menu-image class and find the content property of the ::before section. If that’s all Greek to you, then ask a friend to help you out 🙂

      If the menu icon is a custom font, you’ll also have to add the font-family property with the correct value to the CSS from this example.

      Reply

  2. Clean code Hugh! Very elegant solution. I found your post researching how to filter the page count on the ‘At a glance’ admin widget. Does core not include a filter hook to exclude posts from the counts? The closest I’ve found is the wp_count_posts filter, but it only returns an object with the count statuses, which doesn’t help me. Any suggestions?

    Reply

Leave a Reply