Save 28% - Sale ends in 29 days - Go To Pricing
Editor Enhancer - The Best UI for Oxygen Builder
Post Date: September 8, 2021
Posted In: ,

A Solid, Starter Oxygen Template Hierarchy

Start off with a good template hierarchy and you'll be better off in the long run!

This is a simple template hierarchy that you can use as a core for all of your Oxygen-based builds. Once you have these, you'll have the starting blocks of any website!

Step 0: Global Settings & Dummy Content

Of course, before we begin, it's worth mentioning Oxygen's global settings. I won't go into great depth on globals (I'll save it for another post), but show them some love. Just remember: color palette, typography, and layout. In this post, however, I'll leave that to you.

I do recommend adding "dummy" content in posts and pages before you start. It'll make working with templating much easier to have some default content so you can see what you're making. Lorem ipsum, random image generators. Take your pick and take your time. Make the dummy content long enough to work with.

Template 1: Main

The Main template is the core of every page on your website. Components in this template will show up on every page and post, every archive and page - it's the wrapper of the operation. Think headers, footers, and modals.

First, create the Main template and open Oxygen Builder's editor. We'll add three top-level items here.

  1. Header: Build your site's header.
  2. Inner Content: Some may prefer to wrap this in a Section component, but I don't think it's necessary; rather, it's somewhat limiting if you decide to open up some sections later.
  3. Footer: Typically includes a directory of pages, newsletter signups, and social buttons. Don't forget copyright!

Template 2: Post/CPT - Single

You may not plan on doing any blogging, but you may have one or more custom post types (CPT). This template does not include pages - those will come later. When you create a template from here on, make sure it inherits the Main template. This will mean the Main template will wrap around this one!

WordPress default posts typically have the same layouts between them. In other words, they share a common template. Back in Oxygen templates, create a new template for each post type and name it "[Post Type] - Single", where Post Type is its name. Examples would be:

  • Post - Single
  • Service - Single
  • Product - Single

Whatever post types you have, create a separate layout for each unless they are absolutely identical.

With Oxygen Builder open, add the template's scaffolding - that is structure and components that make up the building blocks of the template.

If you have a sidebar that will be used on various other templates, but not others, then you can convert it into a reusable part for later. Give it a descriptive name, maybe identify where it lives. Will other templates build off of it? Add another inner content component and let them inherit this one, which will bring Main with it.

Template 3: Post/CPT - Archive

With your single templates out of the way, it's now time to work on archives. Not every post type needs an archive, so think about what needs to be displayed as a collection. Lay posts out how you want with either an Easy Posts or Repeater component - whichever is appropriate for your use case. Just like above, don't forget to inherit the Main template!

One great thing about a solid archive page is that it can be used as a base for other items, like categories, tags, and search results. Of course, you can always make different versions and switch them out with template precedence.

Template 4: Pages

Finally, we've reached pages. While technically pages are a post type, they often have very different purposes. For example, the about page's purpose is to teach about the company, organization, or person, while the contact page is served specifically for lead generation. This differs from posts, because posts generally share the exact same template.

If that is true for your case, then you'll create your page designs on the pages themselves. I find this works out best and makes for better content management. Once again, be sure to inherit your Main template.

In another case, perhaps you have a call to action (CTA) that you want on your pages and nowhere else. Create a new template called "Page - General," which inherits the Main template. Open this template and add another Inner Content component and your CTA. Then, you can use this and apply it to every page before you edit them.

Template X: Other Considerations

That's it! With those key templates, you're on your way to making a great website with an organized template structure. But don't think you're done just yet. There are a few other templates you can create if you find them important enough, like:

  • 404 template
  • Search results
  • Reusables (for style/sanity)

They may seem trivial but sometimes they're worth it. Everyone makes a typo now and then and a good 404 could be the difference between a prospect dropping off or converting.

Wrapping Up

Certainly, templating can get far more complex from here. A solid foundation built around consistency makes it easy for you to test and improve your website over time.

Manage All Component Styles

The Style Flow feature of Editor Enhancer makes managing applied styles a breeze! See a component’s styles in a grid format - organized by selector, breakpoint, and pseudo. Surgically delete unnecessary styles, too! Check it out here.

Style Flow
Style Flow grid in Oxygen Builder editor

Liked this? Check out another of my posts:

Enhance Your Workflow

Get flowing with Editor Enhancer's suite of extensions and settings that immediately improve your workflow and editing environment.
Get Access Now

Reach out and say "hello!"

Join the Facebook Group
Editor Enhancer - The Best UI for Oxygen Builder
2023 Editor Enhancer. All rights reserved.