The Content Selector helps Grow's script find your content and uses it to place Subscribe Forms and Recommended Content widgets.
Without the correct selector, our script may not be able to place anything other than the Grow widget in the bottom right corner of your site; it's a small but mighty piece of information!
Built-In Selectors
Grow has built-in selectors that represent what a majority of themes use - especially themes from WordPress.
If your site uses one of the selectors below and Spotlight Subscribe appears after you've installed the script, you can leave the Content Selector box empty! Here are some examples:
- .single-post .entry-content
- .entry-content
- .single-post .post-content
- .single-post .post-entry
- .single .entry-content
- .single-post .td-post-content
- .single-post .mvt-content
- .single-post .entry-content, .page .entry-content
- .single-post .elementor-widget-theme-post-content > .elementor-widget-container
- .single-post .thecontent
If you don't see Spotlight Subscribe or Recommended Content on your site and both options are enabled, you'll need to manually find your content selector.
How to Find a Content Selector
Step 1: Begin by going to one of your posts and inspect the post content using your browser’s built-in HTML inspector tool. (We’ll use Chrome’s DevTools for this example.)
Start the process by highlighting a single paragraph of content:
Step 2: Once you inspect the paragraph, notice the corresponding HTML element in the inspector tool, which in this case is a <p> tag. In many cases you’ll see that <p> tag, but the type of HTML tag you see here may vary!
Step 3: Notice the surrounding elements that make up your post content. Each element here is considered a “child” element of a larger “parent” container that holds all of your post content. You’ll want to choose the selector of that parent container to start things off.
A parent container selector we can use from the example screenshot above is the class .entry-content
Step 4: Now that you've found a parent container selector, you then need a body class to help specify whether Grow will show up on posts, category pages, your homepage or index pages.
We’ll find the body class to specify Grow to only show up on posts in this example, which in most themes is .single-post
And that’s it! We’ve found an accurate content selector with .single-post .entry-content
That selector tells Grow to look for all posts (with the .single-post body class) and then to look for the parent container that holds all of your content in order to accurately place in-content features like Spotlight Subscribe.
How to Add Your Content Selector to Grow
Head to Grow Publisher Portal > Grow Settings > General and find the Content Selector field.
Type your content selector into the box, then scroll down to click Save Changes.
When you refresh your site, you should see Grow's in-content features appear throughout your content!
Important Notes
- Make sure your Content Selector is unique and that there is only one instance of the selector in your posts, as that will allow for more accurate targeting.
- Not all content selectors are created the same. Your site’s underlying HTML may look a bit different. Your post content could be nested in <div> element containers, especially if you’re using a pagebuilder plugin. Your site may not even have any body classes!
- A good rule of thumb is finding that crucial “parent” container of your content and working to find the element selector from there. As long as Grow “sees” your content, it should be able to work its magic from there!
- The content selector may not be the same for a page as it is for a post. So if you're looking for Spotlight Subscribe to appear on pages, you'll want to look into manually placing the subscribe widgets on those pages.
If you're still having a bit of trouble finding your content selector, we recommend reaching out to your developer for further assistance. Certain custom themes can be a bit tricky in this area, so recruiting backup can be very helpful!