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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • I would add Gutenberg styling such as .alignleft img {
    float: left;
    }
    .alignright img {
    float: right;
    }

    as we're only a few months off and img.alignright won't do much inside post content once WP5.0 hits.

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: