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.
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
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 CSS file that will contain the CSS from the child theme’s style.css file.
The resulting plugin structure will look like this:
If you’re following along, take these steps to set up the plugin’s basic structure:
- 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.
- I’ve named the parent directory custom-css-and-js, but you can name yours whatever you like.
- Inside of the parent directory create two additional directories: css and js.
- 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.
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.
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
Let’s walk through that function one step at a time.
- A new custom function named
custom_css_js_enqueue_scriptsis 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.
wp_enqueue_style()WordPress function is used to enqueue the custom stylesheet.
add_action()WordPress function is used to tie our custom function to the
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.
Adding Styles and Scripts
As you can see, tables look great with TwentySixteen activated:
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.
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.
Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)
Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.