How to build custom code template

Hi @MHussain8,

building a theme - especially with beautiful UI(it’s always up to your preferences) can take up an enourmous amount of time. There are companies that are working for several months/years upon one theme, always optimizing it to the newest standards and user-requirements.

Developing a custom theme can be a great but pricy invest since custom themes can start from 4-5k(depending on the developer and requirements, timeline and briefings).

But this doesn’t mean that you can’t do it yourself. As @Jnix284 mentioned, HubSpot provides the “theme boilerplate” which gives you a good basis for a custom theme.

But if you really want to do everything by yourself here’s my streamlined approach of developing custom themes:

  • get all requirements from the client
  • let them approve those (double check to minimize the potential scope-creep)
  • get all design assets(logo, colors, fonts, icons, everything you need for the design/UI … )
  • create a design in Figma or Adobe XD (while designing think of repetative elements like headlines, cards, images, buttons… so you’ll have a consistent design-language while coding)
  • get the approval on the design
  • start with the bare minimum of a theme fields.json: colors, font settings, buttons, forms, spacings
  • create a theme.css file with all those variables and dependend classes
  • create custom modules like cards, button, headline-text combos… whatever you need to have in the theme
  • drop the custom modules in the templates
  • debug
  • optimize
  • debug
  • get approval from client
  • get paid

since you want to have it for yourself you can skip the many steps but I highly recommend you to start by designing the theme first since moving pixels is always easier and faster than moving code :slightly_smiling_face:

If you want to save time and money - check out the theme marketplace. There are a ton of ready-to-use themes (free & paid) available. Once you’ve created a child-theme of a downloaded/purchased theme you can customize it to your needs.

hope this helps

best,

Anton