How to Easily Manage Code Snippets for Your MyListing Website
Building better MyListing websites. One guide at a time.
Table of Contents
For this guide, we show you how this can be done with 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 will reduce the number of plugins and get better performance.
WPCodeBox is a very inexpensive solution as it is, with lifetime updates and support, but the team behind it is giving our Club members a generous, 25% OFF discount.
Many of us currently use the Code Snippets plugin (FREE) and while it is a great plugin, there are shortcomings when compared to WPCodeBox, and we will highlight those here in this guide. Does WPCodeBox do everything that Code Snippets does? No. But, not compared to the other way around, these are super minor things and WPCodeBox is already working on these things as shown here on their roadmap.
- 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
We 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.
- 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.