Category: Web Development

The Premise

I want to get better at completing private projects so I decided to try an incremental approach. My wife made a site for our wedding photos many years ago. It’s static HTML, CSS and desktop-only. I’ve been wanting to redesign it for a long time. But instead of holding on to my grandiose plans that will never get done I decided to start with the bare minimum.

I knew that I wanted to make a WordPress-site so I decided that the first step would be to just convert this static site into a WordPress theme and make it responsive.

I threw out my old design ideas and opened up the old site in a separate window. Also in a mobile browser. I knew that I wanted to develop a theme based on Underscores by Automattic but I also knew that I didn’t want to go all the way and develop a full-fledged theme worthy of public publishing. That would get in the way of actually getting this very simple site done, as in up and running. I wanted to convert a static site into the beginnings of a WordPress-powered site that I can keep working on in increments, like you would continue working with a live site once deployed only this is a site for personal use so it’s not critical in any way.

The Approach

Instead of drawing up new designs and documents outlining the exact scope of the first version of my theme I decided to get started by doing a quick recap of an old Underscores tutorial by Morten Rand-Hendriksen because I knew that design would fit and his style would inspire me to start planning ahead for my own theme.

To avoid scope creep I decided to focus on the different types of content already present. That meant styles for:

Thats from the perspective of styling components, but when doing layout in WordPress you have to think about the content in terms of the different PHP-templates being used to display certain types of content. I only needed a few:

I wanted to replicate the behaviour of the old site, which had 4 pages of categories each displaying a grid of thumbnails. Each thumbnail led to the larger image when clicked on. I knew that I wanted the site to handle the display of the image in full size. I did not want to leave it up to the browser to just open the image file.

(Gutenberg to) The Rescue

In the end, the new Gutenberg editor in WordPress saved me a lot of work. The built in Gallery-block on a default page worked just fine for the grid of thumbnails that I wanted. Then it was just a matter of linking each thumbnail to the attachment page and using the image.php template file to display the image attachments in full size.

The Result

Now I have a live responsive WordPress-site instead of a bunch of static HTML and CSS which will serve as a playground that I can use to develop a bunch of different skills:

JavaScript/React: