Introduction
Oxygen is a website builder for WordPress. It installs as a plugin, disables the theme, and lets you build up your site more or less from scratch. For various reasons that I explain below, I felt it was time to give Oxygen a full fledged test and use it on a production site in order to fully understand the pros and cons of the tool. I have only through the first stage of building a site with Oxygen but I decided that I should go ahead and document it as I go along so that I don’t forget anything important.
I created a video that pretty much walks-though the process from just after a first install through to the creation of the basic templates such as you might get with a theme. The video is long and it would take hundreds of screenshots to create a full text version, as I usually do. I apologize to those who prefer a text version, but it was not practical in this case. Instead, I’m outlining the steps and providing the links and code mentioned in the video.
There is a post with the code snippets used in building the site and another post (forthcoming) with video that summarizes what I learned and my assessment of working with Oxygen. People who are just interested in my opinions on the topic should read that post (forthcoming). Those who watch the video through will more fully understand the findings.
The second stage for the site I created in the video will be working with dynamic data, something that I am very interested in, so there could be more Oxygen-related content in the future.
Video Version
In the video I recreate the actual WPDynamicToolbox.com website on localhost.
Background and Why Oxygen Now
I purchased the incredibly inexpensive $99 lifetime package a year and a half ago. Like many others, the purchase was kind of a hedge or bet on the product improving and the price going up. At the time, I didn’t know if I would ever actually use Oxygen, but the product has steadily improved and the price has increased slightly.
I am very interested in WordPress theme builders and in tools for working with dynamic data. Oxygen is pretty powerful in that regard. I first looked at Oxygen back in 2018 shortly after purchasing it and created a review not so imaginatively titled “Oxygen: What is It?” I looked at Oxygen again in April of 2020 as part of a series on page builders and Custom Post Types. However, in that review I wasn’t really concerned with building a site with Oxygen or digging into all of the details, but just in looking at how it worked with Custom Post Types.
I have been a member of the Oxygen Facebook group and other Oxygen related groups in order to follow the project. As something of an outside observer, I noticed a change in the type and tone of the posts, especially in the last year or so. When I purchased Oxygen there were raving fans and some frustrated or lost users. Now I see lots of people actually building sites and I sense that the fans no longer feel like they need to defend the product. In other words, it seems that the project has come of age. I was feeling that it would be a good time to build a site with Oxygen in order to get a better understanding of the tool. I recently started a new Facebook group focused on WordPress dynamic data, Custom Post Types, custom fields, and the associated tools. I’m sharing the videos there for discussion, if you want to join in.
First Steps – Pre-Oxygen
I had originally planned to work on a staging site and upgrade an existing inactive blog site in the process. However, Davinder Singh Kainth, of Smart Web Creators fame, suggested that I create a website to go along with the new Dynamic WordPress Facebook group. That was obviously a great idea. So, I got a domain name and got started. After completing the first stage I immediately published a tutorial on that site, but quickly realized that I had deviated from my original intent. I did not want to create another tutorial site, but instead wanted to provide resources on working with WordPress dynamic data. I mention that now because I migrated the initial site to a new domain name, “WPDynamicToolbox.com,” that better fits its purpose.
Setup Hosting and New WordPress Install
I am hosting my sites using an UpCloud VPS managed through RunCloud. I added another WordPress site using the RunCloud dashboard as described in my walk-through using those services.
Delete Installed By Default Plugins and Themes
I deleted the Hello World and Akismet plugins and then all but one core theme. I always keep one core them as WordPress will revert to it should your other active theme become corrupt. Oxygen doesn’t use the theme, but generally speaking, having one installed is required. I kept the 2021 theme because it is the newest one.
Install Backup and Security Plugins
Next I wanted to install backup and security plugins. I really like BlogVault for backups because it is very reliable and just works. My BlogVault plan includes the MalCare firewall and malware scanner. The malware scanner has proved to be a good tool and alerted me before when my site was hacked due to a vulnerability in some plugins. However, I’ve not felt that the MalCare firewall is aggressive enough. WordPress sites are impacted by a lot of bot churn and I want to have my sites locked down more than it provides. For that reason, I also use WebARX firewall, which does a more thorough job. One of the things I like about WebARX is its online portal and the fact that I can enable Two Factor Authentication on my site and if needed I can disable that from the online portal. The WebARX activity logs are also good. Alas, I don’t think there is any “perfect” WordPress security tool, as WebARX lacks malware scanning. So, the two solutions seem to complement each other.
Go Through Admin Settings Menus
WordPress tries not to have too many settings, but the ones it does have can be important. So, I went through the Admin / Settings menus and set all of the options. I made sure that the site URL was on HTTPS, set the time zone and date/time formats, set the Permalinks to Post Name, and so on. I renamed the “Uncategorized” category to “General” as Uncategorized is just awful. This would have been a good time to add to the .htaccess file rules to force the connection to SSL. Yikes, I forgot to do that and later had to install the Better Search and Replace plugin to fix a mixed content issue.
I Don’t Install a Default Set of Plugins
In years past, I used a “starter site,” or a preconfigured site that I would import to begin building. It would have the theme, child theme, and plugins that I regularly used. However, I do a lot of testing and it didn’t seem to make sense any more as I no longer have just one set of themes and plugins. Also, I stopped automatically installing a set of plugins about six months ago when I started noticing that I had plugins installed, such as Elementor addons, which I never ended up using. So, my policy now is to only install the plugin at the point in time that I’m ready to use it.
Install Advanced Scripts Plugin for Managing Code Snippets
Step four, I next installed the Advanced Scripts plugin. It is along the same lines as the Code Snippets plugin in that it allows you to add PHP, CSS, and JavaScript code without creating a plugin, but has some nice advanced features. I find adding snippets via the WordPress admin more convenient than creating a plugin. For those who are interested, I created a post with the list of code snippets I’m using on this site.
Watch Some Oxygen Tutorials Before Starting and Tour the User Interface
When I created my previous Oxygen reviews there was a list of a dozen or so video tutorials recommended to watch before starting on your site. I check the Oxygen site and that no longer exists. The good news is that Oxygen has a very extensive YouTube library, which is a benefit for site builders. I wasn’t sure where to start and Sridhar Katakam, founder of the Oxygen tutorial website, suggested that only one was required before starting, and that was the templating or “theme builder” video. I had watched this before, but went through it again before starting. In addition to watching this video I recommend, after you install Oxygen, to go through all of the menus to familiarize yourself with where things are. I would also recommend taking a look at all of the elements and settings that you can using in building a site that are available in the Oxygen editor. I look at these things briefly in the video version of this review.
First Steps After Oxygen Install
When you first install and activate Oxygen you get a welcome screen that asks you to choose whether you want to start with a premade website or a blank installation.
Oxygen recommends starting with a premade website and customizing it for your needs. I think that is a good approach if you are testing the waters, but I don’t recommend it if you are actively trying to learn Oxygen. The theme builder / template process is a major pillar of the tool and it is important to understand it if you are going to seriously build sites using it. When I did my testing previously I used premade content parts from the design library, but this time I went with a blank install.
If this is your first time in Oxygen you may be wondering, what do I do first. Here are the steps I took.
Check Oxygen Admin Menu Pages
Oxygen creates a menu in the admin with several pages. I first stepped through those to check all of the settings. On the Home menu there are links to support and the option to install a website, if changed your mind.
The Templates page is where you create and manage templates. We will be looking at that in more detail further on.
On the Export & Import page you can download and upload to another site the Oxygen’s settings (global styles, classes, custom selectors, and style sheets). Note that when you import, you need to check the box about importing global colors to override the ones set on the target site.
These are the options on the General settings page. Note the checkbox for the Selector Detector, which is a CSS helper that you may want to use.
On the Client Control tab you toggle on or off access by role or user. You can also set which post types to show the Oxygen meta box on.
There is a security tab where you can sign shortcodes to show they are valid. It is recommended to keep this option checked. If you imported your site then you will want to sign your shortcodes using the Sign All Shortcodes link.
The SVG Sets menu is where you can upload SVG icon sets. The TypeKit tab is where you can enter your TypeKit token to use these fonts in Oxygen. The License tab is where you enter your product license.
The CSS Cache tab is an important one that you will return to often during site development. The CSS in the templates is cached and you need to click the Regenerate button to regenerate it.
The Bloat Eliminator tab is where you can disable some WordPress and Oxygen features if they are not needed.
On the Library tab you control access to design sets on other sites. The Oxygen supplied design sets are available by default. If you have purchased or have access to other design sets then you can check the Enable Third Party Design Sets to access them. There is also the option to allow other sites to access your design sets.
Create a Base Template and Set Global Options
The next step I took was to go to the Templates menu and create a template called “Base Template.” This will hold the header and footer. Under the Other category there is the “Catch All” option to indicate that this template is a default. This is our first template, but notice at the top the Inherit from drop down. This is how other templates can inherit the header and footer we build in the Base Template. Also notice the Template Priority text box. When we add new templates with a higher priority they can build upon or override those with lower priority to add or change layout options.
In addition to creating theme templates, just as with Elementor or Beaver Builder, you can also create “reusable parts” or sections, that you can use in other templates. Once you save the template you get that big blue Edit with Oxygen button. Clicking on that takes you into the Oxygen editor.
If we were inheriting from another template then we would see that template in the editor, but since we are starting fresh, it is empty. Here are the top level controls for getting around.
- This is where you add elements, which are like Elementor widgets or Beaver Builder modules.
- This is where you pick what content will be previewed in the editor.
- The Structure control is where you open up a hierarchical view of all of the elements on the page, can rearrange them, or rename them.
- The History button opens a panel where you can see a history of changes and revert to a previous point. You can also use the undo and redo options.
- There are three sub menus under Manage: Settings, Stylesheets and Selectors (see below).
- With this menu option you can exit to the admin or to the front end.
- The save button to save your template.
Go Through the Settings Menu
Going through all of the screens of the settings menu is similar to going through the Customizer for a theme. You create your color palette, set the fonts, heading and text options, link styles, and so on. This is the first thing I do in the Oxygen editor on a new site.
Create the Header, Footer, and Default Content Section
Oxygen has a nice helper called the Header Builder. It is a good convenience with options for the the header rows, styling, and setting options for different device sizes. You use regular Oxygen elements to create your header.
There is no “Footer Builder,” but you can just use a regular section. I renamed the section ID and added a class to make it easier to style. For major portions of the site it is a good idea to take the extra step to customize the names and / or add classes.
I used the Oxygen Code Block to add PHP code for the copyright notice.
Copyright © <?php echo date('Y'); ?> <a href="https://www.webtng.com" class="footer-link">WebTNG</a>I gave the link a class name to make it easier to style. I added this CSS to a site stylesheet.
.site-footer {
font-size: 16px;
}
.footer-link {
color: #f2743b;
}
.footer-link:hover {
text-decoration: underline;
}It is also possible to add a selector of “footer-link”, for example, and style it visually using the Oxygen user interface.
I added another section which I named main-content, and set the width to be the same as the page width in the settings. Oxygen has an Inner Content element that shows the post content. I added that into the section and saved the template. The Base Template is done.
Setting Up the Sidebars
Sidebars are usually declared in the theme, but since Oxygen disables the theme we need to do this ourselves. Brainstorm Force has a free plugin, Lightweight Sidebar Manager, that makes this easy.
I decided to do this using a code snippet and that is included in the article on code snippets used. You have to add a widget into the sidebar for it to show up in Oxygen.
Creating the Single Post Template with Sidebar
I used the Columns element to have a content area with one column at 70% and the other at 30%. There are several ways to add dynamic data place holders to the template. The main way is by adding elements from the left panel, WordPress, Dynamic Data section. Another way to do so is to add a Text element. When you do that there are formatting button in the top area as well as a button for inserting dynamic data.
When you click on the Insert Data button then you get a modal that shows a number of categories of dynamic data that can be added.
The third way to add dynamic content is by using the Code Block element and WordPress or PHP functions.
I added the Featured Image, Post Title, content, comments form and comments list. The post meta has to be built up. There is not a built in element for selecting and customizing it.
Creating the Post Archive (or Blog) Template
I think Yoast recently purchased the Duplicate Posts plugin. In any event, I installed that and used it to duplicate the Single Post Template into a draft that I renamed to the Post Archive Template. It is also possible to copy the template’s shortcodes using the small plus sign at the bottom of the template interface, as shown in the video.
I saved that and in the Oxygen editor, I deleted out the content from the left side column. I added the Easy Posts element. Easy Posts comes with a number of preset layouts. I selected the single row with image on the left option. This had the title and post meta above the featured image. I went into the PHP template panel of the Easy Posts element and was able just move that bit of code around to make it the way I wanted it. I really like the Easy Posts element a great deal. It is very flexible and exposes a lot options of the post loop.
One issue that was pointed out to me was that it adds the comment count to the post meta with a link to the comments area. This is fixed by renaming the ID of the comments form in the single post template to “comments” and then the link works.
Creating the Page Template
I also created a page template by following the same steps and duplicating the posts template. In the page template I removed the featured image, post meta, and comments elements.
Even though we create and assign templates for different content types, you can also manually pick a template when you are on the post or page edit screen. This way you can have a special landing page template, for example.
Cleanup and Testing
There was a lot of cleanup needed to make the buttons the right color, remove or add spacing, and set content widths. It is also necessary to test real content at different device sizes. For example, there was a problem with images overflowing their containers and creating white space in the header on mobile.
This is apparently a known issue and you need to add CSS in the style sheet to make the images responsive and keep different types of content, such as embeds, from overflowing their container. Here are a number of posts on the topic:
CSS Used in the Video
Here is the CSS used in the video with comments saying what it does. Most of these were taken from the above website articles.
/* Force the page footer to the bottom of the page */
body {
/* These are technically the same, but use both */
/* Also fixes Mobile White Gap Issue Due to Lengthy URLs or Texts Without Spacings */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
width: 100vw;
height: auto;
position: absolute;
left: 0; - other depends on parent element
/* Styling the Footer */
#footer-content-div {
font-size: 16px;
}
.footer-link {
color: #f2743b;
}
.footer-link:hover {
text-decoration: underline;
}
/* Styling the sidebar */
.right-sidebar {
padding: 10px;
}
.right-sidebar .widget {
list-style-type: none;
margin-bottom: 10px;
padding: 10px 20px 10px;
background-color: #f4f7ff;
width: 100%;
}
/* Styling the post meta */
div.oxy-post-meta {
margin-top: 0.5em;
font-size: 14px;
display: flex;
flex-direction: row
}
div.oxy-post-meta-item::after {
content: "\00b7";
margin-right: .5em;
margin-left: .5em
}
div.oxy-post-meta-item:last-child::after {
content: "";
display: none
}
/* Make images responsive */
img {
vertical-align: top;
height: auto;
max-width: 100%;
}
/* Fix Mobie White Gap Issue Due to Embedding Code Snippets to The Frontend */
code {
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
}
/* Fix Mobile White Gap Issue Due to Images Added via Gutenberg or Classic Editor are Too Wide */
figure {
max-width: 100%;
}
@media only screen and (max-width: 768px) {
/* Fix Mobile White Gap Issue Due to YouTube Video iframe Embed*/
iframe {
width: 100%;
height: auto;
}
}
Acknowledgements
Thanks to Sridhar Katakam, Mohammed Wasim Akram, and Davinder Singh Kainth who tested my site and gave good feedback and fixes.
Dynamic WordPress Facebook Group
We’re discussing our experiences learning Oxygen in the Dynamic WordPress Facebook group. Join the group if you would like to participate.
