How to Turn Any WordPress Theme Modification into a Simple Plugin

Why every website needs Yoast SEO
September 1, 2016
The Final Divi 3.0 Video Sneak Peek: A Look At Visual Undo, Redo And Revision History
September 2, 2016
Show all

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.

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 custom 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 making HTML tables responsive. 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.

If you want to follow along with this tutorial take a look the article How to Create Responsive Tables in WordPress That Don’t Suck. The code we’ll be converting to a plugin can be found in the section titled Make Tables Responsive Manually. If you’d rather just see the finished product, you can download a copy of the plugin from GitHub.

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. I use XAMPP for local WordPress installations, but you can use any test or development 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.

.gist table { margin-bottom: 0; }

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.

screenshot of plugin in wp dashboard
With the plugin file header in place, the plugin will show up in the dashboard.

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.

.gist table { margin-bottom: 0; }

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.

If this is the first time you’ve enqueued a stylesheet or script you may be a bit overwhelmed by this function. If that’s the case, take a look at Adding Scripts and Styles to WordPress the Right Way With Enqueueing to get up to speed on this topic.

COMMUNITY

Amazing people sharing tons of knowledge

Chat to like-minded folks who are building websites and businesses just like you. With your WPMU DEV membership comes access to our members-only forums where you can discuss everything from code and customizations to SEO and online strategy.

LEARN MORE

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 copy the CSS out of the child theme’s style.css file and into the plugin’s custom-style.css file. Then repeat that process by copying the scripts from the JavaScript file attached to the child theme into the plugin’s custom-scripts.js file. With the CSS and JavaScript copied from the child theme to the plugin’s CSS and JavaScript files, we can delete those bits of code from the child theme and they will be served up by the plugin.

The Result

The plugin created by following these steps 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. In this case, I’ve added in the CSS and JavaScript necessary to render HTML tables in a responsive manner.

As you can see, tables look great with TwentySixteen activated:

screenshot of table with twentysixteen active
The table looks great with Twenty Sixteen.

However, thanks to the fact that the CSS and JavaScript that make the table responsive are added with a plugin, the table still looks great when the theme is changed.

screenshot of plugin with tortuga active
It still looks great when Tortuga is the active theme.

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.

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 plugin is the logical tool for implementing those changes. Thankfully, creating a custom plugin to replace simple child theme modifications is easy, and the result is flexible enough to handle just about any modification you dream up.

View @ WPMU DEV

Skip to toolbar