[00:00:00] **Dustin:** On today's episode, we are going to talk about the theme.json file. The file that controls everything in a Full Site Editing theme right here on your website. Engineer podcast episode number 535.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and today I'm excited to be with you today and I'm filled with energy and passion about WordPress today because I've just gotten home from WordCamp US and it was a great event and there were so many people that I haven't seen in so many years, whether they hadn't been to WordCamps or from Automattic, I hadn't seen them or whatnot.

And so it was just a great time of catching up. There was a lot of dry mouths and hoarse voices from all the talking since most of us just sat behind a computer all day long, but it was all good and there were some cool sponsors that I got to talk to and just kind of hang out and involve with the community.

It was a great event. National Harbor was a really cool kind of like small area of D. C. It was a great walking environment. We could walk to and from hotels and get food and all that kind [00:01:00] of stuff was all within walking distance. So we didn't have to worry about transportation here or there.

And so it was a good event and you can watch all of the replays and they're not quite all online yet, but they'll be both on YouTube and on WordPress dot TV. They're still processing through. Through some of those, but if you go to the WordCamp US website for 2023, you still should be able to go to the live stream page and then find the YouTube replays there.

And those will just be basically big, long segments from the day. And you'll have to kind of scrub and try to figure out where the starting point was for each session, but they are all there. And I highly recommend checking some of those out. There were some really good ones about full site editing. I sat in one about setting up a perfect dev environment.

I learned a little bit more about AI and how you can use AI to generate content and come up with a business persona for your customers or your clients. And so that's really great. And it's just, there was just a lot of information, but the best was definitely talking to people and just kind of hanging out.

I do have a couple of announcements that I want to share with you as we get started today, and then a plugin.

The first announcement is about [00:02:00] the 100 year plan. Secure your online legacy for a century is what it's called. But basically WordPress . com now has a brand new plan that you can sign up for and you can have your website online, hosted for 100 years. Think about that from 2023 to 2123, you can have all of your digital assets online, and that includes all of the hosting. It includes all of the things, whether that be support, whether it be domain renewals. And you can sign up for this now at WordPress dot com.

There's a link to it. If you go to yourwebsiteengineer.com/535 and the 100 year plan comes in at $38,000, which is a decent size amount of money to put up front. But if you think about 100 years at 300 a year for the business plan, that's 30, 000 plus all the domain renewals for 100 years.

That's just a lot of, that's a lot of things. But upfront costs, you'll save tons of money in the next hundred years, but I wanted to share that point today.

The other thing that I [00:03:00] want to share today is about organic themes. They are one of the oldest WordPress theme shops. They were founded in 2009 in the town of Lahaina on Maui, which was ground zero for the devastating wildfires that just took place a few weeks ago.

And so they are running an apparel store to raise money for the Maui Strong Foundation. And so if you're interested in learning more about this or going to the store and finding some of the, the cool shirts and whatnot that are there, I have a link to that in the show notes as well.

And then lastly, this was part of the announcements from Matt.

So Matt did a little bit of a keynote at the very end, kind of talking about the future of Gutenberg and highlighting some of the new things that are coming in phase two. three of WordPress and whatnot and kind of a sneak peek into WordPress 6. 4. Again, that's all in the recaps for a WordCamp US, but they unveiled a little bit of a preview of the design 2024 default theme and this is expected to come out in November and it has [00:04:00] been a theme that doesn't have a niche or isn't focused on a certain topic.

It is going to be one of the most broad multipurpose themes that can be used for nearly any type of website. And there's all kinds of information. I've got a link to this is in the show notes as well. And so you can see a couple of different examples of what a website could look like when it comes to using this new 2024 theme.

All right. In the plugin section that I want to share today is one called a Site Reviews, and it is a complete review management solution for your website. That's designed to work or similar to like, Amazon or TripAdvisor or Yelp. The plugin provides blocks or shortcodes and widgets. All of that so you can display testimonials or reviews on your WordPress site and they have a live demo and they have five stars is the ranking and it has 50, 000 active installs.

So if you are interested in adding reviews to your website, this is a perfect plugin to do so. There's the. There's tons of documentation. There's tons of documentation and lots of images on the WordPress repositories. [00:05:00] You can see how it works. Or again, you can use that that short link that I talked about last week and just go to taste WP dot com slash plugins slash site dash review and you can see it in action just immediately.

So those are the things that I wanted to share today.

As I'm on this mission to eventually get all of my WordPress sites over to a block editing themes, which I can see there's gonna be tons of benefit for doing it. It's just a matter of actually doing all the work to get them transformed. What I'm learning is a bunch of different things. And so I'm learning how to use the editor, the site editor and how to rearrange blocks and how to use a combination of blocks to create patterns and all of these different things.

And the driving force behind a full site editing theme is actually, what's called the theme.json file. And so I wanted to give you a little breakdown on what the theme.json file is and then how you can be used or like all the information that's in there just to give you an understanding of what's in there.

If you would happen to open this file and maybe it's a good idea to download the 2023 theme and you can just unzip it on your [00:06:00] computer and then you could open up in a text editor, whether it be vs code, I've been actually using Nova, which is a Mac only editor recently, and I've been really digging that, but I have that opened up and I have a theme.json file in there that I am going to kind of talk you through and walk through.

But I'm also going to give you a little bit of a kind of a high level beginner type. This is what the theme.json file does. And then we're gonna talk a little bit about more key technical aspects of this file.

Your WordPress website is basically like a puzzle made up of various pieces like fonts and colors and spacing and different types of blocks like paragraphs, images, headers, and you can use this to create your site's layout.

So typically on a page, you're going to have the title and then you're going to have the content block and maybe you're going to have comments at the bottom or you're going to have your meta field, all that kind of stuff. These are the building blocks of your website. Now, the theme.json file is like a master instruction manual for putting that puzzle together.

Instead of manually adjusting each puzzle piece individually, you can use this special file to control how all the pieces fit together. It's like having a remote control that changes [00:07:00] how your website looks and behaves. This is kind of the same concept of like CSS. When we add a CSS class to a certain thing on our site.

Then when we style it, they're all going to look the same as long as they have those same classes. And so I see a lot of similarities between the theme.json file and CSS and kind of how it works together. It's kind of like the master plan of how everything looks on your website.

Inside the theme.json file, you'll find a bunch of settings that define the overall appearance and behavior. They'll control things like colors you want to use, fonts you want to use. How much space you want between elements and so much more. One of the cool things about the theme.json file is it's just not about the individual pieces.

It helps you arrange bigger sections of your websites like headers or footers or templates or a content blocks or patterns, all of that kind of stuff. It's like a blueprint to tell your website how to arrange different content blocks on your page.

And the cool part is, you don't have to be a coding expert to use it. You can adjust these settings through the user interface, making it easier to customize your [00:08:00] website, or you can go and you can make some changes in the theme. json file, and then those changes will affect your entire site.

Say, for example, your theme.json file says that for your body type text, that's going to be Courier New and which is kind of like the, the code, the code text, if you will, you know, that big kind of blocky text, but what you could do is you could go into your theme.json file and say, no, I actually want to use Helvetica or I want to use Times New Roman or Garamond or any of those different fonts, you can define that in the theme.json file, save it and then all of a sudden your entire site is updated in all of the body text now is using the new defaults. So the theme.json file is your website style and layout command center.

It lets you control the look in your feel of your WordPress site in a convenient and efficient way, giving you more time to really focus on creating awesome content and engaging with your audience. And so you'll see when you download a theme like 2023, or I'm using the Course theme by Sensei, what you can see is you can see all of this stuff defined.

And then [00:09:00] I can see this a huge benefit if you have multiple sites and so like my wife has two different sites. I have yourwebsiteengineer.com. We've got a few different properties online that we're working on that I'm working on and I think it'd be really great that if I can use the theme.json file, for more than just this one site, if it's on multiple places, like, Oh, well, I really like how this, this header looks on this. And so I'm going to copy that to this theme.json file. And you can kind of like maybe even set up more of a, like a starter theme with here's the styles and the things that I really like.

And then I can plug in the font colors. This defines like your primary colors. It defines what your button colors are, defines what your header font is. All that kind of stuff is all defined in the theme.json file, and if you have multiple sites that have similar things, then you can use the same settings inside the theme.json file.

Let's dive into some of the more technical aspects of the theme.json file. It. This file basically gathers a wide range of configuration options that would be typically scattered around multiple theme files and settings. This includes [00:10:00] parameters for colors, fonts, spacing, layout, block styles, block supports and more.

So we're consolidating a lot of our settings. Instead of having them in multiple places, they're all in this one file. The JSON structure is a lightweight data interchangeable format. It adheres to JSON structure comprising of hierarchy and of objects and properties. This makes it machine readable and easily manageable.

The json file is very easy to read. And if you wanted to add another custom templates to your list, you can just copy from comma to comma and then duplicate it and then rename it. It's really it makes a lot of sense when you see it. The other thing about the json file is that the file structure is designed with hierarchy in mind.

This also means that you can accommodate both global, site wide settings and component specific configurations. For example, you can define a site wide color palette or typography that goes across your entire site, but then you can also specify how a block uses those things. So you can say that all of my block quotes are going to use this specific font and have this background.

This can all be set up in this file.

[00:11:00] You can also define block styles and block supports. So the styles are the visual treatments for the block. So say your buttons, you can define what a, when you just add a button, it's going to do, it's going to look like this. You can define all of that inside this file. You can also define the support so you can enable or disable specific features for different block types.

For example, you can dictate whether a certain block supports custom alignments or background color changes. So by default, like they will work as the blocks were intended by WordPress , but you can take some of that off. So if you're a website designer and you want to make sure that nobody ever right justified anything, you can take off that option.

So they cannot right justify an image or text or whatever.

The theme.json file also has template configurations. So it allows you to. It's going to dictate the arrangement of blocks within the templates. So when you create a new template, it is going to say like, Oh, I want the, you need a title, you need the content, you need a comment section, and then you want the meta.

Or if it's a blog page, you know, a blog archive page, it's going to have a post in the featured image and the meta, and then the excerpt you can, it's [00:12:00] all defined inside this file.

I think there's a lot of potential for future flexibility with the theme.json file. As we said, it's, it's outlining everything, but if you wanted to change something very quickly, you can do a find and replace, and you can do it in one place and you can save, and then your entire site is updated.

So for example, if you wanted a different font or you wanted to remove a font, or you wanted to do anything, you wanted to change the color. You can do that and find and replace and do it right inside your code editor, save, and you're off to the races.

The other thing that's really, really, really important. And I say this with so you don't have to spend all the hours that I wasted trying to figure this out. But if you have a theme.json file and your theme has a multiple color options. There will be a JSON file for each of those color options. I think they call them styles now in full site editing.

So in the course theme that I'm using, there is a theme.json file that is right there in the root directory. Okay, great. I'm going to start putting in my custom fonts into this file. All right, I'm going to put the custom fonts in and [00:13:00] lo and behold, they weren't loading and it turns out that I had loaded a dark version.

So my theme was using a dark.json file because that was the style that I had chose and much like CSS, it's going to go through your theme.json file first it's going to do all that and then it will load the dark dot json file. And so because the dark has its own custom fonts, it was basically like wiping out any of my changes and then putting those new fonts in there. So that took me way longer than I care to admit that I kept putting the fonts in. I was like, why is this not working? I ended up having to build a brand new theme from scratch. I put the fonts in and they worked and I was like, what is going on here? And then I moved them back to my theme.json finally still didn't work.

And then all of a sudden I was looking through the file structure of this theme and I realized that I was not using the default. So if I once I changed to the default, then my drop down menu where it says to choose fonts that worked perfectly. It changed my fonts across the site. It was it was a hallelujah moment if you will.

And that is something that [00:14:00] I learned that I want to make sure that you do not have to go through that because I was getting so frustrated in the fact that I couldn't add my custom fonts. And that was like the next piece of the design thing was to, Oh, I got to get these fonts working so that I could work on the next thing.

And I'm going to say this again, even though I've probably said it 50 times on the last 500 plus podcast episodes, you do not want to edit a theme that is one that's on the WordPress repository .

And so what you can do, and there's really not like this whole child theme. Really isn't a thing with full site editing anymore. It doesn't really make sense and the best kind of the easiest thing to do is actually to create there's a plug in called create block theme when you create a block theme, it's going to basically duplicate the entire theme structure and it's going to you get to pick a new name and then that new name will be added to all of these files.

And so what you'll do then is you'll now have a clone of your theme. So it's not gonna be a child theme. It's gonna be a direct clone. And then I would recommend getting rid of those styles that you're not needing.

Get rid of those page templates you're [00:15:00] not needing and just kind of clean up things so that you don't have all these extra files kind of floating around all over and I think that'll be a good place to stop for today I know that there's probably a lot more full site editing things that we need to talk about but if you are interested head on over to the show notes episode number 535 and there'll be a link to the create block theme plug in and what you'll do is you'll install that and then you can say, Oh, I want to clone 2023 or I want to clone the course theme or I want to clone any of these other block level themes and then you give it a new name and it kind of does its thing in the background and then you can actually get rid of that plug in.

You don't need it anymore and then you'll have your own block theme that you can customize and it will never be overwritten by anyone because you are the one controlling it and it has a separate URL or a separate slug so it won't think that there's any updates coming from the WordPress repository.

So that's what I want to share with you today. I know that I hit you with a ton, a ton of information, but you can head on over to yourwebsiteengineer.com/535. You can get all the details there and I will be bringing you more information about Full Site Editing as I continue to work on these [00:16:00] projects and learn and try to optimize my flow and try to speed up the process of going from classic theme to full site editing theme.

That's what I want to share with you today. Take care and we'll talk again soon. Bye bye.