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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

How To Display An Image Slider In Different WordPress Header Area’s

This tutorial relates to displaying a image slider in the header area of different WordPress themes.

Tools Used:

  • I  used a free web design tool, Paint.net to create the slider images
  • Images are 960px width & 330px height.
  • Genesis simple hooks plugin
  • Easing Slider Plugin

Area’s we’ll display the slider include:

  • Before your header
  • In your header (yeah!)
  • After your header

Once you install the plugin, go to the slider settings and:

  • Set the width and height
  • Customize the border width & color
  • Customize the padding width & color

Create and upload your images according to these settings.

Add image file link and click thru url’s.

Display Options

You can use a shortcode or the php script

1. Shortcode in posts/pages:

[easingsliderlite]

2. Php function in template files (such as header.php, index.php, home.php, etc.):

<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>

3. Custom code in your child themes functions.php file which includes a theme specific hook location and conditional tag.

Execute PhP In Your Theme

You can write a custom function and hook it in using one of your theme’s action hooks.

Or you can install a hook plugin and simply add the php code above to the hook field. Like this:

Genesis - Simple Hooks

Example Of Slider After Header

Here’s an example of what the slider looks like using the code above to display the slider after the header.

I reduced the height of the header area to zero before adding this code.

Learn how to change the header area width & height in Genesis.

Here’s what it looks like using the Lifestyle theme on top of Genesis without the shadow arc effect.

Display An Image Slider In Different Header Area's - Example 2

This example shows the slider displayed using the same hook with the Genesis theme framework without a child theme and with the shadow arc effect turned on.

Display An Image Slider In Different Header Area's - Example 3

Your slider will blend in perfectly with your background so you won’t even notice its a slider. You can also change the appearance of slider so it

Displaying Slider In Header

You will have to change the size of your header area in both your themes functions and style.css files.

You can easily change the size of your header area if you are using a Genesis child theme from StudioPress.

Insert the php code in the hooks header field.

Display Image Slider Header

This is what your slider will look like if you follow this method.

Its will include the nav menu in the bottom part of the header on the homepage and even more so on your single posts and pages. You might like to keep it that way depending on your images or you may want to change it by adjusting the CSS.

Display Image Slider In WordPress Header

Here’s what it looks like if you

Unhook Genesis Do Header Hook

The header is replaced entirely with the slider and the navigation menu displays below the slider which you can remove easily or move to above the slider.

Note the shadow Arc effect which you can turn on and off.

Unhook genesis do header function from this hook

Here’s what the slider looks like with the shadow Arc turned off.

Image Slider In Header Without Shadow Arc

Display Slider Before Header

Lets finally take a look at how to display the slider before the header area.

Paste the slider code into the genesis_before_header Hook field.

Display Slider Before Header

I’ve also reduced the header height to zero in the Genesis theme’s style.css file.

Line 189 folks!!

#header {
margin: 0 auto;
min-height: 0px;
width: 100%;
}

Slider Before Header With Shadow Arc

Display Image Slider Before Header With Shadow

Slider Before Header Without Shadow Arc

Display Image Slider Before Header-No Shadow Arc

Adding Sliders in Other Themes

If your themes uses hooks, then you’re in luck as its the easiest way to execute php code in WordPress.

Image Slider In Twenty Eleven Theme

Paste the php code for the slider into the header.php around line 77

Comment the header image out as shown in the screenshot below.

Add Slider Code To Header PHP 2011

Here’s what the slider looks like in Twenty Eleven

Twenty Eleven Theme Header Slider

Adding Slider in Twenty Twelve Theme

Add the slider code to the header.php file around line 41

Twenty Twelve Header Slider

Looks even better once you enable the shadow Arc effect.

What do you think?

Twenty Twelve Theme Header Slider

Slider Header Image Gallery

Compare which slider display option is right for your theme’s header area.

Display An Image Slider In Different Header Area
Display An Image Slider In Different Header Area's - Example 3
Display Image Slider In WordPress Header
Unhook genesis do header function from this hook
Image Slider In Header Without Shadow Arc
Display Image Slider Before Header With Shadow
Display Image Slider Before Header-No Shadow Arc

Video – Watch & Learn

Display Video’s & Text In Slide Show

Here’s a post i wrote earlier about how to create slide shows using a WordPress plugin.

You can also use this plugin to pull content from YouTube and other social media networks into your slide shows dynamically.

Related Tutorials

  • Show Slider in Header of Twenty Sixteen Default Theme

Slider

Reader Interactions

Comments

  1. martin says

    November 13, 2014 at 10:37 pm

    hello all

    run wp version 4
    with responsivepro theme and responsive-pro child theme
    want to add meta-slider into the header

    as i am new to wp i wonder how to do this

    can some one assist here

    love to hear from you
    greetings

    Log in to Reply
    • Brad Dalton says

      November 14, 2014 at 12:32 pm

      Happy to help Martin

      Please sign up for monthly membership

      Log in to Reply
  2. Candace says

    July 9, 2014 at 10:59 pm

    Hi Brad, great tutorial. I want to add the easing slider to the header. I’m working through the instructions and am trying to paste the code in the my child theme’s header.php. Problem is that I am using the Twenty Fourteen theme and am not sure exactly where to past the code. Can you give me some specific guidance and/or line number where to paste the code?

    Thanks so much!

    Log in to Reply
    • Brad Dalton says

      July 10, 2014 at 6:14 am

      Copy the header.php file to a child theme and paste the code where you want to display the slider in the file.

      <?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
      Log in to Reply
  3. Stephen J. Carter says

    May 17, 2014 at 7:34 pm

    Sorry, there’s no sound on this video. Other videos play fine. So, maybe just as well, as I would get hyper-frustrated trying to work with this. Seriously. I recently learned how to format a kindle book, using quite a bit of CSS code. I feel like that’s a huge achievement! LOL. And I’m looking into doing my own audiobook recording. But frankly, this looks totally intimidating. After my experience with the Frisco theme, I wouldn’t readily try to work with a slider, not until the process is simplified considerably. I’ve just scrolled down through this silent page and it’s fairly overwhelming. My hat off to those who can do this sort of stuff. I now have Wultim theme for my webpage, and it’s fine, with mailchimp forms for signups. For now, it’s sort of a static site, no slider or other dynamic elements. Maybe someday I’ll do this sort of stuff on my site …

    Log in to Reply
    • Brad Dalton says

      May 18, 2014 at 1:42 am

      Its a walk in the park really.

      Only need to add one line of code in your header.

      Log in to Reply
  4. Alen says

    January 13, 2014 at 3:57 am

    I have a problem with easing slider, make slideshows, and put the code in the header.php, appears slider, but I have no control over it, I can not move him where suits me, for example in the middle, and nowhere does his css code that could change, thank you for your response in advance … best regards

    Log in to Reply
  5. Noe says

    January 4, 2014 at 1:45 am

    Thank you, thank you! From your detailed information, I was able to figure out how to install the slideshow in my header for the Tiny Forge theme!

    Blessings on you!

    Log in to Reply
  6. wasim says

    November 19, 2013 at 10:53 am

    Hi Brad Dalton,
    This is wasim from India. you have given very excellent tips about image slider plugin but just i want to little bit that we can use the slder plugin only twenty eleven theme…..i want to design my own theme how it is possible …………would you explain me clearly.

    Log in to Reply
    • Brad Dalton says

      November 19, 2013 at 4:05 pm

      You would need to add all the code from the slider plugin to the theme files. Not really recommended.

      Log in to Reply
  7. Svitlana says

    August 29, 2013 at 12:14 am

    Hello Brad,
    Thank you for great tutorial!
    I have a theme Twenty Twelve and I found
    excellent explanation HOW and WHERE insert php code for slider.
    Thanks again,

    Svitlana

    Log in to Reply
    • Brad Dalton says

      August 29, 2013 at 1:49 am

      You’re welcome Svitlana

      Log in to Reply
  8. Drew says

    July 25, 2013 at 8:40 am

    hey brad…i have a question…i was able to do this…your video was awesome. anyways…i was able to enable the new sliding feature but there is a black circle image on the top left corner of all my slider images. how can i take that out? what is that?

    Log in to Reply
    • Brad Dalton says

      July 25, 2013 at 8:54 am

      I couldn’t find any black circle on any images.

      Looks like you fixed it Drew.

      Thanks for the comment.

      Log in to Reply
      • Drew says

        July 25, 2013 at 9:10 am

        brad…i see it in chrome but i don’t see it in firefox. what browser are you viewing it from?

        Log in to Reply
      • Drew says

        July 25, 2013 at 9:11 am

        i see it in chrome…but not in FF

        Log in to Reply
        • Brad Dalton says

          July 25, 2013 at 9:33 am

          Must be a browser issue.

          You might want to try using http://validator.w3.org/ to validate your markup.

          Otherwise, Firebug or Chrome Dev tools may help.

          Log in to Reply
  9. Ric says

    June 24, 2013 at 5:31 pm

    I did one of your tutorials on how to transfer my localhost website to a live web host and I really messed up my wordpress site please help!

    Log in to Reply
    • Brad Dalton says

      June 24, 2013 at 8:47 pm

      I would install WordPress again and use the export tool to move the content over. You can then upload all your files and change the DB connection details in your wp-config.php file.

      I do offer a free migration service which includes restoration of file as long as you use my link when buying hosting.

      Log in to Reply
  10. Gianni says

    June 21, 2013 at 11:47 am

    Hi Brad,
    appreaciation from my side for your tutorials…
    But i get a problem with the theme Raindrops and Easing Slider “Lite” … it doesn’t work at all !!!

    i put the code wherever in the header.php but nothing showed…
    Please, give me 5 minutes of your time…
    Cheers
    Gianni

    Log in to Reply
    • Brad Dalton says

      June 21, 2013 at 3:49 pm

      Did you also install the plugin and add images?

      Double check that you have used the correct code because some code is for the header.php and some for custom functions when using Genesis themes.

      Log in to Reply
  11. Peter says

    May 4, 2013 at 12:26 pm

    Hi Brad

    I’ve looked at your blog and video but can’t see how it relates to the theme that I use – Minimal. I’m wanting to replace the header with the slider but can’t figure out how to do it. As I’m not using Genesis, what free plug ins should I use?

    Peter

    Log in to Reply
    • Brad Dalton says

      May 5, 2013 at 2:50 pm

      Hi Peter.

      Use Easing Slider or Soliloquy. You’ll find that link leads to a tutorial on how to do it and contains a link at the end of the post on how to add Easing slider to the header of any theme.

      I’ve also created a video on how to do it.

      Log in to Reply
  12. santosh ban says

    March 1, 2013 at 9:45 am

    awesome.. thanx bro…

    Log in to Reply
    • Brad Dalton says

      March 1, 2013 at 3:26 pm

      Happy to help Santosh!

      Log in to Reply
  13. Ervin M.. says

    February 17, 2013 at 10:20 pm

    Thanks for great tutorial… made my life easier with my site’s header…. Cheeers mate….

    Log in to Reply
  14. Raymond says

    February 6, 2013 at 3:53 pm

    where to I put the code for the slider for my Theme which is “Raindrops”

    Log in to Reply
    • Brad Dalton says

      February 7, 2013 at 5:52 am

      Hi Raymond. In the header.php file

      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.