Published on Jul 21, 2018

Essential Changes and Hacks in Oxygen

Sridhar Katakam

Update on October 31, 2019: Released Oxygen Essentials plugin.


Below is a list of changes and hacks that I consider to be essential when building WordPress websites with Oxygen.

Not all of them are necessary for every site though and the list is obviously a personal preference.

CSS

The following CSS is must-add to ensure responsiveness of images.

img {
height: auto;
max-width: 100%;
}

It is also nice to set vertical-align: top for the images so they do not take up that extra 1 pixel at the bottom than what their height is.

So, combining these two:

img {
vertical-align: top;
height: auto;
max-width: 100%;
}

and the CSS classes for WordPress’ image (primarily) alignment:

img.alignright { float: right; margin: 0 0 2em 2em; }
img.alignleft { float: left; margin: 0 2em 2em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

(blog post)

HTML5 output for Search Form, Galleries etc.

How to add support for HTML5 markup in Oxygen

Code Snippets

Code Snippets is a great plugin to add PHP snippets with options to activate and deactivate individual snippets.

Functionality Plugin

For full control of loading assets for and initializing jQuery scripts, a functionality plugin is essential.

A basic WordPress Custom Functionality plugin

Smooth scrolling to hash links

Smooth scrolling to hash links and Back to Top in Oxygen

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right