Imigin WordPress Theme

18 October 2017 #Code

It’s easy to hit a groove developing WordPress websites, and redesigning my own site is usually the excuse I use to break it. The theme I have developed for this website I call Imigin, and here’s what I was focused on in its creation.

Raw

No theme framework. No HTML/CSS framework. Not even using a normalize or reset css. This site was coded from the ground up with the bare essentials. The functions.php strips every self-inserted WordPress nonsense it can from the page.

Speed baby, speed

The site uses just one minified CSS file and the only Javascript file referenced is for Google Analytics. There’s an embedded (~500 bytes) Javascript in the header to lazy load images with Lozad, but that’s it.

This also means less plugins. I’ve stripped out any plugins that go injecting CSS or Javascript into pages where they’re not needed. So that’s goodbye to Contact Form 7. I’ve switched some forms over to Gravity Forms which only loads JS/CSS where needed.

Then I’ve used other plugins to speed up loading where the content itself might inject code. Like Lazy Load for Videos.

All the images are Smushed and served responsively by WordPress.

Clean up

This site has been from WordPress, to Webhook, back to WordPress again and the data was a mess. Specifically the Blog content. Everything now resides back into the post content box and I’ve stripped all but one Advanced Custom Field out of the site.

{display: grid}

As a portfolio site I have the luxury of ignoring the wide browser support concerns that my own clients have. So I’m using CSS Grid Layout throughout the site, along with some @supports declarations to tidy up the layout in Internet Explorer.

Fancy layouts

With some code into the theme’s function file I’m using WordPress content editor as a quasi-page-builder. Any centre or non-aligned images break out into their own layout boxes. As do any Blockquotes or oEmbeds.

I’m really pushing what can be done with the default editor at a time when Gutenberg is about to swallow up the whole notion of page building anyway.


Lessons learned

While this website is less demanding than many of the larger WordPress sites I build there’s still lots of lessons to be learned by building something in a completely new way. Which I’ll now bring back into future projects.