Designing Panda-Puss isn’t straightforward

All I wanted was to create a theme that used CSS flex to contain the list of posts and CSS grid to display individual posts – I’ve become quite enamoured by them after faffing about with them to display various lists of posts on this site. Enter Panda-Puss.

I looked at the documentation for how to build a theme in WordPress 5.9 Joséphine. It goes on and on about this file theme.json, so I thought it must be important to get it done first.

I understood the point of theme.json to be to design the site, so I got quite bogged down – I couldn’t understand why what I was doing wasn’t reflected in the appearance of my test site. I thought I’d see if I could use CSS instead.

I looked in the code of other block themes for CSS files; on finding them, I looked to see how they were included for the browser to render. They’re hooked in from functions.php, and I had already copied and pasted that code into place. It was only as I was setting up my Sass directory and writing some SCSS code that I realised that theme.json wasn’t about styling the site – rather it allows the user to design the site with settings and style that you permit using theme.json.

I’ll worry about theme.json later – I think I should probably have some sort of design up and ready before I create stuff for the user to change.

So far, I’ve only done the structure of the index and archive pages, but I’ve not created the best file structure. I thought I’d have an SCSS file for each type of block (e.g. post blocks), but it hasn’t quite worked out that way. Once I understand what’s going on, I’ll be able to design the next theme better in advance. Currently, I’m learning by doing, which I find works for me.

I’m also confused about parts and templates, and I thought I’d be able to add whatever code I liked, but adding <article> tags to the posts in the index view caused an error in the back-end. I’ll worry about all that later, when I’ve got the basics done.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.