Add Button to Front Page header image

I would like to add a call to action button on my front page header image. I tried following the steps here: Add another call to action button, and replaced the snippet with:

But the button did not appear. Also, I would like the button to hyperlink to:

Thanks for your help!

Hello there,

Try doing the below steps, please.

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

      var headerImg = $('.header-image');
      var ctaBtn        = '<div class="slide-inner">'+
                          '<a href="#primary" class="roll-button button-slider">Click to begin</a>'+

      if (':visible') ) {

  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-image .slide-inner{
      top: 50%;
      -webkit-transform: translateY(-10%);
      -moz-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
      -o-transform: translateY(-10%);
      transform: translateY(-10%);


Hi Kharis,

I followed your instructions, but the button does not appear. Thoughts?

Is this the site where the code be applied in?

Try clearing any applied cache, as it usually prevents recent code addition to take immediate effect.