This is going to be a work-in-progress post trialling the move from a WordPress Classic theme (Astra Pro) to the default WordPress Block Theme – Twenty Twenty Four (TT4)…
During September to November 2023 most of my spare time was spent on trialling ways to increase the mobile loading time of BajanThings. The next major upgrade to BajanThings will be transitioning it from a WordPress classic theme (we use Astra Pro) to a Block theme.
I was inspired by Jamie Marsland to have a go at transitioning one of my test sites (veg2table.com) which uses a WordPress classic theme (Astra Pro just like BajanThings) to the default WordPress block theme Twenty Twenty Four (TT4). Once we have mastered WordPress block theme TT4 the idea is to then trial WordPress block theme Ollie.
WordPress dominates the content management system (CMS) market. To stay on top WordPress is following the lead of minnows like Wix and SquareSpace in re-designing how websites are built using blocks. I really like the idea of moving to a block set – especially if it has the potential of also speeding up a site. Jamie Marsland gave me the kick-up-the-backside to take the plunge and begin preparing for the future.
These are the YouTube articles that inspired me:
Jamie Marsland – Beginner’s Guide: Switching to a WordPress Block Theme
Jamie Marsland – WordPress Block Themes: Don’t make this BEGINNERS mistake!
This is a REALLY key issue – separating content and templates.
Wes Theron – Using Page Templates
This gives some background on the use of templates.
Another key thing to get to grips with is using the Group, Row and Stack block.
I found it takes a while to wrap your head around Block themes. The post below by Brian Coords helped me unlock the intricacies of Groups within Groups which seems to be the way most templates link parts that make up the design of a website.
Brian Coords – “Normal” width websites in the block editor
TT4 is a good starting place for a transition. Once I have mastered this I’m intending to trial Spectra One.
Jamie Marsland – Astra’s NEW WordPress Block Theme is Amazing
A key thing to note is the way that Blocks themes work. Gone is the navigation menu. So if you are swapping between Block themes – says TT4 and Ollie or maybe even Spectra One then the first thing you will need to do is, re-create the menu in the header and footer.
Out of the Box TT4 comes with a number of already built templates.
The assumption is that in Settings | Reading: that you have chosen the option: A static page
- Homepage in this case is: About Us (Front Page)
- Post page is: Veg is tres cool! (Posts Page)
With TT4 the default template for:
- pages is: Pages
- the homepage is: Blog Home
- posts is: Single Posts
Out to the box TT4 includes the following templates:
- All Archives
- Blog Home
- Page No Title
- Page with Sidebar
- Page with Wide Image
- Page: 404
- Pages (default for Pages)
- Search Results
- Single Post (default for Post)
- Single with Sidebar
Under Patterns – at the bottom there are three Template parts:
- General (inculdes the Sidebar and the Post Meta)
With BajanThings we have only a few pages and are nearing 200 posts. Some things to note about the templates and the defaults:
- You need to set up the menu structure for the Header and the Footer.
- If you are using a sidebar you need to set up the structure for the sidebar (similar to setting up blocks and widgets with a classic theme).
- When editing Pages and Post you have the option to choose the template you want to use.
- Assuming you have just a few Pages – like BajanThings – its probably simpler to choose the template you want to use individually. With BajanThings for instance our “Contact Burts” has no sidebar so might use the default pages template: “Pages”. Most of the other BajanThings pages have a sidebar so would use the template: “Page with Sidebar”.
- With Posts – the default template is “Single Post”. It would be very time consuming to edit 200+ posts and set all to the template: “Single with Sidebar”.
There does not seem to be a way to copy or duplicate a template so I set up a new template “Single Post no Sidebar” that was a copy of “Single Post”. Having created a copy of the default “Single Post” you need to add the sidebar into the “Single Post” so it matches what would be the “Single with Sidebar”.
There is a small bug with the out of the box “Single Post” content. With BajanThings we typically use right aligned 300px wide images. With the standard “Single Post” template the content needs to be placed within a stack so the right alighted images alight with the text.
The content needs to be in a stack group to fix right aligned images. This is only an issue if you use the “Single Post” template. If you use the “Single with Sidebar” the sidebar acts as the demarcation line of where the right aligned 300px wide image is located.
Its easy to fix and amend the the “Single Post” template. You just need to put the content into a stack!. I was surprised this was not done out of the box. This is the amended content within a stack group.
The other thing we have done to tweak the “Single Post” template is we have followed the BajanThings style and added a related content block. With BajanThings we have chosen to use a minimum set of JetPack features and use the Related content block that is built into Astra Pro. With Veg2Table we have used the JetPack related content widget.
We’ll need to copy that over to the “Single Post with Sidebar” template set up.
Another thing to remember to tweak is the Setting | Reading, “Blog pages show at most” and “Syndication feeds show the most recent” values. For the “Blog Home” and “All Archives” posts are the template uses multiples of 3. I have veg2table set to 6 so the value for Setting | Reading, “Blog pages show at most” and “Syndication feeds show the most recent” is set to 6 otherwise you get hanging posts!
One of the other things we have changed is the Patterns | Template Parts | General | Post Meta and Sidebar templates.
With Patterns | Template Parts | General | Post Meta we have followed the BajanThings Astra Pro set up:
Author Name | Date | Categories | Comments Count | Time to Read. In the vanilla version of WordPress there is no “Comments Count” and “Time to Read” block so have text placeholders in place.
“Comments Count” and “Time to Read” will be available in time. They are currently available via the WordPress Gutenberg plugin.
That in very basis terms gets you a working website. Still to fix is to tweak the “Front Page” STRUCTURE of the template and look at some DESIGN issues such a para spaces and to tidy up the
The latter, the para spacing of the content is an easy fix. Within the content area – click on the Styles icon in the right panel and adjust the block spacing. Out of the box Block Spacing is set to 0 – we set it to 1.
There are a few things that still appear not to be available within the default block theme. For instance within the footer within Astra Pro there are some short codes we use like [current_year] used within copyright notice, and [site_title] and [theme_author]…
Work in progress – still to do:
- update the Post template so its got a sidebar
- make a new Front page template
- tweak the design of the fonts and spacing etc….
That said the basic are there…