I’m unfamiliar with that particular widget, but you can learn its title ID, if it has one, using your browser’s element inspector developer tool. In any case this tool will help you determine what CSS selector would target the title, ID or not.
To get your CSS applied to an admin area, you need to enqueue your stylesheet using wp_enqueue_style() called from a callback hooked to “admin_enqueue_scripts” action. A suffix identifying the requested screen is passed to your callback so you can conditionally enqueue only when necessary, avoiding needlessly loading your stylesheet where it’s not needed.
There’s a good example in the user notes near the bottom of https://developer.ww.wp.xz.cn/reference/hooks/admin_enqueue_scripts/
(3rd one down)
Sorry, i mean recent posts. What is the widget class ID. Assuming i want to bold and change the widget title color of the recent post, what is the ID?
In this sample widget plugin, what is the widget class to bold the widget title at the dashboard
/**
* Adds Foo_Widget widget.
*/
class Foo_Widget extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'foo_widget', // Base ID
esc_html__( 'Widget Title', 'text_domain' ), // Name
array( 'description' => esc_html__( 'A Foo Widget', 'text_domain' ), ) // Args
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo esc_html__( 'Hello, World!', 'text_domain' );
echo $args['after_widget'];
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
return $instance;
}
} // class Foo_Widget
The “Activity” dashboard widget, which shows recently published posts and comments, could be hidden with this admin CSS:
div#dashboard_activity {
display: none;
}
Placed on an external stylesheet and enqueued as shown in the user notes at the docs page I linked previously.
I guess the Foo widget’s ID would be “dashboard_foo_widget”? Verify using your browser’s element inspector developer tool.
FWIW, individual users can hide any dashboard widget by using the screen options drop tab at the dashboard’s upper right.
Thanks. Does it go this way below to change widget top background color or text title color or how should it be done? My target is to change the widget-top background color specific to Foo widget
dashboard_foo_widget .widget .widget-top {
background: #f6f7f7;
color: #1d2327;
}
I’m not seeing any “widget” in class names on the dashboard widgets. For “Foo” it ought to be something like:
#dashboard_foo .postbox-header {
background-color: #f6f7f7;
color: #1d2327;
}
to style its title area.
The below code is what i have done. I added class. If we have to go by that method, how do i add ID to it just like (‘classname’ => ‘footer-filter’,) as below or is it proper to have ‘id’ => ‘footer-filter’, or how should it comes?
Morealso, I enqueue stylesheet to this particular plugin and the changes done to this specific widget and reflect in all the dashboard widgets. What can i done in ensuring that the css changes done for one particular widgets at the dashboard only the concerned widget?
.menu-item-handle, .widget .widget-top {
background: #E7DDAC;
color: #1d2327;
}
public function __construct() {
$widget_ops = array(
'classname' => 'footer-filter',
'description' => __( 'Displays posts from selected category at the footer section' ),
'customize_selective_refresh' => true,
'show_instance_in_rest' => true,
);
parent::__construct( 'footer-filter', __( 'Footer Filter' ), $widget_ops );
$this->alt_option_name = 'footer_filter';
add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts'));
add_action( 'init', array( $this, 'admin_enqueue_scripts' ) );
add_action( 'admin_enqueue_scripts', array($this, 'admin_enqueue_scripts'));
}
Oh, wait! I thought you were asking about dashboard widgets! You’re speaking of regular page widgets and how to style an individual widget on the widget admin screen, correct?
tl;dr: I don’t think there’s a practical way to accomplish what I think you want.
FYI, I know many describe the entire admin area as the “dashboard”, but in WP lingo, only the admin screen at /wp-admin/ (no filename) is really the “Dashboard”. The entire admin area is often called the “back end”. Using commonly accepted nomenclature helps dispel confusion 🙂
For the v5.8 widget admin screen that uses the block editor UI, there’s no unique ID for each widget in the widget picker dialog. The only way to target a specific widget with CSS is with nth-child(), but I don’t think a particular order is guaranteed, so it’s probably not a good approach. There is no option for an element ID that would appear on the admin screen. The only “ID” is for the widget object itself.
