Update 2022: The site has since undergone another redesign.
It’s been a while since I last made a major update to this website. Last couple of days I made some major changes that hopefully fuel a new start for me to be blogging more often. I’m never short for idea’s, always have something to say but almost never bother to write it down in a blog post.
So, here’s a post about how I went about the update and the changes I made.
Changing the WordPress theme
A few years ago I switched to the AtomicBlocks theme. It was one of the first themes that was entirely focussed to be used with the new Gutenberg block editor. Although I still think it is a great theme, Later on I switched to the Genesis Framework.
There were a couple of reasons I did this. It allowed me to play around with the Genesis Framework (which I had not done before) and it also ensured me of continued support for the next couple of years. Genesis is a very well known framework in the WordPress space and considered to be one of the best. So it was really a no brainer for me.
Optically my website did not change much at this point as I rebuilt the look I managed to get with the AtomicBlocks theme with the Genesis Sample. Additionally I added a dark mode switch to the site so visitors were able to set the website to a dark version if they wanted to.
Enter Revolution Pro
As of today this website runs on the Revolution Pro theme which is also built on the Genesis Framework. Like the previous theme Revolution Pro also provides a minimal look. However it’s more sophisticated with regard to the many detailed design elements compared to what I had built with the sample theme. I made some small adjustments to the typography along with some tweaks to make it fit with me.
Integrated dark mode
With the new theme enabled I decided to remove the WP Night Mode plugin and replace it with dark mode handled by some extra lines of CSS. Dark mode now happens completely automatic. If you have dark mode enabled in your browser preferences or in your OS settings (learn how), this website will now appear in dark mode to you.
As you can see in the image above, I did not use a deep black background. I decided to use a slightly lighter shade than black so it’s easier on the eyes. Here is a snippet of the CSS I used for the dark mode.
@media ( prefers-color-scheme: dark) {
body, .site-header {
background: #172020;
}
body, .genesis-nav-menu a, h1, h2, h3, h4, h5, h6, .entry-title a {
color: #fff;
}
.entry-content a, a:focus, a:hover {
color: #bbc;
}
.entry-content a {
box-shadow: inset 0 -3px 0 0 #fff;
border-bottom: none;
}
.custom-logo {
filter: invert(100%);
}
.has-background {
background-color: #7a5ff6!important;
color: #fff!important;
}
/* Github dark mode styling */
body .gist .gist-meta {
color: #ffffff;
background-color: #293030;
}
body .gist .gist-meta a {
color: #fff;
box-shadow: none;
}
body .gist .gist-file {
border-color: #666;
}
body .gist .gist-data {
border-bottom: 1px solid #777;
}
body .gist-data tbody {
background-color: #192020;
border-bottom: none;
}
body .gist-data tbody td:nth-of-type(1) {
color: #666;
border-color: #444;
}
body .gist-data tbody td:nth-of-type(2) {
color: #fff;
}
}Multi Language set up
Another big change I made is that this website is now set up as a multilingual website with support for English and Dutch posts. My older Dutch posts were never gone, but previously were archived and filtered in a complicated manner.
The new multilingual set up makes it easier for me to blog in different languages and translate posts whenever I feel like it. In order to make this multilingual adventure possible I used the Polylang plugin.
Download the free version of the Polylang plugin.
Other notable plugins I use
For site usage monitoring I use the Koko Analytics plugin. It’s pretty straight forward and more important, it’s privacy friendly. It’s not as advanced as Google Analytics, but more than sufficient for the purpose I use it for.
Explore the Koko Analytics plugin.
Next to the blog posts that I write myself, I also use this website to collect useful resources and articles published on other websites. In order to link back to those websites I use the Page Links To plugin. I often use it on other websites I manage as well.
Check out the Page Links To plugin.
And of course I use the Atomic Blocks plugin in order to create some awesome layouts. Atomic Blocks is resigning. Migrate now to Genesis Blocks.
Genesis Blocks can be downloaded for free.
Archived posts
Last but not least, I decided to archive some of my posts. Archiving seems the best solution for posts which I do not find interesting enough anymore or no longer support. It’s a more honest solution than deleting the posts entirely. There may be some previously deleted posts among them which I resurfaced for this occasion. This part is at the time of writing still a bit of Work in Progress.