CODEWITHSUNDEEP
wordpresswidget
Martin Fejes
Martin Fejes

Reputation: 677

Giving a widget my own id or class in Wordpress

I'm writing a Wordpress plugin with a widget. In my jQuery code i'd like to point to that widget, so I though giving it an HTML ID would be nice. (Edited, thanks for pointing out.)

After doing some searching on the internet (and the Codex) I know that I can give ID's to the widgets in the theme, but it's not what I was looking for. This method has flaws. Changing the theme may cause errors (of course, I know it has to be changed in the functions.php, but it's just meh). The other thing is that my widget got a number which may change without me knowing.

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

Upvotes: 2

Views: 5491

Answers (1)

Obmerk Kronen
Obmerk Kronen

Reputation: 15949

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 ..

Upvotes: 3

Related Questions