After starting this blog back in 2017 I’ve pretty much stuck with the Twenty Twelve theme ever since, except for a few moments here and there when I tried a new theme when it came out, but no other theme ever stuck with me like Twenty Twelve did… until now that is. So if you’re thinking about customising the new Twenty Twenty-Two WordPress theme yourself, you might find this post useful as I write about my experiences with it so far.
One of the first things I will say is, if you’re thinking you might want to create a child theme, do so before making too many changes with the theme editor because if you choose to create a child theme later on you’ll have to re-do all of your edits – any edits you do within the editor won’t transfer into the child theme, they’ll stay with the parent theme and therefore will disappear if you activate a child theme. (If you Google Twenty Twenty-Two child theme you should be able to find a tutorial of what to add in to the child theme folder!)
If like me, you’re used to editing things with CSS rather than dragging blocks around a page, the new editor might take a bit of getting used to but really it didn’t take me long and once you do get used to it – wow, this new way of editing themes on WordPress makes your blog so much more customisable. Like for example, widget titles were a standard style in my old theme but now when creating blocks and turning them into titles, you can easily give each one a different style if you want to… pastel coloured rainbow sidebar anyone?!
The most useful thing I found was ‘List View’ (it’s the button with three lines next to undo/redo at the top of the page in the editor) I found out about this when researching how to edit the theme, instead of just dragging blocks around the page you can drag them into position on there and it’s so much smoother, I mean it can still have a moment of “I’m not going there… me: oh yes you are, I put you there earlier” ha! But it’s generally easier than trying to move big blocks around on the page itself.
When I was deciding what to put where I thought I was going to have to put up with my sidebar items being at the bottom of the page, I just didn’t think it was possible to add a sidebar when I couldn’t find a + button on the side of the page – but wait, it definitely is possible! I think I found this one out on the theme help forum actually then I was able to customise it to suit my blog – basically to add a sidebar you’ll need to create a 2 column block, one column to drag your Query Loop (blog posts) into then the other column can be filled with all the widgets you want in your sidebar. Starting with a 70/30 column, I set the left column to 80%, the right to 18% then added padding on the left of the right-hand column at 2%. You could always do this in reverse if you want your posts/sidebar the other way around. You can also drag things around within the post area on the list view, on mine I decided to put my title image above the blog post title.
Template parts are a big deal with this theme and rightly so, if you create a sidebar and spend time putting all the different things you want into it, if you then make it a template part you can easily add it onto other pages without needing to re-add each block again manually. DON’T DO WHAT I DID, if you want to remove a template part *saying this louder for those at the back* detach your blocks first, I didn’t and well let’s just say a lot of not so positive words left my mouth as I found I’d lost all my posts off of my homepage and had to re-add and re-style them again!! You can of course press the undo button but not if you’ve already left the page. Same with groups if you add blocks to a group then change your mind, ungroup them before removing the group.
One thing I really wanted to change was the underlines on the links on the homepage, I actually went round in circles trying to get rid of them. I was convinced I’d have to add something to the JSON file in the child theme I created, I searched and searched then in the end I thought, okay, I’d usually put this in the CSS file – let’s try it, guess what? Straightaway it worked. So the CSS file is definitely still needed for some things, that and padding, I didn’t like how much padding some of the blocks have when you put a background colour on them.
If you’re trying to edit a specific block but don’t have a clue what it’s called – if you’re on Chrome, right click on the area you’re trying to customise and click on Inspect, then the code will pop up and you should be able to narrow it down to what it is – for example ‘.wp-block-navigation’ is the main navigation section so then you can add that to the CSS file with what you want to change like you normally would.
It’s obviously best to check if what you want to change is already in the editor, that way you can edit it easily from there or if it’s something that JSON covers, add it in there – in my child theme’s JSON file right now I’ve got font families and colour palette. What you add to JSON shows up in the editor – so if you change up the font families in there you can then go ahead and pick one of the new fonts you’ve added, to a block in the editor.
There are of course the other pages you might want to customise – search results, categories, archives and of course single post which is what people go to when they click on one of your blog posts. Which again is why it’s great if you’ve put your sidebar into a template part, once you’ve created your columns to put your post/sidebar into (like on the homepage) you can click and add it straight in, it’s so good not having to build it from scratch again especially if you’ve added quite a lot to it and want it to appear the same throughout your site.
Check out another post of blogging tips – A Blogger’s Guide To Using Gutenberg.
This post has ended up quite long so I’m going to leave it here but if anyone has any questions about anything I’ve said here feel free to leave me a comment. I hope this post might be useful for anyone thinking of customising the new theme.