How to add rotating overlay text on static banner

Yesterday I released a plugin “Genesis Static Banner“. In this article I am showing that you can easily add rotating overlay text on full width banner image. I can directly add this functionality inside the plugin. But I did not. I am showing how a user can extend this plugin’s functionality as per their requirement. This plugin is supporting the actions and filters. So you can extended this plugin and add new add-on.

Step 1: Adding a extra custom meta box for text. Add the following code in functions.php file

if( class_exists('Genesis_Static_Banner') ) :
  //* Overlay Text Rotating Meta Box
  add_action('gsb_add_meta_boxes', 'gsb_overlay_text_rotator_meta_box', 10, 1);
  function gsb_overlay_text_rotator_meta_box( $obj ){
    $screens = apply_filters('gsb_post_type', array('page','post') );
    foreach( $screens as $screen )
      add_meta_box('gsb_overlay_text_rotator', __( 'Overlay Text', 'gsb' ), 'gsb_overlay_text_rotator', $screen, 'side', 'low');
  }
  
  function gsb_overlay_text_rotator( $post ) {
    wp_nonce_field( 'gsb_save_meta_box_data', 'gsb_meta_box_data_nonce' );
    $overlay_text = esc_attr( get_post_meta( $post->ID, '_overlay_text', true ) );
           
    printf( '<p><label>%s</label><br/><textarea id="overlay_text" name="gsb[_overlay_text]" class="widefat">%s</textarea>', __( 'Enter Your Text', 'gsb' ), $overlay_text );
    printf( '<small class="description desc"><strong>%s</strong></small></p>', __( 'Separate the text with "|".', 'gsb' ) );
    
  }

  //* Removing default action
  remove_action('genesis_after_header', array( $gsb, 'gsb_static_banner_after_header' ), apply_filters( 'gsb_action_priority', 8 ) );
  add_action('genesis_after_header', 'gsb_static_banner_below_header', 8 );
  
  function gsb_static_banner_below_header() {
    global $post;
      
    $show_banner = get_post_meta( $post->ID, '_show_on_this_pg', true );
    $overlay_text = esc_attr( get_post_meta( $post->ID, '_overlay_text', true ) );    
    if( $show_banner && has_post_thumbnail( $post->ID ) && $overlay_text ) {
      add_action('wp_footer', 'gd_otr_enqueue_scripts');
      function gd_otr_enqueue_scripts() {
        wp_enqueue_script( 'bxslider-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.bxslider.js', array( 'jquery' ), '1.0.0' );
        wp_enqueue_script( 'overlaytext-js', get_bloginfo( 'stylesheet_directory' ) . '/js/overlaytext.js', array( 'bxslider-js' ), '1.0.0' );
      }
      $overlay_text = implode( "</li><li>", explode( '|', $overlay_text ) );
      echo '<div class="gsb-banner no-text-indent">
              <div class="overlay-text">
                <ul class="slides">
                    <li>' . $overlay_text . '</li>
                </ul>
              </div>
            </div>';  
    } else if( $show_banner && has_post_thumbnail( $post->ID ) ) {
      echo '<div class="gsb-banner">Static Banner After Header</div>';
    }
    
  }
endif;
Custom Meta Box for Overlay Text
Custom Meta Box for Overlay Text

Step 2: Create a folder “js” in your child theme folder. If this folder is already existing in your child theme folder then do not need to create it again. Now download this two JS files and upload in “js” folder. Download JS

Step 3: Add the following CSS in your style.css file.

.no-text-indent{
  text-indent: 0px!important;
}

.gsb-banner{
  display: table;
  position: relative;
  width: 100%;
}

.overlay-text {
  background: rgba(0,0,0,0.45);
  display: table-cell; 
  position: relative;
  padding:0 20px;  
  text-align: center;
  vertical-align: middle;
  max-width: 960px;
  margin:0 auto;
  z-index: 1;  
}

.overlay-text .slides li {
  color: #FFF;
  font-family: "Montserrat",sans-serif;
  font-size: 55px;
  line-height: 1.3; 
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media only screen and (max-width: 1023px) { 
  .overlay-text .slides li{ font-size: 40px; } 
}

@media only screen and (max-width:  768px) {
  .overlay-text .slides li{ font-size: 32px; } 
}

Note: I used Parallax Pro theme. I used “Montserrat” font for text. You should change the font and size based on your site design.

https://youtube.com/watch?v=ovcc6EGMs3E%3Frel%3D0%26showinfo%3D0

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

22 Discussion to This Post

  1. I tried to contact you via your contact form… didn’t receive any response. Is there any way I can talk to you over a phone call?

    Santhosh

  2. One question? How can I add the page title to the image and remove the text animation?

  3. Such a clean code… Thank you very much for the plugin + code. Very useful.

  4. Hi,

    This is a great plug-in! Really easy to use.

    Is it possible to add a button/CTA?

    Also is it possible to have the text formatting on the banner appear differently on each transition? For example, first line bold, second line not?

    • Yes. You can add the CTA button. If you add the HTML code for button in overlay text area then it will appear on your site. Code will be like this

      <a href="LINK HERE" class="button clearfix">CTA BUTTON</a>
      

      You can add different design effect for your content e.g.:

      <strong>FIRST LINE</strong><br/>
      ADD SECOND LINE<br/>
      <span class="red">RED TEXT</span>
      

      .red {
      color: #FF0000;
      }

      will go to your style.css file

  5. Wonderful plugin! This is exactly what I was looking for my Parallax Pro theme-driven website. Thanks for sharing code snippet to customize it further. Much appreciate your giving back to the community.

  6. Very useful piece of code. I love it.
    Can’t this be added in the plugin so as to have one intact piece of great plugin?

    • Hi

      Thank you for your suggestion. I’ll try it later.

      Chinmoy

      • Thank you very much Sir!
        Staying tight here waiting.
        SUGGESTION: Isn’t having a plugin like this in wordpress.org respiratory a good idea and making it easy for updates when you change the code? Just saying…

        • 🙂 . I knew it. But I am not uploading on WP repo. This is my personal site. I am writing tutorial and sharing my experience about Genesis Framework here.

          • Oh! I got it, Sir.
            I’ll be waiting for the plugin then

            • Plugin is already live and you can download it from here . I created this article because I am showing how user can extend this plugin’s functionality as per their site requirement. Plugin is using the actions and filters. So you can use ACF plugin and display the custom value as a overlay text on the static banner. Also if you want then you can add CTA ( Call To Action ) like Altitude PRO Theme (title, some paragraph and buttons).

              … and many more features.

          • Yes Sir.
            I already use the plugin but my request was having the code in this page right in the plugin. I think you got me right in first reply of my comment. Thank you.

Leave A Reply

Your email address will not be published. Required fields are marked *