Snippet types
Every snippet has a type. You choose it when you click + New, and you can change it later with the type picker in the toolbar.
| Type | Use it for | Example |
|---|---|---|
| PHP | Changing how WordPress, WooCommerce or another plugin behaves | Disable comments, add a checkout field, register a custom post type |
| HTML | Printing markup somewhere on the page, optionally with PHP mixed in | A banner, a tracking tag, a verification <meta> tag |
| CSS | Styles | Hide an element, adjust a page builder layout, style the login page |
| JavaScript | Scripts | Analytics, chat widgets, small interactions |
| SCSS / LESS Pro | Stylesheets written in SCSS or LESS, compiled to CSS when you save | Shared brand variables and mixins |
PHP
A PHP snippet works like code in your theme's functions.php. Start it with <?php or leave the tag off: both work. Don't end it with ?>.
add_filter( 'excerpt_length', function () {
return 30;
} );
By default it runs as soon as Snipfire loads (Run immediately (like functions.php)), which is right for add_action() and add_filter() calls. You can also run it on a specific hook: see Where snippets run.
Tip: type add_action( ' or add_filter( ' and pick a hook from the list. Snipfire writes the callback with the right parameters, and adds return for filters.
HTML
An HTML snippet is printed as written, where you choose: the site header, right after <body> opens, the footer, before or after post content, admin pages or the login page.
<div class="promo-bar">Free shipping on orders over €50</div>
You can mix PHP in with <?php … ?>:
<p>Hello, <?php echo esc_html( wp_get_current_user()->display_name ); ?>!</p>
Emmet works in HTML snippets: type an abbreviation such as div.promo>p and press Tab.
An HTML snippet can also be a shortcode, so you can place it inside any post, page or page builder: see Shortcodes.
CSS
Plain CSS, without <style> tags. Snipfire minifies it automatically.
.site-header .cart-count { background: #e63946; }
CSS snippets can load on the front end, on the front end and in the block editor, only in the block editor, in the admin area, or on the login page. They can be printed inline or served as a cached file: see Loading CSS and JavaScript.
JavaScript
Plain JavaScript, without <script> tags.
document.addEventListener( 'DOMContentLoaded', () => {
console.log( 'Hello from Snipfire' );
} );
JavaScript can load in the header or footer of the front end, in the admin area, or on the login page, inline or as a cached file with defer or async.
JavaScript is served as you wrote it (it isn't minified).
If you're pasting a third-party tag that comes with its own <script> tags, such as Google Analytics or a Meta Pixel, use an HTML snippet in the header instead: paste the tag exactly as the provider gives it. With Snipfire Pro, both HTML and JavaScript snippets can wait for cookie consent.
SCSS and LESS Pro
With Snipfire Pro, a CSS snippet can be written in SCSS or LESS instead: pick SCSS or LESS in the type picker. It's compiled to minified CSS when you save, so your site never compiles anything on a page view. See SCSS and LESS.
Changing a snippet's type
You can switch the type in the toolbar's type picker. The settings that only make sense for one type (such as Load as for CSS and JavaScript) change with it, and Where moves to the new type's default if the old location doesn't exist for the new type. Check the settings panel before you save.
Something unclear or missing? Tell us