HubSpot provides several default fields for blog posts, such as author, date, content, and tags. However, did you know you can also create custom fields for your blog posts and display them on the listings page?
For example, this post uses a custom “Difficulty” field to display the textbox above and add a tag to the post on the listings page.
Example: Content Type
Suppose we want to specify a content type for each blog post (like ‘News, Events, or Ebook) and display this information differently on the listings page, such as showing the content type alongside an icon.
Adding the Custom Field to the Post Template
To achieve this, you can add custom fields to your post template using HubL modules. For example, for the content type, you could use a Choice module, like this:
{% choice "blogtype" label='Choose the Blog type', value='Text', choices='News, Events, Ebook, Webinar, Podcast', export_to_template_context=True %}This would allow you to select the content type for each blog post and control how it is displayed on the listings page.
The “Choice” module defines the type of field, the “label” is what the user will see on the post editor, the “value” sets the default option in the dropdown, the “choices” are the options the user can select from, and “export_to_template_context” ensures that these parameters are available within the template for further use.
In my template, I added this code to the very top of the “Post template”:
On the user’s side, the custom field will appear in the “Modules” section of the sidebar in the blog post editor. This allows users to easily select and manage the custom content type when creating or editing a blog post.
Using the Custom Field on the Listing template
In the “Listing template” section, you can display your custom field by adding the following code snippet:
This will retrieve and display the content type you selected in the custom field, allowing you to show it along with the relevant icon or label on the blog listings page.
{{ content.widgets.blogtype.body.value }}Other Examples
Here are a few examples of custom fields I’ve used in the past:
Thought Leadership – Speaker Bio
To add a speaker bio and display it in the listings template, you can use the “text” module like this:
{% text "executivebio" label="bio-page-feature, use firstname-lastname format", export_to_template_context=True %}This will retrieve and display the speaker bio in the custom field on the blog listings page.
{{content.widgets.executivebio.body.value}}Custom Overview Content in Case Study
To add custom rich text content (different from the main blog content) in the listings template, you can use the “rich_text” module like this:
{% rich_text "overview_text" label="Overview Text", html="<h2>Lorem ipsum dolor sit amet, consectetur adipiscin</h2> <p>Case Study</p>", export_to_template_context=True %}This will retrieve and display the custom overview content in the blog listings page.
{{ content.widgets.overview_text.body.html }}Custom Image for Blog Listing (Events)
To add a custom image (different from the featured blog image) to the listings template, you can use the “image” module like this:
{% image "select_image" label='Select Image, src='', export_to_template_context=True %}This will retrieve and display the selected image in the custom field on the blog listings page.
<img src="{{ widget_data.select_image.src }}" />Conclusion
Adding custom fields to your HubSpot blog posts is a powerful way to enhance both the functionality and presentation of your content. Whether you’re using fields like content type, speaker bios, custom images, or rich text, these customizations allow for greater flexibility and control over how your blog posts appear on the listings page. With the use of HubL modules, you can easily integrate these fields into your templates, providing a more tailored experience for both content creators and readers.
