Create WP Plugin Of Any Modification To Reuse On Other Themes

Wordpress Plugins

One of the first things budding WordPress developers learn is to use child themes for customizing WordPress websites.

While this is a sound practice, there will also be times when you want to reuse code you’ve added to a child theme with a different theme or on a different website, this is where creating a WP Plugin becomes handy.

The best way to package code for use with any theme and on any WordPress website is to add the code to a simple plugin. Plugins are easy to copy from one website to another and can be used with any theme.

Let’s look at an example.

Imagine that you found a tutorial for making HTML tables responsive by adding code to a child theme. You love the look of HTML tables with this bit of code and want to keep using it after switching themes and also use the same code at several other WordPress sites. A WP Plugin makes this easy.

In this tutorial, I’ll walk through the process of converting a simple child theme modification into a custom plugin. Specifically, I’ll be creating a plugin that includes a CSS stylesheet and JavaScript file that contain code for creating sections that contain responsive HTML tables. However, you can apply the same basic idea to any child theme modifications you want to reuse across multiple websites or keep when switching themes.

Anatomy of a Plugin

The child theme modifications that we’re going to be converting into a plugin include two components: a short bit of CSS and a JavaScript file. In the original tutorial, the CSS was added to the child theme’s style.css file, and the JavaScript was added as a separate file and enqueued with the wp_enqueue_scripts hook. Those are the components we’ll need to incorporate into our custom plugin.

Our plugin will be made up of three files:

  • A php file which will provide basic information about the plugin and enqueue the CSS and JavaScript files.
  • A CSS file that will contain the CSS from the child theme’s style.css file.
  • A JavaScript file that will be a copy of the JavaScript file that was added to the child theme.

The resulting plugin structure will look like this:

screenshot of plugin directory structure

If you’re following along, take these steps to set up the plugin’s basic structure:

  1. Create a parent directory in the wp-content > plugins directory of a development or test WordPress installation.
  2. I’ve named the parent directory custom-css-and-js, but you can name yours whatever you like.
  3. Inside of the parent directory create two additional directories: css and js.
  4. Create the plugin’s primary php file and place it in the parent directory. I’ve named the plugin file custom-css-and-js.php.
  5. Create CSS and JavaScript files and place them in their respective directories. I’ve named these files custom-style.css and custom-scripts.js.

At this point, the basic plugin structure is in place. However, all of your plugin files are empty and if you visit Plugins > Installed Plugins you won’t see your plugin in the list of available plugins.

Adding a Plugin to the Dashboard

Let’s make the plugin show up in the list of available plugins at Plugins > Installed Plugins. All we need to do to make that happen is to add a properly formatted plugin file header to our php file.

Plugin Name:   Custom CSS and JS Plugin
Plugin URI:
Description:   Add a custom CSS stylesheet and JavaScript file to WordPress
Version:       1.0
Author:        Salam Banna
Author URI:

Since this is a custom plugin for use on my own sites and not for general distribution, I’ve kept the file header short and to the point. With this information added to our plugin’s primary php file — the file named custom-css-and-js.php — the plugin will be available for activation when we go to Plugins > Installed Plugins.

Enqueuing a Stylesheet and Script File

While our plugin now shows up in the dashboard, it doesn’t do anything just yet. To get the plugin to do something we need to add php code to the plugin file. In this case, the code we’ll add will be a function that identifies our CSS and JavaScript files and adds them to WordPress with the wp_enqueue_scripts hook.

function custom_css_js_enqueue_scripts() {

    /* enqueue the custom-style.css file */
    wp_enqueue_style( 'custom-css', plugins_url( '/css/custom-style.css', __FILE__ ), $ver = false );

    /* enqueue the custom-scripts.js file */
    wp_enqueue_script( 'custom-js', plugins_url( '/js/custom-scripts.js', __FILE__ ), $deps = array( 'jquery' ), $ver = false, $in_footer = true );
add_action( 'wp_enqueue_scripts', 'custom_css_js_enqueue_scripts' );

Let’s walk through that function one step at a time.

  1. A new custom function named custom_css_js_enqueue_scripts is created. The name of the function is not important, but for clarity’s sake it should be a name that hints at the function’s purpose.
  2. The wp_enqueue_style() WordPress function is used to enqueue the custom stylesheet.
  3. The wp_enqueue_script() WordPress function is used to enqueue the JavaScript file.
  4. The add_action() WordPress function is used to tie our custom function to the wp_enqueue_scripts hook.

Adding Styles and Scripts

At this point, when the plugin is activated the custom CSS and JavaScript files will be served up along with the rest of the website files. However, nothing has been added to either file, so the plugin still doesn’t really do very much.

The next step is to put your custom css into the plugin’s custom-style.css file. Then add your JavaScript code into the plugin’s custom-scripts.js file. With the CSS and JavaScript in place they will be served up by the plugin.

The Result

The plugin created in this tutorial is really quite useful. You can add any CSS or JavaScript you wish to the corresponding files and it will be added to your site.

The CSS and JavaScript files connected to this plugin could be used to add in any custom styling or scripting. However, CSS and JavaScript aren’t the only child theme modifications you could add with a plugin.

  • Functions added to a child theme’s functions.php file could be added to a plugin instead, especially if they don’t define theme-specific behavior.
  • Ambitious WordPress developers can even add custom page templates with a plugin as well.

Really, the sky’s the limit. Any modification you’re thinking about adding via a child theme can almost certainly be added with a plugin instead.

Wrapping Up

Anytime you want to make changes to a WordPress site that you can reuse at other sites or with multiple themes, a WP Plugin is the logical tool for implementing those changes. Thankfully, creating a WP Plugin to replace simple child theme modifications is easy, and the result is flexible enough to handle just about any modification you dream up.

Stay Cool & Enjoy 😀