O'Reilly logo

WordPress® All-in-One For Dummies® by Michael Torbert, Andrea Rennick, Kevin Palmer, Cory Miller, Lisa Sabin-Wilson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required