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.
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:
- The site Header and Footer
- Two kinds of content areas
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:
- posts and pages.
- maybe the thumbnails
- something to display the single images
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.
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:
- I will build some Gutenberg blocks.
- I will build an independent React photo site that gets data from the WP REST-API
- I will build something with the WP GraphQL-API
- I will build a WordPress plugin that improves the experience of viewing the images on the site.
I set realistic goals to improve upon something and I met them. I threw process out the window and just started coding (I even forgot to do version control). That was okay because I just wanted to get something done! Now I have defined some next steps (see list above) and I will decide which project to tackle first and why.
I will also decide which part of the process to improve upon and why. Maybe I will spend more time on the design before starting to code or maybe I will improve some part of my workflow.