How to style multiple sidebars differently

Hi, I have a website that ive made multiple different sidebars for and i added some code into the functions.php file to have them display on their corresponding archives pages. I want to style them all differently, mainly in color. How would I do this? I used the inspector but dont see how to be specific to each sidebar.


Hi Rena,

Thanks for writing in! You can use page or post ID to add specific CSS rules into your sidebars. Please follow the example below.

.page-id-3458 .x-sidebar .h-widget {
    border-color: red;
.postid-5192 .x-sidebar .h-widget {
    border-color: red;

Please review the following article on how you can locate your page IDs or post IDs to target your specific pages (

Hope that helps.

Awesome! Thank you for that!!!

Actually… im still confused bc these arent pages they are archives.
I used this code to apply certain sidebars to each corresponding category archive: So how would it be for a category?

add_filter( ‘ups_sidebar’, ‘x_category_sidebar’ );
function x_category_sidebar($sidebar){
if( is_category( 59 ) ){
return ‘ups-sidebar-cherry-grove’;
} else if( is_category( 56 ) ){
return ‘ups-sidebar-atlantique’;
} else if( is_category( 60 ) ){
return ‘ups-sidebar-fire-island-pines’;
} else if( is_category( 52 ) ){
return ‘ups-sidebar-kismet’;
} else if( is_category( 58 ) ){
return ‘ups-sidebar-ocean-bay-park’;
} else if( is_category( 57 ) ){
return ‘ups-sidebar-ocean-beach’;
} else if( is_category( 53 ) ){
return ‘ups-sidebar-saltaire’;
return $sidebar;

Hi Rena,

It would be similar but with category selector, example,

.category-59  .x-sidebar .h-widget {
    border-color: red;
.category-56 .x-sidebar .h-widget {
    border-color: red;

Where 59 and 56 are the category ID matching your above code.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.