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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Display Image Slider In WordPress Header On Home Page Only

You can easily display an image slider in different header locations using WordPress.

The only problem is, your slider will be displayed on every page of your site.

If you only want your slider displayed on the homepage rather than site wide, you’ll need to make some simple edits to the code.

Display Slider On Home Page Using A Conditional Tag

You’ll also need to use this code which includes code for a conditional tag so your slider only displays on the home page.

The above code should be pasted directly into your child themes template files in the location you want to display your slider.

Or you can paste this line of PHP directly into your home.php or front-page.php file:

Don’t forget you can also use a shortcode anywhere in your editor or even in a custom function however the function is the most efficient method:

[easingsliderlite]

Using Easing Slider shortcode in custom function with Genesis header hook & home page conditional tag

You can change the theme specific hook which is this case is a Genesis header hook and the conditional tag as well.

In this tutorial, we’ll add a slider to the header area of different WordPress themes.

This tutorial assumes you’ve installed the Easing Slider plugin for WordPress.

Display Slider In StudioPress Themes

The Easiest way to display the Easing Slider in Genesis child themes is to add the PHP function for the slider to a custom function.

You can then add a conditional tag which in this case is for the home page and hook it into place using the genesis_header hook.

add_action('genesis_header', 'display_slider_header_home');
function display_slider_header_home() {
if ( is_front_page() && function_exists( "easingslider" ) ) { 
easingslider( 1 ); 
    }
}

You’ll need to replace the slider I.D in the above code from one to whatever your installation generates.

Using the Genesis theme framework, execute this code in your header using a Genesis hooks plugin.

Genesis Simple Hooks

This will display the image slider on your homepage only,  however the rest of your site will contain a blank header.

You could add a header image, text and fill this area.

You may also need to change the height of the header area.

If you’re using a child theme with Genesis, you may also need to upload a header image logo. Your header image will display site wide excluding your home page.

Go To Appearance > Header and upload an image.Header Image

Displaying your image slider using this method on the Genesis theme framework works perfectly.

You may need to make some small changes if you’re using a child theme on this framework as they are all coded differently.

Twenty Eleven Theme Header Slider

If you’re using the old default theme for WordPress, Twenty Eleven, you don’t get to use the Genesis simple hooks plugin.

This means you’ll need to access the core theme files and paste the slider code directly into either your:

  •  index.php file or
  • header.php

Index.php

Here’s where you can paste it on line 16 in your index.php

Twenty Eleven Index Template File

Once you do this, you may need to change the size of your custom header or comment it out.

Otherwise your slider will be displayed below your site title, header & navigation menu which means below the fold.

header.php

This is a better solution in my opinion.

Paste the code around line 77 in the Twenty Eleven header.php file

Twenty Eleven Header PHP

Twenty Twelve Theme Header Slider

Displaying your slider on the homepage only of the Twenty Twelve theme is easy.

Paste the code around line 47 of the Twenty Twelve header.php file.

This will display the slider after the header and navigation menu.

Twenty Twelve Header PHP

Another good option is to paste the code around line 38 and display your slider before your navigation menu.

Image Slider Before Navigation
You could also use your index.php file but you’ll find its better to paste the slider code into your header.php and change the location if needed.

Using Shortcodes In Widgets

If you’re using the slider shortcode in a text widget to display your slider, you’ll also need to add support for shortcodes in widgets otherwise they won’t work.

Add this code to the end of your child themes functions.php file using a text editor.

Video Guide

Conclusion

You may need to make adjustments to your header image sizes and navigation menu’s to get the result you want.

Related Tutorials

  • Install Slider in Header of Twenty Sixteen Theme

Slider

Reader Interactions

Comments

  1. Agnes says

    December 17, 2014 at 1:54 pm

    Will it work on theme Dazzling too?

    Thank you,
    Agnes

    Log in to Reply
    • Brad Dalton says

      December 17, 2014 at 1:55 pm

      You need membership to get the code which works on your theme.

      Then you can login and send me the theme and i’ll code it for you.

      Log in to Reply
  2. Janneke says

    July 21, 2014 at 10:25 am

    Hello,

    I have placed the easing slider lite on a website that I am changing (first time working on a website).. I use the theme Twenty Twelve, and placing the slider worked really easy! Accept, the slider is now on every page.. I only want it on the first page….. I followed the steps in the article above, but nothing is changing… What am I doning wrong?

    A link to a copy of my header.php file: https://gist.github.com/fe524e01a483c3e77259.git

    (I’m using WordPress 3.9.1..)

    Thank you!

    Log in to Reply
    • Brad Dalton says

      July 21, 2014 at 2:23 pm

      Hi

      I just updated the code so it only displays on the front page so please use the new snippet.

      Log in to Reply
  3. vivek says

    June 11, 2014 at 3:01 pm

    i am using ward theme.i want to add image slider into the jumbotron area ..i tried but i unable to add images at home page ..plz help me out .

    Log in to Reply
    • Brad Dalton says

      June 11, 2014 at 11:08 pm

      Simply place the template tag into the coorect file in the position you want it to output

      Log in to Reply
  4. JSciz says

    May 6, 2014 at 7:39 pm

    Hey Brad,

    I cant seem to get it to show up in my Twenty Thirteen site, i placed the code on line 52 and it never worked, and I tried a few other places. Any ideas?

    Log in to Reply
    • Brad Dalton says

      May 6, 2014 at 8:33 pm

      What code did you use and how have you created a slide show?

      Log in to Reply
      • Jsciz says

        May 6, 2014 at 9:12 pm

        I used the PHP code and placed it in the header.php file. I downloaded the plugin through the backend of my wordpress site.

        Log in to Reply
        • Brad Dalton says

          May 6, 2014 at 9:25 pm

          Did you create a slider and add images?

          What exact code did you add to the header.php file?

          The code has been tested many times and works as the screenshot shows.

          Log in to Reply
          • Jsciz says

            May 6, 2014 at 9:29 pm

            I made a slider using the plugin, it has a few images set. and I used the code from this page

          • Brad Dalton says

            May 6, 2014 at 9:54 pm

            The code from this page is exactly what the plugin author provides and it has been used thousands of times.

            If you’ve pasted it incorrectly or in the wrong spot in the file, it won’t work.

            Please send me a copy of the file to brad at wpsites.net and i’ll take a look.

          • Brad Dalton says

            May 6, 2014 at 10:28 pm

            Just tested the file you sent me and it works perfectly.

  5. Bram says

    February 14, 2014 at 4:22 pm

    Hi,

    With the genesis hooks i have at the genesis_after_header this:

    I changed it in the code that you used on your post:
    But that doesn’t work, i have no idea why. My homepage is home…

    Hope you can help.

    Log in to Reply
    • Bram says

      February 14, 2014 at 4:25 pm

      Sorry what i have now is:

      I changed it in what u said:

      Log in to Reply
      • Brad Dalton says

        February 14, 2014 at 4:56 pm

        Did you add this code to your child themes functions file?

        Did you create a slider and add images to it after installing the plugin?

        Are you using the FREE lite version of the plugin or the premium version?

        Log in to Reply
  6. Bram says

    February 14, 2014 at 3:47 pm

    Hi,

    First i want to thank you for your awesome tips!!

    I have a question i am using the Genesis simple hooks and easing slider plugin for genesis.

    I tried almost everything but it doesn’t work to only show the slider on my homepage…
    Got any tip for me? I tried it wit the genesis hooks plugin and in the function php.

    Regards,
    Bram

    Log in to Reply
    • Brad Dalton says

      February 14, 2014 at 3:56 pm

      home page or front page?

      Depends on your Reading settings however all the solutions are in this post.

      Log in to Reply
  7. Reinder Corporaal says

    February 1, 2014 at 5:55 pm

    Hi! I want to use this slider in my theme. I’m using the Yoko Theme and I want to install this slider as my header (image). But I’ve no clue where to start…..Can u help me with this?

    Log in to Reply
    • Brad Dalton says

      February 1, 2014 at 6:02 pm

      Paste this code into your header.php file where you want the slider to display.

      Line 38 is a good position.

      You will need to install the plugin and create a slideshow using images which are 1102 × 350 pixels.

      Log in to Reply
  8. pat says

    January 1, 2014 at 3:19 am

    Hi Brad

    I added this hook to my Genesis theme I like to center the slider, wondering what code to add to this hook…
    Thank you.

    Pat

    Log in to Reply
    • Brad Dalton says

      January 1, 2014 at 7:14 am

      Pat

      Depends on which slider as they use different classes.

      Log in to Reply
  9. Winifred says

    October 22, 2013 at 6:57 pm

    Does this code also work for the Twenty Thirteen theme?

    Log in to Reply
    • Brad Dalton says

      October 22, 2013 at 7:22 pm

      Yes it does

      Log in to Reply
  10. Jeremy says

    October 18, 2013 at 4:06 pm

    How do I adjust the below line to match your code above to use my particular slider (All Around Slider)on my home page only
    I am using a PHP plugin to allow me to place this PHP code in my widget ready header.
    I am using Genesis framework with the new Beautiful child theme

    Log in to Reply
    • Brad Dalton says

      October 18, 2013 at 4:53 pm

      Hi Jeremy

      Please send me a copy of the slider and i will work it out for you.

      brad at my domain

      Log in to Reply
      • Jeremy says

        October 18, 2013 at 5:23 pm

        Thanks Brad. I played around with some of your code above and worked it out.
        You have a lot of good info here. Jeremy

        Log in to Reply
        • Brad Dalton says

          October 18, 2013 at 5:32 pm

          Thanks Jeremy

          Log in to Reply
  11. Whozane says

    September 12, 2013 at 5:08 pm

    Can you please help me display this slider on home page of responsive theme by cyberschimps I have tried eberything still success I posted

    in home.php right below the get gether

    Log in to Reply
    • Brad Dalton says

      September 12, 2013 at 5:16 pm

      I will need to login and install the code correctly.

      Please use the contact form on my site.

      Log in to Reply
  12. Crystal Sargent says

    August 7, 2013 at 11:09 pm

    Could you please help me figure this out? I can’t seem to figure out what to put where to get the slider on just my home page. I tried to create a HOME page and put the short code there instead of on the featured image spot, but it still shows up on every page. I also pasted the code in my header file, but in the parent, because it wouldn’t work if I pasted it in a child theme.

    highandheavyoutfitters.com

    Any advice?

    Log in to Reply
    • Brad Dalton says

      August 8, 2013 at 6:23 am

      It goes in the header.php file or install the widget logic plugin and put is_home() in the conditional field of the widget

      Log in to Reply
      • Crystal Sargent says

        August 8, 2013 at 5:49 pm

        Got it…finally! THANK YOU!!!

        Log in to Reply
    • Brad Dalton says

      August 8, 2013 at 8:39 am

      Add a conditional tag for the home page.

      The code is included in the above tutorial.

      Log in to Reply
  13. Cliff says

    June 24, 2013 at 1:59 am

    How to display easing slider to each page in twenty twelve, thanks for reply.

    Log in to Reply
    • Brad Dalton says

      June 24, 2013 at 8:53 pm

      Hi Cliff.

      Simply remove any conditional tag from the code and paste it in your template file like page.php or single.php for single posts.

      Log in to Reply
  14. Deb says

    May 29, 2013 at 5:48 am

    Can this slider be used in a widget? If so, how do I do it?

    I am using a Genesis theme (midnight) and would like to place it on the homepage in the featured section.

    Thanks.

    Log in to Reply
    • Brad Dalton says

      May 29, 2013 at 5:56 am

      Yes, Simply paste the shortcode for the slider into a text widget.

      You’ll also need to add support for shortcodes in widgets to your child themes functions.php file.

      Log in to Reply
  15. Matthew Ruddy says

    May 5, 2013 at 6:27 pm

    I must say this guide is absolutely awesome Brad, thanks a million! Ironically this is the first I’ve seen of it, so apologies for the 6 month late response!

    Log in to Reply
    • Brad Dalton says

      May 5, 2013 at 6:43 pm

      Love the Easing slider and the flexibility its offers.

      Never had a problem with it and its very easy to install anywhere in your theme.

      Great job Matthew!

      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
 

Loading Comments...
 

You must be logged in to post a comment.