# Theme development

**URL:** <https://community.hubspot.com/t/theme-development/61888>\
**Category:** CMS Development\
**Created:** [July 28, 2022, 10:00am UTC](https://community.hubspot.com/t/theme-development/61888 "2022-07-28T10:00:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Julian1936](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Julian1936](https://community.hubspot.com/u/Julian1936)\
**Post date:** [July 28, 2022, 10:00am UTC](https://community.hubspot.com/t/theme-development/61888/1 "2022-07-28T10:00:57Z")

</div>

Hi all,  
I am developing a them to use in HubSpot and I am using the academy videos as a starting point.

In the videos it discusses partials for things like header, footer etc. but I’ve created these in the past as global modules.

My question is what is the benefit of using a partial when you can have all the html, styles and js all contained inside a global module?

Thanks in advance for any responses

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [July 28, 2022, 10:53am UTC](https://community.hubspot.com/t/theme-development/61888/2 "2022-07-28T10:53:52Z")

</div>

Hi @Julian1936 ,

So let’s say you have a topbar module and a header module that you want to include in each of your templates. You could develop two global modules that you include in each template in the DND area, but you could also use a header partial and include those two modules that way. Because you can set the partial as global, you also have a single screen to edit the content of both the topbar and the header, which saves you quite a few clicks to update the content for those two modules.

It is much more practical to use a partial for elements like the header and footer and the code of the partial can be quite small:

```lia-code-sample
<!--
 templateType: global_partial
 label: Website header
-->
{% module 'top-bar' path='../../modules/bright_top-bar', label='Top bar' %}
{% module 'page-header' path='../../modules/bright_page-header', label='Page Header' %}

```

---

<div class="post-metadata">

**Author:** ![Julian1936](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Julian1936](https://community.hubspot.com/u/Julian1936)\
**Post date:** [July 28, 2022, 11:32am UTC](https://community.hubspot.com/t/theme-development/61888/3 "2022-07-28T11:32:33Z")

</div>

Thank you for this.  
So the benefit is if you wanted to use mutliple modules in the header then the partial can take them and present one editing space for them for the content team. Is thatr right?  
In you example couldn’t you just build the top bar and header in to a single global module?

Please understand I’m not being argumentative I’m just curious about best practices as this is my first HubSpot theme 😁

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [July 28, 2022, 12:04pm UTC](https://community.hubspot.com/t/theme-development/61888/4 "2022-07-28T12:04:40Z")

</div>

Hi @Julian1936 ,

I personally like to keep my modules as clean and simple as possible, so we have a very modular approach when we are developing a website or theme. So if I have a template that only needs the pageheader and not the topbar, this can be easily achieved by not including the topbar module.

It really depends on your way of working, but I am convinced that using partials is more efficient, simply because of the fact that you do not have to copy your global module in each of the templates, and if you do use separate modules for a topbar and pageheader, you can simply edit those from a single screen in the UI.

Let’s say that you do not have a topbar in your theme, and your theme has 24 templates that have a global module set in each template, you need to edit 24 templates to add that top bar to the header.

If you have a partial that is used in the layout of all those templates, you can easily update the partial, and the top bar is included in all 24 templates. So it saves you a lot of time if used correctly.

---

<div class="post-metadata">

**Author:** ![Julian1936](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Julian1936](https://community.hubspot.com/u/Julian1936)\
**Post date:** [July 28, 2022, 12:52pm UTC](https://community.hubspot.com/t/theme-development/61888/5 "2022-07-28T12:52:57Z")

</div>

Thank you Teun for these excellant answers.

Regards the 24 templates in your example, In the hubspot academy tutorials it specifies that you can use a base template and then extend it using the normal templates. For example, below would be the base.html in a layouts folder:

```lia-code-sample
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>{{ content.html_title }}</title>
 <meta name="description" content="{{ content.meta_description }}" />
 {{ require_css(get_asset_url('./../css/main.css')) }} {{ standard_header_includes }}
 </head>
 <body>
 {% block header %} 
 {% module label="header" %}
 {% endblock header %}

 <main>
 {% block body %}{% endblock body %}
 </main>

 {% block footer %} 
 {% module label="footer" %}
 {% endblock footer %} 

 {{ standard_footer_includes }}
 </body>
</html>

```

Then in your about-us.html template you would have the following:

```lia-code-sample
{% extends "./layouts/base.html" %}

{% block body %}
 <h1>TESTER</h1>
{% endblock body %}

```

The way you are kind of having a global template that you can then add those global modules to so you don’t end up with the problem of having to copy it 24 times.

Again please don’t think I’m being rude or argumentative you answers are great 👍

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [July 28, 2022, 1:17pm UTC](https://community.hubspot.com/t/theme-development/61888/6 "2022-07-28T13:17:52Z")

</div>

Hi @Julian1936 ,

Very good point! And we use the layouts as well. In our case, they look like this:

```lia-code-sample
<!DOCTYPE html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>

<head>
 <meta charset="utf-8" />
 <title>{{ page_meta.html_title }}</title>
 {% if site_settings.favicon_src %}
 <link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />
 {% endif %}
 <meta name="description" content="{{ page_meta.meta_description }}" />
 {{ require_css(get_asset_url('../../css/new_main.css'), { async: false }) }}
 {{ require_css(get_asset_url('../css/layout.css'), { async: true }) }}
 {{ require_js(get_asset_url('../../js/main.js'), { position: 'footer', async: true }) }}

 {{ standard_header_includes }}
</head>

<body>
 <div class="body-wrapper {{ builtin_body_classes }}">
 {% block header %} {% global_partial path='../partials/header.html' %} {% endblock header %}
 {% block body %} {% endblock body %}
 {% block footer %} {% global_partial path='../partials/footer.html' %} {% endblock footer %}
 </div>

 {{ standard_footer_includes }}
</body>

</html>

```

So we include the global\_partials where the partial itself contains multiple modules.

In the end, you need to find a way to develop a theme that fits your way of developing. You could include a global module in your layout instead of using partials. You just need to think of the best approach to develop a theme that can be easily maintained.  
Here is a bit more info on [partials](https://developers.hubspot.com/docs/cms/building-blocks/templates/html-hubl-templates#partials).

---

<div class="post-metadata">

**Author:** ![Julian1936](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Julian1936](https://community.hubspot.com/u/Julian1936)\
**Post date:** [July 28, 2022, 1:27pm UTC](https://community.hubspot.com/t/theme-development/61888/7 "2022-07-28T13:27:38Z")

</div>

Hi @Teun

Thanks again for all the great info.

Given your answers I will be using partials because it does make sense because if you wanted to use, say, a social media icons module in the header and the footer you’d have to duplicate it for both the global modules whereas with partials you could pop it in both the header and footer partials and have the one module running it. Just thinking out loud now 😉

Anyway thanks again for your time 😁

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [July 28, 2022, 1:30pm UTC](https://community.hubspot.com/t/theme-development/61888/8 "2022-07-28T13:30:25Z")

</div>

Awesome! Thank you for the great discussion regarding partials.

Good luck with your theme!

---

<div class="post-metadata">

**Author:** ![HubsGrowth](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@HubsGrowth](https://community.hubspot.com/u/HubsGrowth)\
**Post date:** [May 10, 2023, 10:26am UTC](https://community.hubspot.com/t/theme-development/61888/9 "2023-05-10T10:26:39Z")

</div>

@Teun thank you for you deep answers here, it’s valuble for me as well. Best