Snippet settings
When creating a snippet you have options to select what kind of snippet you create, and how will that snippet run.
Title/Description
This is pretty self-explanatory, it is the title of the snippet. This title will appear in the left sidebar, and also will be the title of the snippet when you save it to the cloud. The description is an extra text that you can use to describe the snippet. Both these fields are matched when searching for a snippet.
Snippet Type
This option determines the language or the snippet you have to run.
PHP
The most common type of snippet. It starts with <?php and it must have no closing tag.
JS
This is used for adding JS code to your WordPress site. This is not used to add external JS code, for example from a CDN. See how to add external JS code to your WordPress site here How to add external JS code to your WordPress site (opens in a new tab).
CSS/SCSS/LESS
This is used to add inline styles to your WordPress site. This is not used to add external CSS code, for example from a CDN. See how to add external CSS code to your WordPress site here How to add external CSS code to your WordPress site (opens in a new tab)
SCSS/LESS code is compiled to CSS every time the snippet is saved. This is completely transparent to the user.
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.
IMPORTANT: You need to refresh the page that you are working on after you enable dev mode.
How to run the snippet
This option is only available for PHP snippets. The 2 options here are:
Always (On Page Load)
This is the default option. The snippets will run when the page loads, exactly like when adding code to functions.php or wp-config.php. If you select this option you will have the options to run the snippet on the front-end, back-end (wp-admin), or custom conditions (run/not run on specific pages).
Manual (On Demand)
This option is useful if you want to run code in the context of WordPress. The code will run when you click the RUN button above the editor. The output of the script will be displayed in the section below the editor.
Selecting this allows you to run code that you don't necessarily want to run all the time. For example, you might want to run a script that deletes all the orphaned post meta. You can add the code, hit run and that code will run. Or you might want to test a custom WP_Query, you can write the query and echo the values you want to check, and the output will be displayed below the editor.
Another use case is a snippet that deletes the orphaned WooCommerce product variations. You write the code (or download it from the snippet repository). You set the run-type to manual, and whenever you want to delete the orphaned product variations, you hit the run button and run the code.
IMPORTANT: Before running code that makes changes to the database, it is a good idea to do a dry run and backup the database. For example, in the case of deleting the orphaned product variations snippet, there is also a snippet that just runs the queries and shows how many variations would be deleted.