Skip to content

Editing snippets#

Everything lives under Snippets in the admin menu.

The list#

Column Shows
Switch Active or not; click to toggle
Snippet Title, with Activate/Deactivate, Edit and Trash actions
Type CSS, JS or HTML; a ! marks a snippet with warnings (hover for them)
Placement Where it loads, its position, inline or file; environments and expiry when set
Where on site The first three rules
Order 1 prints first, 10 last

Filter by type and by active state; bulk activate and deactivate. Inactive snippets are dimmed.

The edit screen#

  • Code: WordPress's code editor with syntax colouring and linting for the language.
  • Status: the active switch; warnings from the last build; for a published linked file, its URL.
  • Preview unsaved changes opens a page with the code and settings as they are in the editor, for you only. The saved snippet is swapped out on that page; rules are ignored in a preview. The link lasts for the preview lifetime set under Settings.
  • Does it print here? checks the saved rules against a URL.
  • Placement: language, position, output (inline or linked file; for HTML, device), where it loads (site, admin, login page, block editor), order and minify. For CSS, Written in: CSS, SASS (SCSS syntax) or LESS; the editor switches mode. A SASS/LESS snippet with a Partial file name (e.g. _variables.scss) is import-only: never printed, written to uploads/custom-css-js under that name so other SASS/LESS snippets can @import 'variables'.
  • Where on site: rule rows, see Where on site.
  • Details:
  • Key: the post slug. WP-CLI, exports and BB Migrate match snippets by it.
  • Environments: none ticked means everywhere; otherwise only where wp_get_environment_type() matches.
  • Expires: the snippet stops printing after this day.
  • Loading (linked files): Default; Inline it in the page (CSS: BB Cache's critical CSS inlines the file, up to 24 KB, whatever its list says); Load it after the page (CSS: never inlined, so it loads with the async sheets; JavaScript: defer). Use "after the page" for styles of things far below the fold.
  • jQuery (JavaScript): detect from the code, or say whether it needs jQuery.
  • Owner and Notes: for the next person.

Saving rebuilds the manifest and purges the cached pages the snippet affects, before and after the change. SASS and LESS compile at that moment; if the code does not compile, the edit screen and Tools → Health show the error and pages keep the last version that compiled.

The status box also has Download as a theme file: the code with all its settings in a header comment, ready for the theme's snippets/ folder (see Theme files).

Revisions#

Each save stores a revision with the code, settings and rules. Compare shows both; Restore brings back all three, not just the code.

Tools#

  • Test a URL: every snippet that prints on a page, in order, with where it prints.
  • Health: when the manifest was built and checked, every warning, unused files left by the old plugin (with a button to delete them), and Rebuild now.
  • Export and import: all published snippets as one JSON file; imports match by key and can dry-run.

Settings#

Shared with Simple Custom CSS and JS: leave out the start/end comments around inline snippets, leave out the header comment in linked files, the preview link lifetime, and the Web Designer role.

BB Snippets' own: Output and Code. All of them, with the constants and filters: Settings reference.