Adding text on video header

Hello,

I added a video in home page, but I can not see any option to add the text/title. How can I add the text at right side on the video header. Please help

Here the link
http://stillwateragency.com/my-front-page-2-2-2/

Thanks,
SammyT

Dear Sammi,

Thank you for getting in touch here.

I am sorry, there is no such that option by default; It isn’t a bug, but it’s designed that way. However we still have a chance to accomplish it by using a couple of jQuery. I’ve posted the code here on WP.org community support channel.

https://wordpress.org/support/topic/adding-title-and-call-to-action-button-in-video-header/#post-8588740

I hope you find it helpful. Let me know if further questions come up.

Have a nice day!

Regards,
Kharis

Hi Kharis,

Thank you so much. Its working.

I added text to my Home page video in the header area. It works fine but how can I hide the button and subtitle?

Thanks,
SammyT

Hello Sammy,

You’ll only need to use this code:


(function($){
      
    "use strict"

  if( $('body').hasClass('home') ) {
    
    var mainTitle    = 'Maintitle goes here';
    
    var heroContent  = '<div class="slide-inner">';
        heroContent += '<div class="contain text-slider">';
        heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
        heroContent += '</div>';
        heroContent += '</div>';

    $('.sydney-hero-area').append(heroContent);

  }  

})(jQuery);

Regards,
Kharis

Hi Kharis,

Thank you

I updated this code but the text disappear then I put the previous code its working.

Thanks,
SammyT

Hello SammyT,

Please share your site URL here, so I can take a look.

Regards,
Kharis

Hi Kharis!

I do have the same problem. I copy/pasted the code from your blogpost on WP-forum into the Custom JS-plug in, but no success. I work within the Astrid Pro-theme, therefore i switched the word ‘Sydney’ to ‘Astrid’.

I can’t understand hardly any JS, could you please explain the process anyway?

Thanks!
/Sara

Hello Sara,

That code won’t work with Astrid as it has different video header markup. For Astrid, 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

(function($){
      
  "use strict"

  if( $('body').hasClass('home') ) {

    $('.wp-custom-header').wrapAll('<div class="header-image js-div"></div>');

    var title       = 'Welcome to Astrid';
    var subtitle    = '5 minute setup';
    var buttonLabel = 'Explore';
    var buttonURL   = '#primary';

    var heroContent  = '<div class="header-info"><div class="container">';
        heroContent += '<h4 class="header-subtext">'+title+'</h4>';
        heroContent += '<h3 class="header-text">'+subtitle+'</h3>';
        heroContent += '<a class="button header-button" href="'+buttonURL+'">'+buttonLabel+'</a>';
        heroContent += '</div></div>';

    $('.header-image.js-div').append(heroContent);

  }

})(jQuery);

  1. Update
  2. Then add this extra custom CSS code to Appearance > Customize > Additional CSS:

.header-image.js-div:after {
  display: none;
}

Regards,
Kharis

Thank you! Initially it worked like a charm. Then I tried to edit the textstring: ‘Welcome to Astrid’, and the header and subheader disappeared from the frontend. Now I can’t delete the code you gave me.

I’ve tried to (1) deactivate/reactivate the plugin, (2) delete it from the server and reinstall. I also (3) deactivated all of my other plugins, but the editor still “remembers” my code. Hence I’m stuck.

Could you please help me out?

Thanks!
/Sara

Hi,

I followed the instructions above on how to add text to my video header and it worked just fine. Now though, i have the text on each and every page. How do I make it show only on the home page?

I used this code…

(function($){

"use strict"

var mainTitle    = 'Maintitle goes here';
var subTitle     = 'Subtitle goes here';
var buttonURL    = '#';
var buttonLabel  = 'Click to begin';

var heroContent  = '&lt;div class="slide-inner"&gt;';
    heroContent += '&lt;div class="contain text-slider"&gt;';
    heroContent += '&lt;h2 class="maintitle"&gt;'+mainTitle+'&lt;/h2&gt;';
    heroContent += '&lt;p class="subtitle"&gt;'+subTitle+'&lt;/p&gt;';
    heroContent += '&lt;/div&gt;';
    heroContent += '<a href="'+buttonURL+'" target="_top">'+buttonLabel+'</a>';
    heroContent += '&lt;/div&gt;';

$('.sydney-hero-area').append(heroContent);

})(jQuery);

Hi!

Rhodeseo, maybe you should try the following string:

‘if( $(‘body’).hasClass(‘home’) ) {
…’

It looks like it’s the plug-in Custom JavaScript that is causing the problem, in some way. I really appreciate if someone could show me the ropes on this one!

Thanks!
/Sara

Hi,
thanks for you help about the video header title, it works fine. But how can I make it in 2 languages in polylang?
have a great day!

HEllo @goss-jeremie,

I will need to do a couple of extra jQuery coding works. Here’s one example. To implement this to your current code, I need to know the code you’ve added. Sharing a link to your site also helps me easier suggest the possible code solution.

Regards,
Kharis

I Kharis,

This is a great theme however I have tried using your JS can’t get text or button to appear over my video at all. The URL is blog.bookamat.co.za

I am pasting the following into the Custom Javascript plugin:

(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 += ‘‘+buttonLabel+’‘;
heroContent += ‘</div>’;

$(‘.sydney-hero-area’).append(heroContent);

})(jQuery);

What am I doing wrong?

Hello @bookamat,

It looks like the video header on your site has been disabled. Viewing the source code of your site, it’s showing me that the JS code you pasted is incorrect. Please use this one instead.

Regards,
Kharis

Hi, i am using Sydney, i ahve added video header now i want to add text and logo over the video
i have used this JS code to text but it does not work
(function($){

“use strict”

if( $(‘body’).hasClass(‘home’) ) {

$('.wp-custom-header').wrapAll('<div class="header-image js-div"></div>');

var title       = 'Welcome to Astrid';
var subtitle    = '5 minute setup';
var buttonLabel = 'Explore';
var buttonURL   = '#primary';

var heroContent  = '<div class="header-info"><div class="container">';
    heroContent += '<h4 class="header-subtext">'+title+'</h4>';
    heroContent += '<h3 class="header-text">'+subtitle+'</h3>';
    heroContent += '<a class="button header-button" href="'+buttonURL+'">'+buttonLabel+'</a>';
    heroContent += '</div></div>';

$('.header-image.js-div').append(heroContent);

}

})(jQuery);

http://www.pandawhite.com/ this is my website.
Regard,
Sartaj

Hello there,

Viewing the source code of your site, that custom jQuery code doesn’t present. Did you remove it? Please put it back, so I can debug and troubleshoot it.

Check out this thread once again – have you added this extra CSS code?

.header-image.js-div:after {
  display: none;
}

Regards,
Kharis

Thank you so much Kharis fast reply yes i just removed the code and edited the video to solve that problem, sorry for inconvenience.
Regards
Sartaj

Hello

I added the js code and all is working well. But I’m trying to find a way to display different text on different pages? I have the header type set to video for all the pages on the site. I would like to have different text displayed over the video for each page. Is this possible?

Thanks
Brendan

Hello Brendan,

You’ll need to use this 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>';

      $('.sydney-hero-area').append(heroContent);


      $.fn.vidHeaderTitle = function(title) {
        if( this.length && this.find('.sydney-hero-area .maintitle').length ) {
          this.find('.sydney-hero-area .maintitle').text(title);
        }
      }

      $.fn.vidHeaderSubtitle = function(subtitle) {
        if( this.length && this.find('.sydney-hero-area .subtitle').length ) {
          this.find('.sydney-hero-area .subtitle').text(subtitle);
        }
      }

      $.fn.vidHeaderButton = function(url, label) {
        if( this.length && this.find('.sydney-hero-area .button-slider').length ) {
          this.find('.sydney-hero-area .button-slider').attr('href', url).text(label);
        }
      }

      /* Set header content for specific page */
      
      $('.page-id-2').vidHeaderTitle('This is custom title');
      $('.page-id-2').vidHeaderSubtitle('This is custom sub title');
      $('.page-id-2').vidHeaderButton('http://yoursite.com/page-url', 'New Button');


    })(jQuery);

In the code above, the custom video header content for specific page which is identified by its ID number 2 is defined in these lines:

    $('.page-id-2').vidHeaderTitle('This is custom title');
    $('.page-id-2').vidHeaderSubtitle('This is custom sub title');
    $('.page-id-2').vidHeaderButton('http://yoursite.com/page-url', 'New Button');

To get the page ID, edit page, in the address bar of your web browser you’ll see a URL that reads something like this: yoursite.com/wp-admin/post.php?post=2&action=edit

If you want to apply different content on your other page, you’ll need to duplicate those lines, so it’ll look like this:

    $('.page-id-2').vidHeaderTitle('This is custom title');
    $('.page-id-2').vidHeaderSubtitle('This is custom sub title');
    $('.page-id-2').vidHeaderButton('http://yoursite.com/page-url', 'New Button');

    $('.page-id-3').vidHeaderTitle('This is custom title');
    $('.page-id-3').vidHeaderSubtitle('This is custom sub title');
    $('.page-id-3').vidHeaderButton('http://yoursite.com/page-url', 'New Button');

Regards,
Kharis