Enabling Public Reviews and Finding Your Theme’s DOM Selector

You can enable public ratings and reviews on your site which would sit nested right next to the comments via your Create settings. This looks something like this:

One of the benefits of the way that Create handles your reviews is that they are able to stay with the Create card. That means that if you reuse the card in another post, the ratings and reviews come with it. No other recipe card offers that functionality.

​

To see reviews on the front end of your website, you will need to Enable Public Reviews. In order to do this, navigate to the Advanced tab within the Create settings, scroll down until you see the “Enable Public Reviews” section, and turn this option on by clicking the checkbox.

When you select this option, your Create reviews will be displayed in a tab near your comments, as shown above.

Every theme is different and uses different CSS selectors for your comments section. The “DOM” selector looks for the ID in your theme’s code so that it knows where to place the review section.

Under the “Comments Section” in the Create settings you will see a spot for this. The default for most themes is #comments. You must have a "DOM" selector within this section in order for this to work properly.

Some themes use a different selector ID for their comment section. If the default DOM Selector (#Comments) is not displaying the reviews on a particular post, you will need to change the text within this section.

In this case, you will need to replace the default “#comments” to be whatever selector your particular theme uses.

I’m so glad you asked! We created a quick video that shows exactly how to find the selector for your specific theme. Once you find it you can copy it into the text box in replace of #comments.

https://www.loom.com/share/7dbc3ade86524f1db57d1e2bff38c150

To find the DOM selector, scroll all the way to the comment section of your blog post.

In the Chrome browser, Right-click near your comment section and click on the word “inspect.” this will bring up Chrome Developer tools. Depending on your browser’s settings, it could be docked to the side or on the bottom.

Once here, you’ll want to look for something that looks similar to the below screenshot: <div id=”comments” class=”comments-area”>. Once you see this, mouse over the text and right-click. Navigate to “copy” and choose “copy selector.” This will copy the DOM selector to your clipboard.

Next, you’ll want to go back to your Create settings, in the Advanced tab, scroll down until you see “Enable Public Reviews” and turn it on. Once this is turned on via the teal checkbox, you will see another option for the “Comments Section.” This is where you will want to replace the #comments (the default) by pasting the DOM selector that you copied in the earlier step.

Make sure you take note if the selector starts with a hash or a period ( # or . ). This is important and required in order for this to function correctly.

If you have any questions about Create by Mediavine, please reach out to create@mediavine.com. We also have a Facebook Group where you can consult other Create users!