Easily Manage Code Snippets for Your MyListing Website With WPCodeBox

If you care about website performance, time savings, administrative overhead reduction, and more, there is no better solution for adding code to your website than WPCodeBox.

WPCodeBox Setup

1. Log into your WPCodeBox account and download the current version.
2. Install and activate the plugin.
3. WPCodeBox > Settings > Move WPCodeBox to the tools menu > Enable, save, and refresh your screen. (Note: This prevents additional clutter in your WordPress Dashboard by moving WPCodeBox under the WordPress ‘Tools’ menu.)

Adding Code Snippets

Note: Be as thorough as possible when filling in the details for your snippets, especially if you plan to share them with others.

1. WordPress Dashboard > Tools > WPCodeBox.
2. Title > Enter a Title.
3. Description > Enter a Description (Optional).
4. Type > Specify the snippet type (PHP, CSS, JavaScript, etc.).
5. 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 give your snippet for times when that’s required for it to execute.)
6. 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.).
7. 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 needed.)
8. Where to run the snippet > Set according to the ‘Type’ you selected above and where you want the results to appear. (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.’)
9. Save the snippet and toggle the status to ‘Enabled.’

At this point, your new code snippet will be saved to this particular WordPress install. Check out this guide’s’ Cloud Storage’ section if you want to make your snippet available across all your WPCodeBox installs.

CSS Dev Mode (Auto-Reload)

CSS Dev Mode is available for CSS/SCSS/LESS snippets. This is useful when you want to see the changes you make in real time. If you write CSS for the homepage, for example, you can have the homepage open, and if dev mode is enabled, the CSS changes will be loaded in real-time on the page without the need to reload the page. It saves you time by not having to leave the editor to refresh the page to see how the changes you make look.

1. WPCodeBox > Select an existing CSS code snippet or create a new one.
2. WPCodeBox presents a settings panel for every code snippet, where you can enable the ‘Autoreload Changes’ setting.
3. Click ‘Save.’
4. At the top of the WPCodeBox window, click ‘Preview.’
5. This will open up a browser within WPCodeBox, and you can browse to the page to which you want to apply CSS.
6. Make your CSS changes, click ‘Save,’ and presto!

At this point, the preview window should refresh automatically within WPCodeBox, allowing you to see your changes without visiting your website in another browser window.

Conditions Builder

The condition builder allows you to add conditions and actions to your WordPress snippets so they execute only when certain criteria are met. For example, if you want an action on a snippet to trigger only when someone is logged in, then set “logged_in” as one of your conditions.

The condition builder makes it super easy to select under what circumstances a snippet would be executed. The conditions can be combined into groups and separated with AND/OR logic, so the only limit to what you can build is your imagination.

Assigning Code Snippets Per Role

1. WPCodeBox > Select the desired code snippet.
2. Click ‘Open Condition Builder.’
3. Click ‘Add Group.’
4. Click ‘Add Condition.’
5. Change the ‘Location’ dropdown to ‘Current Logged in User Role.’
6. Choose the desired role.
7. Save changes.

Cloud Storage

WPCodeBox allows you to save code snippets to your private cloud storage within the WPCodeBox platform, sharing them across all your WordPress installs. This saves you a ton of time by eliminating the need 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. Use the’ Download from Cloud’ option to download a snippet from the cloud to a particular WordPress install.

WPCodeBox Snippet Repository

Clicking on the ‘Repository’ icon within WPCodeBox brings up a ton of snippets that other customers have submitted and added by the WPCodeBox team. You can also use search to find that perfect snippet.

Troubleshooting

In most cases, WPCodeBox detects if a snippet triggers an error and disables it automatically. When a snippet is disabled, it is colored red in WPCodeBox, and the error it triggered is shown above the editor. You then have the option to dismiss the error, fix the problem, and re-enable the snippet.

If a snippet causes an error and you are locked out of your site, follow the following steps.

1. Connect to your website via SFTP/FTP using an application like FileZilla (Free).
2. To disable all snippet execution within WPCodeBox, add the following code snippet to your wp-config.php file, located at the root of your WordPress install.

define('WPCB_SAFE_MODE', true);

3. Log back into your website and either remove the offending code snippet entirely or adjust it so that it no longer contains syntax that will throw errors.
4. 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.
5. Save changes.

Note: 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);)

Video Tutorial