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.
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.
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
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 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.
Another good option is to paste the code around line 38 and display your slider before your navigation menu.
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.
Leave a Reply
You must be logged in to post a comment.