Different Header Text for different pages?

Hi there,

Is it possible to have different header text on each page?

I have followed the advice given on other topics and installed unique headers to allow me to have a different header image on each page but I am struggling with changing the header text. It seems to be set that my ‘Homepage’ header text is repeated throughout the site.

Can you help please?

Thanks,
Thomas

Hello Thomas,

Try the below 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
    (function($){

    	$.fn.extend({astridHeroContent:function(e){e=$.extend({headerImage:"",headerText:"",headerTextSmall:"",buttonText:"",buttonLink:""},e);$(this).length&&$("body").hasClass("page-template-page_widgetized")&&$(".header-image").length&&(""!=e.headerImage&&($(".large-header").attr("src",e.headerImage),$(".small-header").attr("src",e.headerImage)),$(".header-info .header-text").html(e.headerText),$(".header-info .header-subtext").html(e.headerTextSmall),$(".header-info .header-button").text(e.buttonText),$(".header-info .header-button").attr("href",e.buttonLink))}});
        // Function ends

        // Configuration on a page
        $('.page-id-291').astridHeroContent({
          'headerText': 'Main header text',
          'headerTextSmall': 'Secondary header text',
          'buttonText': 'My Button',
          'buttonLink': '#btn-anchor'
        });

    })(jQuery);

Replace .page-id-291 with your page’s unique class name. You can get the number while editing a page – in the web browser’s address bar there is part of URL that usually reads like this post.php?post=291&action=edit. Or you can easily use the Reveal ID plugin.

For more pages, duplicate this code block and adjust its ID class name.

    $('.page-id-291').astridHeroContent({
      'headerText': 'Main header text',
      'headerTextSmall': 'Secondary header text',
      'buttonText': 'My Button',
      'buttonLink': '#btn-anchor'
    });
  1. Update

Regards,
Kharis

Hi Kharis,

Thank you so much for your reply!

I have followed the above steps but I am struggling to find where I can then edit the header text on individual pages?

I have tried using Customize whilst on individual pages but this is still changing the header throughout the whole website.

I look forward to your response.

Thank you,
Thomas

Hello Thomas,

Is it possible to share your site’s link here? Visiting it directly will help me inspect what goes wrong in there.

Regards,
Kharis

Good morning Kharis,

Sure thing - http://s788573177.websitehome.co.uk/contact-us

We would like to keep the text that is shown as our header text on our home page but change the text on our Contact Page header to show as:

Contact Us.
HOW CAN WE HELP?

Thank you,
Thomas

Hello there,

Thank you for sharing. I checked it and the code looks correct. Probably you have a caching plugin enabled? Flush it if any. Web hosting company usually has sever caching that aimed for a site’s speed load in the background. However additional code wouldn’t be read until it’s flushed. Contact your web hosting support to verify this.

Regards,
Kharis

Hi Kharis,

Thank you - I am happy to contact my web hosting provider.

Just to clarify, where should I be editing the header text for individual pages?

Thank you,
Thomas

Hello Thomas,

The solution I proposed was with jQuery code.

    $('.page-id-291').astridHeroContent({
      'headerText': 'Main header text',
      'headerTextSmall': 'Secondary header text',
      'buttonText': 'My Button',
      'buttonLink': '#btn-anchor'
    });

There’s no page to edit. The purpose is to manipulate the page’s header content by targeting the respective HTML tags.

Regards,
Kharis

Hi Krishan,

Unfortunately, the code you provided me with failed to work.

After spending sometime with a good friend of mine, he fixed it with the following solution:

(function($){

	if($(".page-id-426")[0]) {
      $('.header-info .header-text').html('HOW CAN WE HELP?');
      $('.header-info .header-subtext').html('CONTACT US.');
    }

    // Configuration on a page


})(jQuery);

Thanks again for your help.

Thomas :slight_smile:

Hello Thomas,

Glad to know you got correct code.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis