We’ve already mentioned how we want to reuse the header and footer of the Dreamrs theme across all page templates. But what will that header and footer contain, and how will it be built?
Header
Our header is pretty simple. We have a logo (marked on the left) and a navigation element on the right.
Logo
Historically, we’ve shown off different approaches for dealing with logos in headers: the Elemental theme includes the logo in a shared global area, while in the past we may have given the logo block a custom name, retrieved the block based on its name and displayed in dynamically in the header.
Let’s not do any of that here. Let’s just hard-code the logo into the template, and include it as an image in the theme’s images/ directory. Why? Simply put, in the real world, companies aren’t changing out their logos dynamically. This reality significantly simplifies logo placement. You don’t need to use dynamic rendering for every single visitor just to display a logo.
Navigation
The same principle also applies to navigation, so we have frequently hard-coded header navigations within themes. Historically, we’ve built these dynamically using the Auto-Nav, but the Auto-Nav is easy to misconfigure, and can be a bit of a performance hog. It’s really best suited to dynamic sidebar navigations and full dynamic sitemaps. It’s overkill for header navigation that rarely changes.
That being said, I’d rather get some dynamic activity out of the header navigation than simply hard-code it. Hard-coding is a fine option here, but let’s stretch our wings a little bit. Instead of hard-coding, we’re going to use the built-in Concrete CMS PHP Concrete\Core\Page\PageList class to dynamically generate the navigation. This will give us the dynamic output of the Auto-Nav block, but with better performance.
Footer
The footer is not quite as simple as the header. The top and bottom elements in the footer are easily hard-coded into the theme (the Dreamrs logo at the top left and the copyright text at the bottom). Let’s hard-code that while taking care to ensure that we make the copyright year dynamic -- nothing more embarrassing than showing a copyright year that’s out of date!
The four columns are a bit of a different case. While they’re not likely to change often, this is the type of content that you want to allow your editors to change. It’s global to the entire site, however, which is why we’re going to make these columns editable Global Areas; that way, the content within them will be editable through the CMS, but need only be edited once.
Let’s just put content blocks inside the first three columns, and for our newsletter in the rightmost column, let’s place a simple embed code from a third party provider like Mailchimp.