Creating a Page Type
Page types are a powerful and flexible way to organize your site’s content. In this step, we’ll show you how to set up a basic page type for a staff directory where each staff member has their own page.
Create a New Page Type
A page type allows you to create different types of pages that have different structures. For instance, we want each of our staff members to have their own page, but we have very specific data we want to show for each member. For this example, we want to have a short bio and an email address, but we could have all sorts of needs like images, etc.
To create a page type, go to Content → Pages and select Page Types in the sub section menu.
Click on New Page Type in the top right hand corner. We’re going to make a new Staff page type, so in the form that comes up, name it "Staff":
Don’t worry about what all the other options are on the site, just click over to the Layout tab. This is where we define the markup for our page. (This is wrapped in our theme layout so we don’t need to worry about things like the header and footer).
We are going to create two fields:
- Bio
- Email Address
Our page type layout is where we define how our page type fields are displayed, so we put the tag syntax in there for them: Add this into the layout textarea:
<h2>{{ title }}</h2>
{{ bio }}
{{ email:safe_mailto_link }}
Basically, this says to display the title of the page, then the bio, and then the safe mailto link that is a feature of the email field type.
Add Custom Fields
Now we’re going to actually add some custom fields to our page type. After you create your page type, you’ll land on the page type field page, where it’ll tell you that you don’t have any fields yet. To solve that, create one by clicking + New Field at the top right hand side. You’ll get a new field form. To start, let’s create our bio field by entering Bio for the name.
You’ll get some options that are unique to the WYSIWYG field type. Set them like we have in the image below:
Do the same for your Email field (using the email field type), and you’ll have a list of fields set up for your page type!
Add a New Staff Page
Now we’re ready to create a new Staff Page. Go to the page tree under Content → Pages, and choose + New Page from the top right hand corner. This time, since we have more than one page type, you can choose which type of page you’d like to create!
Choose Staff, and you’ll get your new page form, but under our Page Content tab, we’ll have our page type custom fields, complete with our instructions and all!
Create your staff page, and then visit it on the front end. PyroCMS will use the layout we set in our page type to display our custom fields the way we want to.
This is a great way to allow clients to create pages themselves while making sure that you have control over the markup and display of the content. You can add as many fields as you like, and they range from simple fields like text and textareas, to images, dates, and more!