Right now they are all gray.

How to change the color?

I mean, how to add a class or id to the registered widget area that are shown in the admin area?

This is how you register the admin areas in my functions.php right now:

register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

How can I add some attribute to add class in the admin, so I can style it later via CSS?


If you intend to style the sidebar in the backend, you do not need to do anything else. when you use the code you posted, the html created by WordPress for the sidebar contain a div with the id attribute equal to the id of the sidebar.

Consider this code:

function custom_colored_sidebar() {

  register_sidebar( array(
    'name' => 'Test Sidebar',
    'id' => 'sidebar-test',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ) );

  add_action('admin_enqueue_scripts', 'widget_style');


function widget_style( $page ) {
  if ( $page == 'widgets.php' ) {
    echo '<style>div#sidebar-test { background-color:#f00; }</style>';

add_action('init', 'custom_colored_sidebar');

As you can see I registered a sidebar with the id 'sidebar-test' and then I used 'admin_enqueue_scripts' to put some style on a div withe the id 'sidebar-test' only if the current admin page is 'widgets.php'.

The right way is enqueue an external css, but for sake of semplicity I just echo the style.

This is the result:

colored sidebar

As you can see I styled the sidebar widget doind nothing else.

You can notice that the div with id equeal to sidebar id is inside the widget, if you want to style the widget wrapper or the title, only way is use javascript, something like:

jQuery( document ).ready(function($) {

Using this code (that should be enqueued only in widgets.php page, you attach the class 'sidebar-test-wrapper' to the container of your target sidebar, so you can style it.

If you want to style the name of the sidebar, you can use the class 'sidebar-name', in this case:

.sidebar-test-wrapper div.sidebar-name { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name h3 { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name .sidebar-name-arrow { /* some css here */ }
  • 1
    A very classy classic related post. – brasofilo Oct 3 '13 at 3:31
  • Is it possible to cahnge the header color too? – Derfder Oct 9 '13 at 12:15
  • @Derfder yes, you need javascript. It's explained in the last part of the answer. – gmazzap Oct 9 '13 at 12:43
  • Javascript in regiser_sidebar() function? how to do that? I need that using only register_sidebar funcion no additional code. – Derfder Oct 9 '13 at 13:16
  • @Derfder have you red the answer? "code... that should be enqueued only in widgets.php page" so the javascript should go in a separate js file and enqueued in widgets.php page. If want to style the sidebar header only using something on register_sidebar, simply is not possible. – gmazzap Oct 9 '13 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.