Building Our Content Model - Channels, Adding Content & Publish Layouts

<<Previous Lesson       Next Lesson>>

In the last chapter, we created the bulk of our Content Model, but we can't add any content to those fields until we connect those Fields and Field Groups to Channels to create actual Entries. In this chapter, we'll tie everything together by creating the Channels so we can create content to pull through in the templates.

In This Article:

Step 1 - Create Our Channels

Because we've done all the groundwork, this step will go pretty quick. The general steps to creating a channel are:

  1. In the Control Panel, go to Developer > Channels and click the blue New Channel button in the top-right to add one

    Create new channel

  2. For each Channel, enter the Name and note the Short name is automatically generated (just like the URL Title default field when creating Entries)

    Channel name

  3. If desired, you can set a maximum number of entries, which we'll do for the Homepage, About, and Contact Channels

    Max channel entries

  4. Note you can also 'Duplicate an existing channel,' which essentially pre-selects all the same settings, but you can always adjust those individually later

    Duplicate channel

  5. Progress through each of the tabs at the top to configure each Channel:

    Channel settings tabs

    • Fields tab: Rename the default Title field label if you wish and assign Field Groups and/or individual Fields. You can also add new fields directly from this tab if you haven't pre-created them, which we'll do for our Homepage Hero Carousel
    • Category tab: Assign a Category Group (which we'll do for our Work Channel)
    • Statuses tab: Set which Statuses can be used and create new ones if needed
    • Settings tab: Holds many other advanced Settings - we won't be looking at these in this tutorial, but feel free to take a look to get an idea of some of the features EE offers out of the box. Maybe I'll do some more advanced tutorials later

Following the steps above, go ahead and create all of our Channels:

Homepage Channel

About Channel

Services Channel

Contact Channel

Work Channel

So now we have all our Channels set up and ready to start adding content! By now, you should be pretty familiar with the Fields, so let's go ahead and add some content.

Step 2 - Adding Content

The primary way to manage Entries in EE is through the Entries option in the main menu. When you hover over Entries, you'll get a flyout with options for each of our Channels where clicking on the name of each Channel takes you to the list of all Entries in that channel that you can edit and clicking the + button next to the name will create a new Entry in that Channel. If the Channel has reached its maximum number of Entries, you won't be able to add a new one, but of course, you can still view and edit existing Entries:

Entries menu flyout

NOTE: You can also create new Entries when viewing a list of Entries in a specific Channel using the blue button in the top-right:

New In Work button

Adding the Homepage

  1. Hover over Entries in the main menu and click the + next to the Homepage Channel, and you'll see an empty Publish form
  2. Set the Title to "Home" and note the URL Title is auto-generated
  3. Add a Page Heading and some text to the Page Intro field, noting you can use the Rich Text tools
  4. The Hero Slider Grid field lets you drag multiple images from your computer into the 'drop zone,' and it'll create one row in the Grid for each. Add some photos (noting the ideal image size we set in the Instructions), then set the Headings and Text for each. You can also rearrange the rows by dragging & dropping using the Reorder button button, delete rows using the Delete buttonbutton and add new rows by either dragging and dropping another image into the 'drop zone' or with either the Choose Existing or Upload New buttons:

    Choose Existing and Upload New buttons

  5. In this case, we don't need any of the other Fields in any of the other Tabs, so just save the Entry using the Save button

    NOTE: No changes will be made to the database unless you click the Save button or one of the options under the Save dropdown!

Adding Work Entries

Follow the same steps above to create several Work Entries, adding new Entries via Entries > Work. Things to note as you do this:

Don't spend too long on this - just use a bunch of dummy text as the content you add isn't important here - we're just filling up the content so we have something to output to the templates in the next chapter.

Adding the Other Pages

Go ahead and do the same thing to create all of our other pages:

  1. "Contact" page
  2. "About" page
  3. "Services" landing page - for the landing page, remember to set the 'Default Page' Status on the Options tab
  4. Each of the 3x Services sub-pages:
    • "Graphic Design"
    • "Web Development"
    • "Digital Marketing"

Again, don't worry too much about the content itself; just get content in there to have something to output. When adding the About page, go ahead and add at least one of each of the individual fields to our Page Builder Fluid Field so that we have all of them present on one page, which we'll focus on when building out the templates for the Page Builder. Feel free to re-use individual fields like Rich Text and Rich Text & Image but with different options selected.

Using the Page Builder Fluid Field

While adding content to the About and Service pages, you'll notice the Page Builder field is empty. Remember, a Fluid Field lets the content editor add content by adding individual fields in whatever order they want. Remember, we set up several individual fields that we made available to our Page Builder. To add content, use the Add dropdown, and when you click it, you'll see you can choose from the individual fields we set up to be accessible here. Here are some tips on using a Fluid Field:

File Manager

You may have also noticed that wherever we have File or File Grid fields, you have access to the File Manager, which is where you upload images and documents, but it's worth noting a few things:

Conflicts When Uploading Files

If you ever try to upload a file (whether it be an image or document) to any directory where that exact filename already exists in that directory, you'll get a 'conflict,' and you'll have to resolve it using one of three options.

File upload conflict

Let's say we were uploading the file koala.jpg, and it already exists in the directory we're trying to upload to. The options are:

If there's a conflict when dragging & dropping files into the 'drop zone' of a File or File Grid Field, you'll have to click the Resolve Conflict button to launch the popup where you can decide how to resolve it:

Drop zone conflict

NOTE: Following on from above, it's good to consider your file names before you upload them, particularly for files that might ever need to be updated. For example, Menu-July-2020.pdf is a bad choice because as soon as you have to update the file, you'll also have to go back through the site, update all the links to it, and search engines that had indexed it will be linking to an old file. It also does not indicate where it's from or what kind of menu it is. Instead, consider something like Restaraunt-Name-Current-Dinner-Menu.pdf, which you can just replace as necessary but without ever changing the public URL.

Step 3 - Publish Layouts

In previous steps, we've created Fields and Field Groups and then assigned those to individual Channels to establish what Fields are available when adding or editing Entries. However, depending on how and when you created and assigned various Fields, you may have noticed that the Fields might not be ordered in a logical way for your content editors. Additionally, you will undoubtedly add fields over time, and new Fields are just added at the bottom of the list, which may not be ideal. Generally speaking, it makes sense to order the fields in a Channel in the same order they're utilized in the output on the page.

Publish Layouts let us optimize the editing experience by reordering Fields available to each Channel and grouping fields into tabs. By default, EE Channels have 4 tabs we touched on in the last step:

However, these can easily be customized on a per-Channel basis. How you do it is up to you, but your goal should be to give the best editing experience to your content editors.

To create or edit Publish Layouts:

  1. Go to Developer > Channels in the main menu, then use the Layouts button button towards the far-right of any Channel to view or edit the Publish Layouts for that Channel
  2. To start with, there won't be any Layouts, so click the blue New Layout button to create a new one, then name your Layout (which is for your reference only - editors don't see this) check the Super Admin role:

    Publish Layout name and role

  3. Below that, you'll see the default Tabs at the top, and any Fields assigned to the Channel in the default 'Publish' tab

    Publish Layout tabs

Make whatever changes you'd like, such as:

  1. Once you're done, save your Publish Layout with Save and repeat for each of your Channels

NOTE: You can also set up different Publish Layouts for different Member Roles if you have different types of CMS users. We aren't covering that in this tutorial, but it's worth being aware of.

What's Next?

At this point, we have our Content Model built out in ExpressionEngine and have created our Channels and Entries in those channels with actual content. The next step is to build out our Templates, which is how EE outputs the content to the browser when certain URLs are requested. Templating is where we actually start seeing things come together, so let's get started!

Justin Alei's avatar
Justin Alei

Justin is an expert in ExpressionEngine and has created several award-winning sites for Consumer51 on the platform.