Section Templates & Wrap Up | Episode 10/10 | Getting Started With Content Hub for WordPress Devs

Final episode wraps up HubSpot theme development for WordPress developers. Covers section templates, dynamic data-driven modules, and drag-and-drop sections. Speaker encourages subscribing and connecting on social media for more tutorials.
So this is the last video in this video series and hopefully you have become more confident in your journey to becoming a HubSpot developer and hopefully things are more familiar with you. But let's go ahead and jump into it. We're going to wrap things up. If this series has given you any value, please like subscribe to this channel like all these videos. And if you have any questions, feel free to reach out to me on Twitter. I just joined third 35 minutes ago. Hello Twitter world. My handle is johnisfuler. It's the same handle that I have in the slack channel, the HubSpot developer Slack channel. So reach out to me any other place if you have any questions on this series. Otherwise, let's go ahead and put a bow tie on this entire series and then we'll talk about some important next steps for you afterwards. So stay tuned. You can see I went ahead and merged all of the branches, our skeleton styles and properties branches into the main and we've gone ahead and built out a homepage as well as our dynamic page with our properties. And the homepage includes our dynamic data driven module that we created to be used in multiple places. You can see that I've gone ahead and added an extra field, property listings page, URL field. And basically there was a bug in the template. It was looking for the request path and that wasn't working if it wasn't the the dynamic page. So I had to add that field in. That was one bug that maybe some of you already picked up on or foresaw. And let's go ahead and look at the other module that we created, the median text module. We can see it used on the homepage. It's working great in a drag and drop setting. And we went ahead and built out the page. It all looks great. And then we built out our dynamic page. As you can see we have our individual and then we put put our breadcrumbs in and it's all coming together nicely. I went ahead and added the links to query all of the HubDB properties based off of the query parameters that we added. And you can see our properties database if you remember in that video that's created and it's all come together nicely. So if you remember in the first video we looked into translating three types of WordPress content and that was our custom post types, our Gutenberg blocks as well as our page builders. So we've covered the custom post types pretty in depth with dynamic data driven templates. And then we covered the Gutenberg blocks and the equivalent of that in HubSpot was custom modules. We covered that in the last video. A lot of the page builder stuff is kind of baked into the theme and so Hubble or sorry, the CMS boilerplate comes shipped with a lot of this drag and drop DND area code. Something that you'll need to look up the documentation for. But a lot of this stuff is pre built for us and it's pretty easy to figure out. I believe in a previous video I mentioned something about the offset and the width parameters being based on a 12 column grid. Definitely study the documentation for this. One thing that we did not cover and I am going to leave as homework for you is drag and drop sections. So the boilerplate has added a sections directory in the in the boilerplate theme and these sections allow for multiple modules to be used. And you can see if I go to the HERO banner there is a linked image module as well as a rich text module and people can add an entire section with these section partials. And in the boilerplate you can see that you call it with the include dnd partial tag and that is using the sections. This is the home template. And so one thing that I could do is go ahead and pull some of the changes from, from this and merge it into our theme. But definitely take a look at the sections in the documentation. That's your homework as a developer to look into that. It basically adds an experience where you can go to a page editor and click the plus icon and then custom sections will appear here and you can add, you know, default layouts here. But the custom sections are what is going to populate here whenever you add these include D and D partial sections and in the upper part of the sections you label it as a template type of section. So definitely go ahead and study the code here. It's going to take your theme to the next level. Content creators will especially thank you for this because sometimes having to build out an entire D and D section is not, you know, what they want, they want it pre built for them. Very helpful. Again study that. I think that about covers pretty much the whole experience of creating a HubSpot theme. Hopefully I talked about it, you know, in WordPress terms or terms similar enough to to where you could understand how to navigate and get around in HubSpot. I want you guys to definitely subscribe to this YouTube channel. I want you guys to definitely hit me up with any questions. I am here to answer them. Yeah, I'm here to help and definitely subscribe to this YouTube channel. Again, there are content creators and developers way more talented than me. So, yeah, I'm subscribed. You should, too. All right, y'. All. I'm gonna see y' all next time. Hopefully. Hopefully there'll be a next time. If you follow my Twitter account, maybe you might see some YouTube breadcrumbs that I throw out there. Made my own YouTube channel. It's private right now, but yeah, follow me here and stay tuned because there might be some more tutorials out there for you guys. All right, I'm going to sign off. I want to thank you guys for joining me on this journey to create a properties theme. Take care.










