Integrating a JQuery Slideshow into your WordPress Theme

Learning how to customize WordPress themes

This tutorial will show you how to successfully integrate a slideshow into your WordPress theme.  We’ll also discuss setting up a custom admin panel which will make it easy for your users to add pictures, titles, and descriptions to the slideshow.  We will be using the default TwentyTen template for development of our slideshow.  The slide show will replace the existing banner image on the front page of the template.

The Slideshow we will be incorporating will be be from Dream CSS. The SlideShow uses the JQuery JavaScript framework.  This particular slideshow incorporates most of the features I like in a slideshow: Navigation buttons, autoplay, picture titles and descriptions.  So let's get started!

Step 1: Resources and Setup

You will need the following items/software to complete this tutorial:

• Default Installation of WordPress preferably running on your local server and without any additional plugins installed.
• Dream CSS Slideshow (scroll to the bottom of the Dream CSS page to download the tutorial)
• An Image editor like Photoshop to resize the images
• An HTML/PHP editor. A good free editor is PSPad

Once you have all your resources, let's create our directory structure. Create a directory on your hard drive similar to the structure below:

• Root Directory: C:\projects\wp\dev\slideshow
• Original SlideShow Directory: C:\projects\wp\dev\slideshow\originalcode\slideshow
• Work directory: C:\projects\wp\dev\slideshow\work

Now unzip the Slideshow code into the Original SlideShow Directory.  Copy the following files and directories from the Original SlideShow Directory to the Work directory: index.html, style.css, js folder, and the images folder.  Open up index.html in your browser and make sure the slideshow works.  If it doesn't work, recheck that you have copied all the files from the ...\originalcode\slideshow.  Next go to the top folder location of your WordPress site. Drill down until you are at wp-content\themes.  Copy the entire TwentyTen Theme.  Paste this theme into the same directory, but name the folder slideshow2010 (i.e, replace "twentyten" on the copied folder name with "slideshow2010").  In the new directory open the style.css file. Replace the top comment:

Replace the following:

 /*
Theme Name: Twenty Ten 

Theme URI: http://wordpress.org/ 

Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom headerimages for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team 

Version: 1.1 

Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style 
*/

With this:

 /*
Theme Name: Twenty Ten Slideshow 

Theme URI: http://wordpress.org/ 

Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar. 
Author: the WordPress team 

Version: 1.1 

Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style 
*/ 

Now go into the back end of your WordPress site and activate the new theme.  The thumbnail will be eactly the same for both the Twenty-Ten and the Slideshow 2010.  Once activated, your screen in the Administrator->Appearance Panel should look similar to the picture below (click on the image to see a larger view):

Step 2: Creating a Static Front Page Copy

Whenever I develop new plug-ins or template features on an existing WordPress site or Joomla site, I always try to start with a static example page.   So here is how we create a static copy for our WordPress Front page:

1. Launch your local installation of WordPress in your browser (eg., http://localhost/wordpress site name/ ).  Make sure your browser is displaying the front page correctly.  Then view your source code and copy it into a new html page called wpslideshow.html.  Save wpslideshow html in your "Work directory".
2. Now open "work\wpslideshow.html" in your web browser.  Make sure it looks exactly like your default installation (i.e, no pictures are missing, the page is styled exactly as before, etc.).
3. Once all seems to be working, save wpslideshow.html as wporig.html in your "Work directory".  The wporig.html will be your back-up copy in case something doesn't work.

Step 3: Incorporating the SlideShow into your Static Front Page

1. Copy the js directory, images directory,  index.html, and style.css from the original slide show code (if you are using the same directory structure as I described above you would copy these items from ..\originalcode\slideshow\) to the directory where your wpslideshow.html is located.
2. Rename style.css to slidestyles.css
3. Create another directory in this same directory (..\work) called images2.  Copy all the photo images from the originalcode\slideshow\images to your newly created images2 directory.
4. Resize all of the photo images in the images2 directory (e.g, nature-photX.png) from 967 x 330 to 940x198.  You should have 7 photos total.
5. Now add a link to the slideshow stylesheet to your wpslideshow.html as shown in red :

   <header>
   ...
   
   <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wpdevelop/wp-content/themes/slideshow2010/style.css" /> 
   <link rel="stylesheet" type="text/css" href="/slidestyles.css">  
     

6. Add the following to wpslideshow.html right before the end body tag:

   <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
     <script type="text/javascript" src="/js/jquery.js"></script>
     <script type="text/javascript" src="/js/scripts.js"></script>
   
     <script>
   
       if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
   </script>
   </body> 

7. Replace the code in the header shown in black (~ line 30)

   <div id="branding" role="banner">
           <h1 id="site-title"> <span> <a href="http://localhost/wpdevelop/" title="WP Developer Sandbox" rel="home">WP Developer Sandbox</a> </span> </h1>
           <div id="site-description">Just another WordPress site</div>
           <img src="http://localhost/wpdevelop/wp-content/themes/twentyten/images/headers/path.jpg" width="940" height="198" alt="" /> </div>
         <!-- #branding -->
   
        

   
   with the code shown in red:

   <div id="branding" role="banner">
           <h1 id="site-title"> <span> <a href="http://localhost/wpdevelop/" title="WP Developer Sandbox" rel="home">WP Developer Sandbox</a> </span> </h1>
           <div id="site-description">Just another WordPress site</div>
   <div style="clear:both;margin:0px:padding:0px;"></div>
   <div id="slider-header">
   <div id="slide-holder" >
   <div id="slide-runner">
   <a href="/"><img id="slide-img-1" src="/images2/nature-photo.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-2" src="/images2/nature-photo1.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-3" src="/images2/nature-photo2.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-4" src="/images2/nature-photo3.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-5" src="/images2/nature-photo4.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-6" src="/images2/nature-photo4.png" class="slide" alt="" /></a>
   <a href="/"><img id="slide-img-7" src="/images2/nature-photo6.png" class="slide" alt="" /></a>
   <div id="slide-controls">
   <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
   <p id="slide-desc" class="text"></p>
   <p id="slide-nav"></p>
   </div>
   <!--End Slide Controls -->
   </div>
   <!--End Slider -->
   </div></div></div>
         <!-- #branding -->
   
        

Step 4: Styling it Up

The next step is make some adjustments so our slideshow is aligned exactly as the original banner image.  If you launched the wpslideshow.html in your browser now, it would be misaligned to the left and the styling of the entire page would be off.  If you are following along with my setup, you will benefit from not having to copy over your wordpress stylesheet once you are done, becuase we will be editing our new themes stylesheet to make adjustments for our static front page.  The benefit will become evident when we incorporate our changes into or WordPress theme in the second part of this tutorial.  So let us begin by styling the slidestyles.css.

1. We must remove all styling information that competes with the WordPress theme styles, notably the body style.  So remove all the lines of css from line 1 to the style specification for the div#top div#nav (around line 33).  So the start of your slidestyles.css should now look like:
   

   div#top div#nav {
   float : left;
   clear : both;
   width : 993px;
   height : 52px;
   margin : 22px 0 0;
   }
   div#top div#nav ul {
   float : left;
   width : 700px;
   height : 52px;
   list-style-type : none;
   }
   div#nav ul li {
   float : left;
   height : 52px;
   }.... 

2. If you looked at the source of index.html for the slideshow and at the source for the WordPress Front page you will notice they both have a div id of header.  We need to remove the header from the style sheet and replace it with slide-header.  Search and replace all instances of div#header with div#slide-header in your slidestyles.css
3. Remove all instances of div#top from slidestyles.css.  Make sure you leave the styles though.  For example:
   

   div#top div#nav {
   float : left;
   clear : both;
   width : 993px;
   height : 52px;
   margin : 22px 0 0;
   }
    should now be: 
   div#nav {
   float : left;
   clear : both;
   width : 993px;
   height : 52px;
   margin : 22px 0 0;
   }

4. Adjust the size for our new image size of 940px x 198px.  Search and repalce all instances of 993px in your slidestyles.css with 940px. Add the background navigation image to your div#nav like so:

   div#nav{
   float:left;
   clear:both;
   width:940px;
   height:52px;
   margin:22px 0 0;
   background:url url(images2/nav-bg.png) 0 0 no-repeat;
   } 

5. There are a number of additional changes you will need to make such as the height for certain styles, removing the div#wrap, etc.  All of the necessary changes can be found in the code for download at the bottom of this tutorial.  I suugest you look at the downloaded copy of slidestyles.css next to your working copy of slidestyles.css as you make the changes.  If you have any questions, please feel free to leave a comment with your questions.  I will try to respond.
6. The next changes we will need to make are to the WordPress style sheet for our new theme.  Open up the style sheet (your wp installation/wp-content/themes/slideshow2010/style.css).  Change the following :
   
   

   Line Number	Was	Is
   334	#header { padding: 30px 0 0 0; }	#header { padding: 20px 0 0 0; }
   349	#site-description { clear: right; float: right; font-style: italic; margin: 14px 0 18px 0; width: 220px; }	#site-description { clear: right; float: right; font-style: italic; margin: 14px 0 0px 0; width: 220px; }
   357	/* This is the custom header image */ #branding img { border-top: 4px solid #000; border-bottom: 1px solid #000; clear: both; display: block; }	/* This is the custom header image #branding img { border-top: 4px solid #000; border-bottom: 1px solid #000; clear: both; display: block; }comment out */

7. You may download the completed code and files for the tutorial here.

I hope you enjoyed this tutorial. Part II will be up by next week. See you then!