Sections and Layouts – PageCells Responsive Framework
Every page is made up of three sections: Header, Layout and Footer. You can create as many different versions of each as you like and then combine them to create the various Templates that WordPress uses to render output on your website.
At the top right of the Theme Options page is a select menu labeled “New…”. Select the type of section you want to add and click the “Add” button. A new tab will appear at the top of the section you chose.
When you add a new Section, PageCells automatically inserts a typical set of Layout Items to make it work. You can then add or modify Layout items, or click the Trash Can Icon next to each Layout Item to remove it.
Selecting Sections to Edit
You can switch between the different versions of each section by clicking on the corresponding tab at the top of each section.
PageCells requires certain Sections to exist, so the default Sections cannot be deleted. For Sections that you create, you can click the red Trash Can Icon on the left side of the section to delete it.
WordPress Default Templates
When someone visits your site, WordPress chooses a Template to generate the output based on the type of request being processed. This is known as the Template Hierarchy and is a core part of the PageCells Responsive Framework architecture. To better understand how you can customize PageCells, you may wish to familiarize yourself with the basic templates used.
Used to display a list of Posts that is not matching any of the below criteria. This is one of the “archive” templates.
Used to display Posts by a specific Author (WordPress User). This is one of the “archive” templates.
Used to display Posts of a given Category. This is one of the “archive” templates.
Used when the requested Post or Page cannot be found.
Used to display the default “Blog” Posts. This is one of the “archive” templates.
Used when no other template is appropriate. This is the only template that is required by WordPress to function.
Used to display an attachment Page (Media). This is one of the “singular” templates.
Used to display a static Page. This is one of the “singular” templates.
Used to display search results. This is one of the “archive” templates.
Used to display an individual Post. This is one of the “singular” templates.
Used to display Posts of a given Post Tag. This is one of the “archive” templates.
How PageCells Uses Templates
To make it possible to completely customize your website, PageCells does not use templates in the traditional way. When WordPress loads a template using the rules above, PageCells then runs a Controller that matches the template to a PageCells layout. It then uses the settings you choose in that layout to generate the page that is displayed to the browser.
Any layout that you create in the Theme Options page is treated like a custom template by PageCells. This means that it appears as an option in the Template Menu on the Edit Page admin screen. This means you can tell WordPress to use your Custom Template to display the page by selecting it from the Template Menu.
With PageCells, unlike traditional themes, you can also use your Custom Templates to display content when any of the WordPress Default Templates shown above would normally be used.
Header and Footer Options
Click the blue Wrench Icon at the top left of the section to open the Section Options panel.
The Section name for Headers and Footers have no other purpose except as the label that appears on the Section tabs. You can use any name that you like.
Click the blue Wrench Icon at the top left of the Layout to open the Layout Options panel.
For Layouts that you create, the Name not only appears as the label for the Section tabs, but also as the name that appears in the “Template Menu” on the Edit Page admin screen.
Each of the Headers appear as options in the Header Menu. Select the Header you want to use for this layout.
Each of the Footers appear as options in the Footer Menu. Select the Footer you want to use for this layout.
Each of the checkboxes represents one of the WordPress Default Templates described above. Select the default templates that will use this layout when they are selected by WordPress. For example, if you want WordPress to use this layout whenever a single Post is displayed, check the “single” box. If you want WordPress to use this layout for your Blog page, check the “home” box.
When you select a template for a given Layout, that template will be disabled on all the other Layouts.
Click the green Paintbrush Icon at the top left of the Layout to open the Page Classes panel. You can specify classes that will be applied to the <body> tag of the page. In other words, you can apply styles to the entire page by entering them here. See Helper Styles for description of pre-configured PageCells Helper Styles. You can also create your own classes using the Child Theme Configurator.
In this video we discuss the Layout Section configuration options, how to set up default WordPress templates and different ways to apply styles to a layout using the PageCells Responsive Theme Framework.