My slides used for the presentation can be found here.

Leveraging JQuery Masonry can help us achieve a much better layout and it’s integration in a WordPress theme is pretty easy. If you’re not familiar with this technique, jQuery masonry allows you to flow blocks of content similarly to a mason wall. It’s pretty neat and there are many great WordPress themes that incorporate it.

I’ve had the chance to work with this technique while working on the Kolke website and a few weeks ago, decided to use this approach for the Threads Gazette redesign.

To incorporate jQuery Masonry in your site, you’ll need to do the following:

1. Download the jQuery script file on their website and insert it in your theme. I personally like to keep all of my javaScript files in a js folder.

2. Enqueue your JQuery by using the following code in your functions.php

wp_enqueue_script('jquery');
wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.0.110526' );
wp_enqueue_script('jquery_masonry');

3. Insert your JQuery event in your header like so:

<script>
	jQuery(document).ready(function($){
    	$('#container').masonry({
      	  itemSelector: '.box',
    	  });
  	});
</script>

4. Now that you have your jQuery set up, all that’s left is your template and css.

On the threads gazette website, I’ve set up my loop in the index.php and archive.php as follows:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <div class="box">
	<a href="<?php the_permalink() ?>" rel="bookmark">

	<?php if (has_post_thumbnail()) {
		the_post_thumbnail('thumbnail');
	}?>
	<h2><?php the_title(); ?></h2></a>

	</div>

<?php endwhile; endif; ?>

5. A few styles are added to the box class:

.box {
	float:left;
	width: 220px;
	padding:5px;
	margin:0 10px 10px 0;
	background:#f1f1f1;
}
.box img {
	max-width: 220px;
	margin:0 auto 0 auto;
display:block;
text-align:center;

 }
.box h2 {
	font-size:14px;
	line-height:18px;
	margin-bottom:5px;
}

And voila. My boxes now flow beautifully.

If you’re curious about how this all works but would like to do a bit more investigating, check out WP Shower’s Imbalance 2 theme. You can view the demo and download the free theme.

Drew specifically talks about Perch. I’ve never worked with Perch or any CMS other than WordPress, so perhaps his article is spot on. But when developing WordPress sites, I favour developing in a subfolder on the client’s server.

If the client has an existing site, I create a new subfolder, set up a fresh installation of WordPress, including a database and start working there. I’m a big fan of the BackWPup plugin and set that up during development as well, that way there’s a backup of the theme and database if anything goes wrong.

When it’s time to go live, WordPress provides a simple step to give WordPress it’s own directory. No files but two need to be moved to the root directory and WordPress takes care of the urls. So there’s no danger or messing about with links and losing any page relationships.

By working on a temporary server, I’ve learned the hard way that no two servers are the same. Just last week, I proceeded to set up WordPress on a client’s hosting provider only to find out that they are running a lower version of PHP than required. I’m glad I found that out sooner rather than prior to launching. Now the client has time to look into new hosting.

Additionally, you might not believe this, but clients sometimes disappear and never provide copy. Gasp! Shocking I know. This happens to me at least once a year. I set up the site, make sure everything is ready to go, give the keys to the client and then wait until they tell me they are ready to go live and everything goes quiet. By having them on a subfolder on their live server, the ball is in the court and I don’t have to maintain a temporary site on my server.

I build on average 50 WordPress sites a year and this is my workflow. It makes sense when working with WordPress. What are your thoughts?

I’m not sure what I was thinking when I put all of the material on a usb stick. Turns out, all but one 50 attendees were either on an iPad or an old school notepad. The material should be shared with everyone anyway, so I thought I would summarize it here.

The theme used as the basis of all of my work is what I call the BLM basic starter theme and can be downloaded on github.

Using this theme, I striped it down a bit more to create a portfolio which you can view at portfolio-demo.

This portfolio contains two sliders and I’ve split them into two tutorials.

Part 1: Tutorial – Downloads

Part 1 – Addendum: Tutorial

Part 2: Tutorial – Downloads

As mentioned yesterday, these series of tutorial were put together as part of my teaching material. I teach a 12 week WordPress class at Langara and this material would be covered most likely in week 6 or 7 depending on the students.

One slider uses wp_get_attachement_image() while the other uses custom post types allowing to demonstrate both techniques.

The slider used is Nathan Searles Slides which is very good. Another slider to look at is Chris Coyier’s Anything slider. If you are looking to insert a video in your slider, he provides an example.

Finally for those of you who want to go responsive, have a look at Flex slider and go ahead, re-size your browser, you know you want to.

Have a look at these resources, play around and let me know if you have any questions. I’d be more than happy to help.

The wp_get_attachement_image function() is great if you want to create a slider out of one post and multiple attachments. For example, portfolio pieces would fall in that category.
But what if instead you wanted a slider to feature multiple posts, with one image each, which would link to different pages? The slider itself would work the same way, but you’ll need to set your back-end a bit differently and use a different loop in your template.

This tutorial will show you how this can be done using a custom post type. Here’s a sneak peek at the demo site. The files used to create the theme as well as the slider snippet can be downloaded here.

This demo site is fairly simple. The front page template uses custom post types to build the slider.  The portfolio on the other hand links to a single.php template which also uses the same jQuery slider, but the images fade in and out. Our previous tutorial covered the necessary steps to build that. So let’s look how we can set up that front page.

Step 1: Create your Custom Post Type (CPT)

Our front page will display a slider displaying an image, title, brief content and a link to one of our portfolio pieces. This type of slider would be used to display “Featured” portfolio pieces. So let’s called our CPT “Feature”.

Custom post types can easily be added to any theme by updating our functions.php file. If you haven’t played around with CPTs yet, I would encourage you to read Justin’s article.

To create our CPT, let’s update our functions.php with the following:

// Custom Post types for Feature project on home page
	   add_action('init', 'create_feature');
	     function create_feature() {
	       $feature_args = array(
	          'labels' => array(
	           'name' => __( 'Feature Project' ),
	           'singular_name' => __( 'Feature Project' ),
	           'add_new' => __( 'Add New Feature Project' ),
	           'add_new_item' => __( 'Add New Feature Project' ),
	           'edit_item' => __( 'Edit Feature Project' ),
	           'new_item' => __( 'Add New Feature Project' ),
	           'view_item' => __( 'View Feature Project' ),
	           'search_items' => __( 'Search Feature Project' ),
	           'not_found' => __( 'No feature project found' ),
	           'not_found_in_trash' => __( 'No feature project found in trash' )
	         ),
	       'public' => true,
	       'show_ui' => true,
	       'capability_type' => 'post',
	       'hierarchical' => false,
	       'rewrite' => true,
	       'menu_position' => 20,
	       'supports' => array('title', 'editor', 'thumbnail')
	     );
	  register_post_type('feature',$feature_args);
	}
	add_filter("manage_feature_edit_columns", "feature_edit_columns");

	function feature_edit_columns($feature_columns){
	   $feature_columns = array(
	      "cb" => "<input type=\"checkbox\" />",
	      "title" => "Title",
	   );
	  return $feature_columns;
	}

	//Add Meta Boxes
	//http://wp.tutsplus.com/tutorials/plugins/how-to-create-custom-wordpress-writemeta-boxes/

	add_action( 'add_meta_boxes', 'cd_meta_box_add' );
	function cd_meta_box_add()
	{
		add_meta_box( 'my-meta-box-id', 'Link to Project', 'cd_meta_box_cb', 'feature', 'normal', 'high' );
	}

	function cd_meta_box_cb( $post )
	{
		$url = get_post_meta($post->ID, 'url', true);
		wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?>

		<p>
			<label for="url">Project url</label>
			<input type="text" name="url" id="url" value="<?php echo $url; ?>" style="width:350px" />
		</p>

		<?php
	}

	add_action( 'save_post', 'cd_meta_box_save' );
	function cd_meta_box_save( $post_id )
	{
		// Bail if we're doing an auto save
		if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

		// if our nonce isn't there, or we can't verify it, bail
		if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

		// if our current user can't edit this post, bail
		if( !current_user_can( 'edit_post' ) ) return;

		// now we can actually save the data
		$allowed = array(
			'a' => array( // on allow a tags
				'href' => array() // and those anchors can only have href attribute
			)
		);

		// Probably a good idea to make sure your data is set
		if( isset( $_POST['url'] ) )
			update_post_meta( $post_id, 'url', wp_kses( $_POST['url'], $allowed ) );
	}

Whoah! That’s a lot of code. But don’t let that scare you. Once the functions.php file updated, a new tab called Feature Project will appear as part of your sidebar. You’ll notice that I’ve also included a meta box. We could have used custom fields, but meta boxes are prettier and fairly easy to use. Here’s a great tutorial to get you started with Meta boxes.

Step 2: Populate your Feature Projects

Now that your CPT is ready, you can start setting up your projects. Go ahead and set up two or more projects by:

1. Giving each a title
2. Entering a few lines of content
3. Uploading one image per project and set it as a featured image
4. Inserting a link to one a page on your blog or an external site (optional)

For the purpose of this demo, I’ve set my image slider to be 940px x 280px. The images appearing on the left are 640px x 280px.

Step 3: Enqueue your jQuery

Step 3 of our previous tutorial is exactly the same here. You’ll need to update your functions.php as follows:

function blm_init_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'slides', get_template_directory_uri().'/js/slides.min.jquery.js', array( 'jquery' ) );

}
add_action('wp_enqueue_scripts', 'blm_init_method');

Step 4: Update your header.php

In order to get the slider to work, you’ll need to add the following content about your </head> tag.

<script type="text/javascript">
	jQuery(document).ready(function($){
		$('#slides').slides({
			preload: true,
			preloadImage: '<?php echo get_template_directory_uri(); ?>/images/loading.gif',
			play: 5000,
			pause: 2500,
			hoverPause: true,
			generatePagination: false

		});
	});
</script>

Step 5: Display your CPT

Next, we need to pull the content out and display it. For the purpose of this demo, I’ve created a front-page.php which as the title says, I’m using on my home page.

In order to display the content, I’ll use the WP_query function inside like so:

<section id="featured-slider">
	<div id="slides">
		<div class="slides_container">

			<?php
				$loop = new WP_Query(array('post_type' => 'feature', 'posts_per_page' => -1, 'orderby'=> 'ASC'));
			?>
			<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

				<div class="slide">
					<?php $url = get_post_meta($post->ID, "url", true);
					if($url!='') {
						echo '<a href="'.$url.'">';
						echo the_post_thumbnail('full');
						echo '</a>';
					} else {
						echo the_post_thumbnail('full');
					} ?>
					<div class="caption">
						<h5><?php the_title(); ?></h5>
						<?php the_content();?>
					</div>
				</div>

			<?php endwhile; ?>

			<?php wp_reset_query(); ?>

		</div>
		<a href="#" class="prev">prev</a>
		<a href="#" class="next">next</a>
	</div>
</section>

This loop, will look at all of the post saved as “feature” and loops through all of them (posts_per_page’ => -1) and order them. It then spits out the content and links the image if the meta box has been filled. All of this is inserted inside various div tags which can now be manipulated with css.

Last step: Update your stylesheet

As mentioned above, the next step requires us to add some css. The following is what we’ve used on our demo site:

/* Home page featured slider
-----------------------------------------------------------*/
#featured-slider {
	float:left;
	width:940px; height:280px;
	margin:0 10px;
	position:relative;
}
#featured-slider #slides {
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
}
#featured-slider .slides_container {
	width:940px;
	overflow:hidden;
	position:relative;
	display:none;
	background:#FFF;
}
#featured-slider .slides_container div.slide {
	width:940px;
	height:280px;
	display:block;
}
#featured-slider .caption {
	z-index:500;
	position:absolute;
	top: 30px; left:670px;
	height:220px;
	width:240px;
	font-size:12px;
	line-height:16px;
	color:#000;
}
#featured-slider .caption h2 {
	font-size:18px;
	line-height:22px;
	margin-bottom:10px;
}

#featured-slider #slides .next, #slides .prev {
	position:absolute;
	top:112px;
	left:-10px;
	width:30px;
	height:37px;
	display:block;
	z-index:101;
	text-indent:-99999em;
	background: url(images/larr.gif);
}
#featured-slider #slides .next {
	left:926px;
	background: url(images/rarr.gif);
}

There you have it. An easy to use and update feature slider for your home page. I’ve provided you with the files for the theme and also the snippets that I’ve used for the slider. Feel free to download them, play and let me know how you get on.

If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.

Super easy plugin solution

The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.

Simple plugin solution

Another great plugin to try is WP Supersized. This one is a bit more complicated to use and has a lot more features, but it’s fairly straightforward. Instead of uploading images to your Media Library, images need to be uploaded to the wp-content/supersized-slides/ folder, so you will need FTP access for this. If no images are uploaded, the plugin uses a series of default images. The benefit to using this plugin, is that you could have a slideshow running as well in the background.

Theme coding solution

Both plugins mentioned above use jQuery for their resizing. This same technique can of course be used without a plugin. If you would rather not have the image editable by everyone but yourself, integrating the feature directly in your theme is the option for you.

Jon Patrick Given has provided a great code snippet which I used and incorporated on the Presentation House website.

Looking at John’s code, you can see that you’ll need to download the “easy-bg-resize” javascript file, insert it in your theme and enqueue it in your functions like so:

        //Enqueue jQuery first
	wp_enqueue_script('jquery');
        // Enqueue your jQuery resize file
	wp_enqueue_script('resize', get_template_directory_uri().'/js/jquery.ez-bg-resize.js', array( 'jquery' ), '1.0');

Next you need to update your header.php with the following:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("body").ezBgResize({
			img     : "your image path goes here",
			opacity : 1, // Opacity. 1 = 100%.  This is optional.
			center  : true // This is optional. Default is true.
		});
	});
</script>

So there you have it, 2 plugins and one code snippet for you to play with. As you’ve probably guessed, the code snippet provided above is not the only solution. Paul Jarvis recently launched a site for Angelica Xavier with a stunning background. Looking at his source code, he too, uses jQuery but a slightly different technique.

If you’ve downloaded the material, took a stab at the tutorial and wish to use this transition effect instead of a slider action, all you need to do is replace the jQuery function in your header with the following:

<script>
 jQuery(document).ready(function($){
	$('#slides').slides({
	preload: true,
	preloadImage: 'http://yourthemepath.com/images/loading.gif',
	effect: 'fade',
	play:5000,
	crossfade: true,
	fadeSpeed: 500,
	generatePagination: false
   });
 });
</script>

You also no longer need the next and previous arrows.

I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.

Step 1 – Download the slider

There are a lot of sliders out there, but my favourite is Slides by Nathan Searles. Make sure to grab a copy of it and take a look at his examples. I’ll be using his Standard slider for this tutorial.

Once you’ve downloaded the slider, make a copy of the folder called Standard. The first thing I like to do is to get the slider working with my images and my styles just like the design that was provided to me. I like to approach this as I would a puzzle. I get the slider working on my desktop on it’s own and then integrate it in my WordPress theme.

Taking a look at the index.html, we can see that there’s some stuff in there that we don’t need. We can delete the ribbon, the frame, the footer info and we’ll replace the flickr images with our own. At this stage, you’ll also want to go in the images folder, add your images and delete the ones you don’t need.

Next, we can do the same with the CSS file. What’s important here is the styles that are relevant to the slideshow. Nathan has done a great job with the css and thus you should be able to adjust any settings to ensure that the slider looks great with the images you are using. Please make sure that all of your images are the same size.

Once you have your slider working and it looks great, we can integrate the code into our WordPress theme.

Step 2 – Setting up your WordPress page

Setting up this page is actually easier than you might think. Ideally what we want is a page with a title a paragraph of text and above it the slider. You might not even want any text. Who knows, the world is your oyster.

So let’s go in the admin and create a page call it home or whatever you like. Add your content as you would any other page and upload the images that you want to display in the slider. It’s very important to upload the images this way and not via the Media Library. When uploading images while writing a page or post, the images automatically get “attached” to it, and that’s what we need to create the slider. The same would be true if you wanted to insert a gallery.

Step 3 – Include jQuery the right way

Your working slider example has a few lines on Javascript in the header. We’ll need to set this up in our WordPress theme by updating our functions.php and header.php template.

In your slider example, you’ll see that Nathan has included the following three lines of code in his head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script> 

You might be tempted to add these directly to your header.php, but best practice recommends that you enqueue your jQuery.

To do this, you’ll need to add the following to your functions.php.

function blm_init_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'easing', get_template_directory_uri().'/js/jquery.easing.js', array( 'jquery' ), '1.3' );
    wp_enqueue_script( 'slides', get_template_directory_uri().'/js/slides.min.jquery.js', array( 'jquery', 'easing' ) );

}
add_action('wp_enqueue_scripts', 'blm_init_method'); 

You’ll notice here that my function, uses my prefix blm. Feel free to change it to yours.

You will also notice that I am using WordPress’s built-in jQuery and not the one from Google’s library (again, best practice) and I’ve also grabbed a copy of both js files and added them to my theme. You’ll need to do the same thing.

Now here’s a trick: Once you’ve updated your functions.php and uploaded the js files to your server, take a look at your site and look at the source code, Now click on the path of all three js files. You should be able to see the jQuery. If you get to a 404 page, make sure that your paths are ok and the files are in the right folders. Without these, you’re slider will never work and you will be pulling your hair out.

Step 4 – Update your CSS

When you fiddled with the code for the Standard slider, you changed some css. Grab all that code and insert it in your theme stylesheet. Make sure to double check the path to the images and upload the images you need to your theme folder.

Nathan also has a few more lines of jQuery in his header. We’ll need to add these to our header.php and make a very subtle change like so:

<script>
 jQuery(document).ready(function($){
	$('#slides').slides({
	preload: true,
	preloadImage: '<?php echo get_template_directory_uri(); ?>/images/loading.gif',
	play: 5000,
	pause: 2500,
	hoverPause: true

   });
 });
</script>

You’ll notice that jQuery(document) is used instead of $. This needs to be in place for the jQuery included in WordPress to work.
This snippet of code needs to be added right below the .

Step 5 – Build the slider using wp_get_attachment_image

Now that we’ve got everything in place, what we need to do, is create a template for our home page. I normally like to use a template called front-page.php, but you could create a custom template or just use the index.php and start with the following code:

<?php get_header();?>
<div id="main">
 <div id="content">
   My slider will go here
 </div>
</div>
<?php get_footer(); ?> 

Of course, you can modify this template as you need.

If we take one more look at our slider html file, you’ll notice that we need to insert the following code between the content div:

<div id="slides">
 <div class="slides_container">
   Images will go here.
 </div>
 <a href="#"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 <a href="#"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>

We’ve already uploaded our images, so what we need to go is just grab them using the following code snippet:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$args = array(
 'post_type' => 'attachment',
 'numberposts' => -1,
 'orderby'=> 'menu_order',
 'order' => 'ASC',
 'post_mime_type' => 'image',
 'post_status' => null,
 'post_parent' => $post->ID
);

$attachments = get_posts( $args );
 if ( $attachments ) {
  foreach ( $attachments as $attachment ) {
 echo wp_get_attachment_image($attachment->ID , 'full' );
 }
}
endwhile; endif; ?>

So our final template looks like so:

<?php get_header(); ?>
<div id="slides">
 <div class="slides_container">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$args = array(
 'post_type' => 'attachment',
 'numberposts' => -1,
 'orderby'=> 'menu_order',
 'order' => 'ASC',
 'post_mime_type' => 'image',
 'post_status' => null,
 'post_parent' => $post->ID
);

 $attachments = get_posts( $args );
  if ( $attachments ) {
   foreach ( $attachments as $attachment ) {
  echo wp_get_attachment_image($attachment->ID , 'full' );
 }
}
endwhile; endif; ?>
</div>
 <a href="#"><img src="<?php bloginfo('template_directory')?>/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 <a href="#"><img src="<?php bloginfo('template_directory')?>/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>

<?php get_footer(); ?>

This code will grab all of the images attached to the post and insert them in the order you’ve specified. The CSS and the JQuery will then transform these into a slider. If you want, you could also display your content and title below.

Feel free to download all of the files that I’ve used for this tutorial and please let me know if you run into any issues.

First, avoid doing a domain transfer when you’re very close to your renewal date. Give yourself lots of time, just in case something goes awry. A month is great – two weeks should be doable. A week is really cutting it close.

Be sure the domain is unlocked before starting the process, or your transfer will be denied. Domains are usually kept locked to prevent unauthorized transfers, so when you’re ready to initiate a transfer make sure to go into your domain control panel and unlock it.

Make sure the contact email in your current account is up-to-date. Much of the transfer process relies on email notifications at every step, and if you’re not getting notifications at the right address, it throws a huge wrench into the works. On the flip side, some registrars will deny a transfer if you’ve changed any registrant details within a few months of renewal, so be sure to look through your registrar’s transfer FAQ before changing any contact information.

For most types of domains, you will need a special code from your current registrar. Because nothing is simple in the world of domain transfers, the code goes by many different names: EPP, authorization code, AuthInfo code, transfer key, transfer secret, and so on. Not only that, but simply locating it may not be obvious! You may have to look around for a while to find it – and take note that some registrars provide it directly in your control panel, while others will only email it to you. Again, if you get stuck, your registrar’s transfer FAQ may provide clues.

Keep an eye on your email after you’ve submitted the transfer request and when you get an email from your new registrar, be sure to choose the option to accept the transfer. You should also get an email from your old registrar and/or see a note in your control panel that a transfer is pending, at which point you can manually approve the transfer by logging into your control panel and clicking in the right place. If you don’t complete both these steps, your transfer will be either delayed by several days or blocked entirely.

Make a note of any services you may be using from your current registrar, such as domain parking, forwarding, email, custom DNS, or others. You will need to ensure that your new registrar offers the same services, and then once the transfer goes through, set up the equivalent services again. Be aware that there may be a time lag between when a service stops at your old registrar and when you can re-start it at your new registrar.

I know it seems like a lot to remember. Once you’ve done this a few times, it does go faster, but it’s always a bit of a rigamarole. Good luck to all in your domain-transfer adventures!

For more great web design tips make sure you subscribe to Zoonini’s newsletter or browse through back issues.