Managing Content By Section
Posted on July 8, 2013
Often when we build web sites, the content of the site is organized into sections. Each of the pages for the section share or reuse the same layout and visual elements like a side bar menu to navigate the pages for the section, an image that is common to all of the pages and perhaps a section header.
Example section layout with sidebar menu, image and header
Probably the most common way to organize content into sections with WordPress is to create a unique page template for each section then assign individual pages to the section from the template menu in the page editor. The template file would have all the elements required for the section and the WordPress page data would provide the unique content for the page.
However, a site design will often have the same basic layout for all pages regardless of section, with only a few elements changing between sections. In this case, having a separate template file for each section may be redundant. Multiple template files can make updating the site more cumbersome in case there is an HTML coding change requiring a recoding of the template file for each section. Also each template file would typically be ‘hard coded’ with the elements of the section and not accessible for change from the WordPress back end editor.
Alternative to Multiple Template Files
Another way to manage sections with WordPress is to store the elements of a section in a custom post type. We can make use the regular ‘post’ fields such as title and featured image as well as meta fields to further customize the elements of each section. Once we’ve established the elements of the section, we assign a given page to the section and add code to theme templates to display the page’s section elements along with the page content.
So, instead of creating a new template file for each section, which basically requires copying and pasting redundant HTML and WordPress template code, we create the section as a section post type and define the section elements with the editor.
Editor for section post type
The example above shows the editor for the section post type, making use of the title, excerpt, and featured image fields. We can also add meta fields to store additional elements, such a select menu as enabling a user to choose an existing sidebar menu for this section.
In the editor for pages, we can add a meta field to allow us to assign the page to a section.
Page Editor, add meta field to assign page to a section
In a recent project I needed to organize pages into sections so that all pages within each section shared an image, sidebar and header. I set up the site in the following way:
- Created a ‘section’ post type. I used the title field to store the section header title, the excerpt field for any introductory text that might be shared across each page in the section, and a featured image to store the sidebar image shared on all pages in the section. I also added a meta field, named
menu_id, that allows the user to select a sidebar menu from a list of existing menus, which stores the selectedmenu_idin a meta field for the section. - Added a meta field, in the page editor, named
section_idthat allows the user to assign the page to a section. This stores the post id of the selected section in thesection_idmeta field for the page. - Added code to the sidebar and page templates that gets the value of the current page’s
section_idmeta field. After establishing the post id of the page’s section, I used WordPress template tags to print the elements of the section into the template. I usedget_the_titleto get the title of the section,get_the_post_thumbnailto get the featured image for the section andwp_nav_menuto print the sidebar menu for the section. Since themenu_idis stored as a meta field for the section, I needed to callget_post_metawith the section post id to retrieve the menu id then usewp_nav_menuto print the menu.
If your theme has a layout that is the same across sections, with just a few elements changing between sections, then this approach gives more flexibility because you can use the editor to manage the elements shared by a section, compared to recoding hard coded elements in multiple template files. It also makes it easier for a non technical or non HTML coder person to edit a section or add a new section to the web site without needing to modify or create new page templates.
On the other hand it may not be appropriate for all cases, especially if there are lots of visual and layout changes between sections. In this second case you may prefer to use the multiple template files approach. Fortunately, we have multiple ways to choose from and decide the best option for the situation.
