For this, we’ll be using WPCodeBox, a premium solution that allows you to add Code Snippets to your WordPress website site in a safe and organized way, and by doing this, you can reduce the number of plugins and get better overall performance.
Many currently use the Code Snippets plugin (FREE) and while it is a good plugin, there are shortcomings when compared to WPCodeBox, and I’ll highlight those here in this guide.
This guide will teach you how to safely and efficiently manage code snippets without sacrificing website performance.
- Log into your WPCodeBox account and download the current version.
- Install and activate the plugin.
- WPCodeBox > Settings > Move WPCodeBox to the tools menu > Enable, save, and refresh your screen. (Note: What this does is reduces a bit of clutter in your WordPress Dashboard, by moving WPCodeBox under the WordPress ‘Tools’ menu.).
Adding Code Snippets
I recommend being as thorough as possible when filling in the details for each of your snippets, especially if you think there is ever a chance of sharing your snippets with others.
Note: WPCodeBox defaults to a screen where it’s ready for you to input a new Code Snippet, within the ‘New Sippet’ window column.
- WordPress Dashboard > Tools > WPCodeBox.
- Title > Enter a Title.
- Description > Enter a Description (Optional).
- Priority > Specify a priority. (Note: You should rarely have to adjust this, but if you do, the lower the priority number…the more precedence you are giving your snippet for times when that’s required for it to execute.).
- Script Location > Optionally specify a different location for your script to load. (Note: You should rarely have to adjust this, as WPCodeBox automatically assigns a location based on the snippet ‘Type’ you selected above.).
- How to run the snippet > Leave as is. (Note: You should rarely have to adjust this, as WPCodeBox automatically assigns a value of ‘Always (On Page Load)’, which is typically what’s needed.).
- Where to run the snippet > Set according to the ‘Type’ you selected above and where you want the results to show up. (Note: For example, if you are adding a CSS snippet to change the design of a post or page, you would want to choose ‘Frontend’.).
- Save the snippet and toggle the status to ‘Enabled’.
At this point, your new code snippet will be saved to this particular WordPress install. If you would like to make your snippet available across all of your WPCodeBox installs, be sure to check out the ‘Cloud Storage’ section of this guide.
CSS Dev Mode (Auto-Reload)
This is available for CSS/SCSS/LESS snippets and is useful when you want to see the changes you make in real-time.
If you want to apply some CSS to one of your Explore pages, for example, you can have the Explore page open, and if dev mode is enabled for that CSS in WPCodeBox, the CSS changes will be loaded in real-time on the page without the need to reload the page each time.
Note: After you enable dev mode in WPCodeBox, you just need to refresh the page that you are working on one time, to start seeing the changes in real-time.
- Enable ‘CSS Dev Mode’ for the snippet you are testing.
- Save the snippet.
- Refresh the page that you would like to see your changes appear in real-time.
One of the options available when choosing ‘Where to run the snippet’, is ‘Custom’, and when you choose this option, it unlocks the ‘Conditions Builder’.
Let’s look at how you would add some CSS to all of your Listings if you happen to be running a MyListing website.
- Where to run the snippet > Custom.
- Click ‘Open conditions builder’.
- Click ‘Add Condition’.
- Change the ‘Location’ dropdown to ‘Current Post Type’.
- From the ‘Select’ dropdown, choose ‘Job Listing’.
WPCodeBox allows you to save code snippets to your own private cloud storage, sharing those snippets across all of your WordPress installs, saving you a ton of time by not having to track down and apply snippets from various locations.
Once you have a snippet saved within a particular WordPress install, use the ‘Upload to Cloud’ option, and now that snippet will be available to you anywhere you install WPCodeBox.
To pull down a snippet from the cloud, for use on a particular WordPress install, simply use the ‘Download from Cloud’ option.
WPCodeBox Snippet Repository
Clicking on the ‘Repository’ icon within WPCodeBox brings up a ton of snippets that have been submitted by other customers and/or added by the WPCodeBox team, and you have the convenient option of using search to find that perfect snippet.
In most cases, WPCodeBox will detect if a snippet triggers an error and it will disable it automatically.
When a snippet is disabled because of this, that snippet will be colored red in WPCodeBox, and the error it triggered will be shown above the editor.
You then have the option to dismiss the error, fix the problem, and re-enable the snippet.
In the rare case that a snippet causes an error and it is not caught and you are locked out of your site, please use the following steps.
- Connect to your website via SFTP/FTP, using an application like FileZilla (Free).
- Disable all snippet execution within WPCodeBox by adding the following code snippet to your wp-config.php file, which is found at the root of your WordPress install.
- Log back into your website and either remove the offending code snippet entirely or adjust it so it no longer contains syntax that will throw errors.
- Within your wp-config.php file, either remove the code snippet you added in step 2 or comment it out so you have it readily available to you in the future.
- Save changes.
Tip: To comment out a snippet in your wp-config.php, you can do so by simply adding a ‘//’ before the actual snippet (e.g. //define(‘WPCB_SAFE_MODE’, true);)