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:

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.

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.

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.

Just getting started folks!

I'll be writing more about customizing WordPress every week from now on.

Next time we'll look at adding the image slider on the home page only.

Got a question? Leave it in the comments thanks.

Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More