We’ve been building WordPress sites using the ‘Gutenberg’ block editor since it was launched, and it has evolved a lot in the last few years. Our approach has never been to use Site builder tools like Elementor or WP Bakery, and it feels like those are slowly being squeezed out as the ‘core’ WordPress page building experience has become more powerful (and often confusing!).
Most of the sites we build are ‘hybrid’ ones which make use of the theme.json file for theme and block styling, and also a traditional PHP theme setup. Pretty much every client site makes use of plugins like ACF Pro and FacetWP. In the last year or so the newer version of the WordPress workflow involves the ‘Full Site editing (FSE)’ experience whereby all the templates and styling that you used to do in PHP and CSS theme files are now handled inside the WordPress editor and the theme.json file.
We’ve experimented with this approach and it doesn’t feel like the right one for most client projects because they all have some requirements above and beyond the FSE approach – with custom fields, custom post types, handmade blocks to display/filter certain types of content etc.
But for some simpler sites, the FSE methodology is a great way to get something up and running really quickly. I’m keen to see how quick that can happen and how little code I can get away with writing – so I decided to see how easy it is to replicate a basic website in WordPress with as little custom code as possible.
I came across the Smartphone Free Childhood campaign a while ago and bookmarked their site because it looked like a great guinea pig to experiment on! It’s pretty basic and looks like it is built with the Cargo CMS, which I haven’t come across before. It looks a bit like Webflow, but maybe not as good. Tools like this are great for getting something online without needing to know much (or indeed anything) about website coding.
Smartphone Free Childhood is a fantastic grassroots campaign that’s luckily starting to gain some real traction. I heartily recommend you check them out.
The existing site is probably optimised to be mobile friendly, but it doesn’t look great on my monitor, and like with many of these CMS builders, the SEO and accessibility of the site isn’t great (to put it kindly).
There’s some responsive design issues going on here – the site looks better on a laptop screen but a lot of the design is based on the browser/viewport height, rather than the width (which is far more common).
Finding a FSE starter theme
Rather than start from scratch, I’m going to find an existing theme to tweak. I could try the TwentyTwentyFour or TwentyTwentyFive themes that ship with WordPress, but instead I’m going with the Frost theme that I’ve also had bookmarked for a while.
My aim is to get something up and running and see if I can get Smartphone Free Childhood (SFC) site recreated (and in places, improved) – whilst writing less than 100 lines of code (compared to the thousands I’d normally write for a bigger ‘hybrid’ theme project that I normally work on.
The Frost theme comes with some colour palettes built in, but I can tweak its theme.json file to change the Primary, Secondary colours etc to match the SFC branding. I can see the SFC site uses the Gopher font, which you need to pay for. So in this case I’m just going to use a similar free one from Google – Lilita One.
This is the first time I have used the FSE styles editor and I’m really impressed with how easy it is to browse and install Google fonts without having to write a single line of code.
Replicating the homepage
If, like me, you look at web designs in terms of WordPress block layouts, then you’ll see that this one is fairly straightforward. The Cover block with a Heading and some buttons will do that Hero section at the top. There’s a lot of ways to build the cards/image link layout below. I’d normally do a custom made block with ACF fields, but we’re going for a no-code approach here so I’ll see what I can create with the Patterns functionality. The animated carousel logo is something that I’d normally code myself but I’m sure there’s a WordPress plugin that will do something similar. The signup form looks like a Mailchimp embed so that’s easy to copy and paste in.
An hour or so later, here’s what I’ve come up with:
It’s far from perfect, but I’m impressed with how much can be done with the native WordPress blocks and a FSE theme. So far I haven’t written a single line of code (other than to update the colour hex codes in the theme.json file). I’ve used the first ‘image carousel’ plugin that I found on Google. It’s not ideal, and I don’t like using random WordPress plugins for things like this, but at a pinch it works OK and just needs a line or two of code to tweak the width. If this was a proper client project I would come up with something better than this, but this took me all of 10 minutes from Google search to finished gallery.
The cards are made using a pattern that I created and saved (Stack block, with an image block and another stack block inside – with text and a button inside that). Again, it’s not how I would build it, and it took me a while to get to grips with how to create and sync/unsync patterns in the new workflow. It needs some CSS to align the buttons at the bottom of the cards and to sort out the images, and I’m not sure how mobile friendly this implementation would be.
Finishing up
A couple of hours later, mainly trying to figure out the best way of laying out the cards and trying to get the header to work well on a mobile, and I’ve got something that looks OK on desktop and mobile.
A takeaway is that the header/nav setup is fine if you want something really really basic, but I really struggled to get it to look good on a mobile. I decided to use the SuperSideMe plugin that I use on lots of sites as that creates bulletproof mobile menus.
All the code I used:
/****** Smartphone Free Childhood site edits ******/
.image-card{
overflow: hidden; /* So rounded corners are visible */
line-height: 1.2;
max-width: 350px;
}
.image-card > .wp-block-group.is-vertical{
flex:1 0 auto;
}
.image-card .wp-block-buttons{
margin-top: auto; /* Push buttons to the bottom*/
}
.home .lgx_logo_slider_app{
max-width:var(--wp--style--global--wide-size); /* Force logo carousel to wide width */
}
@media only screen and (max-width: 768px) {
.site-header nav.wp-block-navigation, .site-header ul.wp-block-social-links{
display: none;
}
.site-header .wp-block-image{
margin-inline:auto;
}
}This is pretty amazing. The Mailchimp form could be better styled elsewhere, but to create this version of the site with only 20 or so lines of CSS code is great. Plus the Frost theme has a load of inbuilt patterns that you could use to build out the site.
Here’s a quick snapshot of where I’ve left it. I haven’t made any of the internal pages but it’s easy to see how they could be similarly recreated, and most probably built to look a bit nicer if you used some of these patterns instead.
Summary
For a really small and simple site like this, I think the Full Site Editor approach is definitely something to consider, given how quick and easy it was to do. I’ve only installed one Theme and two plugins (the logo carousel and the mobile menu one). On a live site I’d probably add in Yoast, Wordfence etc – but that’s still much fewer than most of the other sites I build.
I also think this has a lot of advantages over something like Cargo and Webflow. The accessibility / SEO setup is better (though again, maybe not quite as good as a hybrid theme that I would normally build). Plus it’s a lot more future-proof because if you want to add in a blog/news, contact form, social sharing buttons, a proper resource library, connect it to a CRM, sell some eCommerce items – then that’s where the WordPress ecosystem outshines everything else.
Original site Lighthouse scores:
WordPress version:
If the folks at Smartphone Free Childhoods want to use this version then I’d be happy to polish it up a bit and donate it to them.
