WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Need some assistance to dynamically generate IDs for a group of radio buttons in Contact Form 7.


<span class="wpcf7-list-item">
<label id="test01">
<input type="radio" name="test" value="Test">&nbsp;
<span class="wpcf7-list-item-label">Test</span>
<span class="wpcf7-list-item">
<label id="test02">
<input type="radio" name="test2" value="Test2">&nbsp;
<span class="wpcf7-list-item-label">Test</span>


share|improve this question

closed as off-topic by toscho Jul 28 '14 at 7:42

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

First, can I ask why you need an ID per radio button? – cmegown May 29 '12 at 19:24
We require the ability to add individual styling on the label of each radio button, basically icons. – Barry May 30 '12 at 9:06
Gotcha, I'll draft an answer. You can do this with CSS. – cmegown May 30 '12 at 14:06

This is not tested, but should work.

There is a + CSS selector that you can use in conjunction with HTML elements and CSS classes and ID's. I'd suggest you do something similar to this to avoid all the hassle of figuring out a way to inject an ID into each radio button:

/* selects the first label element related to the first radio button,
 * the '+' part selects only the element that comes IMMEDIATELY after
 * the previously stated selector. The ':before' pseudo-class will allow
 * you to inject an image before the content.
#test01+input:before {
    /* something similar to this */
    content: url('image.jpg');

I would check out this article, which should be a more detailed walkthrough of everything you need for this. Alternatively - you could use jQuery, which should work something like this:

$('#test01+input').attr('id', 'your-id-value');

Again, this is untested, but this should allow you to dynamically add an ID attribute to any of those elements, which you can then manipulate with CSS. I don't know if this will solve your problem or not, but hopefully it gets the wheels turning :)

share|improve this answer
Thanks for the suggestion but it won't cut the mustard. We require a hover state. – Barry May 30 '12 at 15:34
Edited answer to include jQuery way of doing it. – cmegown May 30 '12 at 16:03

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