Our blog, keeping you up-to-date on our latest news.

 

Tutorial: Code a WordPress Theme from Scratch (part 4)

July 28, 2013 at 1:14 pm | Blog | 1 comment

 

I just realized that I had not updated this series since Nov 2010. It has been more than 2 years. I have to keep my words that I will add javascript to the simpletype wordpress theme and make it more fancy.

Following on from the last tutorial Tutorial: Code a WordPress Theme from Scratch (part 3), now we are now going to add image slider to the header.

After this tutorial you will have a theme like this: http://demo.pengbos.com/simpletype/.

Preparation

First of all, you should have already read through this series from tutorial 1 to 3. And secondly, this tutorial will based on the output of tutorial 3, we will continue working on the simple type theme. last but not the least, you have to download the image slider we will adopt for simple type theme: Orbit, which is a jQuery image slider plugin.

Step 1. Add jQuery and Orbit into the theme

From Orbit website, we can download the version 1.2.3. In order to keep the structure easy to understand, we can just copy all orbit files (except for the demo folder) into the theme folder and keep the orbit structure unchanged. For demo purpose, we also want to use the same images used by orbit demo. So i copy the four images into the “img” folder.

Now the current theme folder’s structure is like this:

 wp-content/themes/Simple Type/
├───index.php
├───header.php
├───footer.php
├───home.php
├───style.css
├───index.html
├───img
│   ├───captions.jpg
│   ├───coffee.jpg
│   ├───features.jpg
│   ├───overflow.jpg
│   ├───photo.jpg
│   ├───logo.gif
│   └───blank_gravatar.png
└───css
|   ├───grid
|   │   ├───960.css
|   │   ├───reset.css
|   │   └───text.css
|   └───stylesheet.css
└───orbit
    ├───jquery.orbit-1.2.3.min.js
    ├───jquery-1.5.1.min.js
    ├───orbit-1.2.3.css
    └───orbit
          ├───bullets.jpg
          ├───....... (orbit images, just copy from Orbit folder)
          └───timer-black.png

Step 2. Add image slider to header.php

There is only one image in the header, and a caption over the feature image. Here is the original html

<div id="main" class="grid_12">
     <h1><a href="#" title="Chergaoui.com">Chergaoui.com</a></h1>
     <h2><a href="#" title="Main article title">Featured post : here goes a title</a></h2>
     <a href="#" title="Chefchaouen , Morocco - Africa">
          <img src="<?php bloginfo('template_directory'); ?>/img/photo.jpg" title="Chefchaouen , Morocco" alt="Chefchaouen , Morocco" />
     </a>
</div>

There is a title on the right top of the image, which is the logo of the website, and we definitely need to keep it. The single image and the caption on the image will need to be replace by the slider.

the simplest way to mockup the html is just to copy the html code from orbit’s demo file, and replace the image URL with the template directory. so the new HTML layout will be:

<div id="main" class="grid_12">
     <h1><a href="#" title="Chergaoui.com">Chergaoui.com</a></h1>
     <div id ="featured">
          <a href=""><img src="<?php bloginfo('template_directory'); ?>/img/overflow.jpg" /></a>
          <a href=""><img src="<?php bloginfo('template_directory'); ?>/img/captions.jpg" /></a>
          <a href=""><img src="<?php bloginfo('template_directory'); ?>/img/features.jpg"  /></a>
     </div>
</div>

And then, need the css style and javascript in place to make the slider start. hookup the slider style and javascript like this:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/orbit/orbit-1.2.3.css">
<!-- Attach necessary JS -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/orbit/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script>

just make sure that the jquery script is attached before the orbit plugin.

We have the html mockup, and we have all style and javascript ready. All we need to do now is activate the Orbit plugin. We want the slider to be performed on the “featured” div. so here is the javascript code to active the orbit plugin.

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

And there you have it. Orbit, implemented and ready to rock with all the default settings. If you want to see more options or to clean up the slider, you can refer to the following options and set your own values.

<script type="text/javascript">
$('#featured').orbit({
     animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // how fast animtions are
     timer: true, 			 // true or false to have the timer
     advanceSpeed: 4000, 		 // if timer is enabled, time between transitions 
     pauseOnHover: false, 		 // if you hover pauses the slider
     startClockOnMouseOut: false, 	 // if clock should start on MouseOut
     startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
     directionalNav: true, 		 // manual advancing directional navs
     captions: true, 			 // do you want captions?
     captionAnimation: 'fade', 		 // fade, slideOpen, none
     captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
     bullets: false,			 // true or false to activate the bullet navigation
     bulletThumbs: false,		 // thumbnails for the bullets
     bulletThumbLocation: '',		 // location from this file where thumbs will be
     afterSlideChange: function(){} 	 // empty function 
});
</script>

Orbit will dynamically determine the height and width of your set of images and scale accordingly. The best image width for 960 grid is 940px, as the width for class grid_12 in 960 grid system is 940px. So the images from the demo is just perfect for us.

And now, you can save the changes and check it out by yourself.

Reference

http://zurb.com/playground/orbit-jquery-image-slider

To be Continued…

You can download the simple type theme here simple-type-part4.zip (Size 1.8 MB)

In the next tutorial part 5, which will be the final one, to finalize the theme. please stay tuned.

the series

Tutorial: Code a WordPress Theme from Scratch (part 1)
Tutorial: Code a WordPress Theme from Scratch (part 2)
Tutorial: Code a WordPress Theme from Scratch (part 3)
Tutorial: Code a WordPress Theme from Scratch (part 4)

<< Back to Blog Discuss this post

 

One Comment to “Tutorial: Code a WordPress Theme from Scratch (part 4)”

  1. nedmccartney says:

    Attractive element of content. I just stumbled upon your web
    site and in accession capital to assert that I acquire in fact
    loved account your weblog posts. Any way I will be subscribing for
    your feeds and even I achievement you access constantly fast.