Next to an element and the element picker Pro

Pro · This feature is part of Snipfire Pro. Plans

Hooks only exist where the theme or a plugin put them. With Snipfire Pro, an HTML snippet can go next to any element on the page, found by a CSS selector: after the product title, before the footer's copyright line, instead of a button. And the element picker finds the selector for you: point at the element on your site and click.

Pick an element on your site #

1. Open the page on your site while logged in.
2. In the admin bar, open Hooks and click Pick an element. (Or click Pick an element in the hook finder's panel.)
3. Point at the element. It's highlighted, with a selector for it. Click it.
4. In the box that opens:
   • CSS selector: the selector Snipfire made. You can edit it; the box says how many elements it matches (Matches only this element.).
   • Which element: This one, The first match or All matches, when the selector finds more than one.
   • Only on this page (…): tick it to limit the snippet to this post or page (a Post / page ID condition), or to this address on other pages (a URL condition).
5. Click Add HTML before, Add HTML after, Add inside, at the start, Add inside, at the end or Replace it.

The editor opens with a new HTML snippet placed there, not saved yet. Write the HTML, switch it on and save.

With the keyboard: the arrow keys move the highlight to the parent, a child or the next or previous element; Enter opens the box; Esc closes the box, and Esc again stops picking (Stop picking).

Snipfire makes a selector that keeps working: the element's id if it has one, otherwise a unique combination of its classes, otherwise a short path from the nearest parent with an id or class, plus which match it is.

Or set it in the editor #

1. Open an HTML snippet and choose Where: Next to an element (CSS selector).
2. Element (CSS selector): for example .single-product .product_title or #colophon .site-info. Pick an element on your site → opens the picker.
3. Put the snippet: Before the element, After the element (the default), Inside, at the start, Inside, at the end or Instead of the element.
4. Which match: The first one (the default), All of them, or Number… and a Match number.
5. Save.

Placed on the server, or in the browser #

Snipfire places the snippet in the page's HTML on the server whenever it can, using WordPress's own HTML processor. Visitors without JavaScript and search engines see it, and page caches store the page with it. The editor says so: Placed in the page's HTML on the server, so it works without JavaScript.

Pages without such a snippet aren't touched at all: Snipfire only processes the pages where a snippet like this runs (its conditions match). The admin area, REST and AJAX requests, feeds and sitemaps never are.

These are placed in the browser, with a small script, instead:

• Selectors the server doesn't match: with pseudo-classes such as :nth-child() or :not(), or the sibling combinators + and ~. The editor warns you: visitors without JavaScript, and search engines that don't run it, won't see the snippet.
• Elements added by scripts: if the element isn't in the page's HTML (a slider, a cart drawer), Snipfire looks for it again in the browser once the page has loaded.
• Snippets waiting for cookie consent: placed once the visitor accepts.

Scripts inside the snippet run in both cases.

Selectors the server matches #

Everything else CSS allows is matched in the browser.

Good to know #

• Saving checks the selector and says what's wrong, for example CSS selector: The CSS selector has a "[" that isn't closed., and whether the snippet will be placed on the server or in the browser.
• Empty output leaves the element alone. If the snippet prints nothing (its PHP decides not to, or it fails), even Instead of the element keeps the original element.
• Conditions, testing mode, cookie consent, smart tags and settings forms work as for any HTML snippet. Page conditions work, since the page is known when it's placed.
• Never inside the admin bar or a <template> element.
• Who can use it: everyone who can edit HTML snippets, including people with CSS, JS and HTML team access. The picker is shown to the same people.
• Snippets on this page, in the block editor panel, lists these snippets too.
• Without Snipfire Pro, the snippet keeps the setting, labelled (needs Snipfire Pro), and doesn't run.
• Moving from WPCode? WPCode Pro's CSS selector locations are imported as this location. See Switch from WPCode.

From the command line #

wp snipfire create --title="Size guide link" --type=html \
  --hook=element:selector --selector=".single-product .product_title" \
  --selector-insert=after --code='<a href="/size-guide/">Size guide</a>' --active
wp snipfire update 12 --selector-match=all

--selector-insert is before, after (default), start, end or replace; --selector-match is a number (1 = the first, the default) or all. In the REST API, abilities, exports and Git sync, the setting is the snippet's selector field: see Snippet fields.