Giving a widget my own id or class in WordPress

1 comment

1. I might not understand your question exactly and what "ID" do you mean ( widget ID , or actual HTML div ID – which are actually one and the same.. ) but If you have read the codex , the example for how to give an ID is given there ..

   function __construct() {
           parent::__construct(
               'foo_widget', // Base ID
               __('Widget Title', 'text_domain'), // Name
               array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
           );
       }
   

   Another way to do the same ( and helpul if you are talking about HTML elements like divs – you can assign a class )

   function My_Widget() {  
       function My_Widget() {  
           $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays nothing ', 'example') );  
           $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );  
           $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );  
       }  
   

   Note that a numerator will be automatically added to your widget´s ID based on how many instances were initiated like :

   foo_widget
   foo_widget-2
   foo_widget-3
   

   etc …

   EDIT I – after comments

   At any rate , IMHO it is a bad idea to hard-code a fixed ID in a widget for the simple reason that the preference for a widget from the developer point of view is to always allow support for multiple instances . Giving an an HTML ID anywhere on the widget will cause validation errors AND in the case of jQuery – also JS errors for the simple cause that if a user will have 2 widgets , it will also have a duplicated ID .

   In other words – It is the exact opposite of your statement in the original question.

   So to be 100% sure it works and will work in the future, can I give my
   widget my own ID

   Giving a fixed hard coded ID to your widget will in fact ensure that it will NOT work 100% of the time.

   The preference is always to target such issues with a class ( or with something like div[id^="my_widget_id"] ) and let wordpress “do it´s thing” ( by auto incrementing IDs ).

   For the exact same reason – a theme should always have the same structure in the register sidebar() function like so :

   <?php $args = array(
       'name'          => __( 'Sidebar name', 'theme_text_domain' ),
       'id'            => 'unique-sidebar-id',
       'description'   => '',
           'class'         => '',
       'before_widget' => '<li id="%1$s" class="widget %2$s">', // LOOK AT THIS LINE 
       'after_widget'  => '</li>',
       'before_title'  => '<h2 class="widgettitle">',
       'after_title'   => '</h2>' ); ?>
   

   This will permit the specific sidebar to auto increment the ID of the widgets in order to avoid the above mentioned problem .

   From the codex :

   before_widget – HTML to place before every widget(default: ”) Note: uses sprintf for variable
   substitution

   All that being said, and if you are insisting of giving a hard-coded fixed ID somewhere there ( instead of a the methods described above ) you can always put that at a nested divor span INSIDE your widget´s HTML output, But I would think that if you have read attentively this answer – you will avoid it now.

   Now,- since you have not included any code in your question ( which is always a bad practice here on SE ) there is little more I can do to help. If you encounter any problems targeting the widget without an ID – I suggest you to open a new question and maybe point a link at the comments here, so myself ( and others ) can help you with it ..

   Log in to Reply