• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Replace Showcase Pro Front Page Header Image With Slider

This tutorial provides the solution which enables you to replace the page header background image with a responsive slider on the front page of the Showcase Pro theme by Bloom.

By default, the background image for the page header on the front page is added via the customizer. You’ll also find the PHP code below to remove this setting from the customizer.

Demo Video #

The video demo shows you how the slide show only displays on the front page and resizes on smaller screens.

Code Installation #

Once you download the folder below, follow these 3 steps :

Step 1 : Replace the front-page.php file in the Showcase Pro themes root directory with the modified front-page.php file from the download folder.

Step 2 : Merge the js folder with the Showcase Pro themes js folder or copy over the js files from the download folder into the Showcase Pro themes existing js folder.

Register for full access

Showcase Pro Theme Slider

Reader Interactions

Comments

  1. Lydia Kurnia says

    November 9, 2020 at 2:44 pm

    Hi Brad,

    Thank you so much for this tutorial – but somehow it didn’t work for me. I followed the steps (replaced the front page php and replace the backstretch images with my own) but for some reason the images failed to appear on the website. Are you able to help?

    Cheers,
    Lydia

    Log in to Reply
    • Brad Dalton says

      November 9, 2020 at 2:51 pm

      Did you swap out the path to your images in backstretch-set.js?

      if so, clear all caching and send me FTP or cPanel access if it still doesn’t work.

      Log in to Reply
      • Lydia Kurnia says

        November 9, 2020 at 3:05 pm

        Hi Brad,

        Thanks so much for the swift reply. Yes I swapped out the path to my images and I’ve cleared all cache, it still doesn’t work… what have I done wrong?

        https://thefamilydoctors.com.au/

        Happy to send you the cpanel access so you can hopefully figure out what I did wrong. Where should I best send the details to?

        Cheers,
        Lydia

        Log in to Reply
        • Lydia Kurnia says

          November 9, 2020 at 3:41 pm

          Hi Brad, I have sent the cpanel details via the contact form – hope you can help figure out what the problem is… I will go to sleep now and check in the morning. Thanks so much again for your help as always!
          Cheers,
          Lydia

          Log in to Reply
          • Brad Dalton says

            November 9, 2020 at 4:32 pm

            This is a bug in the Showcase Pro child theme i have advised the theme developer of and added a fix to make it work however that fix involved removing the .global.js file from loading on the front page. Will be able to remove this fix once they update the theme. The issue is not with my code as its always tested and shown working in the video demo.

          • Lydia Kurnia says

            November 9, 2020 at 9:20 pm

            Thanks, Brad, yeah I know your code works I have used it on another theme before and it worked wonders. I hope they fix it soon. Have you let them know about it? I have also contacted them about another issue re: the mobile menu – it seems to have disappeared too. I wonder if it is related to the same bug.

            Again thank you for your help.

            Cheers,
            Lydia

          • Brad Dalton says

            November 9, 2020 at 11:19 pm

            Yes i have contacted them and yes i think it could also affect the menu but the menu works when i test it after adding the fix.

          • Lydia Kurnia says

            November 10, 2020 at 1:30 am

            Wonderful, thanks, Brad. Will you let me know if they come back to you with a fix so I can implement your codes? I will let you know too if they come back to me re: the mobile menu.

            Cheers, Lydia

  2. Diana Brackmann says

    April 11, 2019 at 11:27 am

    Hi
    I have an interesting problem. With a fresh installation of showcase pro I made these edits and the header background image is replaced with a slider and works wonderfully. However as soon as I add the “Header Image” in the customizer, the site title is replaced with a “Showcase” graphic overlaying the slider images and I can’t seem to edit this?

    Thanks!

    Log in to Reply
    • Brad Dalton says

      April 11, 2019 at 10:51 pm

      You will find the official instructions for adding the logo here https://docs.designbybloom.co/article/143-showcase-pro-adding-a-logo

      You need to add 2 header images. 1 using customize > Header Image and the other using CSS.

      The image you add to the customizer shows in the header when you scroll down. The image link added in the CSS displays over the slides before scrolling down.

      Log in to Reply
  3. Christopher Richmond says

    July 24, 2017 at 7:17 pm

    Great Tutorial! Is it possible to provide a tutorial using a soliloquy slider?

    Best,

    -Chris

    Log in to Reply
    • Brad Dalton says

      July 24, 2017 at 11:51 pm

      Yes, however it requires an extra 335 lines of CSS which is loaded from Soliloquy. You can do this using CSS & Backstretch.

      Here’s the PHP for loading soliloquy using backstretch from functions.php.

      add_action( 'wp_enqueue_scripts', 'centric_slider' );
      
      function centric_slider() {
      
          if ( ! is_front_page() )
          return;
          
          if ( ! function_exists( 'soliloquy' ) )
          return;
      	
      	wp_enqueue_script( 'slider', get_stylesheet_directory_uri() . '/slider/backstretch.js', array( 'jquery' ), '1.0.0', true );
      	wp_enqueue_script( 'slider-settings', get_stylesheet_directory_uri() . '/slider/backstretch-set.js' , array( 'jquery', 'slider' ), '1.0.0', true );
      	
      	wp_localize_script( 'slider-settings', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', soliloquy( '3964' ) ) ) );
      	
       	
      }

      Swap out the slider id 3964 with your own.

      If you want to float the widget over the slider, you’ll need to add more CSS.

      And here’s the modified jQuery in slider > backstretch-set.js

      jQuery(document).ready(function($) {
      
      	$(".home-featured").backstretch([BackStretchImg.src]);
      
      	
      	});
      
      });

      Add some CSS

      .home-featured .wrap {
          position: absolute;
          left: 50%;
          top: 50%;}

      CSS will need tweaking depending on the height of images and widget content.

      Log in to Reply
      • Christopher Richmond says

        July 25, 2017 at 4:21 am

        Thank you very much!

        Log in to Reply
        • Brad Dalton says

          July 25, 2017 at 4:59 am

          I might write an entire tutorial if i can work out the mobile toggle ( drop down ) menu since i have most of the code worked out.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags