Documentation, Reference Materials, and Tutorials for WPCode
Would you like to place a snippet right beside one particular element on your page, even when your theme offers no hook there? WPCode’s Anywhere locations let you name that element with a CSS selector. Your snippet can then go before it, after it, inside it, or over the top of it.
All you need is a snippet and a way to point at the element you want. In this guide, we’ll walk you through the five Anywhere locations and the built-in element picker. We’ll also cover the Element index field, which narrows a selector down to a single match.
Requirements: The Anywhere locations come with the paid version of WPCode, at the basic license level or higher.
Before you get started, make sure WPCode is installed and activated on your WordPress site.
To get started, we’ll create the snippet itself. An Anywhere location is a property of a snippet, so the snippet comes first. For this walkthrough, we’ll build a short HTML notice and place it above the first heading on a page.
First, go to Code Snippets » + Add Snippet in your WordPress dashboard.
On the Add Snippet screen, click + Add Custom Snippet to start from a blank snippet rather than a library template.
WPCode then asks which kind of code you’re adding. Our notice is a small block of markup, so choose HTML Snippet.
Give the snippet a name and paste your code into the editor. Any code type can use an Anywhere location. If you’re not sure which one fits your code, our guide on choosing a snippet type covers all eight.
With your code in place, the next step is telling WPCode where to put its output. A snippet’s location lives in the Insertion panel, alongside every other WPCode location. Our complete guide to snippet locations covers the Insert Method setting that sits above it.
Next, scroll down to the Insertion panel. With Insert Method set to Auto Insert, click the Location box to open the location picker.
The picker groups its locations into categories down the left. The Anywhere group sits in the Global category.
The group holds five locations. Every one of them works from the CSS selector you supply.
Note: Depending on the width of your browser window, the picker may shorten the two longest names. When it does, they appear as “At the start of HTML Ele…” and “At the end of HTML Ele…”.
If you’re not sure which one to use, start with Before HTML Element or After HTML Element. Both leave the target element exactly as it is and simply add your output next to it.
The two “at the” locations suit adding something inside a container. Replace HTML Element suits swapping an element out entirely.
Our notice belongs in front of a heading, so select Before HTML Element.
With the location chosen, the next step is telling WPCode which element to place the snippet against.
Once you pick an Anywhere location, two fields appear under the Location box. The CSS Selector field is where you name the element you want. Element index narrows the result down when the selector matches several elements.
You can type a selector straight into the field. If you would rather point at the element on your own site, click Pick from page.
Clicking that button hands the job over to the picker, which builds the selector for you.
Pick from page opens your site’s home page in a new browser tab, in picker mode. Your cursor becomes a crosshair, and a bar along the bottom of the window reports the selector as you build it.
Target all is off when the picker opens. In that state the picker writes an exact path down to the single element you clicked. A selector like that can place your snippet somewhere other than the element you picked.
Before you click anything, switch on Target all. This tells the picker to build the selector from the element’s tag name and CSS classes. That’s the form WPCode matches when it assembles the page.
Other controls sit in that bar alongside it. The Disable picker toggle turns highlighting and selection off so you can browse to another page on your site without leaving picker mode. That’s how you reach your target element when it isn’t on the home page.
The minus and plus buttons make the current selector broader or narrower. They are the ones to reach for when the bar’s match count is higher or lower than you expected.
Hovering over the page outlines whatever is under your cursor and shows the proposed selector in a small label. Then click the element you want. The picker then outlines every other element the selector matches, so you can see its reach at a glance.
The bar now shows the finished selector and a count of the elements it matches. When you’re happy with both, click Done.
The picker tab closes and drops the selector into the CSS Selector field for you. If you change your mind while the picker is open, the Cancel button and the Esc key both close the tab without sending anything back.
Note: Our guide on finding the right CSS selector walks through the browser developer tools route as well. That’s handy when you want to read an element’s markup before you target it.
Whichever route you take, it helps to know which selector forms WPCode can match.
WPCode inserts Anywhere snippets on the server, while WordPress is still building the page. That keeps the finished page cacheable and means visitors never see content shift into place. It also shapes which selectors are available to you, because the matching happens against the page’s markup rather than in a browser.
These are the forms you can use:
* matches every element.h2 matches every element with that tag name.#main-content matches the element carrying that id..wp-block-heading matches every element carrying that class..card.featured matches elements carrying both.h2, .card, #main-content matches anything in the list..entry-content h2 matches those headings anywhere inside that container..entry-content > h2 matches only headings that are immediate children of it.input[name="first_name"] matches on an attribute value, and input[name*="name"] matches on part of one.Positional selectors such as :nth-child() and :nth-of-type() belong to the browser rather than the server. When you want one specific element out of several, reach for the Element index field instead.
Element index decides which of the matches your snippet uses. It arrives showing “All”, which is exactly what it does. If you leave it empty, every element the selector matches gets your snippet.
To use one match only, type its position into the field. Positions start at 0, so an index of 0 puts our notice above the first heading on the page. The second heading takes 1, and so on.
Your snippet now has everything it needs, so it’s ready to go live.
A snippet only runs once it’s active, so set the toggle in the page header to Active.
With the location, the selector, and the index all set, click Save Snippet.
Now open a page that contains your target element. Our notice appears directly above the page’s first heading, exactly where the Before HTML Element location and an index of 0 put it.
If the page looks unchanged, there are two things to check. Either the selector matched nothing on that page, or the Element index asks for a position the selector doesn’t reach. For example, an index of 3 needs at least four matches.
To rule out the index, clear the field so it reads “All”. If the page is still unchanged, reopen the snippet and rebuild the selector with Pick from page. This time, start from the page you want the snippet to appear on.
That’s it! You now know how to point a snippet at any element on your site and choose exactly how it sits against that element.
Next, take a look at our complete guide to snippet locations, which covers every other place WPCode can insert a snippet.
Below, we’ve answered some of the most common questions about inserting snippets with CSS selectors.
The page loads exactly as it would without the snippet. WPCode looks for the element, finds no match, and moves on, so there’s no error message and no gap in the layout. Because the outcome looks identical to a snippet that isn’t running yet, a page that hasn’t changed is the signal to check the selector.
The same quiet result happens when the Element index asks for a position past the last match. It’s worth checking that field too. The quickest way to get a selector that definitely matches is Pick from page, used on the page you want the snippet to appear on.
Every match gets a copy of the snippet output. That’s often what you want. A class selector such as .wp-block-heading will place your snippet above each heading added with the block editor in one go. When you want only one of them, put that element’s position in the Element index field.
At 0. The first match is index 0, the second is index 1, and so on, in the order the elements appear in the page’s markup.
It changes the kind of selector the picker builds. Left off, the picker writes an exact path down to the single element you clicked, using positional parts such as h2:nth-of-type(1). Those parts are browser-side, so a snippet saved with that selector can land somewhere other than the element you clicked. Switched on, the picker builds the selector from the element’s tag name and CSS classes instead, which is the form WPCode matches on the server. Pair it with Element index when you want a single element rather than all of them.
Only in the page WPCode sends to the visitor. The element and its contents are swapped for your snippet output as the page is assembled. Your post content, theme templates, and block markup are all left as they were. Turn the snippet off and the original element is back.
WPCode does look at AJAX responses as well as full page loads, including responses that carry HTML inside JSON, such as WooCommerce cart fragments. Plugins build those responses in many different ways, though, so an Anywhere location may or may not reach a particular one. Selectors that lean on a body class are the most likely to miss. An AJAX response usually contains a fragment of the page rather than the <body> tag those classes live on.
Yes. The Conversion Pixels addon’s click tracking asks for a CSS selector in the same way, so a selector you’ve built here works there too. Our guide on custom click tracking covers that setup.
Future-proof your website with WPCode Snippets and improve the way you manage code across all your websites.
Copyright © 2026 WPCode. WPCode® is a registered trademark of WPCode, LLC
The WordPress® trademark is the intellectual property of the WordPress Foundation. Uses of the WordPress®, names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation. WPCode is not endorsed or owned by, or affiliated with, the WordPress Foundation.