4

For instance if my plugin is creating a form on a page, what can I do to make it as easy as possible for theme developers to skin the form too?

3

First of all, provide a well-formed default HTML form. Use <label>, <fieldset> and <legend> where appropriate. This markup provides a good structure for CSS styling. Adding in some CSS classes may help too.

Provide a filter that allows developers to tweak the default form.

To go even further, you can allow developers to completely rewrite the form output to their likings by allowing them to provide a custom form template file within a theme.

if ($custom_form = locate_template('plugin_form.php')) {
    // Load custom form
    include $custom_form;
} else {
    // Default form with filter
    $form = '<form><!-- Default HTML --></form>';
    $form = apply_filters('pluginprefix_form_output', $form);
    echo $form;
}

Have a look at the get_search_form() function in wp-includes/general-template.php for a good example of a similar implementation.

3

In general, less is more, i.e. do no styling besides adding WP standard classes. If your plugin is to blend in, it should look like the rest.

However, if you have sufficient reason to believe that your plugin's output should be styled differently than the rest of the site (i.e. if you add a distinct visual feature), you can add -- besides the standard classes -- your own class names to the elements you create. Stick to as few classes as possible as high up in the hierarchy as possible, e.g.

<div style="am01_div">
  <ul>
    <li>Test</li>
  </ul>
</div>

is better than

<div style="am01_div">
  <ul style="am01_ul">
    <li style="am01_li">Test</li>
  </ul>
</div>

Then, users can create a child theme of their main theme in whose CSS they can add styling information for your elements.

(I actually used to think that plugins should provide options to style their output but I changed my mind. Separation of concerns should be applied here: you create (reasonable) output, users style if they want to.)

  • +1 for prefixing the class names to prevent conflicts with existing classes. – Geert Jan 18 '12 at 10:55

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.