Resources for the creative mind

Integrate a slideshow in your wordpress theme

Tags: , , , ,

Most theme don’t use all the possibilies of wordpress and smoothgallery. In some of them (like massive news) you must hardcode the links to the post in the control panel. That’s why i decided to do this tutorial. this is what it will look likeyou can see working example on the main page of this site What do we need ? The first thing we need to do is to download SmoothGallery 2.0 First Step : Put the files where they have to go Unzip your smoothgallery archive copy the css directory to wp-content/themes/your_theme_name copy the scripts directory to wp-content/themes/your_theme_name Second Step : Add the reference to the files in your Header Add these lines in your header file (wp-content/themes/your_theme_name/header.php) <!--Css SmoothGallery--> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jd.gallery.css" type="text/css" media="screen"/> <!--JS Mootools--> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/mootools.v1.11.js"></script> <!--JS SmoothGallery--> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jd.gallery.js"></script> Once this step is done, SmoothGallery is ready for use in your theme Third Step : Create the file gallery.php (in your theme directory), this file will generate the html code to show your gallery. before starting this step, bear in mind the structure of a smoothgallery element <div class="imageElement"> <h3>Item Title</h3> <p>Item Description</p> <a href="Link to Item " title="open image" class="open"></a> <img src="Image of item" class="full" alt="Item Title" /> <img src="Thumbmail of item" class="thumbnail" alt="thumbnail of Item Title" /> </div> In the gallery.php file ...