Display unique / different Header Text on Each Page in Rocked Theme

Hi! I need to set different header text and button with link on each page, but cannot determine a way to do that through the admin dashboard. Could you please advise me on how to accomplish this?

I installed a plugin that allowed me to display a different header image for each page, but I need to have different text as well. Thank you so much!

Hello there,

You can use jQuery code to alter the default header info content on a specific page. Please follow 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( $('.header-image').length ) {

    var hInfo = {
      title:    $('.header-info .header-title').text(), 
      text:     $('.header-info .header-text').text(),
      btnText:  $('.header-info .roll-button').text(),
      btnLink:  $('.header-info .roll-button').attr('href'),
    };

    var headerContent = function() {
      $('.header-info .header-title').text(hInfo.title);
      $('.header-info .header-text').text(hInfo.text);
      $('.header-info .roll-button').text(hInfo.btnText);
      $('.header-info .roll-button').attr('href', hInfo.btnLink);    
    }

    var isPage = function(pageID) {
      if( $('body').hasClass('page-id-'+pageID) ) {
        return true;
      }
    }

    // Header content for page which its ID is 2 
    if( isPage('2') ) {
      hInfo.title     = 'Your custom title';
      hInfo.text      = 'Your custom text';
      hInfo.btnText   = 'Your Button';
      hInfo.btnLink   = 'http://yoursite.com/your-link'
    }

    // Header content for page which its ID is 6 
    if( isPage('6') ) {
      hInfo.title     = 'Your custom title 2';
      hInfo.text      = 'Your custom text 2';
      hInfo.btnText   = 'Your Button 2';
      hInfo.btnLink   = 'http://yoursite.com/your-link-2'
    } 
       

    headerContent();
    
    
  }
    

}); 

Read this code block in the above code carefully, please.


// Header content for page which its ID is 2 
if( isPage('2') ) {
  hInfo.title     = 'Your custom title';
  hInfo.text      = 'Your custom text';
  hInfo.btnText   = 'Your Button';
  hInfo.btnLink   = 'http://yoursite.com/your-link'
}

This means you’ll alter the default header content on the page which its ID is 2. You have to replace this line with your page ID.


if( isPage('2') ) {

To find the page ID, edit your page, in the web browser’s address bar, you’ll see something like this:


yoursite.com/wp-admin/post.php?post=2&action=edit

To do on your other page, you’ll need to duplicate that code block and adjust the ID number.

  1. Update

I hope this reply helps.

Regards,
Kharis

Thanks so much for this Kharis but I can only get this to work on one page of my site. The blog page won’t change and neither will the header text, sub-titles, button etc on the individual product pages. I think those pages have different types of ID’s? Maybe post-id or product-id instead of page-id. The JQuery script above only addresses page-id. Is there a way to change the titles etc on those pages? Any help much appreciated.

Hello there,

For posts archive page, use this code:

    if( $('body').hasClass('blog') ) {
      hInfo.title     = 'Your custom title 2';
      hInfo.text      = 'Your custom text 2';
      hInfo.btnText   = 'Your Button 2';
      hInfo.btnLink   = 'http://yoursite.com/your-link-2'
    } 

For WooCommerce shop page, use:

    if( $('body').hasClass('post-type-archive-product') ) {
      hInfo.title     = 'Your custom title 2';
      hInfo.text      = 'Your custom text 2';
      hInfo.btnText   = 'Your Button 2';
      hInfo.btnLink   = 'http://yoursite.com/your-link-2'
    }

Regards,
Kharis

Kharis…you’re amazing. will try when i wake up. thank you👍