Creating a Site Skeleton | Episode 4/10 | Getting Started With Content Hub for WordPress Devs

Now that we have the boilerplate as our starting point, it's time to work on the skeleton of the site. So I am tracking the project with Git and I have gone ahead and made a skeleton branch. It's here that we're going to stay organized with our skeleton changes. And I'm going to show you the template structure of the boilerplate. Now, the main thing you need to know is that the base HTML template, which is in templates, layouts, base HTML is a single source of truth that has blocks. And these blocks are kind of like hooks in WordPress. You can hook into these blocks in other templates. But I have my head tag here, and this has all of my resources and all of the source of truth is in 1 file. In WordPress. One of the frustrations I've always had is you open up the document in the header php, you open up your body tag in header php, and then in the footer you close out the body and close out the document, and in the index you, you know, have all of your other markup. Then across every single template you're calling get footer and get header and it gets kind of cumbersome. So in base HTML, all you have to do is call the block to put content in that section. Here's what I mean. In the about template, we can see that we extend the layouts base HTML file and we open up the block body and then we close it down here. All of this markup inside of it gets rendered out when you use this template. Now, I know you saw the block header had default content in it, and yes, it does have that global partial tag that we alluded to in one of our earlier videos. This is calling the header HTML, which is in the partials folder, which is also in the templates. The block body is empty and the block footer also has default content as well. But what if you want to override this default content? Let's say we have a landing page where we don't want a full menu in our header. Well, all we have to do is call the block on a specific template and it will override what's in our base HTML template. That's the way we can get custom markup across other templates. So now that we've looked at the structure of the templates, all we need to do now is go to our header HTML and our footer HTMLpartials and input the relevant content from the header PHP and the footer PHP files. This is how I'm going to work on my Site skeleton and I will go and finish all of this up. And then what I'm going to do is open up all these documents and compare the original boilerplate code with the new boilerplate code and let you know my strategies and thought processes behind everything that I did. So I'm going to pause the video, finish out all of these tasks, and then we'll come back and discuss it full circle. All right, I am done with look at the base header and footer changes that we made in our site skeleton as well as any other relevant changes starting with the base. You can see there were minimal changes and that was just to reflect in our header php. You can see how we have our body class function on the body and then a div with an ID of page and class of site. We just made that match in the base HTML. Then moving on to the header. Let me close out of this. All right, let me move on to the header. We have our skip link and then our header tag. And we put that in our header file as well. You can see the skip link and then the header tag. A lot of this content from the boilerplate we had to delete because our header and our theme, if you remember, is just a logo, a menu and a button. This boilerplate, however, includes logos, language switchers or a language switcher, a search input module, and even a custom menu section module. It also includes a D and D area that we got rid of. But I chose in most of these instances to use native HubSpot modules. Hence I used a native HubSpot menu module instead of the custom menu section that comes shipped with the boilerplate. I did the same with the button. Those are the header changes that I made. Let's move on to the footer. In the footer, I added a custom section that has pretty rigid markup and layouts. And then it's combined with a footer section below that's a DND area that stands for drag and drop area. And. And drag and drop areas have direct childs of D and D sections and D and D sections must have a direct child of D and D columns. And this column is based on a 12 column grid. And a D and D column can have a D and D row and then the row can have a module or a column and you can nest markup to your liking. Definitely. Study some of the markup that comes with the boilerplate. But I moved this single column or this stacked content to be side by side just to show you that it could be done. Just note, whenever you have Columns side by side. You're going to need to include this offset parameter and that offset will be based on a 12 column grid. Let's look at our changes reflected in the theme editor. Now, you're probably wondering how I got to this theme editor and what I did in the Design Manager was I uploaded a HubSpot theme with each branch that we have. And so the properties theme skeleton I uploaded as a theme and then I went to it and clicked Preview. And when you click Preview, it opens up a theme editor that not only shows the markup, but it also shows the fields that you have. If I go to Fields JSON in my theme, you can see global colors. There are global colors. All right, I can see I have a logo, a toggler, a menu, and a button. And my footer, I have a logo. Then looks like all of the headings and content are correct and this content is side by side instead of stacked. One thing to note though, this does look like it is an H1 tag, so I need to go in and edit that. In my footer file you can see there's a HubSpot header module, and that header module has a value property, but it does have a header tag property as well. So I can Change it from H1 to H3. So I'll go in and add header tag equals H3 and I will add this for all instances of this heading module. Perfect. All right, now that I've made those changes, we should be good and we can move on from the skeleton to the styles part of the project. And after the styles, we'll set up our HubDB table for properties and then work on our coded templates for the properties. See you in the next video. Sa.