Essential Changes and Hacks in Oxygen

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