WordPress developers learn HubL, HubSpot's markup language, through side-by-side comparisons with PHP. The video covers syntax, loops, menus, and asset management to help you build themes on HubSpot's platform.
Now that we've defined our goal of creating a HubSpot theme, let's talk about the similarities between PHP and Hubble. In a rapid fire session I will make these files available to you in a gist. Declaring variables in PHP is done like so, and it's just as easy in Hubble. We can use the set tag and even import variables from external files and render them out like so. That leads me to rendering. Rendering is achieved through the double handlebars or mustaches in Hubble and you can pretty print by using the pretty print filter. Anytime you see a pipe inside of the double mustaches followed by a word that is usually a Hubble filter. Just like var dumping, you're going to use pretty print quite often when you're developing a theme if statements are very similar. Besides the obvious syntax differences, one difference you do need to note is PHP has elseif and Hubble has elif. In Hubble functions we declare our functions with a macro. These are our own custom functions which we can provide the name and then the arguments for the macro. We render out the arguments inside of the macro with the double mustaches. If you ever want to call the macro, you'll do it inside of the double handlebars with your macro name, opening up your parentheses and including your arguments. And you can even import external macros just like we did with the variables. Example above. We have multiple ways to have for loops in foreach for and while in Hubble you only really need to remember one type of for loop and that's the standard for loop with the iterable in dictionary and you can access the iterable and its properties inside of the handlebars. If you ever need a key value pair, you'll achieve it like so. Now let's talk about rendering out content in HubSpot. In WordPress you have the famous while loop where you access your post information with the native WordPress functions. In HubSpot you have the content dictionary and you can access any property of this dictionary inside of the double handlebars in the dot notation syntax. If you have a blog listing, this is the only place that you'll have a contents dictionary. Otherwise you'll have a content dictionary. Now I'll let you study all of this in the gist, but these native WordPress functions do have their own counterparts in Hubble. The one thing you do need to remember though is that while WordPress has categories, Hubble does not. You can only have tags. Now let's talk about rendering menus. You're going to need to have navigation in any theme. In WordPress, we have the WP nav menu function, and we can use this function to call a custom walker if we need any custom markup. For example, if we need a menu that matches a framework in Hubble, we have three ways to output a menu. The first two examples Output default markup provided by HubSpot. The third example provides a way for you to have custom markup. Let's look at the difference. In these first two examples, we have the default HubSpot menu module, and we know this because we see a path. Starting with HubSpot and below we have the tag version of the module. Most instances you're going to want to use the module, and the reason why is because it can be used in drag and drop templates and and flexible columns. Now, the third example shows a way to have custom menu markup, and we call this with the menu function, we're setting it to a variable, and the menu function takes either this default string parameter or a numeric id. And once it sets that to your variable, you can access all of the properties. And you'll want to look at these properties in the HubSpot documentation. Just look up the menu function and then click the properties link that it takes you to and you'll see everything provided. Now, if you want to look at what's provided or what's available to you, you can also print out Nav with Pretty print. So just print out it like so, and it'll show you everything that's available to you. Now let's move on to the site header and Footer in WordPress. You're calling your get header and get footer functions just about on every template. All you need to know is that you can do this in a similar fashion in Hubble with a global partial. Unlike WordPress, however, you're not limited to just a header and a footer. You can use a global partial for anything, and these global partials are made up of smaller modules in markup that change across the entire site whenever a change is made to anything inside of it. So you could use this for a global sidebar as well. Moving on to get template partials, you have the get template part in WordPress or PHP and you have the include tag in Hubble. All that's needed in the include tag is a path to your file, and I find getting template assets in Hubble is a lot easier than in WordPress I all you need is the getasseturl function and then the relative path to your file. You can combine this with other functions as we'll see in the next examples. Let's talk about enqueueing styles and scripts. In WordPress we have the WPNQ style function. In Hubble we have the requirecss function and we combine it with the getasseturl function as well as an extra parameter to load asynchronously. Adding inline styles we do with the requirecss tag rather than the requirecss function. Now let's talk about enqueueing scripts. In Hubble we use the requirejs function much like the require css function. We have a URL to our asset and then we have our arguments. In the inline version we also use the tag and we're provided with a position argument. We can either choose footer or head but we put our inline script inside the requirejs tag and that concludes our rapid fire PHP and Hubble comparisons. I'll make this file available to you as a gist and I'll add to it if anything changes in Hubble or WordPress. Thank you guys and gals. I'll see you in the next video SA.
