Oxygen’s Inner Content Template Explained

In the Oxygen Facebook group a user asks:

What’s the benefit of having a separate template for “Inner Content” over just “Main” which contains header, inner content and footer? I noticed this is how some of Oxy’s library is set up.

TLDR; Inner Content Template controls the layout of the content that comes from the WordPress editor and is useful when a singular entry is not built with Oxygen.

Details follow.

Let us take a typical website build with Oxygen where the homepage should be static with the blog posts index at /blog.

Here are the steps:

1. Set pretty permalinks structure like Post name.
2. Create “Home” and “Blog” Pages.
3. Set Home as the Homepage and Blog as the Posts page at Settings > Reading.
4. Assuming we are doing a blank Oxygen install, create a “Main” Catch All Template having the sitewide header, Inner Content (component) and a sitewide footer. Screenshot of the structure.
5. Edit the “Home” Page with Oxygen and add 1 or more Sections.

At this stage, the homepage might look something like this:

Notice that the sections go edge-to-edge of the browser with the section’s content contained in the section’s inner wrap’s max-width.

Now when you check the “Sample Page” on the frontend, it might look like this:

Notice how the text goes edge-to-edge which is undesirable. And this is only exacerbated for ultrawide displays. Ideally text such as this which comes from the WordPress editor should be constrained to a specific width so it is readable.

So how do you tackle this?

You could go back and edit the Main Template, add a Section and move the Inner Content component inside that Section. While that fixes the issue with the layout of Sample Page, it will affect the homepage by making the sections not full-width anymore.

We need a way to influence only the layout of pages whose Inner Content comes from the WordPress content and that is exactly the purpose of Inner Content Template!

With the Main Template back to having header, Inner Content (at the top level and not inside a Section) and footer go ahead and create a new Oxygen Template named say, “Inner Content”.

Set it to NOT inherit from any other Template and set it to apply to Inner Content.

Add a Section, then the Inner Content component and move the Inner Content component inside the Section.

Now refresh the Sample Page and it should look like this:

and the homepage will continue to have full-width sections.

Summary:

Inner Content Template is handy for controlling the layout of content that Oxygen outputs from the WordPress editor.

What we covered here is essentially from the following video, a must-watch for anyone building sites with Oxygen:

Bonus Tip: Changing the Inner Content component’s parent Section’s padding does not apply or work on the frontend in the true spirt of Oxygen’s long-list of annoying bugs. So at the moment the fix is to add this sample custom CSS:

#section-1-16 .ct-section-inner-wrap {
  padding-top: 40px;
  padding-bottom: 40px;
}

where section-1-16 is the ID of the section in question.