How to Add an Image Slider in WordPress Header
Do you want to create an image slider in the header of your site? Sometimes you need to display the best deals, call to actions or good photos in your site header having an image slider, so it looks professional to the visitors. In this tutorial, we will share how to add an image slider in WordPress header.
By default, there is no option to add an image slider in WordPress header. However, a few WordPress themes may offer plugins to create sliders. We recommend you to use Soliloquy slider plugin that is simple yet comes with tons of features. It allows you to add the image slider in the header of your site easily.
To add an image slider in WordPress header, you’ll need to follow these 3 steps:
- Step 1. Install and activate Soliloquy slider plugin
- Step 2. Create an image slider for WordPress header
- Step 3. Copy the template tag and add it in theme’s header
When this tutorial ends, you’ll be able to add an image slider in WordPress header that will look like as shown in this image below:
Ready to get started? Let’s go!
Step 1: Install and Activate Soliloquy Slider Plugin
The first thing you need to do is to install and activate Soliloquy image slider WordPress plugin on your site.
Want to know more about installation? Check out this simple guide on how to install and activate Soliloquy plugin.
Step 2: Create an Image Slider for WordPress Header
Once the plugin is activated, you should go to Soliloquy » Add New to create a new image slider. To start with it, you need to add the title and drop the photos in the Native Slider section.
Hit the Publish button on the right side of your screen. For more slider settings, you should check out our guide on how to create an image slider in WordPress.
Step 3: Copy the Template Tag and Add it in Theme’s Header
Upon publishing the image slider, you will see a new widget on the right side as Soliloquy Slider Code. Simply copy the template tag from here:
Now you should go to the header.php
file of your WordPress theme. You can find it in Appearance » Editor at your WordPress admin backend.
Note: Make sure to backup your site before editing your template files, since an error could bring your whole site down.
Go ahead and paste the shortcode in this file as shown in the image below:
Note that this example is using the default WordPress theme Twenty Sixteen. Your file may look different if you’re using a different theme, and you may have to paste the code in a different location.
Once you save your changes, your image slider will appear in the WordPress header on all pages of your site that’ll look like as shown in this image below:
That’s all. We hope this tutorial has helped you to learn how to add an image slider in WordPress header. You may also want to check out our guide on how to add an image slider to a sidebar in WordPress. In case, your slider images are not ranking in search engines, you should check this ultimage WordPress SEO guide for beginners.
If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.
Rosa
H!. I don’t have the option to go to the “header.php”. What can I do?. Please and thanks
Waseem Abbas
Hey Rosa, maybe your theme doesn’t have this file which is rare. You can search the file that is used to display the header items and add the code there. 🙂
ellaone
Thanks for the post.Really looking forward to read more. Much obliged.
B. H.
How do you know where to put it in the code if you have the Big Brother theme?
Eric
Hello there,
I followed step by step your article, but when i go to my website it’s just write the condition (at the right place)
I think the function is not defined, but maybe i’m wrong. Can you help me please?
MB
Nice post. Thanks for the tip. Any idea to ensure the slider is centered? I am only seeing it be left justified which looks awkward. Tried changing the Soliloquy PHP files to center the image to no avail.
Sheriena
I have a blog site. I want a slider to show that site, a second site, a soon to be published book, and a my story page. Each of the images need a link to that site, right. But, what about the home page it is already on. Is the slider on a separate page, like a landing page?
Ready to start creating slides the easy way?
Get Soliloquy Now