WordPress® All-in-One For Dummies®

Enhancing Plugins with CSS and JavaScript

As you have discovered by now, there are many ways to add functionality to a plugin. In this section, we look at two methods, CSS styling and JavaScript. You may never develop a plugin that uses either, but it's still useful to understand how these can be included. Chances are you may need this at some point, so it's a good reference for any budding plugin developer to have.

Calling stylesheets within a plugin

Controlling how your plugin's output looks onscreen (whether in the WordPress Dashboard or on the front end of the Web site or blog) is best controlled through a stylesheet. If you've been around Web design and HTML, you're probably familiar with CSS (Cascading Style Sheets). Nearly every styling aspect for a Web site is controlled by a stylesheet, and WordPress is no exception. If you want to read the authoritative guide to stylesheets, visit the W3C.org Web site at http://www.w3.org/Style/CSS. (For more on CSS, see Book VI.)

You can use a single stylesheet to control how your Plugin Options page looks in the Dashboard, how your plugin widget looks in the Dashboard, or how your plugin displays information on the front-end Web site.

Create and use a separate stylesheet for the plugin within the Dashboard and the plugin's display on the front end because the stylesheets are called at different times. The back-end stylesheet is called ...