• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Install Nivo Slider for WordPress

The installation code for the free and premium versions of Nivo Slider are different.

To install the premium version you would use a shortcode in a custom function.

To install the free version you would use the template tag in a custom function.

All code should be pasted at the end of your child themes functions file using a code editor.

Here’s the code for both.

Premium Version

This code only works for the premium version.

The above code hooks the slider into the before loop position so it displays before your blog posts. This assumes you have these reading settings.

Front page displays Your latest posts

The code also includes a conditional tag so it only displays your slider on the home page. You will need to change the shortcode to your own.

Here’s what the plugin admin looks like:

slider admin

Installation In Template Files

If you’re using a theme which doesn’t include hooks, you can use this code in your template files for the premium version:

<?php nivo_slider(123); // Use an ID ?> 

<?php nivo_slider('a-slug'); // Use an slug ?>

Simply replace the i’d for your slider or use the permalink slug as another option.

You can also add a conditional tag to the code if needed. An example of this would be when installing your slider in your header.php file but only wanting to display it on the home page of a free theme like Twenty Twelve.

I simply pasted this on line 47 of the Twenty Twelve themes header.php file and replaced the number of the slider in the code which you can grab after creating the slider. It would also be a good idea to copy this file over to your child theme otherwise you will lose it when you update the parent theme.

This will display the slider after the nav menu on the front page of your site only. If you want to add the slider before the nav menu, paste the line of PHP code on line 41.

And here’s the code for the free version if installing in a theme with no hooks:

Free Version

Nivo Slider for WordPress

There’s several different free versions which are hosted on the WordPress.org plugin repository.

Here’s the code for Nivo Slider for WordPress.

And here’s what the plugin admin and settings looks like:

plugin options

Prefer Other Sliders?

  • Add Soliloquy Slider In Header of Any Theme
  • 8 Ways To Install Easing Slider Pro Version On Your Home Page
  • Add Slide Deck Slider In Any Themes Header
  • 3 Ways To Display WP Cycle Slide Shows In Your Theme

Reader Interactions

Comments

  1. Seb Gates says

    October 19, 2013 at 7:40 pm

    Hi Brad. Just a quick question. I am learning jQuery at the moment. I have set up Nivo slider using Dreamweaver, no problem. I then tried setting it up on WordPress and it did not work. I installed the WordPress plugin and that did not work either. I then removed the jQuery CDN link to Google and it worked fine. The only issue then was that all the other jQuery UI elements on the site did not work and other animations I had created. Can you tell me how I can install Nivo slider while allowing the other jQuery elements to work on my site?

    Log in to Reply
    • Brad Dalton says

      October 19, 2013 at 7:52 pm

      Hi Seb

      When i tested this plugin, it was the same as most other sliders and just needed a hook with PHP tag to display it in the correct position.

      Never needed any jQuery as its very simple to setup.

      By default, WordPress imports jQuery so you never need to use a CDN or other source.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.