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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} | |
?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#dashboard_right_now a.post_type-count:before, | |
#dashboard_right_now span.post_type-count:before { | |
content: "\f109"; | |
} |
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.
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.
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 thewp-menu-image
class and find thecontent
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.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?
Figured it out! wp_count_posts was the right filter, I just wasn’t requesting all the filters parameters. Here’s a gist if anyone is interested: https://gist.github.com/toddsby/9276990
Glad you found a solution. Thanks for posting the gist – always great to share these things with everyone 🙂
I found this handy plugin in the WordPress repository that add the post types and allows you to select a Dashicon: https://wordpress.org/plugins/glance-that/