Please note that you will need to know some HTML / CSS and a little Javascript scripting to follow. Ready to get started? Let’s begin:

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#tabs {
	border:1px solid #ccc; 
	height:28px; 
	background:#eff5f9; 
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}
#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right:5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
	font-weight:bold; 
	color:#000000; 
	padding:7px 14px 6px 12px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

1
2
3
4
5
6
7

.container{ 
	clear:both; 	 	 
	padding:10px 0px; 
	width:664px; 
	background-color:#fff; 
	text-align:left; 	 
}

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

1
2
3
4
5
6

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {	
    //our script goes here...
});
</script>

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

1
2

$('#tabs li a:not(:first)').addClass('inactive');
$('.container:not(:first)').hide();

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

1
2
3
4
5
6
7
8

$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');		
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1″. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.

Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

1
2
3
4
5
6

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');		 
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');	
}

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

Adding it to a WordPress theme has its benefits as well. For one, the code stays with the theme. Anyone who uses it gets this effect automatically. Not to mention, it’s pretty easy to implement.

This article will walk you through how to add Lightbox into your WordPress themes. I’m also going to assume that you have created WordPress themes before, for you will need to know how to work with template files and such. Ready to get started? Let’s begin.

Grab Pretty Photo

There are many lighbox plugins out there. I choose one called Prettyphoto from no-margin-for-errors.com. Prettyphoto uses jQuery, and is quite extensible. But the main reasons why I chose it is because the animation is flawless and the design is awesome. Download the production version from this link

Extract the .zip file into your hard drive. Inside prettyPhoto_compressed_3.1.2 – you will find the following folders and files. Copy them according to below:

• prettyPhoto folder (from prettyPhoto_compressed_3.1.2\images) and place inside (yourtheme\images\)
• prettyPhoto.css (from prettyPhoto_compressed_3.1.2\css) and place inside your theme root folder
• jquery.prettyPhoto.js (from prettyPhoto_compressed_3.1.2\js) and place inside (yourtheme\scripts\)

Include the Scripts

First we need jQuery. There is a preferred way to include jQuery into our themes – that is to use the wp_enqueue_script function. Open functions.php and add the code below. *If your theme doesn’t have a functions.php file – go ahead and create one.

1
2
3
4

function insert_jquery(){
	wp_enqueue_script('jquery');
}
add_action('init', 'insert_jquery');

Note that this is the preferred way because since WordPress is already shipped with a bunch of scripts (including jQuery) – you might as well use them. It is also considered good practice because updating Worpdress will include these javascript libraries (and how often do you do that!)

Add the Prettyphoto script and css into your theme header.php file:

1
2

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>

Custom Code

Modify the code in prettyPhoto.css. This step is necessary so the path to the images for prettyPhoto is corrected according to your setup:

• open prettyPhoto.css
• CTRL + F (Find) all instances of “url(../”
• And replace with “url(” *There should be around 100 occurences
• Save the file

Again, this is due to the location of the images and the css file has changed from the example files from prettyPhoto. This ensures the images needed for our lightbox is functioning properly:

Open header.php – and add the following code:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">  
jQuery(document).ready(function($) {
   $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
	animationSpeed: 'normal', /* fast/slow/normal */
	padding: 40, /* padding for each side of the picture */
        opacity: 0.35, /* Value betwee 0 and 1 */
	showTitle: true /* true/false */			
	});
})
</script>

What the above code does is selecting all links with the href attribute that equals to anything ending in .jpeg, .jpg, .gif and .png, and applying the prettyPhoto() function to it. This means that any link tag that leads to an image (file extensions mentioned) will trigger prettyPhoto. The script is also enclosed inside a document ready event using a jQuery noConflict wrapper. This is to prevent any compatibility issues with other javascript libraries that maybe included with your theme.

I also went ahead and added some options such as the animation speed, padding and show title to our .prettyPhoto function. For additional customization options – refer to the no-margin-for-errors documentation.

Conclusion

If all goes well – you can test your work by clicking on an image that links to another image. This should launch the prettyPhoto code that we’ve just plugged in. You can also apply the same code to links with inline content, external files, youtube movies or other flash based content. Again, refer to prettyPhoto documentation.

The Goal:

We will use clean markup. We’re trying to integrate this into exsting HTML – so we will be generating all extra classes and tags using Javascript. I imagine most web documents follow the same constant pattern: Heading tags, followed by some content which are a mixture of different DIVS, paragraphs, images etc. This goes on until the next heading tag – which is usually the same type as the first heading.

Look at the sample mark up below:

1
2
3
4
5
6

<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
        <!--content in here-->

We will use the H5 tags as our “Clicker” – once clicked, will hide the contents right underneath it. Click it again, and it will show the contents again.

The Script:

We start by calling the jQuery library, followed by the document.ready() call:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
 
               <!--script goes here-->
 
});
</script>

We then loop through each of our particular heading tag (in this case, all of H5). Once it finds all of them, it checks to see if right next to it is another H5 tag; if it’s not, it adds a class of “clicker” to it and appends a span with a minus (-) sign in it:

1
2
3
4
5

$("h5").each(function(e){
	if(!($(this).next().is("h5"))){				
	    $(this).addClass("clicker").append('<span>-</span>');				
	}					
});

If you investigate your code so far – you will see that only the H5 tags that have content OTHER than H5 tags have the class “clicker” and the span tag with a minus (-) sign in it:

Now let’s code the click events:

1
2
3
4
5
6
7
8
9

$("h5.clicker").toggle(
		function(){			
			$(this).nextUntil("h5").slideUp('slow');
			$(this).find('span').html('+');	
			},
		function(){  
			$(this).nextUntil("h5").slideDown('fast');
			$(this).find('span').html('-');	
		})

Now that we have our designated clickers, we create a couple of functions that toggle at every click.

The first action, hides the contents below “$(this)” – which is the tag you just clicked. Remember – we only want to hide the contents up until the next H5 tag. It also changes the content of the span into a plus (+) symbol.

The second action shows the contents below, and changes the span to a minus (-) symbol.

Optional Styling:

At this point you already have a functional accordion. If you’re applying the code to an existing page, you are already working with the current styles. Although, using CSS3 for say the plus (+) and minus (-) span looks pretty cool – which I’m sure you’d want to use.

Add this code to your styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#wrap h5 span, #wrap h5 span:visited {
	background: #2daebf url(alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 1px 9px 2px 9px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	float:right;
	font-family:Arial, Helvetica, sans-serif; font-weight:bold;
	*top: -47px; /*ie 7*/
}
 
#wrap h5 span:hover{ background-color: #007d9a; color: #fff; }
#wrap h5 span:active{ top: 1px; }
#wrap h5 span, #wrap h5 span:visited { font-size: 23px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  }

Of course you have to replace the #wrap h5 with your own class / ids. This creates the css3 button you see in the demo. This code is courtesy of Zurb’s Super Awesome buttons with CSS3 and RGBA:

Conclusion

And that is it! You have yourself an accordion page powered by jQuery. Feel free to grab this code and improve it. Maybe refactor it into a more plugin like code – make it more reusable. Or even – fix the choppiness issue in the slideUp / slideDown animation in certain browsers. In any case, please leave a comment on what you think of this code.

You might also be interested in these articles regarding jQuery accordions:

• Simple Accordion w/ CSS and jQuery
• Exactly How to Create a Custom jQuery Accordion
• Grid Accordion with jQuery

So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

Add the following code right above the closing head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Are you ready to get your hands dirty? Let’s start coding:

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.

Inside the head section of our HTML, insert our script tag:

<script src="jquery-1.3.2.min.js"></script>

Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

1
2
3
4
5
6
7
8

<script src="jquery.cycle.all.2.72.js"></script>
<script>
	$(document).ready(function(){
		//cycle plugin
		$('.slideshow').cycle({
			fx: 'fade' 
		});
</script>

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.

Create several images that will go inside the slideshow - all must have the same dimensions – in our case: 476 pixels and 349 pixels.

Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

1
2
3
4
5
6
7

<div class="slideshow">
<img src="images/feature-1.jpg"/>
<img src="images/feature-2.jpg"/>
<img src="images/feature-3.jpg"/>
<img src="images/feature-4.jpg"/>
<img src="images/feature-5.jpg"/>		
</div>

Append this code inside your existing style.css file:

#feature .slideshow {float:right; position:relative; left:-24px; top:21px;}

This ensures that the slideshow will sit on top of the designated box in the feature div:

Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.

The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.

This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".column:gt(2), #previous-work ul li:gt(3)").hide();		
		$("#testimonials").append("<div class='more'><a id='more-testimonials'>More Testimonials</a></div>");
		$("#previous-work").append("<div class='more'><a id='more-previous-work'>More Previous Work</a></div>");	
		$("a#more-testimonials").click(function(event){		
			if ($(".column:gt(2)").is(":hidden")){							
				$(".column:gt(2)").slideDown('slow');
				$("a#more-testimonials").text("Less Testimonials");				
			}else{
				$(".column:gt(2)").slideUp('slow');
				$("a#more-testimonials").text("More Testimonials");	
			}			
			event.preventDefault();					  	
		});
		$("a#more-previous-work").click(function(event){							
			if ($("#previous-work ul li:gt(3)").is(":hidden")){
				$("#previous-work ul li:gt(3)").slideDown('slow');
				$("a#more-previous-work").text("Less Previous Work");				
			}else{
				$("#previous-work ul li:gt(3)").slideUp('slow');
				$("a#more-previous-work").text("More Previous Work");
			}			
			event.preventDefault();	
		});

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/

Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

1
2

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />

Inside our custom script tag, (right after the last “});”) insert the block of code:

1
2
3
4

$("a.zoom").fancybox({
			'zoomSpeedIn'	: 500,
			'zoomSpeedOut' : 500
	});

In our unordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag:

class="zoom" rel="group"

Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.

Look for the form tag inside index.php; add a method and an action attribute:

<form id="contact-form" method="post" action="">

This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

1
2

<pre>
<?php print_r($_POST) ?>

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//see number 1
 if (array_key_exists('send', $_POST)){
		//see number 2
$to = 'youremail@mail.com'; //this is your email address
	$subject = 'From Your Contact Form';
	$name = $_POST['name'];
	$email = $_POST['email']; 
	$comments = $_POST['comments'];  
		//see number 3
$message = "Name: $name\n"; 
	$message .= "Email: $email\n";
	$message .= "Comments: $comments";
		//see number 4
	mail($to, $subject, $message);
}
?>

What the above code is doing:

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it - a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We've added some jQuery magic as well as a little bit of PHP functionality. As you see - a lot of work does go into it (and that's just a single page!)

In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

I also suggest that you find a web hosting server that works well with HTML, PHP and jQuery. This will take care of all your hosting needs.

First thing you have to do is check the “Anyone can Register” option under “Settings” > “General”. Don’t forget to leave the “New User Default Role” as “Subscriber”.

Lock Down the Registration Process

Now that you have your site open for registration, it is best that you install these plugins first to enable tighter security:

Hide the WP Admin Panel

So registration is open, security is tight – you still don’t want users to see your WordPress admin area. Not that there’s anything wrong with that – but it just looks more sophisticated when all is done in the front end. Install the following plugins:

The following screenshots show the login page, as well as the profile page generated by the plugins that I’ve mentioned:

TDO Mini Forms

We’ve come to the meat of the project. This is the plugin that does all the magic. TDO Mini Forms allows users (registered on not registered) to submit and edit posts to your blog. It comes with its form creator that lets you design the post submission form any way you want. Widgets that let you drag and drop components into your form, as well as a form “hacker” that allows even deeper code tweaking. What I especially liked is that it hooks up with your “Akismet” for spam protection.

After specifying all the configuration settings with TDO, go ahead and create a form with “Form Creator”. The form creator is a somewhat decent drag and drop interface where you grab the widgets in the bottom and drag it to the form. Widget settings are applied by clicking on the settings tab and it brings up the settings window as shown below:

Once you’ve decided on the fields and the settings, you can now alter the code to change the verbiage, along with adding HTML elements in order to be able to style it in your stylesheet. Below shows my contribute form:

Maybe some Custom Code

Depending on your pages – you might need to add some PHP conditional tags and functions to the theme manually. This is to link the new pages to each other. Simply copy your theme’s page.php file and rename it to something.php – convert it into a template by adding the code on top of the page:

1
2
3
4
5

<?php
/*
Template Name: something
*/
?>

Now below the call for the content, add the conditional tag with from the Theme My Login plugin:

1
2
3

<?php if ( is_user_logged_in() ) {?>
   <div >I bet you would like to submit a Guest Post. Click <a href="yourwebsite.com/conribute">here</a> to access the contribute form. </div>
<?php } ?>

The screenshot below shows the custom link to the contribute form that we just created:

All you have to do now is to wait for guest post submissions and depending on the content – simply approve, edit or deny. The submissions are saved as draft posts and are in the moderation view of TDO mini forms:

Conclusion

Now that you have converted your blog into a more automated (and sophisticated) posting process – think of all the possible scenarios you can create. Of course I’m completely aware that my guest posts will not land any successful submissions any time soon – it’s just good to know that it’s available. Not to mention, it was fun to make.

Let’s not forget to donate to the plugin authors!

That’s why I need your help.

Why write for me?

Decent exposure. Below is a screenshot of my analytics page. I do not do any marketing for my blog, nor do I submit it to special web directories. Most of my traffic are organic (from search engines) and word of mouth. My themes are the central source of visits – and they keep coming.

What I’m Looking For

Articles related to web design, WordPress, code, plugins, how-to’s. Basically – if it’s interesting and it’s about web design – I want it. The articles do not have to be well written. I am pretty good in proof reading and I can polish your articles as needed.

If you’re interested contact me – host[at]fearlessflyer.com. Your article will be fully credited to you inside an author box (which I have yet to work on), along with links to your portfolio and Twitter account. I may also work on automating the process so you can have your own account here at Fearlessflyer and create posts anytime. We’ll see how it goes.

The Images

I only used a couple of images for the form. First is the little tab that extends just right below the edge of our browser that when clicked, shows the entire form. Second is the actual login button. Note that you don’t have to create any images at all for this form – regular CSS styling would look fine. In my case – I used rounded edges for a more stylistic look; hence the need for images:

The Form

This is where the functionality kicks in. This code came from Kriesi’s post: “Admin login in your front page”. His code is basically a valid login form that can reside in any page of your WordPress site. An else condition is also included that shows additional options for when the user is logged in. I added a table (that’s correct, I used a TABLE! – so shoot me!) for the input fields and labels to behave and align accordingly. Of course – you can omit the table if you want to. I’ve also added several DIV elements so our form can be housed in a little box.

This part shows when the user isn’t logged in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div id="quick-login">
<div id="login-form">
<?php if (!(current_user_can('level_0'))){ ?>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<table>
<tr>
<td>
<label for="label">User</label>
</td>
<td>
<label for="label">Password</label>
<em class="forgot"><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Forgot?</a></em></span></td>
<td>&amp;amp;amp;nbsp;</td>
</tr>
<tr>
<td>
<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" />
</td>
<td>
<input type="password" name="pwd" id="pwd" size="20" class="login-fields"/>
</td>
<td>
<input type="submit" name="submit" value="" class="login-button" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</td>
</tr>
</table>
</form>

This code shows when the user IS logged in. I’ve also included my own message for the logged in user. You should adjust this to accommodate your theme.

1
2
3
4
5
6
7
8
9
10

<?php } else { ?>
<div id="logged-in-box">
<p>You can now quickly edit your posts by clicking the <em>Edit This</em> &nbsp;buttons after each post</p>
<ul class="admin_box">
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> 
<li><a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">logout</a></li>
</ul>
</div><!--logged-in-box--> 
<?php }?>
</div><!--login-form-->

The CSS

Now that we have all the elements in place, we can proceed with styling them. Note the color for the tab image is the background color for the entire DIV. Another important property is “display:none” – which hides the form by default. This is what jQuery will toggle to “display:block” when we’re done.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

a.menu_class {float:right; background:url(images/button-toggle3.png); width:184px; height:32px; text-indent:-9999px; outline-style: none;}
#login-form {float:right; padding:2px 10px 10px 10px ; display:none; background:#397846;}
#login-form label {color:#FFFFFF; text-transform:uppercase; font-size:11px; padding-left:5px; font-weight:bold; font-family:verdana; position:relative; top:5px; left:0;}
#login-form em a {color:#a1dbe6; text-decoration:none; font-size:10px; position:relative; top:5px; left:37px;}
#login-form em a:hover {color:#999999;}
input.login-fields {border:none; background:#444444; padding:7px 5px; margin:0 10px 0 2px; color:#FFFFFF;}
input.login-button {width:101px; height:36px; background:url(images/login-btn.png); border:none;}
#logged-in-box {width:456px;}
#logged-in-box p {float:right; width:238px; line-height:14px; font-size:10px; padding:5px 10px 0 0; color:#999999;}
#logged-in-box p em {font-style:normal; color:#a1dbe6;}
ul.admin_box {padding:10px 20px 20px 10px;}
ul.admin_box li{float:left; list-style:none; padding:0 10px 10px 10px; text-align:center; }
ul.admin_box li a{text-decoration:none; color:#FFFFFF; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:verdana;}
ul.admin_box li a:hover {color:#ccc;}

The jQuery

Our form is complete, styles and all. The last thing we need is the action. We accomplish this by adding jQuery. First of, don’t forget to reference the library and your custom script in your head section:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/slider.js"></script>

Then the following few lines of code is what we include in our custom script (“slider.js”).

1
2
3
4
5

$(document).ready(function () {
$('a.menu_class').click(function () {
$('div#login-form').slideToggle('medium');
});
});

And that’s it! You have created a slick jQuery powered login form for your WordPress site. This particular form is designed to be placed in your header file. Note that the form will work from any template in your theme. Give the demo a try – I’ve designated a test user account so you can see how the form looks when logged in.

Part 1 – Creating the Image

In Photoshop, create a new image 432 pixels by 78 pixels. Add a title for your bar, and four icons of your subscription options. In our case, we’re using an RSS feed icon, Twitter, Email and Facebook. *Icons are from WeFunction Collection. Line them up and space them evenly.

Add guides that divide each button. Also be sure to add a guide right on the top of the document. Lock the guides in place – you will need these dimensions when creating the CSS.

Multiply the canvas height by two. Make sure you click the button that keeps the canvas flushed to the bottom

Select all existing layers and create a duplicate set. Merge all the layers in that set to create a single layer which we’ll use for the hover effect of the links.

Nudge the new layer upwards – make sure it’s lined up exactly as the bottom layers. To create a hover effect – I desaturate the layer all the way to the max – making it a grayscale layer.

Make sure you hide the background layer and save the image as a .png.

Part 2 – The HTML

We’re going to need a single div and an unordered list of links to render the sprites. Make sure to add an id for each anchor tag. This is how we’ll match the image through our stylesheet.

1
2
3
4
5
6
7
8
9

<div id="subscribe-div">
<ul id="subsc">
<li class="title">Keep Updated</li>
<li><a id="rss" href="#" title="Subscribe to RSS">RSS</a></li>
<li><a id="twit" href="#" title="Follow Us in Twitter">Twitter</a></li>
<li><a id="mailrss" href="#" title="Get Feeds through Mail">Subscribe By Email</a></li>
<li><a id="facebook" href="#" title="Find us in Facebook">Facebook</a></li>
</ul> 
</div><!--subscribe-div-->

Of course you have to replace the # with your links. Note that the first list item is not a link. This is just a placeholder for the title “Keep Updated” title.

Part 3 – The CSS

1
2
3

#subscribe-div {margin:0 auto;}
#subscribe-div ul#subsc li {display:inline; float:left; }
#subscribe-div ul#subsc li a { background:url(images/social-sprites.png);  display:block; float:left; height:78px;}

The first selector (#subscribe-div) can contain general properties of your bar. This includes overall padding, margins or positioning. The second selector (#subscribe-div ul#subsc li) – lets the browser know to display list items horizontally. The third (#subscribe-div ul#subsc li a) – calls our .png image.

#subscribe-div ul#subsc li.bar-title {background:url(images/social-sprites.png); background-position:0 0; width:156px; height:78px; text-indent:-9999px;}

This styles our list item bar-title with the “Keep Updated” leftmost section of our .png image – hence the position of 0 0 (means coordinates of 0 and 0). Next is styling the normal state of the links:

1
2
3
4

#subscribe-div ul#subsc li a#rss {background-position:-156px 0; width:68px; }
#subscribe-div ul#subsc li a#twit {background-position:-224px 0; width:65px; }
#subscribe-div ul#subsc li a#mailrss {background-position:-289px 0; width:65px; }
#subscribe-div ul#subsc li a#facebook {background-position:-354px 0; width:78px; }

The above code reflects the normal state of the buttons in our list. The only properties applied are width and background position. To get the width of each button, you have to go back to your .psd (remember applying the guides in the beginning of the tutorial). Note that not all the buttons are identical in size, thus varying in widths. To get the background position, always remember: the first value is the left coordinate and the next value is top. Since we already know that our title is 156 pixels, we know our first button (rss) is going to have a background position of -156px.

Next is the hover state.

1
2
3
4

#subscribe-div ul#subsc li a:hover#rss {background-position:-156px 78px; width:68px;}
#subscribe-div ul#subsc li a:hover#twit {background-position:-224px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#mailrss {background-position:-289px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#facebook {background-position:-354px 78px; width:78px; }

Notice I just copied the code for the normal state and re-pasted it. The only difference is the use of anchor pseudo class :hover is appended to the “a” selector, and the top value of background position is now 78 pixels. This is because we want the .png image to shift 78 pixels downward, once the mouse is hovered over each link.

The only thing left to do is to indent the text of the links. This is done in the #subscribe-div ul#subsc li a selector (text-indent:-9999px;).

And that’s it. We have finished creating a subscribe bar from an image in Photoshop, HTML and finally adding some styles with CSS. You can view the demo from this link, or download the source code from here. All I ask is for you leave a comment, subscribe or follow me in Twitter.

The problem

For anyone who’s developed a WordPress theme would know how to break it up in templates: header.php, sidebar.php , footer.php etc. And as I’ve mentioned: you control the background image (if you want it to span the entire page) usually in the body tag of your HTML. The problem is – the body tag comes BEFORE any other tag in your templates.

For example, take a look at the screenshot of a typical header.php file below. It shows the body tag where you apply a different property value in the CSS file each time you want it unique from another page:

The problem is, in your special template, you’ve already called the get header file:

The Answer – Conditional Tags

WordPress is built is such a way that you can control almost every aspect of your pages. One useful snippet is known as Conditional Tags. Conditional tags can be used in your templates to change what is displayed on a particular page – like the background image. Examples of conditional tags are: is_single(), is_front_page() or is_admin(). For more information on Conditional Tags – see the this link from WordPress Codex library. In our case – we’re going to use the tag is_page_template().

Step 1: Insert the PHP

Open your header.php in your text editor. You’re going to add a conditional statement in inside the opening body id tag. In my case, I’m using three different backround images. Two of them, I want to apply in two individual templates, while the rest of the pages share a default image:

1
2
3
4
5
6
7
8

<body id="
<?php if (is_page_template('template-diff-bg-demo1.php')){
       echo "template-diff-bg-demo1";} 
elseif (is_page_template('template-diff-bg-demo2.php')){
       echo "template-diff-bg-demo2";
}else{
echo "default";
}?>" >

Explanation: If the template used is named “template-diff-bg-demo1.php”, echo a body id of “template-diff-bg-demo1”, or if template used is named “template-diff-bg-demo2.php” use body id of “template-diff-bg-demo2”, otherwise – just use body id of “default”.

Step 2: The CSS

Open your styles.css. We’re going to match the body ids that are going to be called each time you switch page templates. In our case – we need three different ids:

• body# template-diff-bg-demo1 – a different background
• body# template-diff-bg-demo2 – another background
• body#default – the default background

1
2
3

body#default { background:url(images/default-bg.jpg) top center no-repeat #000000; }
body#template-diff-bg-demo1 { background:url(images/default-bg2.jpg) top center no-repeat #000000;}
body#template-diff-bg-demo2 { background:url(images/default-bg3.jpg) top center no-repeat #000000; }

Conclusion

There you have it. We dynamically changed the body ids of our theme – according to specific page templates. Changing the body ids allowed us style them differently in our stylesheet. This is just one of many possibilities in displaying content (or in our case – style) by using WordPress’ conditional tags. Check out the demo using the code above from this link. Happy Coding!