Custom ID for CMS items

Add a custom ID for each item inside of a CMS

Created by

Code & Wander

Code

<script>
  $(".ITEM-CLASS").each(function(){
    const slug = $(this).find(".ID-CLASS").text()
    $(this).attr("id", slug)
  })
</script>

Copied!

Tutorial

Steps & Description

Code Explanation

For each .ITEM-CLASS add an id which corresponds to the text in .ID-CLASS

‍

Step 1

Add the above code to the before </body> tag in custom code.

‍

Step 2

Add a class to the CMS item div and replace .ITEM-CLASS with your class name.

‍

Step 3

Inside the CMS item add a custom code block, add

<p class="ID-CLASS" style="display: none;"> [DYNAMIC FIELD] </p>

We suggest using the slug as the identifiable dynamic field as it is a compulsory field, auto filled by Webflow, that makes it easy for you and the clients. Remember to change the .ID-CLASS in both the above code and the custom code.

‍

Step 4

Now you can add the custom dynamic CSS directly in the same code block where you added the slug. It can be something like this:

‍

Tips & Notes

Related resources

Code Tricks