This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Whenever you see a theme that has things like a blog, portfolio, our team, etc, that is a collection of content that is being looped through from the database. With Mura CMS, you can easily create collections of content, and output them on any page.

In this tutorial, we are going to create a collection of team members for a website.

Create New Folder

Create a new folder called Team Members in your site manager:

Note: Make sure the Navigation is set to "No" since we are just using this folder as a repository for our team members.

Local Index for the Team Members

Create a Custom Method

This is where we are going to create our iterator from the Team Feed, and loop through the output. Similar to the Custom Methods tutorial, we need to open up the theme contentRenderer.cfc and create a new function:

The first thing we need to do is tell Mura which feed we want to iterate from:

<cfset feed=$.getBean('feed').loadBy(name='Team Feed')>

Next, we need to set a new iterator, using the feed source:

<cfset iterator=feed.getIterator()>

We only want the markup to show if content actually exists in our feed:

<!--- Only display the following if there are items in the iterator --->
<cfif iterator.hasNext()>
<!--- Looped Content Here --->
<cfelse>
<div class="alert alert-danger">Sorry, your feed has no items</div>
</cfif>

Adding the Feed to the About Us Page

On a typical 'About Us' page, you might have a short blurb about the company, and then display the custom function within the body:

When we publish and view the page, you should see the team feed being output:

And, with a little bit of CSS magic, we can easily style this output to be a bit more pretty:

There are a lot of use cases to use the Mura Iterator to build your themes. The great thing about Mura Iterators is that it give the user control of the content, while displaying in your own theme markup.