HubSpot Themes from a WordPress Theme Developer’s Perspective
WordPress themes are great. We know this to be true. They’ve been around for as long as I can remember and they’ve been a primary driving force in web design trends for a decade. Shoot, if you take a look at https://wordpress.org/themes/author/wordpressdotorg/ you get a pretty good idea of what major design trends happened that year. Remember vertical navigation? Twenty Fifteen does.
So what’s the deal with HubSpot themes then? Well… they’re kind of better. Sort of. It’s complicated. Hear me out.
What Is A Theme:
What is a theme? A theme, or template, for a website, is more than just the overall look and feel of the website. A theme dictates the primary stylesheets, page templates, and every large design decision that, as a whole, defines how people perceive your brand online.
Functionally speaking, a theme is a group of files that decide how a website should look and function.
What’s A WordPress Theme?
In WordPress, a theme is defined as:
“A WordPress theme changes the design of your website, often including its layout. Changing your theme changes how your site looks on the front-end, i.e. what a visitor sees when they browse to your site on the web.”
If you’ve been doing web development for any length of time, you already know what a WordPress theme is. According to W3Techs.com, WordPress accounted for 41.5% of the web. Note, I didn’t say “websites that use a content management system” here. I said the web. Only 36% of the internet doesn’t use a CMS of any kind. All this is to say that chances are, you’ve used WordPress at least once in your career.
What’s a HubSpot Theme?
In HubSpot, a theme is defined as:
“A theme is a set of templates, modules, global content, and style settings that anyone can use to create an entire website. Themes are coded files created by developers using the CMS developer documentation.”
HubSpot themes are pretty new to the scene. HubSpot historically had “templates” which were page-level styles. I used to think of them as WordPress themes for individual pages in HubSpot. It became the only real way to build HubSpot websites at the time.
Now, HubSpot has finally taken steps to create groups of templates and call them a theme. This is big because of what it means for every other part of the process. You can still dictate different templates for different pages, but now you can do more global broad stroke changes on a theme level. There were ways to do this sort of thing previously… but it’s a lot easier and better now.
Imagine you want to change the typography of your theme, for example. Previously to do that if you were using multiple unique templates you’d need to edit each stylesheet accordingly (unless multiple templates were using the same stylesheet). Today, you don’t need to be a developer at all if those typography options were built directly into the theme settings.
Are HubSpot themes perfect? No, of course not. They’re a massive leap in the right direction and they give some unprecedented customization options compared to what we had available to us in the past. But, they are still fairly new and only time will tell what talented developers will come up with to really take advantage of these new features.
WordPress and HubSpot Theme File Structure Differences
HubSpot and WordPress themes have similar file structures, however, they can be drastically different. Both have a set of standards that their creators suggest, but neither have strict guidelines that restrict or force either to be made in a certain way.
HubSpot File Structure
The HubSpot file structure is pretty straightforward. HubSpot puts all the primary pages in the “templates” directory and tucks the layout bits, system pages, and partials deeper in that folder. Javascript files and styles have their own folders; as do images and modules. We will talk more about modules a bit later.
Something to make note of is the fields, license, and theme.json files in the root directory. These files all define how a theme works, what it’s called, and how you can use it. More information on these files can be found on the HubSpot developers hub here.
..png?width=1883&name=image%20(4)..png)
HubSpot Theme File Structure
WordPress File Structure
WordPress’s file structure is pretty close to identical here. Notable differences would be that whereas HubSpot considers its theme header and footer as theme partials, WordPress suggests that they go directly into the root folder.
Also, a WordPress theme must have a style.css file in the root. This defines the theme’s name and all its meta-information. Many themes will import other stylesheets into this one, or minify them all and combine them into this one… but a file named “style.css” is a non-negotiable requirement for a WordPress theme just as a theme.json is a non-negotiable requirement for a HubSpot theme.
.png?width=1276&name=image%20(6).png)
Wordpress Theme File Structure
Scope of Theme
Both WordPress and HubSpot theme scope start and end at the front-end while pulling data from the back. In HubSpot, that data comes from database-less modules as well as CRM integrations. In WordPress, every piece of information is fetched from the MySQL database.
In WordPress, you can only have one theme active at a time (without the use of some wonky plugins or something). This isn’t really a problem, since premo themes
However, HubSpot is a bit more complicated than that. In HubSpot, you can use any template from any theme on any page. The only limitation is that system pages and blog posts are all defined prior to creating either the system pages or the blog posts. But unique blogs can have unique themes.
What are modules?
What’s a module? For the purposes of this article, I’m going to define a module as a building block of a webpage. Modules include all the required DOM elements to make that part of the page work and are styled, usually, in the theme or template. Anyone web page will commonly be built with many modules. Think sliders, headers, hero sections, quotes, galleries, call to actions, etc.
HubSpot has been leaning on modules for… ever? I think forever. Before HubSpot had themes, they had modules. Funny enough, modules are a fairly new concept in core WordPress, introduced really for the first time in the Gutenberg editor.
Now… I guess an argument could be made that “Well, WordPress has had Shortcodes forever and those are basically modules”, to which I’d say… yeah, that’s not incorrect. In fact, Shortcodes is how most of the big page builder mammoths of WordPress work. Divi, for example, is built entirely in Shortcodes.
What’s a shortcode? The WordPress codex defines a shortcode as:
The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages.
How do you build modules in WordPress
In my experience, modules in WordPress would be built using Shortcodes.
What’s a shortcode? The WordPress codex defines a shortcode as:
The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages.
I oftentimes create entire parts of a page as a “template-part” and then create a quick shortcode to spit that template part onto a page.
At a much more developmental level, WordPress - and nearly all things therein, are built using PHP. HTML, CSS, JS are all ran through the scope of PHP in WordPress. This includes modules. Knowing PHP will make making modules much easier, but knowing how to Google will get you 90% of the way here. Nearly every question you could ask has already been answered in a forum post or stack overflow comment somewhere, sometime in the last 15 years.
Modules in HubSpot
Modules in HubSpot are so much easier… truly. HubSpot’s design manager tool makes creating a module a total breeze.
I can create galleries, sections, repeater elements, pretty much anything I can think of however I want them to work in this tool. It supports adding extra javascript files that are only needed on this module, inline javascript, styles, external stylesheets… everything. It’s really, a breath of fresh air coming from a, WordPress development background.
Whereas WordPress uses PHP, HubSpot uses HuBL. HuBL is a proprietary language from HubSpot that looks and functions similarly to Python. It’s not a straight 1:1 though. There is extensive documentation on HuBL to bridge that gap though.
How Much Do They Cost
A good theme takes many man-hours to create. They require wireframing, designing, developing, quality control, user testing… hundreds upon hundreds of hours. So when I say that a theme isn’t cheap, I mean that. Now that said…
WordPress Theme Costs
WordPress themes are pretty cheap. In fact, some WordPress themes are just straight-up free. WordPress has an entire library of free themes to install and rock and roll at your leisure. Your miles may vary (wildly) from theme to theme, but you get what you pay for. Haha
There are premium WordPress themes of course, which is the route I would recommend if a turn-key solution is more your speed or what your budget requires. My personal favorite is Divi. Divi is going to cost you $250 for a lifetime, or $90 a year if you’d prefer to try it yearly before going all in.
Custom WordPress theme development will run you anywhere from $1,200 to 10,000 or more depending on the number of pages, features, and who your firm of choice is. Our WordPress-themed website start at around $3,600.
What about hosting? WordPress hosting runs anywhere from $120 a year to $300 a month. It really just depends on where you’re getting your hosting and what kind of security and speed you’re paying for.
HubSpot Theme Costs
Like WordPress, HubSpot has many free themes that can be picked up for free on their marketplace here: https://marketplace.hubspot.com/products?subType=CMS_THEME. However, their premium themes do tend to run a bit higher. Yearly recurring subscription models are the norm in WordPress, but in HubSpot, I believe these are one-time purchases averaging around $1,000 per theme.
Custom HubSpot theme development will also run you a bit more, generally speaking. HubSpot themes usually start around $5,000 but can range really anywhere up to $100,000 and more.
HubSpot hosting is a bit different. You don’t host your HubSpot site on a traditional server. Instead, you point your domain to HubSpot and they host all your files. The cost for this “hosting” varies depending on what features you’re looking for with the CMS. Themes require the HubSpot CMS, but HubSpot also has a variety of other marketing tools that all integrate into their CRM and CMS. View most current pricing here.
Where can I find out more information on themes?
Interested in building themes? Both HubSpot and WordPress have extensive documentation and active communities that have either already solved your problem or are quick to find solutions. Links to the theme documentation pages below.
HubSpot
WordPress
The right choice varies...
So which one is better? Well honestly, they’re both great. I love building WordPress sites using Divi. I can stack pages so quickly and the fact that I’ve solved for all the major design problems over the years means I can rapidly churn out websites in my sleep. However… HubSpot is growing on me. A lot. HubSpot’s module creation process and now their new theme architecture have me thinking that maybe, just maybe, the days of WordPress being the de facto no-brainer choice might be coming to an end.
