How to Easily Manage Code Snippets for Your MyListing Website

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Guide Updated: 8/23/2021

Our How to Easily Manage Code Snippets for Your MyListing Website guide will show you how to safely and efficiently manage code snippets without sacrificing website performance.

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.

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

  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 are giving 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 what’s needed.).
  8. 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’.).
  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. 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.

  1. Enable ‘CSS Dev Mode’ for the snippet you are testing.
  2. Save the snippet.
  3. Refresh the page that you would like to see your changes appear in real-time.

Conditions Builder

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.

  1. Where to run the snippet > Custom.
  2. Click ‘Open conditions builder’.
  3. Click ‘Add Condition’.
  4. Change the ‘Location’ dropdown to ‘Current Post Type’.
  5. From the ‘Select’ dropdown, choose ‘Job Listing’.

Cloud Storage

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.

Video Tutorial

Play Video

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)