Creating a Full Site Editing (FSE) WordPress Theme

hey everybody aj morris here and i am embarking on what it's like to create a full site editing theme in 2021 now if you saw my blog post yesterday and i've linked to that in the description below i'm giving it a try right wordpress 5.8 was the first phase of releasing the full site editing options right it introduced the theme.json file for theme developers to start using and working with and i'm really excited to dive into it i'm chronicling my journey over the next 30 days or so to really go in and play with it and in this video uh series i am just gonna be touching on little things as we go to create a site or create a theme rather for my own personal site that's what we're doing and i am going to be using my ipad pro to film all of the editing that's something i'm i'm wanting to try using my ipad more for a daily machine and i thought why not do that with everything that i'm doing so editing these videos producing all this content is all happening on my ipad pro really excited to give that a try and i figured why not bring you along for that journey as well i'm using the ipad pro and i'll be using some tools that are working for the ipad but the good news is that all the the lessons and the things that you're going to learn along with me it's just code and so you can use any code editor you could use an ssh client really you can use whatever you want to write that code that's the beauty of being able to write code it's a code in the browser that's all i'm using and it'll be on the ipad so you should have no problem following along with that now before i get started i am launching a new youtube channel it's called ask aj i've been in the the wordpress space for a number of years and i always get people that are asking me random questions and so as i launch this new youtube channel i would love to answer your questions so if you have something that you're looking to have answered shoot me a twitter reply a dm comment on a youtube video and i will do my best to uh do that make sure you hit the subscribe button over at youtube and click the lo the the thumbs up would love a thumbs up on the video and also click that little bell because uh at least what youtube tells me is that you're going to get instantly notified of when i upload new videos all right i think i've got all the housekeeping stuff out of the way i guess the the other thing i would just mention is that you can get the you get notified via email of when videos and and blog posts come out for this if you head on over to ajmores.me uh watch or click on on one of my blog posts and then at the bottom there's a nice little subscribe box that you can subscribe to my newsletter right now i've got it set up to send these blog posts out daily for you so you can get them as i produce this content without that or with all of that said let's go ahead and get into this video here on my screen i've got a staging site and this is one i've used to play around with uh just just to test some things out really get a feel for where gutenberg is at and you can see i've got some themes i've got different themes here and i do want to mention that i have gutenberg installed gutenberg it's important that for right now that you have gutenberg installed so i'm running 11.6 which is one of the later i think it's most recent version actually of gutenberg and that's the block editor that lives in core but gutenberg has a project is a project that you can or a plug-in that you can use to get the latest and greatest before it gets merged into course so you can really start to try everything out so i like to just use that especially on this site it's my personal site and it just gives me a better option to really start moving towards the block editor all right so that is that covers the site and i need to create a wordpress theme so i've created wordpress themes in the past for myself for clients as a freelancer and so i'm going to be doing that again and we know having had that experience before i know what is needed to have a wordpress theme and really have a theme kind of be acknowledged by wordpress so we're going to create that first and then we'll go in and see how to get our theme to be full site editing and i think it's a lot easier than you're going to think that it is i'm going to use a product or an application called code editor now the code edit is by panic you might recognize the icon if you've been around the space for a while as coda which was a mac sftp terminal [Music] a website code editor all in one tool it is no longer available in the app store so there are a few other options if you are familiar with with kind of living in the ssh world really anywhere you want to go i'm going to use the code editor from panic at least for now and we'll see what else is out there through throughout the series so i have already connected and ssh into our sftpd into my site i've gone ahead and moved into the themes folder you can see that right here and you can see the themes that i've got in here the first thing that i need to do is create a directory so we're gonna we're gonna create a new folder here and we're just gonna call it aj fse theme it feels like that's a good name to to go with and then while we're in i need to create a file we're going to call this index dot php wordpress requires that there's two files those are the minimum requirements for a wordpress theme one is an index.php file the other is a style.css file so i'm gonna go ahead and just edit this index.php and we're just going to open it up type silence is golden and save that now i don't believe i'm going to need this so i'm just going to go ahead and close that out and we'll go back into the folder now the next one i need is a style.css so style.css i do need to edit this because wordpress does require [Music] the style.css and having a specific header uh block of of code to recognize let the the theme system recognize that hey these files that live in this theme folder are in fact a wordpress theme we're going to put some stuff in here before we do that though i want to go back out to themes and i'm going to use the 2021 theme as an example and i will find uh the style css for that so that we can at least see what it looks like and i'm going to copy all of this kind of like lines 3 through 20. so we'll copy that and then i can actually close this i don't need it anymore this is my style css so we'll paste that in and now the the beauty of it is i can just remove a bunch of stuff that doesn't matter we're not doing anything 2021 related so we'll get rid of that post this in the theme uh repository so i don't need to worry about tags that kind of clears some things up a little bit let's see let's start at the top now and we're going to give it a theme name so this is just aj full site editing theme [Music] we need a theme uri now i'm just going to use my blog i'm gonna also use my blog for the author uri and i'm gonna change the author from the wordpress team to aj morris and then i need to give it a description so we'll go ahead and say a full site editing theme experiment so require at least this is what version is required i definitely need it to be 5.8 test it up to 5.8 php i'm gonna say that this is 7.4 and i don't know if that's true but that's what my server's running so i think that that probably makes sense and then uh version here is just the version of my theme and i'm going to be on the the dot version everything else oh text domain we need to change as well so we'll just say aj mfse alright so that's all we need to do in this file for right now let's go back over here to safari and we'll reload and we'll see that i do in fact wordpress now sees my theme so if we click on theme details here we can see my name of the theme we can see the version the description and the author let's go ahead and activate this and we see it's activated now i don't have a screenshot and if i had a screenshot i'm pretty sure let's look at the 2021. if i had a screenshot.ping file inside of my folder i would have a an image that would then display up here but i'm not gonna worry about that right now i'm gonna go ahead and go over to the front end and just reload and i see that we have a white page okay so we've got a theme but nothing is being displayed that makes sense i didn't tell wordpress to load up a template i didn't tell it to find there's nothing in my index.php file to show this it's not pulling any of the like php helper functions and all of that to display there's no loop this makes sense the next step to getting a full site editing theme and i googled this prior to the video just to make sure i knew and didn't have to watch or let you watch me fumble through it is we need to create uh back in in our folder here we need to create another folder we need to call it block templates all right so we've created that and then inside block templates we need to create a new file we need to call it index.html now we don't have to put anything in this file similar to how classic themes or classic wordpress required a index.php file and a style.css with full site editing it actually requires the block templates folder and an index.html file in it in order for full site editing to work so if i now go uh back out here to the wp admin and i reload we're gonna see a new a couple new things on the screen here first in the menu bar we're going to see the site editor option so we'll explore that in a second and then next we'll see this little message here that just says hey you're using an experimental full site editing theme full site editing is an experimental feature and potential api changes are to be expected so we've got two little notice two little things here that are related to full site editing but that is showing up now if i load uh reload the front end we'll start to see some familiar things we've got our wordpress admin bar at the top so you can see that i'm logged in and that i have empty template index which which just is saying hey there's nothing in this index.html file so full site editing is going to take over and allow us to to do that so the last thing that i want to do here in this video is just get content on the page and the great thing is that we can do that all within the block editor so if we go over here to site this is full site editing right this is like loading up gutenberg for us to to start manipulating our site with so you'll notice that there's a little icon over here if i toggle the navigation we'll see that we're in our index template you'll also notice you're in the index template up here if you want to browse all templates it opens it opens this up you can create new templates in here so you could create a front page you could create a page an archive search 404 you can create all of these things right within wordpress so you're not having to go in and think about all of the all of the code to create these templates as we think about the wordpress template hierarchy that's pretty cool let's give this a try i'm going to close that out and i'm going to click on the blue button here for the block inserter and do it during some of my research i found that there is a query loop so you can add that into the page and we'll go ahead and close that navigation area and this allows us this query loop allows us to kind of cycle through a few different options of how our blog post might show in this query loop so you can see on this one you have a featured image and then your blog post title and if you go over you've got one that has columns you have this like black with very big big titles and the date over here on the side there's a lot of different options right this is like a masonry type one and some of them that have images those will show up other ones that don't have a featured image it doesn't show up but it does show you that the block there's a featured image block that is to do that so that's kind of showing up i'm going to try to keep things a little simple though and just show this one so we'll go ahead and select choose here that loads up and on the toolbar for the block we've got these little likes they look like little slider like a slider icon but if you click on that it's actually your display settings so the display settings is set to one item per page that makes sense given the block you could go in here and say 10 or 5 or whatnot and you could do that you could even offset it you could do a max page to show so you have some options in there but because we're editing that index which which if you think back to the the wordpress uh like template hierarchy the index is like that catch-all so i don't want to necessarily customize it based on these display settings here i really want to let the the template do its work so i'm going to go over here to the settings on the inside the block editor we're going to go into the template we see that there's no options here but if we go back to the block we see under settings that we can inherit query from template so if we go ahead and just click that pill and then let's click save and then save again and then we'll go back out to the front end and reload we can see that it that this template is in fact going to pull in all of our our set of posts and it's pulling in a set of posts based on what we've set inside our settings and reading sections i think it's i have it set to six posts so there's one two three four five six so if i change this to 10 and reload again you can see i've got some new posts in here now i'm also pulling in the excerpt so if we wanted to pull in the full text we could do that if we reload it looks like it's not pulling in the the full text yet but that might be an option in here looks like this is a post excerpt block so i need to to make some changes there but you get the idea so it is pulling in some of our settings i'm gonna go back to excerpt and sick post just because that's what i am kind of wanting at and that's it we're now into a full site editing theme it was just that simple so in in recapping this all up we we were in our block editor here let me go back up to to show you here so we created our folder we created our index.php file our style.css file we created a block templates folder for making sure that this is an fse theme and then inside that we created that index.html file so that the block editor and understands that this is in fact a full site editing theme once we did all that we were able to get inside of of wordpress we were able to get into the full site editing notification so we got the site editor uh menu item in the left hand side and if we go back to the appearance and themes we get the little notice that just says that hey we're using a full site editing theme this is perfect and a great place to stop i'm going to stop and tomorrow in the series i'm going to be looking at what else is there that we need to create in order for this to really get going and that to me the next place is to start looking at the theme.json file what that is what you can do with it what settings you can set in there all of that so i hope you'll join me tomorrow as we go through make sure to click subscribe hit the thumbs up button let me know that you like this video and click that bell uh to be notified of any new videos that i post on this youtube channel so thanks for watching thanks for hanging out and i will see you tomorrow

Channel: AskAJ

Views: 260

Keywords:

Id: byszwsoOauI

Length: 21min 38sec (1298 seconds)

Published: Wed Oct 06 2021