How to Enhance WordPress Plugins with CSS and JavaScript

By Lisa Sabin-Wilson

You can add functionality to a WordPress plugin in many ways. Here are two methods: CSS styling and JavaScript. You may never develop a plugin that uses either method, but chances are good that you, as a budding plugin developer, may need this information at some point.

Calling stylesheets within a WordPress plugin

Controlling how your plugin’s output looks onscreen (on the WordPress Dashboard or the front end of the website or blog) is best done through a stylesheet. If you’ve been around web design and HTML, you’re probably familiar with CSS. Nearly every styling aspect of a website is controlled by a stylesheet, and WordPress websites are no exceptions. If you want to read the authoritative guide to stylesheets, visit the W3C.org website.

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

Create and use separate stylesheets for the plugin on 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 when you’re administering your site on the WordPress Dashboard, whereas the front-end stylesheet is called when a user visits the website. Additionally, using separate stylesheets makes style management easier and cleaner.

The best practice for adding stylesheets within your plugin is to create a /styles directory, such as /my-plugin/styles. Place your stylesheets for the back end and front end inside this directory. To call a stylesheet from your plugin, you should use the built-in WordPress wp_enqueue_stylefunction, which creates a queuing system in WordPress for loading stylesheets only when they’re needed instead of on every page.

Additionally, this function supports dependencies, so you can specify whether your stylesheet depends on another that should be called first. This queuing system is used for scripts, too. The wp_enqueue_scripts function does the same for scripts.

Suppose that you’re creating a gallery plugin to display images on your website. You want your gallery to look nice, so you want to create a stylesheet that controls how the images display. You can call that stylesheet in your plugin by using a simple function and action hook. These lines of code get added to your primary plugin .php file at the end, just before the closing ?> tag. Follow these steps:

  1. Create a function in your primary plugin .php file to register your stylesheet and invoke wp_enqueue_style, as follows:function add_my_plugin_stylesheet() {wp_register_style('mypluginstylesheet', '/wp-content/plugins/my-plugin/styles/site-style.css');

    wp_enqueue_style('mypluginstylesheet');

    }

  2. Use the wp_print_styles action hook, and call your function:add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );Here’s a breakdown of the hooks in the function:
    • The wp_register_style function registers your stylesheet for later use by wp_enqueue_style, as follows:wp_register_style( $handle, $src, $deps, $ver, $media )

      The function has several parameters; the first is $handle, which is the name of your stylesheet.$handle must be unique. You can’t have multiple stylesheets with the same name in the same directory.

      The second parameter is $src, the path to your stylesheet from the root of WordPress — in this case, the full path to the file within the plugin’s styles directory.

      The remaining parameters are optional. To find out more about them, read the WordPress documentation for this function at https://codex.wordpress.org/Function_Reference/wp_register_style.

    • The wp_enqueue_style function queues the stylesheet, as follows:wp_enqueue_style( $handle, $src, $deps, $ver, $media )

      The $handle parameter is the name of your stylesheet as registered with wp_register_style. The $src parameter is the path, but you don’t need this parameter because you already registered the stylesheet path. The remaining parameters are optional and explained in the WordPress documentation.

    • The action hook that calls the function uses wp_print_styles to output the stylesheet to the browser.In the source code, the line of code that shows the stylesheet being included looks like this:<link rel='stylesheet' id='twentyseventeen-style-css' href='http://lisa.dev/wp-content/themes/twentyseventeen

Another example uses a stylesheet for the plugin’s admin interface, which controls how your plugin option page within the Dashboard appear. These lines of code also get added to your plugin’s primary .php file just before the closing ?> tag:

add_action('admin_init', 'myplugin_admin_init');

 

function myplugin_admin_init() {

wp_register_style('mypluginadminstylesheet', '/wp-content/plugins/
my-plugin/admin-styles.css');

add_action('admin_print_styles' 'myplugin_admin_style');

function myplugin_admin_style() {

wp_enqueue_style('mypluginadminstylesheet');

}

}

This example uses some hooks that are specific to the WordPress Dashboard:

  • The action hook calls admin_init. This hook makes sure that the function is called when the Dashboard is accessed. The callback function is myplugin_admin_init.
  • The function registers the stylesheet, using wp_register_style.
  • An action hook calls the myplugin_admin_style function. The admin_print_styles hook is used because it’s specific to the WordPress Dashboard display.
  • The function queues the stylesheet, using wp_enqueue_style.
  • In the source code, the line of code that shows the stylesheet being included looks like this:

<link rel='stylesheet' id='aioseop-module-style-css' href='http://lisa.dev/wp-content/plugins/all-in-one-seo-pack/css/modules/aioseop-module.css' type='text/css' media='all' />

Calling JavaScript within a WordPress plugin

After using the wp_register_style and wp_enqueue_style functions to call stylesheets within a plugin, you see how similar functions can call JavaScript, which has many uses within a plugin.

JavaScript can control functionality within a form or display something with an effect. WordPress comes with some JavaScript in the core that you can call in your plugin, or you can write your own. As with stylesheets, it’s best to store JavaScript in a separate subdirectory within your plugin, such as /my-plugin/javascript.

Instead of using wp_register_style and wp_enqueue_style to register and queue JavaScript, you must use wp_register_script and wp_enqueue_script. These functions work in much the same way and have much the same parameters. Here’s an example to add to your plugin’s primary .php file, before the closing ?> tag:

if ( !is_admin() ) {

wp_register_script('custom_script','/wp-content/plugins/
my-plugin/javascript/custom-script.js',);

wp_enqueue_script('custom_script');

}

Immediately, you notice that the wp_enqueue_script function loads scripts in the front end of your website and on the Dashboard. Because this situation can cause conflicts with other scripts that WordPress uses on the Dashboard display, the “if is not” (!is_admin) instruction tells the plugin to load JavaScript only if it’s not being loaded on the Dashboard. This code loads custom-script.js only on the front end of the website (that is, what your site visitors see). You could add a more specific conditional if instruction to load JavaScript only on a certain page.

If you want to load the JavaScript in wp-admin, the action hook admin_init loads your callback function when wp-admin is accessed and the admin_print_script function outputs the script to the browser, just like the stylesheet example.