How to add heading on blog page?

Greetings All!

I’m trying to add the word “BLOG” on the top of my blog page, just like how my other pages have titles. If you visit the bottom two links from my website, you’ll see the About page has the word “ABOUT” on top, while the blog page doesn’t. I’m not too familiar with coding, but I am able to copy and paste CSS code, any help will be greatly appreciated.

You can insert the page heading to your blog index page with a couple of jQuery code. Please try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

  if( $('body').hasClass('blog') ) {
  
    var title   = 'Blog';
    var heading = '<div class="panel-grid-cell"><h3 class="widget-title">'+title+'</h3></div>';

    $('.post-wrap').prepend(heading);
    
  }
  
});

  1. Update

Regards,
Kharis

Thank you! But the padding seems to be a bit off, there is a lot of white space between the title and menu. Can we make it the same as my other pages?

Please add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.blog .page-wrap {
   padding: 0;
}

Regards,
Kharis

Thanks it works. Can I do the same for my assessment page on yourvisa.ca/assessment

I tried using the same java script but I’m not sure if that’s how you do it. I want to keep the same title font for all my pages, as you can see, my assessment title is differs.

Hello there,

Try adding this extra CSS code:


.page .entry-header h1.entry-title {
  position: relative;
  text-transform: uppercase;
  margin-bottom: 50px;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  padding-bottom: 10px;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  font-size: 32px;  
}

.page .entry-header h1.entry-title:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50px;
  height: 1px;
  margin-left: -25px;
  background-color: #b2c195;
}

Regards,
Kharis

Amazing it works. But the padding is kind of off like we had with the blog title.

Also, can we center this whole thing to the middle of the page?

Edit your page, and then enable the “Full width” template in the page attributes box.

Regards,
Kharis

Thanks. Lastly, how can we fix the padding like we did for the blog title?

Go to Appearance > Customize > Genral. Enter 0 for Page wrapper - top/bottom padding.

Regards,
Kharis

Appreciate all the help!