How to theme form elements in a custom field widget?

Question

I'm creating a custom telephone field and I'm a bit confused at how to go about theming the widget.

I have four elements in my implementation of hook_field_widget_form()...

1. A dropdown for the phone type, (i.e - phone, fax, toll-free).
2. A textfield for the phone number.
3. A textfield for the extension with the prefix "ext".
4. A checkbox to flag the number as the primary number, (the field has unlimited cardinality).

Functionally, the field is working great. It is saving the data in the database just how I would like. What I'm not figuring out is how to display the elements inline on the edit form. Right now, the form for the field looks like this...

I would like each of the elements to display inline. If I could just add a class to the div that wraps each of the elements, I'd be good to go. The closest that I've come is to add a class in my implementation of hook_field_widget_form() to each of the elements, but that adds it to the element and not the wrapper div.

I have a feeling I'm going to need to implement a theme function or a template file, but I just don't know where to start. All the information that I find about theme functions and template files seem to be about what the elements look like rendered on the page, and not about what the form elements look like on the edit form. I know that the theme function that builds the form element is 'theme_form_element', but if I alter that, it alters all the form elements. I'm not sure how to target just the elements in my module or if this is even the route to go down.

Can someone please point me in the right direction? I have been stuck on this for days.

---

UPDATE 01Nov14

---

It's been a few days since I posted this question, and I'm still very stuck. Here's another screenshot that may be able to clear up what I'd like to do. How do I add a class in the wrapper divs pointed out in this screenshot?

Answer 1

To add class to wrapper div of a form item you have to use the following theme function : theme_form_element

Copy and paste the entire theme_form_element function and rename the function with mytheme_form_element in your template.php and add your custom code like this (you may adjust to your own id) :

/* CUSTOM */
if (module_exists('mymodule')) {
  if (isset($element['#id']) && ($element['#id'] == 'phone' || $element['#id'] == 'ext' || $element['#id'] == 'primary')) {
    $attributes['class'][] = 'my-class';
  }
}
/* END CUSTOM */

It's always difficult to change the structure of forms because it's in theme function and for that you have to add conditions.