Last Updated 1 April 2021
If you are experienced in creating WordPress or other CMS themes, you should find many similarities when creating HubSpot CMS Hub themes. However, there are some key differences to keep in mind, a new scripting language to learn, new APIs and CMS capabilities you’ll need to work with.
If it’s your first time working with HubSpot, we suggest signing up for a CMS Asset Marketplace provider account. If you already have one with HubSpot, you can continue with using that account.
If it’s your first time with CMS Hub, take the quick start tutorial. This tutorial will have you set up the CLI, generate boilerplate code for a theme, and publish an actual page on the CMS.
Afterward check out the HubSpot CMS Developer Tutorials, particularly Getting started with Themes. This will give you an overview and link you to other useful resources, including a boilerplate theme, a guide on setting up your developer environment, etc. It would also be helpful to read some of the customer-facing tutorials on themes to get a sense of how they will ultimately use them to build and customize their website
The HubSpot Academy for Developers also has a useful HubSpot CMS themes quickstart for developers course.
You may want to check out the following third party articles:
- Everything You Need to Know About Themes in HubSpot – YouTube
- What I Learned Building My First HubSpot Theme
- Best Practices For Setting Up a Website with HubSpot CMS Hub Themes
Hubspot has an Inspire site where you can see examples of sites created on HubSpot CMS Hub, including some details on which features were used to build them. Note some of these may be custom website development projects, beyond what a typical theme might do. While there are currently very few premium HubSpot CMS Hub themes available, you can check out Hubspot’s recent hackathon theme contest winners for additional inspiration and to get a sense of how to make your own themes stand out.
The following tips highlight key similarities and differences to creating WordPress themes, and will also be useful for other CMS authors to consider:
- Theme settings are a big part of how users interact with themes to customize their website, including things like fonts, colors, spacing, etc. This feature will be important to plan out and make full use of in your theme, just as it is with WordPress.
- HubSpot does not have the same concept of external plugins that WordPress does.
- Functionality can be included in the theme via modules:
- HubSpot CMS Hub comes with many default modules or you create your own custom modules.
- You can think of modules as being like front-end plugins on WordPress, e.g. that you might use for a slider or a testimonial widget, or to add Gutenberg blocks.
- Modules can be built to be very flexible with user-configurable settings, or they can be built for very specific use cases or designs.
- Some functionality can also be included directly in the template files using HubSpot’s templating language HubL, such as conditional logic, loops, filters, and functions that may interact with other areas of the Hubspot platform (such as the CRM)
- HubL is a server side language, but unlike PHP you can’t make back-end API requests. HubSpot instead uses serverless functions, workflows, and app integrations for times that you would need to make authenticated API requests.
- Much can be achieved using the default modules / functionality of HubSpot, which has things like forms, etc. It makes sense to maximise your themes use of and support for existing HubSpot CMS Hub functionality wherever possible.
- Custom back-end code can be created using Serverless functions, but these are only available to customers on the Enterprise plan and are not allowed to be used – themes should be designed to work for all CMS Hub subscription levels.
- HubSpot also has an app ecosystem that you could build a custom app for. However, we don’t recommend this for getting started with making HubSpot CMS Hub themes.
- HubSpot’s end users are mostly marketers and HubSpot has a strong focus on website visitor conversion etc. Therefore, you may need to give greater consideration to how your theme supports the user journey, the conversion path, etc. than you do with a typical WordPress theme or basic informational website.
- Not required for creating a theme, but may be helpful in understanding the marketers using CMS Hub – Inbound Marketing Academy Course
- HubSpot customers come from a wide range of industries, which you may want to keep in mind when choosing niches to develop a new theme or port over an existing theme design for, including but not limited to:
- Computer Software
- Information Technology
- Marketing and Advertising
- Financial Services
- Management Consulting
- Real Estate
- Hospital & Health Care
- Health, Wellness, and Fitness
- Staffing and Recruiting
- Leisure, Travel, and Tourism
- Human Resources
- While WordPress themes can include as many templates (and plugins) as you want, HubSpot CMS Hub currently limits themes to 50 templates and 50 modules. Also, there is no demo import feature in HubSpot. Therefore WordPress themes with many different designs / demos will probably work better with related demos built out and packaged as separate niche themes.
- When creating a page, users can choose a template from across more than one theme if they wish – so a user may end up using a template from your theme on one page and a template from a different theme on another page. This may be something to keep in mind in terms of how related themes in your portfolio may be optimized to work well together (e.g. alternate design options or related niches).
Finally, it’s worth reading our HubSpot CMS Hub Theme Requirements which will form the basis for the ThemeForest requirements.
Support from HubSpot
- If you have questions, HubSpot has a number of options for developer support:
- For support specific to themes that are being built for the Envato Marketplace, HubSpot has created a private channel in the Developer Slack Community called #envato-theme-authors
- Once you join the Developer Slack, if you are not automatically added to the private channel by April 7, message @ajlaporte via Slack to be invited
- Please reserve this for questions that you can not find the answer to in the documentation or regular community channels
- Zip Upload Functionality: This video shows how HubSpot users can upload a new theme to their account inside of a zip folder.