Content Selector

A Content Selector helps the Grow script find your content and uses it to place both Spotlight Subscribe and Recommended Content.

Without the correct selector, our script may not be able to place anything other than the Grow widget in the bottom right corner, so it's a small, but mighty, piece of information!

Built In Selectors

Grow has some built selectors that represent a majority that themes use - especially those from WordPress.

If your site uses one of the selectors below and Spotlight Subscribe appears after you installed the script, you can leave the Content Selector box empty!

• .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 have a few options:

• Grow has an integration with the Grow Social plugin that might be able to help find that content selector for you. Check out this guide on how to download Grow Social if that's something you're interested in.

• Manually find the selector for your site. 

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. 

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.

Between the selectors within Grow and Grow Social, we cover up to around 80% of the selectors. If you're still having trouble finding it, we recommend looking into hiring some technical help!