Adding title to other pages

I really like the look of the homepage slider title and subtitle separated by the colored accent line. Is there any way I can get the same thing on a different page, but with different text?

Thank you!

Hello there,

Firstly enable the full screen slider for site header type section under the Appearance > Customize > Header area > Header type.

To change the text in the specific page, you need to add custom jQuery code to replace the default text.

  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($) {

   'use strict'

   var slideTitle1     = $('.slide-item:nth-of-type(1) .maintitle' ).text();
   var slideSubTitle1  = $('.slide-item:nth-of-type(1) .subtitle').text();

   var slideTitle2     = $('.slide-item:nth-of-type(2) .maintitle' ).text();
   var slideSubTitle2  = $('.slide-item:nth-of-type(2) .subtitle').text();

   var slideTitle3     = $('.slide-item:nth-of-type(3) .maintitle' ).text();
   var slideSubTitle3  = $('.slide-item:nth-of-type(3) .subtitle').text(); 

   var slideTitle4     = $('.slide-item:nth-of-type(4) .maintitle' ).text();
   var slideSubTitle4  = $('.slide-item:nth-of-type(4) .subtitle').text();  

   var slideTitle5     = $('.slide-item:nth-of-type(5) .maintitle' ).text();
   var slideSubTitle5  = $('.slide-item:nth-of-type(5) .subtitle').text();

   if( $('body').hasClass('page-id-2') ) { // Change the text in the page whose ID is 2
    slideTitle1     = 'Maintitle 1';
    slideSubTitle1  = 'Subtitle 1';
    slideTitle2     = 'Maintitle 2';
    slideSubTitle2  = 'Subtitle 2';    
    slideTitle3     = 'Maintitle 3';
    slideSubTitle3  = 'Subtitle 3';    
    slideTitle4     = 'Maintitle 4';
    slideSubTitle4  = 'Subtitle 4';
    slideTitle5     = 'Maintitle 5';
    slideSubTitle5  = 'Subtitle 5';        
   }

   $('.slide-item:nth-of-type(1) .maintitle' ).text(slideTitle1);
   $('.slide-item:nth-of-type(1) .subtitle').text(slideSubTitle1); 

   $('.slide-item:nth-of-type(2) .maintitle' ).text(slideTitle2);
   $('.slide-item:nth-of-type(2) .subtitle').text(slideSubTitle2); 

   $('.slide-item:nth-of-type(3) .maintitle' ).text(slideTitle3);
   $('.slide-item:nth-of-type(3) .subtitle').text(slideSubTitle3); 

   $('.slide-item:nth-of-type(4) .maintitle' ).text(slideTitle4);
   $('.slide-item:nth-of-type(4) .subtitle').text(slideSubTitle4); 

   $('.slide-item:nth-of-type(5) .maintitle' ).text(slideTitle5);
   $('.slide-item:nth-of-type(5) .subtitle').text(slideSubTitle5);                
   

})(jQuery);   

  1. Update

From the code above, please see this line:


if( $('body').hasClass('page-id-2') ) { // Change the text in the page whose ID is 2

Change the number 2 with your page ID, which can be found while you are editing it. In the web browser’s address bar, you’ll see something like this:


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

Regards,
Kharis

Kharis,

That’s brilliant, worked like a charm! Thank you! I have a follow up to build on this (I forgot to add this in the original question):

Is there any way I can get a different slider picture to go with this new text? (For each page I just want 1 static slide).

Thank you again for your support, I really appreciate it!

-Harlan

Hi Harlan,

I am sorry, there is no way to do so. Probably it’s out of my knowledge. You can seek an assistance from a freelancer out there – find him on codeable.io or upwork.com.

Regards,
Kharis

Kharis, thanks for the response. If I can’t get a different slider picture, is it be possible for me to apply that title and subtitle with the colored accent line overlaid on a header image? I’m sorry for abusing your support, thank you for all your help!

-Harlan

Hello Harlan,

I would like to apologize in advance for the delay.

To accomplish it, you can use the following custom jQuery code.


(function($){
      
    "use strict"

    var mainTitle    = 'Maintitle goes here';
    var subTitle     = 'Subtitle goes here';
    var buttonURL    = '#';
    var buttonLabel  = 'Click to begin';
    
    var heroContent  = '<div class="slide-inner">';
        heroContent += '<div class="contain text-slider">';
        heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
        heroContent += '<p class="subtitle">'+subTitle+'</p>';
        heroContent += '</div>';
        heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';
        heroContent += '</div>';

    if( $('body').hasClass('page-id-2') ) { // Change the text in the page whose ID is 2        
      $('.sydney-hero-area .header-image').append(heroContent);
    }

})(jQuery);

Do adjustment as needed.

Regards,
Kharis