By combining the Dynamic filter with dynamic pages, you can create list pages that narrow down articles by category. This article explains how to create a category-specific article list page. We'll also cover how to create a list page that displays all articles.
Point: What is Studio CMS?
Studio CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content within Studio.Design. By combining models, items, and properties, you can centrally manage frequently updated content such as blogs and news articles.
For more on how Studio CMS works and the basics of using it, see the following articles.
What Is a Category-Specific Article List Page?
A category-specific article list page automatically narrows down and displays only the articles that belong to a specific category. This helps visitors who only want to see, for example, event-related articles, so they can quickly find the information they're looking for.
Linking to these pages from your homepage or article detail pages encourages visitors to explore more of your site. This can also increase time spent on your site and improve SEO performance.
Example from Studio Showcase: There are list pages for each category, including "Events," "Blog/Media," "Portfolio," "Corporate Services," and "Stores/Products."
You create a category-specific article list page by placing a CMS list on a dynamic page and narrowing it down using the Dynamic filter.
Point: Studio CMS Features
What Is a Dynamic Filter?
The Dynamic filter automatically narrows down the items displayed in a CMS list placed on a dynamic page. The filter value automatically changes based on the CMS item currently shown on the page.
What Is a Dynamic Page?
A dynamic page is a special type of page that automatically generates content based on connected data, such as Studio CMS.You can use it to manage and publish content that needs regular updates, such as articles, job postings, and event information.
Before You Start
The steps in this article assume you've already created your CMS article content. Make sure you've completed the following:
In the CMS dashboard, create an article-type CMS model (the article model) and CMS items (the article items).
In the design editor, create a dynamic page (the article detail page) linked to the article model.
For an overview of the full process—from creating CMS articles to publishing them—see the following article as well.
Creating a Category-Specific Article List Page
To do this, you'll sort your article items into categories and place a CMS list on a dynamic page connected to the category model.
Tip: If you want to display all articles
A list page that displays all articles together is built differently than a category-specific article list page. For details, see Creating a List Page That Displays All Articles.
Step 1: Sort article items into categories
Use a reference property to assign a category to each article item.
Following the guide Studio CMS Property Examples: Adding Categories or Tags to Article Items, create a category model.
Add a reference property to your article model that references the category model.
Assign a category to each article item.
Note: Add the reference property as a single-select
If you add the reference property as a multi-select, [Dynamic] won't appear as an option under [Filter condition]. If you want to use the Dynamic filter, be sure to add the reference property as a single-select.
Step 2: Add a dynamic page
Add a dynamic page that will display the article list for each category.
In the design editor, add a dynamic page.
For the CMS model linked to the page, select the category model.
A category-specific article list page will automatically be created for each category item.
Step 3: Place a CMS list on the dynamic page
Place a CMS list linked to the article model onto the dynamic page you created in Step 2.
Open the dynamic page you added in Step 2.
In the left navigation, select the [Connect] icon to open the Connect panel.
Under [CMS], click [List] for the article model.
For the CMS model linked to the CMS list, choose the same model as the article-type model you're targeting.
Step 4: Set up the Dynamic filter on the CMS list
Set up the Dynamic filter so the CMS list narrows down the articles to match the category currently being viewed.
Select the entire CMS list on the page.
In the right panel, select [Data]. If the panel is closed, open the right panel first.
Click the [+] next to [Filter] to add a new filter.
From the dropdown list, select the reference property under [Model].
Under [Model], select the reference property you added in Step 1.
For [Filter condition], select [Dynamic] (the Dynamic filter).
If you see "URL query set," click the chain icon
(set values individually) first, then configure the setting in the input field.
Step 5: Adjust the CMS list display settings
Adjust how many items the CMS list shows and how it's laid out.
Number of items shown: The default value for [Number of items] is "2." Adjust this based on how many article items are in each category. For details, see Number of Items Displayed.
Empty state: You can set what displays when there are no matching articles. For details, see Empty State.
"Read more" button: You can add a button that loads additional articles. For details, see Read More Button.
Layout and appearance: See Box Layout Settings and Box Appearance Settings.
Step 6: Set up navigation to the category-specific article list page
Link the category label on your article detail page to the category-specific article list page.
Following the guide Studio CMS Property Examples: Displaying Categories and Tags on a CMS Detail Page, add a category label to your article detail page.
Select the category label, then open [Settings] in the right panel. If the panel is closed, open the right panel first.
Click the [Link] input field and select the dynamic page you added in Step 2.
Step 7: Check that everything works
Open the dynamic page you added in Step 2, then open the Page panel.
Use the selector at the bottom of the [Page panel] to switch between category items.
Confirm that the articles in the CMS list change to match the selected category.
Check the display and links using Live Preview.
Confirm that the items in your article model have a status of "Published".
If your site is already live, be sure to update your site to apply the changes to your published site.
Creating a List Page That Displays All Articles
Here's how to create a list page that displays all article items, regardless of category.
Unlike the category-specific list, you'll create this by placing a CMS list on a regular static page.
| Category-specific article list | List of all articles |
Page type | Dynamic page | Regular page |
CMS list filter | Dynamic filter | Not set |
Step 1: Place a CMS list on a regular page
Build the list of all articles on a regular page, not a dynamic page.
Add or open the regular page where you want to place the list.
Follow the steps in CMS List: Creating an Article List That Links to Detail Pages to place a CMS list linked to the article model and set up links to the article detail pages.
Step 2: Configure display settings
Set the [Number of items] and [Filter].
Select the entire CMS list and open [Data] in the right panel. If the panel is closed, open the right panel first.
Set the [Number of items]. The default value is "2," with a maximum of 100 items.
Don't set a [Filter]. Confirm that it shows "Not set."
Step 3: Set up navigation
Add a text box or similar element wherever you want to place a link to the all-articles list page you created. Choose the placement based on your site's structure.
Open [Settings] in the right panel, then select the page from Step 1 under [Link].
Check the display and links using Live Preview, then update your site from the Publish panel. Changes won't appear on your published site until you do this.
CMS category filter dynamic filter narrow down