Add custom title to blog page

Support
#1

Hello - I would like to add a custom title to my blog page.
I am using Ethos Stack on X.
I have reviewed the other threads that have shown how to add a title, but I would like my blog title to look like the custom titles on my other pages, which includes a large title, subhead and line.
Here’s a screen shot of the header I would like to use: https://snag.gy/t82INB.jpg
Appreciate your help, thank you!

#2

Hi @ccwadsworth,

Thank you for reaching out to us. To add a custom title to your blog page, add the following code in your child theme’s functions.php file

function x_add_custom_blog_title() {
    if ( is_home() || is_front_page() || (is_front_page() && is_home()) ) {
        echo do_shortcode('[custom_headline type="center" level="h2" looks_like="h3" accent="false"]Custom Headline[/custom_headline]');
        echo do_shortcode('[custom_headline type="center" level="h5" looks_like="h6" accent="true" style="margin-top: 0;"]Sub heading[/custom_headline]');
    }
}
add_action('x_before_view_global__index', 'x_add_custom_blog_title');

For the above solution to work, Filterable Index must be disabled under Theme Options > Ethos > Blog Options. In the above code you can make adjustments to the Custom Headline shortcode as per your requirement. To learn more about this shortcode please see http://demo.theme.co/ethos-1/shortcodes/custom-headline/

Hope this helps!

#3

Hello Nabeel - thank you for your response!
I have added a class option to the shortcode so that the styling is the same as the sample I showed you.
Here is a link to the page with the styling I’d like to use — including margins:

Summary

https://dev.cynergycrossfit.com/rates/

But, the styling hasn’t changed.

Summary

https://dev.cynergycrossfit.com/blog-3/

Could you review the code and see what I might be missing? Thank you!

// =============================================================================
function x_add_custom_blog_title() {
if ( is_home() || is_front_page() || (is_front_page() && is_home()) ) {
echo do_shortcode(’[custom_headline type=“center” class=“x-text-content-text-primary” level=“h2” looks_like=“h3” accent=“false”]Blog[/custom_headline]’);
echo do_shortcode(’[custom_headline type=“center” class=“x-text-content-text-subheadline” level=“h5” looks_like=“h6” accent=“true” style=“margin-top: 0;”]WODs & More[/custom_headline]’);
}
}
add_action(‘x_before_view_global__index’, ‘x_add_custom_blog_title’);
// =============================================================================

#4

Hi,

Please replace the code you added in functions.php with this

function x_add_custom_blog_title() {
    if ( is_home() || is_front_page() || (is_front_page() && is_home()) ) {
?>
       <div class="blog-head">      
            <h3 class="blog-title">Blog</h3>
            <span class="blog-subtitle">WODS & MORE</span>
       </div>
<?php
    }
}
add_action('x_before_view_global__index', 'x_add_custom_blog_title');

Then add the code below in Theme Options > CSS

.blog-head {
   display:block;
   clear:both;
   width:100%;
    text-align:center;
   padding-bottom:30px;
  border-bottom:1px solid #e5e5e5;
}

.blog-head .blog-title {
    font-family: "Open Sans",sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: center;
    text-transform: none;
    color: rgba(0,0,0,1);
}

.blog-head .blog-subtitle {
    font-family: "Open Sans",sans-serif;
    color: rgb(136,136,136);
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0em;
    text-align: center;
    text-transform: none;
}

Hope that helps

1 Like
#5

Brilliant! Works perfectly! I appreciate your help, thank you very much!

#6

Hi again, not sure if this is related to the same question, so if I need to start a new thread, let me know.
But when I go to a blog post page, the header is cutting off the title of the post.
Please see here: https://dev.cynergycrossfit.com/wod-8-04-18/
Same with a search results page: https://dev.cynergycrossfit.com/?s=wod

#7

Hi there,

Please go to X > Theme Options > Header then set the Navbar Top Height to 90.

Hope this helps.

#8

Thank you Jade, however I don’t like the effect it has on the hover of the menu items or the additional space it adds to the top of my other pages. Is there a way to change the blog post and search page result pages only?
Appreciate your help, thank you!

#9

Hi there,

Please try adding this to the Global CSS:

body.x-navbar-fixed-top-active.single-post .x-navbar-wrap,
body.x-navbar-fixed-top-active.search-results .x-navbar-wrap {
    height: 90px;
}

Hope this helps.

1 Like
#10

Perfect! Thank you!

#11

You’re welcome!
We’re glad we were able to help you out.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.