How to Create a Child Theme

In this article, I'm going to walk you through some simple steps on how to create a "Child Theme" of CLEAN.

HubSpot recently (soft) launched the ability to create child themes.  This is pretty much sums up how excited I am.

 

old-school-office-dance

What on earth is a "Child Theme" you might be thinking.

Simply put, a child theme allows you to create a version of the CLEAN theme that you'll be able to edit at the code level (make customizations) while still reaping the benefits of future updates to the CLEAN theme.

Prior to this release, you had to choose between the following:

  • Use the original CLEAN theme files
    • Pro: Seamless version updates
    • Con: Can't customize any of the files at the code-level
  • Clone the theme
    • Pro: You can make specific customizations at the code level which most people want to do.
    • Con: CLEAN version updates aren't applied to cloned versions.

Enter CHILD-THEMES to save the day!

The steps to create a Child Theme.

This is going to get into a very small amount of code editing but don't freak out.  I've got your back and I'm going to walk you through it in this video or you can follow the instructions below.

 

Child-Theme-Setup

1. Access The Design Tools

The Design Tools section of HubSpot is where all the theme files live.  Under the Marketing tab click Files and Templates and then Design Tools.

 

design-tools

2. Create a New Theme

Open up the side bar on the left hand side to reveal all your files. Then click the File dropdown and then select New Theme.

 

new-theme

This is going to prompt you to set up your new Theme Starting Point.  From the dropdown go ahead and select Blank Theme.

 

new-blank-theme

Next, go ahead and fill in the Theme Label.  I'd recommend doing something like this. If you want it to reside in a specific location click the Change link. Typically, I just keep it in the root folder.  Now hit the Create button!

 

theme-label

3. Edit the theme.json file

"Edit what now?!?!" you may be thinking to yourself.  Don't worry!  This is really just a bit of copying and pasting.  If you've followed the steps above you'll likely looking at this on screen. Highlight all the code in that theme.json file and delete it.

 

theme-json

Now, go ahead and copy the code from this snippet below and paste it into your empty theme.json file. 

 

 

There are just a few simple edits you need to make to the code you just pasted in. The first is to edit the label so it reflects the original Theme Label (CLEAN x COMPANY NAME) you set. Notice the highlighted text in the code below.  That's what you want to edit. Just make sure you only edit "what is in the quotes" or else things may get a little wonky (technical term).

 

json-edit-label

The final edit is simple. Make sure this highlighted text below is consistent with the original CLEAN theme folder name. To check that, go ahead and click the < Back to all files link and then open up the @marketplace folder then Helpful_Hero folder. It looks like this.

 

theme-name

IMPORTANT NOTE: I'm working with the HubSpot team to update the name of the theme folder which is currently CLEAN-6-1-theme to simply CLEAN-theme.  So, if you've purchased or updated to CLEAN 6.2, please pardon the confusion.  HubSpot is working on it.

Sign up for CLEAN Theme updates here if you're not already. Prior to this update, I'll be notifying everyone.

 

Now, jump back to the theme.json file and make sure the correct theme name is added here where the text is highlighted.

 

theme-extends

Click Publish Changes and you're done with this file!

 

your-a-pro

4. Edit the fields.json file

This one is going to be much less involved.  The first thing you're going to want to do is to jump back to the original CLEAN-theme folder and click it to get to all the files within.  What you're looking for is the fields.json file.  Click that sucker to open it up.

 

fields-json

This file basically contains all the global theme settings which are what makes CLEAN so rad.  Go ahead and copy all of the code from this file to your clipboard.

 

copy-code

 

Next, you're going to want to click the < Back to all files link and click your new Child Theme Folder (CLEAN x COMPANY NAME).  Once you're there open up the fields.json file.

 

child-fields

This file will be empty with the exception of two brackets [ ]. Go ahead and delete these before you paste in the code from the other file.

 

fields-bracket

You guessed it... The next step is to paste in the code that you had copied from the other fields.json file.  Once you've done that, click the Publish Changes button.

Boom! You're done!

 

boom

Using Your Child Theme

Now that you have your CLEAN Child Theme set you, you're going to want to make sure that you select your Child theme when creating new web pages.  Just be sure you're selecting the one that says CLEAN x COMPANY NAME.

It will look like this.

 

CLEANXCOMPANY

If you have any questions don't hesitate to reach out. 

Have fun!