Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
Image Slider in WordPress Header

How to Add an Image Slider in WordPress Header

by Waseem Abbas on September 5, 2017 | Reader Disclosure

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:

Image Slider in WordPress Header

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.

Soliloquy website

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.

Add Images

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:

Copy Template Tag

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:

Add Code

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:

Image Slider in WordPress Header

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.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Comments

    Rosa

    December 3, 2017

    H!. I don’t have the option to go to the “header.php”. What can I do?. Please and thanks

    Reply

      Waseem Abbas

      December 4, 2017

      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. 🙂

      Reply

    ellaone

    March 5, 2018

    Thanks for the post.Really looking forward to read more. Much obliged.

    Reply

    B. H.

    June 9, 2018

    How do you know where to put it in the code if you have the Big Brother theme?

    Reply

    Eric

    July 7, 2018

    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?

    Reply

    MB

    September 19, 2018

    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.

    Reply

    Sheriena

    November 12, 2018

    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?

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.