As of May 31st 2018, Oxygen v1 is no longer available. Visit for Oxygen version 2.

Getting Started Guide

Installing OxygenDesigningFrom ScratchDesigning with pre-built componentsRe-usable headers & footersTemplatesCreating a basic templateDesigning for dynamic contentPluginsInserting plugin outputStyling pluginsCommon TasksDropdown menusSliders
Learn OxygenGetting Started


Templates allow you to use the same design in multiple places.

To create a template, go to the Oxygen > Templates screen in the WP admin and make a new template.

Choose where the template applies, or choose Other Template to apply the template to pages manually.

Creating a basic template

Create a template that applies to all Pages by choosing Single and then checking the Pages box.

Open the template in Oxygen. Add in a header and footer.

Between the header and footer, add the Inner Content component from Add+ -> Fundamentals.

To create a page that uses this template, go to Pages -> Add New to create and save new page.

By default, the Inner Content component will display the standard WordPress post content field. To design the inner content with Oxygen, choose Design inner content with Oxygen and save the page. Then click the Edit the inner content for this page to design the inner content with Oxygen.

By default, a Code Block will appear to render the WordPress post content. You can delete this and design the inner content yourself.

Creating a template to display dynamic content from the WordPress database

To design singles, archives, custom post types, or custom plugin pages with Oxygen, create a new template and choose where you want to apply it.

Using the Add+ -> Fundamentals -> Code Block component, you can write the PHP code necessary to display your dynamic content. This PHP code could contain the WordPress loop, calls to get_post_meta, or any other WordPress API functions. This code will behave just as it would if you wrote it in a standard WordPress template file.

Using the Add+ > WordPress -> Shortcode component, you can input any shortcode. For example, many custom field plugins provide shortcodes to output the values of the fields they store.

Using Add+ -> Design Sets -> WP Basics, you can find pre-written code blocks to display common dynamic content like blog posts, comments, and WooCommerce products.

Use the Preview dropdown to see a list of all content your template could apply to and preview your template with that content inside of Oxygen.

Creating Custom Fields & Post Types

Oxygen lets you create your Custom Fields and Custom Post Types using any method you like - Advanced Custom Fields, CPT UI, Toolset/Types, Pods, WCK, etc. The choice is yours.

Once you've created your post types and fields, create templates that apply to those post types with Oxygen.

Then insert code blocks or use the shortcodes provided by the plugin to display the post fields.

Next article »