I have a custom theme for blogs. My blog post is wrapped with blog-post-wrapper class but still in edit mode hubspot says total word count is 0. How can I get rid of this issue?
@MKhan932 can you share a screenshot of where the total word count is showing?
@Jnix284 - When I edit some blog post on hubspot.
@MKhan932 ah, I see, thank you!
Can you share the code you’re using for the blog post?
make sure to use the code sample so the formatting is retained and it’s easier to review:
@Jnix284 - Blog Post: The Importance Of Youth Civic Engagement
Here’s post content module
{% if module.show_hide_section %}
<div class="post-content-section fullwidth">
<div class="pc-row fullwidth">
<div class="pc-left">
<div class="pc-sticy">
<div class="intro-heading">
{{ module.blog_title }}
</div>
<ul>
{% for item in module.add_content_here %}
{% if item.heading %}
<li class="{% if item.add_read_more_functionality %}show-content{% endif %}">
<a href="#{{ item.heading|lower|replace(' ','-')|replace('&','-')|replace('$','-')|replace(':','-')|replace('/','-') }}">{{ item.heading }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="pc-right blog-post-wrapper cell-wrapper">
<div class="pc-max">
<div class="pc-items fullwidth">
{% for item in module.add_content_here %}
<div class="pcontent-row fullwidth {% if item.add_read_more_functionality %}remore-functionality-active{% endif %}" id="{{ item.heading|lower|replace(' ','-')|replace('&','-')|replace('$','-')|replace(':','-')|replace('/','-') }}">
{% if item.heading %}
<h2>
{{ item.heading }}
</h2>
{% endif %}
{% if item.content %}
<div class="pc-text">
{{ item.content }}
</div>
{% endif %}
{% if item.add_read_more_functionality %}
<div class="read-more-function pinkBtn">
<a href="#">Read More</a>
</div>
{% endif %}
{% if item.show_hide_cta_section_new %}
<div class="pc-cta">
<div class="pcc-left">
<h3>
{{ item.cta_section.title }}
</h3>
{% if item.cta_section.text %}
<div class="pcc-text">
{{ item.cta_section.text }}
</div>
{% endif %}
<div class="pcc-logo">
{% if item.cta_section.logo.src %}
{% set sizeAttrs = 'width="{{ item.cta_section.logo.width }}" height="{{ item.cta_section.logo.height }}"' %}
{% if item.cta_section.logo.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ item.cta_section.logo.width }}" height="{{ item.cta_section.logo.height }}" style="max-width: 100%; height: auto;"' %}
{% elif item.cta_section.logo.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ item.cta_section.logo.max_width }}" height="{{ item.cta_section.logo.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = item.cta_section.logo.loading != 'disabled' ? 'loading="{{ item.cta_section.logo.loading }}"' : '' %}
<img src="{{ item.cta_section.logo.src }}" alt="{{ item.cta_section.logo.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>
</div>
<div class="pcc-right">
<div class="pr-cta pinkBtn">
{% set href = item.cta_section.button_link.url.href %}
{% if item.cta_section.button_link.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"
{% if item.cta_section.button_link.open_in_new_tab %}target="_blank"{% endif %}
{% if item.cta_section.button_link.rel %}rel="{{ item.cta_section.button_link.rel }}"{% endif %}
>
{{ item.cta_section.button_text }}
</a>
</div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% if module.show_hide_cta_bottom %}
<div class="pc-cta pccta-bottm fullwidth">
<div class="pcc-left">
<h3>
{{ module.cta_bottom.title }}
</h3>
{% if module.cta_bottom.text %}
<div class="pcc-text">
{{ module.cta_bottom.text }}
</div>
{% endif %}
<div class="pcc-logo">
{% if module.cta_bottom.logo.src %}
{% set sizeAttrs = 'width="{{ module.cta_bottom.logo.width }}" height="{{ module.cta_bottom.logo.height }}"' %}
{% if module.cta_bottom.logo.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ module.cta_bottom.logo.width }}" height="{{ module.cta_bottom.logo.height }}" style="max-width: 100%; height: auto;"' %}
{% elif module.cta_bottom.logo.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ module.cta_bottom.logo.max_width }}" height="{{ module.cta_bottom.logo.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = module.cta_bottom.logo.loading != 'disabled' ? 'loading="{{ module.cta_bottom.logo.loading }}"' : '' %}
<img src="{{ module.cta_bottom.logo.src }}" alt="{{ module.cta_bottom.logo.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>
</div>
<div class="pcc-right">
<div class="pr-cta pinkBtn">
{% set href = module.cta_bottom.cta_link.url.href %}
{% if module.cta_bottom.cta_link.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"
{% if module.cta_bottom.cta_link.open_in_new_tab %}target="_blank"{% endif %}
{% if module.cta_bottom.cta_link.rel %}rel="{{ module.cta_bottom.cta_link.rel }}"{% endif %}
>
{{ module.cta_bottom.button_text }}
</a>
</div>
</div>
</div>
{% endif %}
{% if content.blog_post_author %}
<div class="pc-author fullwidth">
<div class="hubspot-editable fullwidth" >
<div class="hs-author-avtar" style="background-image: url('{{ content.blog_post_author.avatar }}');"></div>
<div class="pc-auth-details">
<strong>{{ content.blog_post_author.display_name }}</strong>
{% if content.blog_post_author.bio %}
<div class="auth-oc-content">
{{ content.blog_post_author.bio|safe|striptags|truncatehtml(110, '' , false) }}
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.read-more-function').parent().nextAll(".pcontent-row").hide();
$('.read-more-function a').click(function(event){
event.preventDefault();
$(this).parent().hide();
$(this).parent().parent().nextAll(".pcontent-row").show();
});
$('.show-content').nextAll('li').find('a').click(function(){
$('.read-more-function').hide();
$(".pcontent-row").show();
});
});
</script>
{% require_css %}
<style>
{% for item in module.add_content_here %}
{% if item.show_hide_cta_section %}
#hs_cos_wrapper_{{ name }} .pcontent-row:nth-child({{ loop.index }}) .pc-cta {background-color:{{ item.cta_section.background.color }};}
{% endif %}
{% endfor %}
.pccta-bottm{background-color:{{ module.cta_bottom.background.color }};}
</style>
{% end_require_css %}
{% endif %}
@MKhan932 The blog post wrapper class isn’t what determines the blog post content, you’re missing the hubL for the post body:
{{ content.post_body }}
Here’s more about HubL blog variables
It might also be helpful to review the HubSpot boilerplate - you can see how it works on the boilerplate blog post template.
@Jnix284 - How do I assign this to my custom Rich Text Area for blog post content? I am not using the default one provided by hubspot. I am using my custom Rich Text Area for blog post body content.
@MKhan932 I believe that is what’s causing the issue. I’m not a developer and only have high level knowledge of how the blog post templates are coded, I recommend checking the developer slack to see if anyone else can offer further insight.