BugWP logo BugWP
Back to Community
Home / Community / Theme → Hestia

How to Fix Hestia Theme Blog Post Title Capitalization and Formatting

32 threads Sep 10, 2025 Theme → Hestia

Content

Many Hestia theme users want to customize how their blog post titles appear, from capitalizing every word to adjusting spacing and font weight. This is a common request for both aesthetic and SEO purposes. This guide will walk you through the most effective methods to achieve these customizations.

The Problem: Manual Title Editing is Tedious

As seen in user reports, manually editing each post title to capitalize every word is a time-consuming process, especially on sites with a lot of content. Furthermore, users often want to make additional stylistic changes, such as bolding titles or adding top margins for better visual hierarchy, which aren't always directly available in the theme's customizer options.

Solution 1: Capitalize Titles with CSS

The most straightforward way to automatically capitalize every word in your post titles across the site is by using CSS. This method changes the visual presentation without altering the actual title text in the database.

Add the following CSS code to your site by navigating to Appearance > Customize > Additional CSS:

/* Capitalize titles on the blog page and archive pages */
.card-blog .card-title,
.archive .card-title {
    text-transform: capitalize;
}

/* Capitalize titles on single post pages */
.single-post .entry-title {
    text-transform: capitalize;
}

Note: The text-transform: capitalize; property will capitalize the first letter of each word. If your titles are currently in all uppercase, you may need to use text-transform: none; first to reset them.

Solution 2: Bold Titles and Adjust Spacing

To make titles bold and add space above them, you can extend the CSS snippet above. This is useful for improving readability and design.

Add this CSS to the Additional CSS section:

/* Bold H1 and H2 titles and add top margin */
.single-post h1.entry-title,
.single-post h2 {
    font-weight: 700 !important;
    margin-top: 30px !important;
}

/* Apply similar styles to titles on archive pages if needed */
.card-blog .card-title {
    font-weight: 700;
}

You can adjust the 30px value to increase or decrease the amount of space above your titles until it matches your desired layout.

Important Considerations

  • Child Theme: If you are adding more complex customizations beyond CSS, it is highly recommended to use a child theme. This prevents your changes from being overwritten when the Hestia theme is updated.
  • Specificity: The provided CSS selectors target common classes in the Hestia theme. If these don't work for your specific case, you may need to use your browser's inspector tool to find the correct classes for your elements.
  • Plugin Conflict: If the CSS does not take effect, temporarily disable your plugins to check if one is conflicting with the theme's styles.

By using these CSS techniques, you can efficiently control the appearance of your post titles across your entire Hestia-powered website without needing to edit each post individually.

Related Support Threads Support