Creating Dynamic Page Templates - Ep. 8, Getting Started With HubSpot Content Hub for WordPress Devs

In the last video we left off.

Needing to replace all the PHP with Hubble, and now that I've done that off camera, we'll look at the code.

And then we'll talk about using modules in our hubdb property listings dynamic template and then we'll look at using query parameters in our HubDB table rows function. And finally we'll push this to production by setting testing to false using the template. So let's take a look at our.

Hubble and our Level 1 template partial.

Now you might notice our Level 0.

Template partials from the last video is.

Missing, and I'll explain why in just a second. But first let's look at our Hubble code and if you're looking for more instructions on replacing PHP with Hubble, we do have a rapid fire comparison from the second video of this series that compares Hubble and PHP and it also compares native WordPress functions with native Hubble functions. So definitely give that video a look and I'll cover some functions and filters that we didn't cover in that video right now and then we'll move on. First, let's cover what I consider to be the most important Hubble function, and that is the resizeimageurl function.

This function is going to save your.

Life whenever you are tasked with making a website faster, and it will resize.

Images for you, or really it'll resize.

Images for the content creator. So oftentimes they'll upload something that's 3,000 pixels wide and the image might look great, but it makes the website slow. So this resize image URL function gives developers the control that they need to make a lean website. And that is something you need to look up the documentation for and memorize by heart, in my opinion. And next we'll look at some of the filters that I used. Now, whenever you find yourself creating a lot of code or making your own macros, you'll definitely need to look and make sure a Hubble function or filter does not exist. Already I found myself even trying to use another Hubble filter, a regex replace to format the price myself. And I noticed that it was just becoming a lot of work and a lot of testing. So what I did was I searched through the HubSpot documentation and lo and behold, a format currency filter existed. And that's why I recommend having the Hubble documentation open with the filters and functions at your fingertips. That way you can search whenever you notice that you're doing a lot of work. So search for something that exists and build on that work. And here's another example of that filter. I used a format filter and I found that as well when I was trying to replace this bit of code when I was using the number format on a square feet field in WordPress. And so I was able to condense that down into this shorter line of code. And it's a lot prettier in my opinion than this line of php. If you disagree, definitely leave a comment. But now I want to move on from Hubble and let's talk about why we got rid of the level 0 partial. I'm going to go down to the section where we were calling that partial.

And that's inside of our if statement.

And where the page level equals zero.

Is where we have our archive page code.

And instead of including a partial, I opted to have mark up here and then call a dynamic module that could be used not only on this template, but also in other drag and drop templates. You see, a lot of times we'll develop a template like in WordPress, for instance, we'll develop a custom post type and we might even develop a custom plugin. And then somebody might come to us and say, hey, this is great, but I want to use this not only on a template, but I want to use it elsewhere. And so like an old school way of solving for this problem was to.

Create a short code.

And then Gutenberg came along and then we started creating custom blocks. And that kind of gives us a good segue into why we created this module. Modules in HubSpot can be used on a drag and drop page. So I went ahead and created a.

Property listings module, and I did so with the HubSpot CLI. But before we look at these files, let's discuss what we chose to bring over from our level 0 partial and keep on our template versus move to our module. And anything that was template specific we kept on our property listings template. Anything that was relevant to the module loop, we moved to the property listings module. And let's look at the three files right now. In the fields JSON file, we included one field for the user to interact with, and that's a HubDB table field. And all it does is provide a GUI experience for them to select the HubDB table instead of having to copy a table ID. And that's what it returns as a table ID. And in the meta JSON file, all that we added was a CSS asset, that is the property listing CSS file. Now we are calling this file with the Require CSS function in our template. But if we Include this property listings module outside of the template. It's going to need this CSS to ship with it. And because nothing is conflicting with other templates and this property listing CSS file is so small, we're including it this way instead of creating a module CSS file. And now let's move on to the modules markup. And we moved everything relative to the loop from the level 0 partial to this modules markup in the module HTML file. And you might notice that we're using the HubDB table rows function. And this function is taking our fields value, our property listings DB field as the table id. And you might ask yourself, wait a second, didn't we set the table ID and the template? And the answer is yes. So we have to figure out how to get this template to play nice with the module. And the answer lies in the module syntax. What we can do is take the field, the property listings DB and set the value like so, and we set it to our table id. And that's how we're getting this programmatic table ID based on whether we are testing or not to go ahead and pass on to the module itself. And this is where we will talk about the query parameters that we mentioned at the beginning of the video. And it's an additional option that we can pass to the tablerows function. And it's a string that can query.

The hubdb database and return the relevant option items.

And we're handling this query parameter logic up top. Basically what we're doing is we're giving users the ability to click a link that has a query string attached to it Based on the HubDB select fields for availability and subdivision. It's based on that value. So we give the column name with the select fields ID as the value. And what we do with the query params empty array is we are pushing to this empty array, then we're joining it into a string, and that is our query string that we are passing to our tablerows function. And let's talk about the request variable. The request variable allows us to use a query dictionary which takes the query.

String part of the URL and makes.

It into a key value pair. So we're checking if the key exists in the query string. And then we are appending this little string that we're building right here to the array and we're joining it and making a string. This can be kind of confusing. So what I'm going to do is show you the module now and show you the template and we will go ahead and push it live. What I'll do is go to the property listings template and I will go ahead and comment out this helpdb table rows function. Since we've moved it to the module, I'm going to save. And now I'm going to say testing is false. That's good. And so let's go ahead and create a template now that we've made testing false and all of these testing variables don't matter whenever testing is false. And so we see that the table ID is set to the dynamic values and let's look at setting those values on the page right now. So I'm going to go and create a website page. I'm going to call it Property Properties and then I'll select my template. I'll go to the property listings test template. That is the correct name. Yes. And. And I'll select the template and then in order to have a dynamic source for the page, we can see our fallback text is working. We need to go to Settings first. I'll give it a page title and then we need to go to Settings advanced options and then we need to choose our data source for the dynamic pages and that is our properties table. And as you can see below, we.

Also have custom objects available to us.

For dynamic sources as well. But we are using HubDB and I'll go back to the content and I'll press refresh and something's wrong. Okay, let's go ahead and see. We are testing false. I am watching everything and oh, we commented out rows. Yeah, because we moved it to the module and now we need to get rid of this little condition.

And that.

Should be good because the reason why we had to get rid of that is because we commented out rows and we moved rows to the module level instead of the template level. That's what the rows variable is doing there app and that is. That seems to fix it. So we have the page title and then the property listings. Perfect. So I'm going to go ahead and publish the page and we're going to see if our dynamic sources are working. Let me go ahead and view the page and let's go to our individual page. We have our table. Okay. But yeah, everything else is working. Let's go and go to our Level 1 partial comment out this table. All right, cool. Need some CSS styling and we need to map the form to it. But everything is working there. So I'm going to go back and now I can look and see if my query parameters are working. So you can see at the bottom of the Page the link. If you're on a desktop, you probably see it, but the link says it has a subdivisions equals three query parameter. So I'm going to go to that and look at that. Our query parameters are working. It looks like it's filtering it out. Let me go to subdivisions equals two. Nothing. Okay, you might want to set some conditionals on that. Subdivisions equals 1. It's returning 2. It's the same for the availability types. There's only one pending house that works. And so our query parameters are working just fine. I'm going to go to the Properties page and everything seems to be good. That covers, I guess, the bird's eye view of creating a dynamic template with HubDB. And the same principles will work with custom objects as well. There are custom object fields in modules, so instead of using a Hub DB.

Table field, you could use, you know.

Some custom object fields for that. And this all seems to be working nicely. I'm pleased with how it's turned out. So, you know, if I was developing this for production, there's obviously things that, you know, you're going to tighten up and we need to actually pass a form ID on the individual page and we can see that there's no form being rendered out. So one thing that you might can do is you can go to your design manager and then you'd go to Files and Templates, excuse me, Lead Capture and Forms, and you would get the ID of your, your form. So I could go ahead and create a form, we'll call it a embedded form, one that you can embed as part of your website. I'm just going to choose from a template for Contact us. We'll press start for everything quick. We'll say this is the Properties Inquiry form and then I'll go ahead and update it and what I can do is I'll publish it and then I can get the ID from this little snippet of code or I can go get the form ID from the URL. All right, now I'll go ahead and I will put the ID in my actual code. So there's the form field way down here and we're going to give it a formid. You know, I think that's what you input for the form. Let's see, we're going to see the list of available options. Form to use. Aha. So we're going to say form to use. I'll go ahead and delete this. You can see how the snippets feel is pretty helpful. And now I'll go ahead and refresh. Three, two, one. Countdown Boulevard. And look at that. There's a form on the page. Okay, everything seems to be good and working. We're going to look at translating some Gutenberg type of content in the next video. I'll see you there, Sam.