Add Nivo Slider to twentyten

slider-example

One of the best sliders around is one called the Nivo Slider. It is fairly easy to manually add to the default WordPress theme “twentyten”. This article details the process of doing this.

The steps in the process of adding the Nivo Slider to a theme like “twentyten” are:

  • create a child theme of twentyten
  • create files and folders in the child theme
  • download the Nivo Slider jQuery code
  • modify files and folders in the child theme
  • activate child theme and test the slider function

Set up a Child Theme

The first step in this task is to set up a child theme of twentyten.

Add a folder to the WordPress “themes” folder called, for example, “twentyten-child”.

Add a screenshot image:

twentyten-child screenshot

twentyten Child Theme screenshot

Add style.css, the minimun requirement for a child theme, containing the following:

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        1.0
*/
@import url("../twentyten/style.css");

Add two folders, one called “images” for the slider images, and “scripts” for CSS and scripts for the slider. Then copy “header.php” from the twentyten theme into your child theme.

One other thing to do before you add code or modify any code is to go to the Header menu item under Appearance and remove the header image. I am replacing the header image with the slider images and certainly don’t have room for both the header image and the slider images.

Images

The images used by the slider are stored in the child theme folder called “images”, In this example, all images are 940 x 198 px, and I have copied the header images used by twentyten into the images folders to be used in the slider.

Scripts

The “scripts” folder contains Nivo Slider CSS and javascript code. More on adding to this folder later.

header.php

Two areas in header.php are changed to add the slider, the head is modified to call in the CSS code for the slider and to call in the jQuery code to execute the slider, and the HTML code is added to the body of the template file. Here is the modified “header.php”, with changes highlighted:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
?>

    <?php wp_enqueue_script("jquery"); ?>  
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo("stylesheet_directory"); ?>/scripts/default/default.css"
       type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php bloginfo("stylesheet_directory"); ?>/scripts/nivo-slider.css"
       type="text/css" media="screen" />
    <script src="<?php bloginfo("stylesheet_directory"); ?>/scripts/jquery.nivo.slider.js"
       type="text/javascript"></script>
    <script type="text/javascript">
	jQuery(window).load(function() {
	    jQuery('#slider').nivoSlider();
	});
    </script>	

</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?> id="site-title">
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}

					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID );
					elseif ( get_header_image() ) :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
					?>
						<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
					<?php endif; ?>
			</div><!-- #branding -->

			<div id="access" role="navigation">
			  <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div><!-- #access -->

			<div class="slider-wrapper theme-default">
				<div id="slider" class="nivoSlider">
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img01.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img02.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img03.jpg" alt="" 
						title="This is an example of a caption" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img04.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img05.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img06.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img07.jpg" alt="" />
					<img src="<?php bloginfo("stylesheet_directory"); ?>/images/img08.jpg" alt="" />
				</div>
			</div>

		</div><!-- #masthead -->
	</div><!-- #header -->

	<div id="main">

Note that the wp_head() has been moved and that the closing “?>” tag is affected.

Download Nivo Slider jQuery code

Download the Nivo Slider code. Copy the default folder in the themes folder into the “scripts” folder, and then copy the 2 files, “jquery.nivo.slider.js” and “mivo-slider.css” into the “scripts” folder in the child theme.

Activate the Child Theme

Activate the new child theme and check that the slider is working. This completes the process of adding the Nivo Slider to “twentyten”. If you have any problems, check out what I have done to create the twentyten child theme. Download a copy of the twentyten child theme I set up.

Advertisements
This entry was posted in Nivo Slider. Bookmark the permalink.

One Response to Add Nivo Slider to twentyten

  1. Pingback: Nivo Slider PHP Tutorials For WordPress. | PillaticosPillaticos

Comments are closed.