I have been searching for some time on how to modify the Widgets Administration Screen, i'm attempting to add the sidebar id to the wrapper elements.

  • Current output: (produced by wordpress)

    <div class="widgets-holder-wrap">
  • Desired output:

    <div id="sidebar-id-here" class="widgets-holder-wrap">

In researching i've come across Stephanie Leary's blog referencing the following ticket.

I would like do the same(add sidebar ids to their respective wrappers) but from the theme functions.php, ie. without modifying wp-admin/widgets.php.

If anyone know how it would be great! Thanks!

3 Answers 3


I'd personally suggest an enqueue, it's preferable where possible to make use of caching and script compression.

Firstly, the enqueue.

add_action( 'admin_enqueue_scripts', 'add_sidebar_ids_to_widget_admin' );

function add_sidebar_ids_to_widget_admin( $current_page_hook ) {
    if( 'widgets.php' != $current_page_hook )
    wp_enqueue_script( 'widget-admin-jquery', get_stylesheet_directory_uri() . '/widget-admin-jquery.js', array( 'jquery' ), '1.0', true );

I placed the code in a child theme's functions file, if you're using it elsewhere you would need to replace get_stylesheet_directory_uri() with something else.


  • Child themes

    • Use get_stylesheet_directory_uri() . '/yourfile.js'
  • Parent themes

    • Use get_template_directory_uri() . '/yourfile.js'
  • Plugins

    • Use plugins_url( '/yourfile.js', __FILE__ )

Then some jQuery and JS to add the appropriate IDs to the holders.

    $('#widgets-right .widgets-holder-wrap').each(function(){
        var slug = $(this).find('h3');
        $(this).attr('id', slug.text().toLowerCase().replace( /\s/g, '-' ) + 'holder-wrap' );

Does pretty much exactly the same as Bainternet's solution, just approached slightly differently.


Just Like Rarst pointed out you can't do that without either hacking core files or using JavaScript, so here is how you can do that using jQuery with a bit of pain old JavaScript string manipulation :

function add_sidebar_holder_id(){ 
    global $pagenow;
    if ($pagenow == 'widgets.php'){

                var SidebarNameH3 = jQuery(this).find('h3').html();
                var RemoveSpan = SidebarNameH3.indexOf("<span>");
                var SidebarName = SidebarNameH3.substring(0,RemoveSpan -1);
                SidebarName = SidebarName.replace(/ /gi,'-');
                var SidebarID = SidebarName +'-holder-wrap';
                jQuery(this).attr('id', SidebarID);



and you get this:

enter image description here

  • Glad i could help.
    – Bainternet
    Aug 7, 2011 at 11:54

As I understand the whole point of that ticket is that this is not possible without modifying core files (which is a bad idea as usual).

So you can either wait for that proposal to get implemented in core (if ever) or look for alternative solutions. I think some JS could help there, but not my area of expertise.

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.