This tutorial will show you how to replace the header image with a slide show. We will use Weaver Show Sliders available on the WordPress.org plugins archive, but almost any slider plugin that supports a shortcode for the slide show will work.

Tthis tutorial results in this post as viewed on the single page view.

Note: click this link to view a LIVE TUTORIAL with all the steps needed to create a Weaver Slide Show.

We will start with this slider show, created with Weaver Show Sliders. . This particular slide show has been added to this post using the shortcode [ show_slider name=”demo-slider’].

Creating Images

Of course your slider images should match the topic of your page or post. Since a header slide show is intended to be a highlight of your content, your images should be good quality, and usually as wide as your site’s width. Even so, do try to keep the file size of each image to less than 150K or so to allow the slider to load quickly.

Replacing Header Image with Slide Show

Once you’ve created a slide show that is displayed using a shortcode, it is really quite simple to use the slide show instead of the normal header. From the Customize -> Images -> Header Area menu, find the “Image HTML Replacemant” option, about 2/3’s of the way down the menu. Now, simply insert the shortcode into the box, and like magic, you will have a slide show instead of the normal header image.

Note that if you are using a Featured Image as a header replacement image for specific pages or posts, that image will be used instead of the Image HTML Replacement code. Per Page/Post options always have top priority.

Replacing Header Image Only on Home Page

Note that if you use the replacement HTML, your slider will be displayed on every page view. Most people probably don’t want that. In fact, it is probably most common to have a slider only on the Home/Front page. Check the “Show Replacement only on Front Page” option right below the “Image HTML Replacemant” option to show your slider only on your home or front page.

Complete Per Page/Post Control with Weaver Xtreme Plus

Placing a slide on just your home page, or on every page, will meet the needs of most users. However, if you want multiple slider headers, controllable on a Per Page or Per Post basis, the Weaver Xtreme Plus plugin offers that option. This demo, for example, uses the Per Post option to display the demo slider only for this post’s single page view.

Extending BG on Sides of Slider

So what can you do if you are designing a full width site? Weaver Xtreme has several options for changing the total width of the header, including extending the background properties to the edge of the browser. With the free version of Weaver Xtreme, this is more or less limited to a specific color.

Weaver Xtreme Plus lets you extend the standard header all the way to the edges, as is done on this site (at least when this post was written…). And with the “Also show BG Header Image” option available with Xtreme Plus, you can have both – this is shown in the Featured Image for this post. Note how there is a slider in the center, and the edges of the standard header image extend beyond the slider. This can be quite effective. And in this example, the option to move the Title and Tagline over the header image is used, so that they overlay the slider here, and the regular header on other pages.

If this Title/Tagline are not moved, they occupy their own space above the header image (or slider), and you can get a nice effect with a slider “embedded” into the middle-bottom of the header.