7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Wrapping Up

Hey, welcome to the final video of Building Gutenberg Template Layouts Without JavaScript, which you have just successfully done. So you set up your custom post type, you built it out so that you would have a pretty fine selection of up in the back end, and you styled them up so that they would look the way that you want them to look. You then created a filter to pull out all of the markup and all of the class names that you didn't want, so you could then apply the styling that you wanted to use on the front end. Without having to try to directly over-write the default classes that WordPress loads, using a bunch of important tags. Instead, keeping your template code minimal, keeping your CSS styles minimal, while still allowing that default WordPress code to be loaded elsewhere in the site, if you need it. So we just created one section of the design that was originally put together in HTML, but from here, if you want to keep building out more sections into a site, it's the same process. So you'd have a couple of different options if you wanted to add all of these sections into your site. On the one hand, you could do the same thing in your existing landing page custom post tile. You could just add in more items into this template, and then they could all be run through the filter that you're building in here. And you could add in new conditions if you found that there were certain block types that needed to be treated differently in order for you to get the mark up out of the system that you wanted to use. Or if that's getting a bit too messy, if you end up with an array here that's got just too many different nested items. Then you could register multiple post types, one for each section of the sites. So for example you could have a hero unit post type, set up the blocks that you need to control this area here. Then in your index file, set up a couple of different custom queries. So in the same way that you use this query here to pull the content out of the landing page, custom post time, you could do the same thing again. But this time, create a query for the hero custom post time. Exactly how you go about implementing this technique in different ways really depends on the specifics of what you're trying to present in the back end and how you need it to appear on the front end. There are certain limits of this method, referring back again to the hero unit. There would be no way with the current default blocks to create a presentation in the back end with this content showing up over the top of this background image. So you would have to have a section for the background image that was separate this content here, because with the way that markup is produced in the adminiary of WordPress, it's just not possible to get the content from completely separate blocks like you would have for this content here. And then absolutely position it over the top of other blocks. That's why in our existing custom post type our buttons and it takes it down here. This isn't a reliable way to get these two items sitting up over the top of this item. So if you did need to have an exact replica of this hero unit or an exact one to one replica of these items here in your admin panel, that's when you would need to get into the process of creating custom blocks completely from scratch. And if that's something that you are interested in doing, I'll include a link in the notes below this video to some courses that we have to help you learn that process. And bear in mind that you can always use multiple approaches in the same theme. You can use our custom post type and filter process for one section of a site, and then maybe for another section of a site you can create a custom block from scratch. With this method, with this approach it does let you work with a comparatively simpler type of coding. Everything is just contained inside your function's PHP file and the template files of your theme, which gives you sort of that intermediate level of complexity. Which might be a more suitable solution when you don't necessarily really wanna get deep into the nuts and bolts of working with Gutenberg. So I hope you enjoyed this process, I hope you're feeling well equipped now to create some new ways of interacting with Gutenberg through your themes. And perhaps even that you picked up a few general coding tips along the way. So thank you so much for taking this course and I will see you in the next one.

Back to the top