How To Turn any word press changes into a plugin for regular usage

Am going to show you how to take your wordpress skills to the next level today

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.cssfile.
• 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:

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: cssand 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.

	<?php
	/*
	Plugin Name: Custom CSS and JS Plugin
	Plugin URI: https://github.com/jpen365/custom-css-and-js-plugin
	Description: Add a custom CSS stylesheet and JavaScript file to WordPress
	Version: 1.0
	Author: Jon Penland
	Author URI: http://premium.wpmudev.org/blog/author/jonpenland
	*/

view rawplugin-file-header.php hosted with ❤ by GitHub

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.

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.

	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' );

view rawenqueue-CSS-and-JS.php hosted with ❤ by GitHub

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.