Integrating Nivo Slider Into your WordPress header


Nivo Slider is a tool you can use to display a group of specific images on header of your site. It’s lightweight, and very nice looking! There is already a tutorial here that talks about how to integrate nivo slider into wordpress. Although it’s a great tutorial I thought I would make the process a little bit simpler for those who want to get it up with the least effort possible.

Keep in mind you will need to know how to edit your theme header.php file to be able to make this look EXACTLY the way you want it to on your own site.

Here’s how you do it.

1. Download my customized nivo slider package (now uses Nivo Slider Version 3.1)

2. Extract the files, and upload the contents into your theme directory (wp-content/themes/themeName)  

Edit/Note: If you’re using a Child theme, be sure to copy the the ‘slider’ folder from wp-content/themes/themeName/slider to wp-content/themes/ParentThemeName/ folder since the template directory this depends on will look in the parent theme folder. The ParentThemeName/slider/images folder will also be where you upload your images as described later on — again, this note is only for those using Child themes. If you’re interested I do have a sample twentyeleven child theme here: https://www.intogeek.com/utils/nivo_child_twentyeleven.zip that you can install and use (already has required edits completed). But you’ll still need to copy the slider folder to the parent theme (twentyeleven) as described for things to work fully.

3. Once you have the files extracted, all you have to do is find the part of your wordpress theme code that holds your current header image(s) and comment it out like this:

(php Method)

/* This is commented because it's between the open and close comment symbols for php code */

(or HTML method more commonly used)

<!-- This is commented because it's between the open and close comment symbols for HTML -->

4. Now that the old stuff is commented out, you just need to add this php code to your header.php file code in the location you want the slider to appear:

<?php include("header_insert.php"); ?>

5. At this point you can save the changes you’ve made to your header.php file, then visit your site to see how it looks. — by default you’ll see a bunch of disney pictures, but you can add your own just by replacing the “header1.jpg; header2.jpg; header3.jpg; header4.jpg” files in the “images” directory of your site.

As always, feel free to leave comments about how well this did or didn’t work for you, and what steps you might add to make the process easier for others.

Have fun!


60 thoughts on “Integrating Nivo Slider Into your WordPress header

  • Pest Control

    Thanks for this, saved a ton of time, but – how do I remove, or lessen, the gap between the images and the navigation buttons below the slider? As you can see here: http://www.pestcontrolpros.co.uk/ there are roughly 4 or 5 line breaks between them, and obviously that’s taking a lot of real estate up.

  • john

    D’oh! Ok, changed lines 92 & 93 in slider.css to reflect my new images dimension, and problem solved :)

    Thanks again for a great tool for those just needing a quick simple way to utilise a slider in their wp header :)

    • shames Post author

      Glad you got it worked out! Sorry it took me a while to get back to you.

  • marko

    Hi Shames very interesting post and files, but only a question. I put this code in the header php file and this slider appear in every page (for example home, works, about, contact).
    What can I do to show this slider only in the home of my wordpress?

    Thank you so much advance.

    Marko

    • shames Post author

      Hi Marko, thank you for your comment. I would suggest using this code:

      < ?php if(is_home() || is_front_page()){
      include("header_insert.php");
      }
      ?>

      In place of the: < ?php include("header_insert.php"); ?> code mentioned in the post.
      That will set the slider to show only on the homepage of your site.

      I hope you find this to be a useful solution.

      Shames

      • mark

        Thank you so much Shames…. the last questione eheh.
        I tried to modify the effect animation in the js file (slider.pack)
        In this part “…defaults={effect:”fade”,slices:15,animSpeed:500,pauseTime:3E3,startSlide:0,directionNav:true…..”
        but if I change “fade” with “boxRainGrow” this not work…

        Is the same list effects like the original nivo slider?

        thank you advance

        • shames Post author

          Mark,

          You are correct the same effects in the original nivo slider will work with this one as well. However, this version included in the post is Nivo Slider 2.4 (doesn’t include the “boxRainGrow” transition in this version).

          So for your convenience I have created another version of the package I offered in the post to support the latest nivo slider version for you and anyone else who would like to have these. I’ll replace the link to the old package with this one soon as well. Here’s the link: https://www.intogeek.com/utils/Slider_Files_nivo2-6.zip

          Just replace your current files with these in the new package, and then you can change the effects just as you did before but with: boxRainGrow supported.

          let me know if it gives you any trouble.

          shames

  • Jan

    Hi Shames,
    Thanks a lot.
    I work with an Artisteer generated theme, and try to get the slider to work…
    Did everything until putting the code in the header…
    Couldn’t find the place…
    I want the slider as basic part of the whole website.
    I’m struggling for many days now to get it done…
    Can you help me?

  • Jan

    Solved previous problem and it worked. Only figure out how to change the random transisions into only a fade…

    • shames Post author

      Jan,
      I’m glad you got it figured out. The to change the transitions edit the scripts/jquery.nivo.slider.pack.js (you’ll find the scripts folder in your theme directory where you extracted the files to.)
      If you look toward the end of that: jquery.nivo.slider.pack.js file you will find this code: defaults={effect:’random’
      Change that code to be: defaults={effect:’fade’
      After you save, that should make it so the transitions fade only.
      Hope this helps,
      Shames

  • Ads

    Brilliant tutorial! I had you slider working on each page, I also followed Marko’s thread and modified the php so the slider was only visible on my homepage! Fantastic!

    One query though.

    Currently, I have installed the dynamic header plugin and have it working correctly so i can display different images in my header for each page of my website.

    I want to know how i can use your slider ONLY on the homepage of my website with the dynamic header plugin working for the other pages on my site.

    I have tried and failed.

    I have looked at Marko’s thread above and tried to use conditional statements where if it is my homepage, show slider, else, show dynamic headers. No luck.

    Any thoughts? Help is much appreciated.

    Thanks

    • shames Post author

      My first idea would be to try the if and else statements again. But I’m not really familiar with how the dynamic header plugin works exactly. Unfortunately my busy schedule these days is keeping me from exploring too many more things, but I’ve opened up the comments here so that you and others can have a better discussion and help each other out on things like this if needed.

      When I get more time I’ll try to look into what could be done for this, and let you know what I find. Hopefully this will be sooner rather than later.

  • Maritha

    Hi Sham,
    I’m rather new at WP and right now I’m trying to make a fanpage for FB in WP and would like to use the slider on my first page. I have used Artister to make a very clean page but have no idea where to put the code. Could you or anyone else help? I want to replace the black image on this page http://www.4mycustomers.se/site4/
    I can send the header.php code if anyone could help.

    • shames Post author

      I’m sorry for the long wait Maritha, If you can paste your code into a comment then I could take a look if you’d like.

  • Carlos

    Hello, I have been looking the way to insert the nivo slider in the twenty eleven header theme for wordpress, i was trying to follow the steps above but it’s been impossible to me to do it, please if someone over here can explain a little more detailed I will be glad, than you.

    • Travis

      I am have an issue with twenty eleven as well.

      getting this error:

      Warning: include(header_insert.php) [function.include]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-content\themes\twentyeleven\header.php on line 79

      Warning: include() [function.include]: Failed opening ‘header_insert.php’ for inclusion (include_path=’.;C:\xampp\php\PEAR’) in C:\xampp\htdocs\wordpress\wp-content\themes\twentyeleven\header.php on line 79

  • martin murphy

    Hi is it possible to show 4 different image headers for each page. These would.be unique for each page but work n.a slider. Thanks for any help.

  • Wahab

    Hi Shame. I want to change the width of the images. I tried it by opening slider.css file. My height works as i increase or decrease it but width dont work. Any help please ?

  • Gary

    Hi Shames Thanks for an awesome article! I have used this in the header as described, but the width and alignments of the home and blog page are broken. Any ideas why this is?

  • Naushad

    Theme: twentyeleven child

    Removed twentyeleven header code and added

    Then the site homepage breaks, css is disturbed,,, any help ?

    • Gary

      Hi Naushad, same problem here! I have tried everything but no luck. Have you had any luck?

      • Gary

        I removed the two div tags around line 15 in the header_insert.php file and it seems to be good now :)

  • sara

    Hi Shames, thank u for this it worked great. I do have a question though, is there any way I can insert the slider images directly from the dashboard? or maybe a way to let the slider take the features images of the posts and have them in the slider?

    • shames Post author

      Sara,
      I’m sorry for the very long time it has taken me to get back to you. At this time I don’t have an implemented method available for changing the images through the dashboard, or to have it use the featured images on posts. However, the official Nivo slider plugin may have that ability. Though it does cost a little money.

      Thanks

  • Volker

    Hi Shames, installing your slider was another fine first-time-experience. Nivo by default is currently running at a testing stage on http://cash10.org. Only thing missing is a command line for adjusting the speed each image will shift to the next one (I need to set it SLOWER!). Also, how can I select the blending/ transition patterns? Any suggestions??

  • Dominic

    Hi, I’m trying to use your code but can’t figure what part of TwentyEleven to comment out and replace? Please can you help? Thank

    • shames Post author

      Dominic,

      I’m sorry for the long time it has taken for me to get back to you. Here is the code I use in my twentyeleven/header.php file to insert my nivo slider. Starting on line 91 of the original header.php file from the latest version of twentyeleven

      Then if you skip down to line: 110 you’ll find these lines (I’ve commented them out in the code below already)

      < ?php include("header_insert.php"); ?>
      < ?php endif; // end check for featured image or standard header ?>

      Note that I commented out both the open and closing link tags, and added my header_insert.php code just above the < ?php endif;......
      I hope that helps. I have created a sample twentyeleven child theme that includes changes to the header.php file I described above here: https://www.intogeek.com/nivo_child_twentyeleven.zip
      You can either copy the header.php file from here to your twentyeleven theme that you’re looking to modify. Or you could install this theme, and activate it on your site. Just be sure to copy the wp-content/nivo_child_twentyeleven/slider folder to wp-content/themes/twentyeleven/ . This is required since the child theme uses the parent theme template directory for most of the content such as the images, and js that are needed to allow my custom header_insert to work. You can then upload replacement images to replace the defaults in the slider into your wp-content/themes/twentyeleven/slider/images folder

      I hope this helps, thanks.

  • Trudi

    Hi,
    I have purchased the nivo slider.

    I would like to know if I can use your method with my existing nivo slider package or if I need to download and install your customised nivo slider version?

    You mentioned in your instructions to upload it to the theme directory of wp – I have uploaded my zipped nivo file as a plugin. Can I still use the php you’ve given in the same way instructed above?

    Thanks,
    Trudi

    • shames Post author

      Hello Trudi,

      I’m sorry for the long time it has taken me to get back to you. I believe the plugin you purchase from those that develop nivo slider does give you the option to add the slider to your theme without the need of my custom nivo slider insert described in this post, but if you would like you could still use my method in place of the nivo slider plugin.

      Thanks

  • Apa

    I am a newbie and have a hard time figuring out which portion of my header.php file to comment out and where exactly to insert

    I am using a child theme for twenty eleven.. thank you!

  • guy

    i’m a beginner and I ‘m using a child theme of twenty eleven theme in local mode for the moment
    Do i’ve to extract the slider into twentyeleven or twentyeleven-child ?
    Could you please let me know in wich file the code must be commentted out .Is it in header.php ?
    Thank a lot for your help

  • guy

    Nobody to help me ? see my previous comment , september 17
    1 – I suppose that the slider’s files must be extracted into twentyeleven-child theme
    2 – I suppose that the code to be commented is located in the . Is it true ?
    for information i’m using the original twentyeleven header.php file.

    thanks

    • shames Post author

      Hello guy,
      I’ve had a few requests for what you’re looking for. The changes needed to implement this in a child of twentyeleven are small. I created a sample child theme of twentyelevevn that you can download from here if you would like https://www.intogeek.com/utils/nivo_child_twentyeleven.zip. The only thing you have to do after installing this theme is copy the wp-content/nivo_child_twentyeleven/slider folder to wp-content/themes/twentyeleven/ . This is required since the child theme uses the parent theme template directory for most of the content such as the images, and js that are needed to allow my custom header_insert to work. Just be sure to activate the child theme after copying that slider folder as described. I hope you find this helpful. I’m sorry for the delay in my reply. This theme I’ve attached to this comment also contains the latest version of nivo slider (3.1) — I’ll add this latest version to my article when I get a little more time. When I do that I will also outline the exact lines that need to be commented/edited in twentyeleven/header.php for better clarity. With the theme files I’m sending you, you will still change the images by uploading images to wp-content/themes/twentyeleven/slider/images/ to replace the header1-4.jpg. You can also add more images if you’d like by duplicating the img src lines in the wp-content/nivo_child_twentyeleven/header_insert.php file and setting the image filenames to those you upload to the images folder mentioned before.

      Thanks,

      James.

  • Joaquin

    Hello. such a wonderful plugin you have created.

    But I’m having trouble trying to install it. I did copy the fancy folder to the current theme I am using (Andrina Lite)

    For some reason, I can’t get it to appear.

    Any response will be ultimately appreciated.

  • Ted

    Just following up on another earlier post. I am using the 2011 theme and have the slider added to the theme, no worries. I only want it to show on the homepage, and used the code you posted, but I want the normal 2011 header to show on all the other pages. Can you assist? Thanks for this article, I’ve been looking for days to figure this out!

  • steven

    Hello, thanks for great plugin!
    I already installed it on my website, and it does look great.

    I would like one more customization that i would like to put it under navigation menu bar in the header area, so anyone would please tell me how to do this?!!

    I tried to insert code under in header.php file, but this sider just does not show up.

    So, where i am supposed this code? or have to do other customization?
    I am using child theme of 2011 theme wordpress!

    Thanks a lot in advance!

    steven

  • steven

    Update:

    Hi again,

    I inserted the code just under the of header php file, then i checked again.

    The sider only show up in IE browser, and i checked with firefox, Chrome, safari, no, all these no slider turned up.

    So, is this browser compatibility issue? where should i change to make it all browser compatible??

    Thanks a lot in advance!

    steven

  • fristi

    Hey there,

    I am trying to work out how to setp up the image slider into my website but I have no clue what I have to delete in my header.php and where to add the new line..
    Could anyone helpme with this?

    Thanks!

    */
    3. Once you have the files extracted, all you have to do is find the part of your wordpress theme code that holds your current header image(s) and comment it out like this:

    (php Method)

    /* This is commented because it’s between the open and close comment symbols for php code */

    (or HTML method more commonly used)

    4. Now that the old stuff is commented out, you just need to add this php code to your header.php file code in the location you want the slider to appear:

    /*

  • Patrick

    Thank you so much for the code snippets. It works great.

    I went ahead and split out the CSS files and JS scripts, putting them in and just above respectively.

    One tip: You can opt to put the slider folder in your child theme if you use instead of in the links in the header_insert.php file.

    Also, in the snippet that goes in header.php, I had to change the conditional argument to if(is_home() || is_front_page()) to get it to work.

    All in all, great stuff.

    • Patrick

      Concerning the CSS files and JS scripts in the second sentence of the last post, that would be in the head and just above the body tag (the tag names were stripped out of the post).

    • Patrick

      Also, on the tip, that would be using ‘stylesheet_directory’ in the link codes instead of ‘template_directory’

      Sorry, didn’t think about these getting stripped out of the post.

      • shames Post author

        Patrick,
        Thanks for the comments! those are great ideas! I’m going to put a new version of this integrated into a child theme of twentytwelve I think, and the latest version of twentyeleven. I’ll definitely be using the ‘stylesheet_directory’ instead of the ‘template_directory’. This was a feature I wasn’t actually aware of until just recently, and it would make the process a lot easier.

        I’ll be checking the code for the parts you mentioned about the javascript, and CSS as well.

        Thanks for the ideas!

  • Roland

    Hi,

    Thanks for the great slider. Works perfect on WordPress 3.5 !!
    The only thing i was wondering is how to add a nivo-caption? So How can I make a text popup bar on every image on the slider?

    Thanks.

  • Roland

    Got it already working by adding: title=”blablabla” at the end of <img src="/slider/images/slider4.png” alt=””

    Thanks again for the great slider!

  • Roland

    The slider works perfect on IE8 & IE9, FF, Chrome.
    On the Ipad, iphone, the slider is not full-width as on a desktop PC.
    This has a direct problem with the nivo.caption if you have the slider “full-width” and position the nivo.caption to the right.

    Is this a known issue?

    • shames Post author

      Thanks for the comments Roland. I hadn’t see that myself, but I’m glad you brought it up. I’ll look into this to see if I can find a way to fix that. If I am able to find a fix I’ll add some comments to my article stating that it has been fixed.

  • David

    Hi, thank you so much for this plugin! I just have a some questions for you to make it perfect!

    1. Is it possible to take off the prev and next buttons ?

    2. How can I only have the fade effect using twenty twelve. I have downloaded a javascript modifying application to change the js.slider.pack where it is written :

    defaults=effect:”FASE”,slices:15,animSpeed:500,pauseTime:3E3,startSlide:0,directionNav:true…..”

    But it doesn’t work… why ?

    Thank you very much!
    David

  • david

    Wow i’m getting better and better now! ahah I just found how to upload the themes… but theres a last problem! The quality of the pictures do not seems optimal…

    check it out : drdavidpoulin.ca

    Thanks for any advices!

  • Dhiraj Shah

    Hi shames, Thank you very much for such useful slider tutorial. Here i got a question , How can i make this slider optional ?? or how to add option in theme for enabling or disabling the slider ?

  • Josette

    Hello,
    Thank you for the plugin. I have a few questions please which I need to resolve. I am using twenty eleven theme and the website is http://www.gozo-guide.com

    1) I have been trying to change the transition time via the options of this plugin however it doesn’t seem to work. I have set it to 500 however it doesn’t make any difference weather I set it to 5 or 500. At the moment the pictures are running too fast and would like them run a bit slower.
    2) I have noticed that the fader doesn’t work. Otherwise I am very happy with the rest.
    3) When I view the website through an IOS SOME of the images do not shrink according to the size of the browser and you can only see part of the picture

    Can you please help.

    Thank you in advance

    Josette

  • http://gr8g.com/

    Nice blog here! Also your web site loads up very fast!
    What web host are you using? Can I get your affiliate link to your host?
    I wish my website loaded up as fast as yours lol

Comments are closed.