This series, Core Confidence, is about returning to the WordPress core experience and skilling up on developer-focused knowledge. I chose ‘Confidence’ as a part of the title in this series, for this one reason. Confidence is a skill that one can learn. You build confidence with persistence, removing negativity/blockers from your journey and from reaffirming your belief in that journey at every moment that you doubt it. Coach yourself in the understanding that confidence is growing even when you feel quite the opposite of that, because becoming better at a skill starts with not knowing it at all, or if at all, very little. Feel into that, and press on.
When I read about the Interactivity API on WordPress.org, I thought about how many things could be accomplished, and I paired that with what type of plugin or theme I would be best suited to build based on my existing knowledge base. Learning doesn’t have to be tenuous. Layer on top of something that you already like, so that you will persevere because you are more invested.
Topically, writing was what I came up with – so essentially, a blog theme. This is not a tongue twister, I promise. I decided to build a Block Blog theme, titled Stylewriter, where the title typed itself out typewriter style, when the featured image was hovered upon. ChatGPT helped me to articulate the step by step process, not only for this article, but also for my process of learning. Aside from that, I laid out my first three months in terms of which books, articles (mostly on WordPress.org) and courses I would read and do to develop the skill. This took some initial planning, because I had to assess the level of those courses and what each one taught so as to add them at the right stage of my developing knowledge. So, planning, start with the roadmap – what do I not know and what do I want to do. How do I learn ? Do I need books or courses, videos, or a mentor.
I have a Sitepoint.com lifetime membership and that has been fundamental on the basics – PHP, MySQL and WordPress theme/plugins, and then added to this, I am doing the following courses at learn.wordpress.org:
A Developers Guide to Block Themes – Part 1 and Develop your First Low Code Block Theme
I used Studio, mostly, for building and testing the design and build locally.
I am starting from scratch, because I have always been a hacker. I have never written any code myself beside HTML and CSS. In the past, I would have used existing PHP, MySQL and JS, and modified them for what I needed. I don’t imagine that I will be able to build from scratch immediately, but this is also not my goal. I want to understand the fundamentals more comprehensively, so that I can problem-solve and troubleshoot, with or without the help of existing snippets. Building block themes and plugins and modifying functions or blocks or creating them, will develop on its own naturally as I deeply understand the connections between those 3 languages, and how they drive the functionality that is seen on the live site. I have known this intimately in a Classic Editor context. Now I want to build upon that basic foundation, and extend it.
There will be a lot happening here, but I did not overwhelm myself with too much theory. I balanced making progress, with learning, so I got into building the theme I wanted to build right away. I combined learning how to write JSON, by building the theme.json file, with the Site Editor’s capabilities for creating your own theme.
The two WordPress Learn site courses I shared earlier were crucial for this. You could build in the Site Editor and then export your theme, which will generate the theme.json file for you. Alternatively, you could build your theme.json file by hand if you want to, which will be good to learn the formatting and basics. Adding the schema to the top of the theme.json file will help you to get correct properties auto-populated once you start typing, and it will streamline your syntax for you, so be sure to add this to the start of your theme.json file, after the opening bracket.
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,And well, who doesn’t love a cheat sheet: Theme JSON Reference. There ya go! We are currently on version 3.
The premise of the theme is that since the Interactivity API provides a standardised way for developers to add interactions to the frontend of the blocks, I can use it to insert JS for the animation, but also to create a connection between the Featured Image block and the Title block. Having built out the foundations of the theme, and mostly comfortable with its styling, I’m going to spend the next month focusing on the JavaScript aspect of my learning, and how the Interactivity API can be used to create what I want to do. I can finish the theme development courses during this time, as a mental break from the JS whenever I get tired, while I continue to add styling and layout edits to my theme as it is right now.
This is what I have so far, and the titles are above the text for now, until I implement the animation and interaction between the Featured Image, and Title blocks.
As I build, I want to point out that I found the Dot Org instructions on how to utilise the Create Block theme plugin for its settings, alongside the theme export feature for Block themes to be quite useful. Those are very expansive and explanatory so you can refer to the related links in this paragraph.
That’s it for the first installation, and next month I’ll update about JavaScript and the Interactivity API as part of this journey.