Theming for Wordpress

It's ok to use a readymade theme, but ...



Most themes out there have shiny demo-sites where everything fits well to together.

– The outstanding key-visual and messages are unique and intriguing.
– High class Icons underline the features of the product behind the site.
– Chosen fonts perfectly fit the overall nature of the site.

Its like in restaurants: the real food on you plate will not look as shiny and polished as the one of the menu-card.
No matter what WordPress theme you buy or even which page-builder-service like squarespace or wix you use: Sooner or later you will come to a point where you need an expert who is stripping all parts together.
This is what I do: Instead of providing a eye-candied theme, I bootstrap and configure WordPress for your needs, and this contains more than a shiny frontend.


Custom WordPress Systems tailored to your needs

An important part in Webdesign is to structure content and put it into well consumable chunks of information.
A CMS can support or hinder this process. Lets take one of these so called “Page Builders”. They give a lot of possibilities for structuring and arranging. When you are not an experienced user of these tools, you will get lost in the mass of possibilities to display your content.
Good Theming in combination with a customized CMS will provide you with a graspable set of options how to structure your content.
The trick here is to find right mixture of a solid design-framework and flexibility. A solid design-framework, supported by the CMS, helps structuring your content and supports consistency between pages and content-blocks.
Nowadays we do not have rigid page-templates anymore, but compose our pages out of different content-blocks. This is where custom post types, metablocks and Gutenberg-blocks come in.



In my point of view, speed in loading and displaying websites is one of the most positive user experience you can provide. Not only users honor speedy websites, but also search engines take it as a ranking criteria (at least for mobile search).
Instead of focusing on rather “standard” optimization techniques like minification of JS and CSS files, browser-caching or compression of transferred files, I would like to look look at responsive images.

Responsive Images

Images usually take the most of data to be transferred when visiting a website. So its worth to optimize them in terms of visual quality and size. Serving the right image to your visitors screen is not a simple task and involves:

Responsive Images: Given the huge difference between a 30″-Desktop-Monitor and a 4″-mobile phone screen its required to serve different images sizes depending on screen-resolution.
Art-Directed-Images: Landscape or portrait screen orientation need different images, since they show a complete different view-port.
Lazy-Loading-Images: Even if modern browsers postpone the loading of images until the HTML-markup is parsed, for better control its still recommended to do this via JavaScript and depending on the visual design. Example: When we have a design which shows an image on the left and some hero-text on the right, then, on a medium sized landscape screen, the best image to be served would be one with portrait dimensions. But (even modern) browsers would just see the landscape orientation of the user-agent and request a landscape image.


So, to have an outstanding user experience, we require “lazy loading, art-directed responsive images”. Its already hard for the mighty brain-interface to configure this properly and I do not know even one visual interface which is capable of doing all this. If you try to set all this up with a visual page-builder tool like Gutenberg or a plugin like “Visual Composer” you will probably fail.

My WordPress System all get green lights from google page speed insights and reach at least a score of 80%.



I build my themes based on the zurb foundation frontend-framework. Using such a framework adds some overhead to the size of JavaScript and CSS files. But it also adds comfortable functionality in form of reusable SCSS variables and JS Modules.

The gulp based SCSS to CSS processing is working well and fast, but I got annoyed by the slow JS build process used by zurb  and switch to a webpacked based one.

Beside the foundation framework I usually add some libraries, i.e.:
lazysizes for delayed and controllable loading of media files
greensock animation library for animations



Many themes out there still load fonts from google, JavaScript files from CDN-Servers and so on. And in our data-based economy you can be sure that these requests get tracked.
Strictly – without consent from your user before the request – this is already a violation of the data-privacy of your visitors.
To prevent this I follow the policy: As long as possible, load all resources from your own web-host. If its necessary to load something from a third-party host (e.g. a youtube video) get consent of the visitor BEFORE doing so.
A cookie warning is not enough.