A child theme is a copy of an original theme (whether it’s from the HubSpot Asset Marketplace or custom created for your portal) that allows you to edit a theme without changing the original. It’s a great way to create multiple branded versions of a theme if you have different brands in your portal.
If you're using marketplace theme, a child theme allows you to edit files and add custom code while still allowing you to receive updates from the theme author. When using a marketplace theme, it’s a great practice to create and use a child theme of it in case you need custom development.
Keep reading to learn everything you need to know about child themes.
Creating a Child Theme
To create a child theme, start by navigating to Marketing > Files and Templates > Design Tools from the portal menu.
Once in design tools, locate the theme folder and right-click on it. If using a marketplace theme, find the @marketplace folder in the left-hand sidebar, click on the folder named with the company/author of the marketplace theme, and right-click on the theme folder. Select Create child theme from the dropdown.
This will open a dialog to edit the child theme settings, such as the theme name, the location in the design manager to place the child theme folder, and advanced options to change the name of the child theme stylesheet and JavaScript files. Make any necessary changes and click the orange Create child theme button.
Once the child theme has been created, another dialog will appear informing that a stylesheet and JavaScript file unique to the child theme has been created. It will also state that the necessary files to link them to the theme have been cloned into the theme. Click the Close button in the bottom left or the X in the top right of the dialog to close it out.
The new child theme folder will open in the left-hand sidebar. There will be a JavaScript file, stylesheet file, and theme settings file (theme.js). All other files are the cloned files necessary for linking the custom JavaScript and styles to the child theme.on).
Most edits in a child theme should center around these JavaScript and stylesheet files created for the child theme. To edit these files, click on them in the left-hand sidebar to open them, add your custom code, and click the Publish Changes button in the top right of the Design Manager.
Cloning and Editing a Template File
Creating a child theme does not clone every single file from the original theme, only the files necessary to make custom script and style changes. If you want to edit other files, like templates and modules, they must be cloned into the child theme. Remember that cloned modules and templates in a child theme are separate from the original files. They will not receive any changes made to the originals and, if using a marketplace theme, cannot download any updates the theme author provides for the original module and template files.
To clone and edit a template file, go to the original theme and locate the file you want to edit. Right-click on the file and choose Clone to child theme.
This will open a dialog to choose the child theme to which the file will be cloned. Select the child theme and click Okay.
Navigate back to the child theme and locate the cloned file. Click to open it and make any changes you want. When you're done, click the orange Publish changes button in the top right.
If you want to use the child theme in a website page, landing page, blog post, or blog listing, it will be selectable from the theme selection window either while creating a page, changing the template from the page settings, or changing the template from the blog settings.
Search for the theme with the name given to the child theme, click on it to select the theme, and then select the template you want to use from the template selection window.
To use a child theme on a system template, navigate to the System Pages settings page and select the child theme template from the available dropdowns (the path will include the child theme's name so it can be easily searched for).
Now that you’re using a child theme for your website, it’ll keep the original theme intact either for use in other child themes, for a possible redesign in the future, or to keep receiving updates from an Asset Marketplace listing.
Still need help creating a child theme? You can reach out to our team at any point or check out our theme implementation packages to help you get started.
You May Also Like
