Support » Theme: Primer » Replacing hero image with slider

  • Resolved jimithing007

    (@jimithing007)



    I am using the Mins child theme. Is it possible to replace the main hero image on the home page with a slider? What would this entail? Also, is there a preferred slider plug-in to accomplish this?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Evan Herman

    (@eherman24)

    Hi @jimithing007,

    If you wanted to replace the header with a slider entirely, it would entail customizing the theme and template files. It would be advised to create a child theme and to customize the header template file.

    Some of the Primer child themes customize the header through the hooks and filters bundled with Primer, so it might be a good starting point to take a look at how the child themes are customizing the theme. https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

    Another option is to create an MU plugin where you can add the following code snippet:

    /**
     * Remove the default mins header and render a slider.
     *
     * @author GoDaddy
     * @return mixed Markup for the slider.
     */
    function mins_slider_header() {
    
    	if ( ! is_front_page() ) {
    
    		return;
    
    	}
    
    	remove_action( 'primer_after_header', 'primer_add_hero', 7 );
    
    	add_action( 'primer_after_header', function() {
    		echo do_shortcode( '[slider-shortcode]' );
    	} );
    
    }
    add_action( 'template_redirect', 'mins_slider_header' );

    You’ll want to replace [slider-shortcode] in the snippet above with the shortcode for the slider you are using (this is different for every plugin).

    Once you have your slider rendering on the page, it’s most likely going to take some CSS to tweak the slider to fit into the theme properly.

    There are no sliders that I can personally recommend, but there are a ton of options here in the WordPress.org plugin directory.

    That should be a fairly solid starting point for you to work off.

    Evan

    jimithing007

    (@jimithing007)

    Hi Evan,

    Thanks for the insight. You’ve been a huge help for me with my site, and I very much appreciate it.

    I have a little more experience with creating an MU plugin – I have no experience creating a child theme. So for me, the MU plugin would be a preferred method. Are there any advantages to one option over the other?

    I’m looking at the Slider Revolution plug-in, but I can’t find it in the WordPress.org directory. Do you know if we could make this plug-in work via the MU plug-in method you described above? I’m assuming it generates shortcode just like the others but I have no experience with Slider Revolution.

    I see you’ve helped someone else with a similar issue here: https://wordpress.org/support/topic/lyricalprimer-theme-header-replacement/

    Thanks as always for your assistance, Evan.

    jimithing007

    (@jimithing007)

    Hi Evan,

    I’ve made some progress with the MU plugin – using this code:

    <?php
    /**
     * Remove the default mins header and render a slider.
     *
     * @author GoDaddy
     * @return mixed Markup for the slider.
     */
    function mins_slider_header() {
    
    	if ( ! is_front_page() ) {
    
    		return;
    
    	}
    
    	remove_action( 'primer_after_header', 'primer_add_hero', 'primer_hero', 7 );
    
    	add_action( 'primer_after_header', function() {
    		echo do_shortcode( '[soliloquy id="6459"]' );
    	} );
    
    }
    add_action( 'template_redirect', 'mins_slider_header' );
    

    My hero image was still peeking above the slider. I removed the featured image via Customize > Header Media in the WP customizer, and removed one of the text widgets I had there. Now there’s a lot of extra white space that looks like a placeholder for where the featured image would go. How do I remove this white space?

    http://d35.9df.myftpupload.com/

    jimithing007

    (@jimithing007)

    Ignore the ‘primer_hero’ part in my code above. That was me trying something out

    (Didn’t work)

    🙂

    Hi @jimithing007,

    Sorry for the delay in responding here. I was traveling this past weekend and not around my computer.

    It looks like you’ve got the slider up and running and everything looks great on my end. Are you still encountering any issues?

    Evan

    Hi Evan,

    Yes! I’ve been experimenting and was able to get rid of the white space I mentioned. So far it’s been working great – glad it looks good on your end too.

    I’ll post what I did here in case someone else has a similar issue.

    I took your code and added a line to add an additional, slightly different slider for the mobile version:

    /**
     * Remove the default mins header and render a slider.
     *
     * @author GoDaddy
     * @return mixed Markup for the slider.
     */
    function mins_slider_header() {
    
    	if ( ! is_front_page() ) {
    
    		return;
    
    	}
    
    	remove_action( 'primer_after_header', 'primer_add_hero', 7 );
    
    	add_action( 'primer_after_header', function() {
    		echo do_shortcode( '[R-slider id="76"]');
    	} );
      	add_action( 'primer_after_header', function() {
    		echo do_shortcode( '[R-slider id="77"]');
    	} );
    
    }
    add_action( 'template_redirect', 'mins_slider_header' );
    

    “76” is my desktop slider and “77” is my mobile one. I then added some CSS in the Customizer to display the mobile one for mobile screens, and the desktop one for larger screens:

    /*Replaces displays correct slider based on display size */
    @media only screen and (max-width: 600px){
    #slider76_container_ {
    display: none !important;
    }
    #slider77_container_ {
    display: block !important;
    }
    }
    
    @media only screen and (min-width: 601px){
    #slider76_container_ {
    display: block !important;
    }
    #slider77_container_ {
    display: none !important;
    }
    }
    

    And I added this CSS into the Customizer to solve the extra space issue at the top:

    /*Removes hero image and space from home page FOR NEW SLIDER
     */
    .page-id-156 .hero {
    display: none; }

    If you see anything goofy in there, please let me know Evan. It seems to be working great!

    Thanks for all your help.

    No problem at all. Great work on all of that! And thank you for sharing your solution here. I’m sure that others will benefit from it in future.

    Have a great rest of the week!

    Evan

    Thanks! You too.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Replacing hero image with slider’ is closed to new replies.