Coming back to Life of J after being away for a while made me look at the site with slightly fresher eyes. Fairly quickly, I started noticing things that had probably been bothering me for much longer than I realised, and it eventually led me to build a completely custom WordPress theme for the blog.
Nothing was completely broken. The blog worked, the posts were there, and WordPress was doing what WordPress does. But there were lots of little things that didn’t feel right anymore. Featured images were being cropped strangely, the homepage felt fairly basic, and I didn’t have as much control over how everything was presented as I wanted.
That was on desktop. When I properly looked through the site on my phone, things weren’t exactly better.
Initially, I thought I’d just fix a few of those problems. Tidy up the homepage, sort the images out and change some styling.
Instead, I ended up rebuilding almost the entire thing with a completely custom WordPress theme.
Because apparently I don’t know how to leave things alone.
What I Wanted to Change
The old version of Life of J was using a fairly standard WordPress theme. There wasn’t necessarily anything wrong with that, but it always meant working within somebody else’s idea of how a blog should look.
The featured-image cropping was the most obvious problem, but I also wanted the newest post to be more prominent, categories to be easier to explore and older posts to have a better chance of being discovered.
More importantly, I wanted the whole site to feel consistent. The homepage, Blog, categories and articles all worked, but they didn’t always feel like parts of the same deliberately designed website.
Suggested: the old desktop homepage, ideally showing the image cropping or old layout.
Looking back, I don’t think the old site was terrible. It just didn’t feel particularly mine anymore.
I still wanted to keep WordPress itself. I’m familiar with it, writing and scheduling posts is easy, and plugins take care of things like SEO, newsletters and analytics without me having to build all of that from scratch. I’ve also always preferred blogging to social media when I actually want to sit down and share something properly, so moving away from WordPress never really made much sense. I just wanted more control over how the blog looked and worked.
So the goal wasn’t to replace WordPress.
It was to build the version of WordPress I actually wanted to use.
Six Designs Later…
Rather than jumping straight into building a theme, I started with static HTML concepts. That meant I could experiment with the design without worrying yet about WordPress, plugins or whether everything actually worked.
I went through around six different concepts.
Some were too clean, others too busy, and a few looked good as a homepage but didn’t give me much to work with elsewhere. Eventually the final design became a mixture of the bits I liked from several of them.
The direction I settled on was mostly light and neutral, with orange accents, stronger typography and a much bigger focus on images. The newest article became the main homepage hero, categories became a bigger part of navigation, and I added sections for discovering older or highlighted posts.
Importantly, a lot of it is dynamic. The homepage hero automatically shows the latest published post, while Worth a Read uses WordPress Sticky posts so I can choose which older articles I want to highlight.
Once the homepage started feeling right, I moved onto everything else.
And that was where the project got much bigger.
Building a Custom WordPress Theme Beyond the Homepage
A static homepage is relatively easy because you can control exactly what appears on it. A real WordPress site has considerably more going on.
I needed a proper Blog page, individual articles, category pages, Explore, About, Contact, Search and even the 404 page. I wanted all of them to feel connected without simply repeating the same layout over and over again.
Category pages, for example, became proper landing pages rather than basic WordPress archives. They now have descriptions, a prominent article and ways of filtering or exploring the content underneath.
Article pages changed too. Featured images are no longer forced into awkward crops, reading time is calculated automatically, categories are properly connected to the rest of the site and related posts appear at the bottom.
Eventually, those static designs were converted into a proper PHP custom WordPress theme, with WordPress still handling all of the content underneath. Underneath the custom design, everything still behaves normally: posts remain posts, categories still work, scheduled articles publish normally and plugins can continue doing their jobs.
That was always important to me. I wanted the flexibility of a completely custom site without losing everything that makes WordPress useful for blogging.
The Parts That Fought Back
This was also where AI started becoming particularly useful.
I’d recently had a good experience using AI-assisted development on another project, and it gave me the confidence to try something more ambitious here. It wasn’t a case of asking for a complete website and magically getting one back; most of the process was much more iterative than that.
I’d explain what I wanted, test it, decide what worked and what didn’t, then keep changing it. Sometimes I knew exactly how something should look but had no idea how to actually build it.
And, naturally, sometimes things just broke.
MailPoet probably caused the most entertaining problems. I expected replacing the placeholder newsletter with the real signup form to be easy.
It wasn’t.
The layout collapsed, strange boxes appeared and at one point the form was telling people to check their inbox for a confirmation email before they’d even entered an email address.
I’d fix one issue only to find something else had broken elsewhere. Eventually I stopped trying to fight MailPoet’s own behaviour and let it handle its messages properly, while the theme simply took care of how everything looked.
Yoast created another problem. Because much of the homepage was being generated dynamically by the theme, Yoast thought the page contained barely any text, images or internal links.
The actual page clearly did.
Eventually I added a custom integration so Yoast could understand the theme-generated content it was supposed to be analysing.
By that point, this had become slightly more than the visual refresh I’d originally imagined.
Still, eventually I reached a desktop version I was genuinely very happy with.
Then I opened it on my phone.
So I Rebuilt the Mobile Experience Too
The mobile site technically worked. It was responsive, everything stacked and you could use it.
Mostly.
There was one fairly spectacular bug where some cards became so narrow that text started appearing one character per line while sections of the homepage began overlapping.
Once that was fixed, the bigger problem remained: it still felt like a desktop website squeezed onto a phone.
I didn’t really want the mobile version to just be good enough, particularly after putting so much effort into the desktop site. So rather than redesigning the entire thing underneath, I created a different mobile presentation using exactly the same WordPress content.
That meant the posts, URLs, categories, SEO data and newsletter all stayed the same. Only the way they were presented changed.
Actually Designing for a Phone
The mobile homepage is now much more compact and feed-like. Instead of the large desktop hero, it has a swipeable carousel containing the latest five posts.
Categories became horizontal swipeable buttons, and sections such as Worth a Read use carousels rather than creating a huge vertical stack.
The Blog and category pages were redesigned around the same idea. They’re easier to scan, with the newest article given more prominence and the rest of the posts appearing in a tighter feed.
I also replaced the normal Load More button with automatic loading. As you get towards the bottom of the page, the next posts are fetched automatically. Normal WordPress pagination still exists underneath, so the site doesn’t depend entirely on JavaScript.
Articles got their own mobile treatment too. Spacing is tighter, related posts can be swiped through and I kept some of the distinctive desktop styling, including the orange opening letter.
I also added simple Share and Copy Link buttons at the bottom of posts, which I ended up liking enough to add to desktop as well.
One of my favourite additions is probably the fixed mobile navigation at the bottom of the screen, giving quick access to Home, Blog, Explore and Search.
That became the main philosophy behind the mobile rebuild.
Not how do I make the desktop version fit on a phone?
But how would I actually want to use Life of J on my phone?
There Are Still a Few Things Hidden Away
The rebuild also gave me the opportunity to prepare a couple of things that aren’t visible yet.
There’s one section in particular that’s currently hidden and waiting for something I’m hoping to talk about properly a little further down the line.
That’s all you’re getting for now.
One nice thing about having complete control over the theme is that I can build things like that when I need them rather than hoping an existing theme happens to support what I want.
Although knowing me, I’ll probably find an excuse to change everything again eventually anyway.
Was Building a Custom WordPress Theme Worth It?
Definitely.
What started as frustration with a few cropped featured images ended up becoming a complete WordPress blog redesign, but the result feels far more like my version of Life of J.
The newest content is properly highlighted, older posts are easier to discover, categories are more useful, articles feel much better to read and the desktop and mobile experiences now feel deliberately designed rather than simply functional.
AI made building a custom WordPress theme like this realistic for me, particularly when I knew what I wanted something to do but didn’t necessarily know how to build it. But there was still a lot of choosing, testing and changing direction involved.
AI could help write the code.
It couldn’t decide what Life of J should look like.
That still came down to trying things, deciding I hated them and trying something else until the site eventually started feeling right.
A Fresh Start for Life of J
Coming back to writing already felt like something of a fresh start, and rebuilding the site ended up becoming part of that.
Life of J now has its own custom WordPress theme, a desktop experience I’m genuinely happy with and a mobile design that was actually built around how I use a phone.
There will always be things I want to change. I already know that.
But for the first time in quite a while, I sometimes find myself opening Life of J just because I like looking at it.
I’ll take that as a good sign.
Have you ever started fixing one small thing and somehow ended up rebuilding the entire thing?
Discover more from The Life of J
Subscribe to get the latest posts sent to your email.
