How To Add Blog Categories In Webflow

STEP 1.

Collection list
.container

Collection List Wrapper

Preparing Item structure for future filtering

To filter our Dynamic content, each Item in the Collection need to have some sort of Category, that we can use for creating a specific combo-classes (selectors) in a further steps.

For this purposes you can use:

eitherReference field (if your categories are dynamic too)

orOption field (if categories are static).

‍

You can also create a several categories fields, if one Item in your item may belong to several categories.

‍

Important!: Do not use Multireference field for this plugin purposes, it is not gonna work.

As I mentioned in a "Basic Filtering and Sorting" tutorial, MixItUp function will look for a div with the specified selector name and filter elements inside of it that matching the selector.mix, so give classnames to the Collection List and Collection Items accordingly.

TIP: More detailed layout structure was described in the "Basic Filtering and Sorting" tutorial.

Turning "categories" in to combo-classes

For creating specific selectors from categories, first we have to add any typography element inside the .mix Item, give it class .categ (or any other classname that you need/want), and bind it to the Category field from the collection item.

After that, we will include a specific code snippet in to the custom code area before the closingtag, in the page settings.

‍

This snippet is checking each collection item for the child element with selector name .categ and converting text from that element into a class name (accordingly to a CSS rules). Then, newly created class getting applied as a combo-class back to the closest ancestor element with class mix.

Important: This code snippet also covering situations when category contain more than one word. For example, category "Greatest hits of 80's" will be converted to agreatest-hits-of-80-s.
‍

elem .closest(".mix") .classList.add(className);

In my tutorial example I used categories: filter-1... filter-5 and created classes accordingly.

TIP: If in your design/structure a category element should not be visible on the item, simply set it to display:none

‍

STEP 3.

.mix

Designers Who Changed the Web

.mix

Web Design Blogs You Can't Miss

.mix

The History Of Web Design

.mix

Best Examples of Beautiful Blog Design

.mix

Quick Tips About Blogging

.mix

Tools For Web Designers

.mix

Usability And Accessibility

.mix

7 Things About Web Design Your Boss Wants To Know

.mix

Principles Of Effective Web Design

Turning titles in to Sorting attributes

For creating a specific data attribute for each collection item we can use the method that we used in the previous step. But this time we do not need all process of text's converting, and instead of class name we will apply the data-order attribute to the parent element.

‍

Now we have all required parameters for filtering and sorting being applied to our CMS content.

STEP 4.

.mix

Designers Who Changed the Web

.mix

Web Design Blogs You Can't Miss

.mix

The History Of Web Design

.mix

Best Examples of Beautiful Blog Design

.mix

Quick Tips About Blogging

.mix

Tools For Web Designers

.mix

Usability And Accessibility

.mix

7 Things About Web Design Your Boss Wants To Know

.mix

Principles Of Effective Web Design

Building Controls

Controls for this example will be build similar to Basic Filtering and Sorting tutorial:

create buttons with .filter_button class for filters and.sort_button classe for sort
apply custom data-filter attribute to each filter button
data-filter=".filter-1"
....
data-filter=".filter-5"
data-filter="all"
apply custom data-sort attributes to the sort buttons.
Since we useddata-order attribute for the our items, will need to use values order:asc and order:descending accordingly.

STEP 5.

Open this example in a new tab

This example above is fully functional, feel free to try Filtering or Sorting.

Connecting and Enabling MixitUp library

Similar to the example with Basic filtering, we have to include that link to the MixitUp library and few lines of code that are enabling MixitUp function on the container via <script> </script>tags before the closing tag into the page custom code area.

Full code will look like this:

‍

Now our "mixer" with dynamic content is installed and ready to use. 🎉🎉🎉🎉🎉🎉🎉🎉🎉