Replace your query_posts() function (in my case):

query_posts("posts_per_page=5");

With:

$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("posts_per_page=5&paged=$page");

More Info: http://wordpress.org/support/topic/posts_nav_link-now-wont-show-up

$(function() {
	var loadUrl = "page.php";
	function showValues() {
		var str = $("form").serialize();
		$("#updatethiselement").load(loadUrl, str);
	}
	$("input[name='color']:radio").change(showValues);
});

More Info: http://api.jquery.com/serialize/

I made a really simple script for some standard jQuery tabs using CSS3 to make the tabs rounded with a gradient, no images involved.

The HTML:

The tab names are generated from the <h2>’s. The only noteworthy thing here is the additional wrapper, this is used to stop the tab container collapsing to 0 height inbetween when the old tab is hidden and the new tab shown, there is a split-second where there is no tab being displayed so the height would skip momentarily on transition. The extra wrapper gets given the height of the old tab temporarily (in the JavaScript) until the new tab is ready then the height attribute is removed, so there is no point in time where the container collapses. There may be a better solution to this, it’s just the first thing I came up with.

<div id="tabs">
	<div id="tabWrapper"><!-- this wrapper needed to stop border flickering -->
		<div class="tab">
			<h2>Tab 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id magna lorem. Ut scelerisque, lacus eu laoreet molestie, diam ante egestas nunc, vel ultricies enim velit sit amet leo. Donec diam quam, semper convallis fringilla sed.</p>
		</div>
		<div class="tab">
			<h2>Tab 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id magna lorem. Ut scelerisque, lacus eu laoreet molestie, diam ante egestas nunc, vel ultricies enim velit sit amet leo. Donec diam quam, semper convallis fringilla sed.</p>
		</div>
	</div><!-- end of #tabWrapper -->
</div><!-- end of #tabs -->

The rounded tabs and gradients aren’t supported on IE8 and lower, so the tabs turn into squares with a solid background color, if JavaScript is disabled the tabs are not generated and all the content is displayed, as intended.

I decided to make a jQuery image slider however I went down a few blind alleys logic-wise before settling on the method I used, I’ll explain how I ended up coding it and the problems I had with some other ways I tried.

The Logic

Originally my thinking was to loop through the slides and run a function on each of them which handled fading the image in, moving the text area in and then fading the slide out. However this method caused me several headaches involving the setTimeout() function which I’ll talk about in more detail later. Instead I decided to seperate the slide transitions into different functions which call each other manually and just use a global variable as a counter, so no ‘for next’ or ‘.each()’ as the main looping mechanism.

There are 4 main parts to understand:
1. Navigation creation loop
2. Navigation onClick handler
3. fadeSlideIn() function
4. fadeSlideOut() function

1. Navigation creation loop

We want to create a clickable icon for each slide that exists that moves the slider to the selected slide. So we do this by finding out how many slides there are then creating the same amount of list items with unique ID’s we can reference if they are clicked on:

	// create slider navigation
	if (settings.navigation == true) {
		for (i = 0; i < slide.length; i++) {
			$('#sliderNav ul').append('<li></li>');
			$('#sliderNav ul li:last').attr('id', 'navSlide' + i);
		}
	} else {
		$('#sliderNav').css('display', 'none');
		$('#slider').css('height', '300px');
	}

2. Navigation onClick handler

If a user clicks on any of the navigation icons we want the slider to stop moving, fade the current image out and fade in the image that they clicked on. So the only two things to worry about here are stopping any animations that are queued up already and passing the fade in function the value of which nav item was clicked.

	// slider navigation onclick handler (move to selected slide, turn off auto sliding)
	$('#sliderNav ul li').click(function() {
		settings.autoplay = false;
		// cancel all queued animations
		clearTimeout(slidequeue);
		navClicked = $(this).attr('id');
		navClicked = navClicked.substr(navClicked.length - 1);
		fadeSlideOut();
		setTimeout(function(){fadeSlideIn(navClicked)}, 400);
	});

clearTimeout(slidequeue) is the line that removes any queued animation, look at the slidequeue variable in the fadeSlideIn() function below to understand better.

3. fadeSlideIn() function

In order to make our slider constantly loop through the images we need to perform a check to see if the counter is at the end or not, and if so we need to change it to the start. Next we find the navigation list item which corresponds to the image we are going to fade in and make that the active navigation item. Then we select the next slide and fade it in, then slide the text area up into view. Finally we use setTimeout() to call the fadeSlideOut() function after the delay we have in the settings (4 seconds by default), note that this setTimeout() call is stored in a variable so we can cancel it if needed (navigation is clicked on).

	var fadeSlideIn = function(moveTo) {
		if (currentSlide == slide.length) { // if no more slides, set counter to the first slide
			currentSlide = 0;
		}
		$('#sliderNav ul li').eq(currentSlide).addClass('activeSlide');
		slide.eq(currentSlide).fadeIn('slow');
		slide.eq(currentSlide).find('.slideText').animate({top: '-75px'}, 1500);
		slidequeue = setTimeout(fadeSlideOut, settings.delay);
	}

4. fadeSlideOut() function

In this function we almost want to do the reverse of fadeSlideIn(), first we are going to move the text area out of view, second we are going to fade the image out. After that we want to remove the active class from the corresponding navigation list item. Next we update our global counter variable to keep track of what slide we’re on and finally we make a check to see if we want to fade the next image in before calling the fadeSlideIn() function.

	var fadeSlideOut = function() {
		slide.eq(currentSlide).find('.slideText').animate({top: '0px'}, 500);
		slide.eq(currentSlide).fadeOut('slow');
		$('#sliderNav ul li').eq(currentSlide).removeClass('activeSlide');
		currentSlide = (currentSlide+1);
		// do not call next slide if nav has been clicked on
		if (settings.autoplay == true) {
			setTimeout(fadeSlideIn, 700);
		}
	}

The setTimeout() Headaches

setTimeout and loops don’t mix too well, google this a bit and you’ll see what I mean, I spent a lot of time trying to force myself down the one big loop path before finally figuring out a much easier way (at least in my head). Originally i had this as my main loop:

	$('.slide').each(function(index) {

setTimeout() doesn’t stop your script for x amount of time then do whatever you tell it to, it simply says ‘I’ll run function x in y seconds’ but carries on with the rest of the code in the meantime, so in the case of loops this can get tricky very quickly. In the example above I had all the code running inside a setTimeout() function with a delay of 4000*index (index being which iteration of the each we’re on), so essentially if there are 4 slides, we call the first slide at 0 seconds since index starts at 0, and the next at 4 seconds and so on, however we basically have 12 seconds of animation queued up as soon as the page loads with the loop completely finished running. The main issue is adding logic to this loop, instead of having the animations broken up into logical steps that happen when we want them to, everything happens all at once and is queued up for the next 12 or more seconds depending on how many slides there are, and generally just becomes a lot more difficult to manage.

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Source: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

That’s the flyer design, with St. Mary’s Lighthouse on (a local landmark).

	<?php get_header(); the_post(); ?>

After that just use the get_post_meta(); function.

	<?php echo get_post_meta($post->ID, 'custom_field_name', true); ?>

The third parameter returns either a single result as a string (when set to true), or multiple results as an array (when set to false).

More: http://codex.wordpress.org/Custom_Fields

body {
	text-align: center;
}
#divWrapper {
	width: 900px;
	margin: 0 auto;
	text-align: left;
}

// ajax initialisation function
function makeRequest(url) {
	http_request = false;
	if (window.XMLHttpRequest) { // Mozilla, Safari
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	}
	else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (!http_request) {
		alert('Cannot create an XMLHTTP instance');
		return false;
	}
	http_request.onreadystatechange = alertContents;
	http_request.open('GET', url, true);
	http_request.send(null);
}

// any other function should start with
function functionName() {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			function content here
		}
		else {
			alert('There was a problem with the request.');
		}
	}
}

And in the HTML we have to call the initialisation function and specify the url of the XML file:

<body onLoad="makeRequest('filename.xml')">

I believe I originally found this in the opera developer documentation.

function new_excerpt_more($more) {
      global $post;
      return '<a href="'. get_permalink($post->ID) . '" class="blogExcerptLink"> Read More ..</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

More: http://codex.wordpress.org/Function_Reference/the_excerpt