Mimicking Apple’s Address Book for the Web

Nov 28th, 2008 in Screencasts by Harley

As we all know, WordPress is so extensive that you can use it for nearly anything. There are even articles on sites with crazy titles such as 101 alternative uses for WordPress. So I thought, hey, why not? I bet a lot of people want to create their own Web Apps, and essentially WordPress can do that for you. In this video tutorial, we're going to make an online Address Book.

Author: Harley

I'm Harley! I like to call myself a jQueryfied WordPress designer! What a mouthful, huh? I'm based in Australia and have been working with (X)HTML/CSS, Flash, Illustrator and Photoshop for over 3 years, and have found a now year and a half old obsession with WordPress and jQuery. Be sure to get some more info on me on my site!

*Editor's Note: We have a special treat for you today. This tutorial was originally intended to be part of our NETTUTS+ program. However, the program has taken a big longer to roll out than we originally anticipated. Don't worry, it's still coming! Until then, enjoy this one on us!

This tutorial was a massive undertaking for Harley. So please, if you don't mind, take a moment to Digg it! Thank you!

Read our interview with Harley!

Preface

This Address Book is going to have the works. Ajax loading, conditional admin stuff, the shiz. This, unfortunately means we need to meet a few requirements, a few thing the theme needs. A copy of jQuery to start with would be handy. On top of this, the theme needs a few images! Download this zip, that you'll later expand into your theme directory. Finally, a copy of the Live Search Plugin that I've edited slightly for CSS reasons. Original here

And of course, as always, you'll need a WordPress blog running that you've got access to. There are tutorials on running Wordpress locally here for Windows, and here for OS X. Due to the nature of the post content, I highly reccomend starting a fresh WordPress directory.

So you should have: jQuery, images, live search plugin, and a WordPress directory. Super.

Step 1 - Organizing files.

Lets start out by creating the necessary files. In the wp-content/themes directory of your WordPress blog, create a folder called 'addressBook'. Add the jQuery file and images into this new folder. The 'live-search-popup' goes in the wp-content/plugins folder, for obvious reasons.

Now that the downloaded files are in place, we need to create a few more files. In the theme directory, create: addressBook.js, index.php, single.php and style.css. While we're dealing with these files, we'll create the theme meta. Open style.css and paste + edit this:

/*  
Theme Name: AddressBook
Theme URI: http://net.tutsplus.com/
Description: Using WordPress as an Address Book
Version: 1.0
Author: Harley Alexander
Author URI: http://www.baffleinc.com/
*/

Now you've created some basic information for WordPress to recognise, navigate to the Theme selection page (Design>Themes) in wp-admin, and click the new AddressBook block. For now (if you're using a version of WP that shows a preview before activation) It'll be blank. Don't worry though! Activate it!

Step 2 - Post Content

Now all the files are there and organized, we can move on to creating some sample posts for us. The reason this method works is because WordPress allows for custom fields. Custom fields are just that - custom content area to fill in. A post content field is different to the tags field as custom fields are different to the category fields. The reason this is so fantastic is because it means we can attach separate bits of information to a post without having to painfully fish them out of the content. Navigate to the Dashboard, and write a new post.

We'll be using:

• Title as the name of the person
• Post content as the notes for the person
• Categories as group of the person (work/home related)
• Custom fields For the home, work, and mobile phones. Website and email, address and finally an image of them.

Now the custom fields aren't as daunting as they sound you have to give them a name (key) and some content (value). The cool thing about them is, is that once they've been used once, you can re-select them from a drop down menu so you don't confuse names by accident. Also, not every custom field is necessary, so you can leave some blank if you don't have that specific information (later on when we get theming we'll actually create an edit/add link.

After you've added a couple of dummy posts, we can move onto displaying the content via template files.

Step 3 - WordPress Code

This address book (surprise surprise) will be modeled off the Apple Address Book:

Blurred for obvious reasons, that picture also displays which sections are which, so it's easier to visualize whilst coding! We'll start with index.php.

index.php

This page is what everybody will first see when they come to your Address Book, so it's gotta be informational. Like the preview above, all pages will have the same layout - Single.php will have the same look and feel, as to create that never re-loaded effect. This is just for JS-less browsers, so that it degrades 100% gracefully. I mean 100%. The jQuery in this is just to speed things up the loading of the content, and (eventually) the live search function. The Address Book still needs to work without these commodities though!

To start off a WordPress theme, I always have some basic header information.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php wp_head(); ?>
</head>
<body>

</body>
</html>

Change whats between the title tags to simply 'Address Book'. Underneath the stylesheet link, add the following code, to bring in the eventual JavaScript code:

<script src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/addressBook.js" type="text/javascript"></script>

Since all the header information is done, we can move onto coding together a structured layout. In between the body tags, add this:

<div id="wrapper">
    <div id="header">
    
    	<!-- Header things, like the searchform etc go here -->
    
    </div>
    <div id="groups">
    
    	<!-- Eventually the categories will go here -->
    
    </div>
    <div id="mainSection">
    
    	<!-- This is where the list of names sit -->
    
    </div>
    <div id="loadArea">
    
    	<!-- This is where the full post contents go -->
    
    </div>
    <div id="footer">
    
    	<!-- Some admin stuff and total card count go here -->
    
    </div>
</div>

These sections will contain all the post loops. Obviously. Let's start with the header. It consists of a h1 for the title, and the searchform. Replace the comment:

<h1><span>Address Book</span></h1>
<div id="searchform">
<form action="<?php bloginfo('url'); ?>" method="get" >
    <p><input type="submit" id="searchsubmit" value="" />
    <input type="text" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>" /></p>
</form>
</div>

The search form isn't actually the plugin yet. This is because we only need the results, right? So we use a different function in the mainSection that overlays the original list to appear as though it's filtering through all the data. The span wrapping the h1 text is so we can add a small favicon-esque icon to the left of.

The groups section is even easier and shorter.

<h3>Groups</h3>
<ul>
	<li><a href="<?php bloginfo('url'); ?>">All</a></li>
	<?php wp_list_categories('exclude=1&title_li='); ?>
</ul>

The mainSection, or where the name list goes, consists of the loop and the live search results that overlay this list. The exclude parameter means it doesn't display 'uncategorized' because an empty category is annoying!

<h3>Name</h3>
<ul id="posts">
    <?php if(have_posts()) : query_posts('showposts=9999'); while(have_posts()) : the_post(); ?>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; endif; ?>
</ul>
<?php if(function_exists('livesearchpopup_resultsbox')){livesearchpopup_resultsbox('160px');} ?>

Noticed I've compacted the loop to a very small amount. Usually this would be bad practice, but for this application of WordPress it's not actually necessary. The query_posts forces the loop to display 9999 posts instead of the Dashboard set default. The function is included in a safe way, only If the plugin is activated. Which we'll do now. Open the plugins section of the Dashboard, and activate the live-search-popup plugin. If it's not there then you haven't downloaded and installed the plugin. Install it now.

The loadArea on the front page is essentially empty, so we just need an explanitory title!

<h2>Select an entry to view!</h2>

Finally the footer. This block has the most amount of code, and is the first encounter with conditional logged in status! I'll explain bit by bit.

<?php if($user_ID) : ?>
	<a href="<?php bloginfo('url'); ?>/wp-admin/post-new.php" title="Add Entry" class="addEntry"><img src="<?php bloginfo('template_directory'); ?>/images/plus.png" alt="" /></a>
    <a href="<?php bloginfo('url'); ?>/wp-admin/post.php?action=edit&post=<?php echo $post->ID; ?>" title="Edit this card" class="editButton"><img src="<?php bloginfo('template_directory'); ?>/images/editButton.png" alt="" /></a>
<?php endif; ?>

<span id="totCards"><?php $totcards = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");
if (0 < $totcards) $totcards = number_format($totcards); echo $totcards.' cards'; ?></span>

So the first two anchor tags are conditional on $user_ID. This variable checks if a user is logged in (in this case that has administrating privileges), then displays some add and edit buttons. The weird SQL php at the end gets the total number of Contact Cards, so it displays just like Apple Address Book.

That's it for index! Next up we'll be working on single.php, so open it up and we'll get started!

single.php

index.php should still be open, so because essentially single.php is the same layout, copy ALL the index.php code over to single.php, and save it.

Because it's single.php, by default the loop will only display one post. To counter this, we've added a query_posts function in index.php already.

Single.php differs from the index mainly with the code inbetween the loadArea. Instead of the h2, the loop will fill this in.

<?php if(have_posts()) : 
query_posts($query_string);
while(have_posts()) : the_post(); ?>
    <div id="inner-content" style="overflow: auto;">
    
    	<-- vast loop goes here. VAST. -->
    
    </div>
< endwhile; endif; ?>

The Loop content, from here on consists of blocks of PHP, that are relatively identical (bar the image and the notes). The $query_string is a short and dirty way of reverting the loop's parameters back to displaying one post for single.php. The post starts with an image.

<?php if((get_post_meta($post->ID,'entryImg')) != ''){ ?>
	<img src="<?php echo get_post_meta($post->ID, 'entryImg', true); ?>" alt="" id="entryImg" />
<?php } else { ?>
    <?php if ( $user_ID ) : ?>
    	<a href="<?php bloginfo('url'); ?>/wp-admin/post.php?action=edit&post=<?php echo $post->ID; ?>#meta-62"><img src="<?php bloginfo('template_directory'); ?>/images/emptyEntryImgAdd.png" alt="" id="entryImg" /></a>
    <?php else : ?>
    	<img src="<?php bloginfo('template_directory'); ?>/images/emptyEntryImg.png" alt="" id="entryImg" />
    <?php endif; ?>
<?php } ?>

Crazy code! The first 'if' checks if that Custom Field has any content, by comparing it to the value of nothing. The then nestled 'if' statement checks to see if the admin is logged in, and if so provides a link to edit the custom field. The weird one (...&post=<?php echo $post->ID; ?>#meta-62). By using the post ID we have a dynamically changing URL that stays 100% relevant! The end of the URL will be different for you! I have a DOM selector, but you can use firebug to find out the IDs of the custom field's divs. The div containing the entryImg value for me was #meta-62.

We need to add a small title too!

<h2><?php the_title(); ?></h2>

Easy peasy. Next is the first 'block'. All these blocks are relatively the same. In fact, after the first initial email and website, they're just static characters.

Email/Website Blocks

<?php if((get_post_meta($post->ID,'email')) != ''){ ?>
	<p>
		<strong>Email:</strong> <a href="mailto:<?php echo get_post_meta($post->ID, 'email', true); ?>"><?php echo get_post_meta($post->ID, 'email', true); ?></a>
		<?php if ($user_ID) : ?><a class="edit-link" href="<?php bloginfo('url'); ?>/wp-admin/post.php?action=edit&post=<?php echo $post->ID; ?>#meta-56">Remove or Edit</a>
		<?php else : echo ''; endif; ?>
	</p>
<?php } else { edit_post_link('<span class="add">Email</span>'); } ?>

Heavy use of custom fields... The if statement checks if the custom field has any content, by checking it against '' or nothing. So if it doesn't equal nothing (therefore has content), display it. Else it doesn't have any content, display an add/edit link.

Right under this, copy that block and change the 'email' in ALL the custom field tags to 'website', and kill the 'mailto:' in the href value. Don't forget to change the #meta-## link! Mine was 57 for the website field. Don't forget the strong tag or the edit post value either!

<?php if((get_post_meta($post->ID,'website')) != ''){ ?>
	<p>
		<strong>Email:</strong> <a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>
		<?php if ($user_ID) : ?><a class="edit-link" href="<?php bloginfo('url'); ?>/wp-admin/post.php?action=edit&post=<?php echo $post->ID; ?>#meta-57">Remove or Edit</a>
		<?php else : echo ''; endif; ?>
	</p>
<?php } else { edit_post_link('<span class="add">Website</span>'); } ?>

Phones/Address Blocks

All these are now the same. You only need to change four things per block. The custom field names, the strong tag, the edit link's href value and content. Here is the first block:

<?php if((get_post_meta($post->ID,'phone-home')) != ''){ ?>
	<p>
		<strong>Home Phone:</strong> <?php echo get_post_meta($post->ID, 'phone-home', true); ?>
		<?php if ($user_ID) : ?><a class="edit-link" href="<?php bloginfo('url'); ?>/wp-admin/post.php?action=edit&post=<?php echo $post->ID; ?>#meta-66">Remove or Edit</a>
		<?php else : echo ''; endif; ?>
	</p>
<?php } else { edit_post_link('<span class="add">Home Phone</span>'); } ?>

Go ahead and duplicate this four times, once for each custom field. You should have one of these blocks for: Home phone, Work phone, Mobile phone, and address.

Notes Block

Finally, we need to display some notes.

<p class="notes"><strong>Note:</strong> <?php the_content(); ?></p>

Awesome! That's all the WordPress code needed! Note how the Work Phone is a link. Later we'll style this in CSS to have a plus icon. Currently it should look like this:

Step 4 - CSS

CSS makes the site look pretty! Let's jump right into it. We need to start off with a dirty reset, body defenition and the background of the wrapper. WrapperBg.png is a screenshot of the actual Apple Address Book cleared out. We add all the stuff we need on top.

*{
	margin: 0;
	padding: 0;
	outline: 0;
}

body{
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

#wrapper{

	width: 621px;
	height: 370px;
	margin: 50px auto;
	padding: 24px 40px 55px 40px;
	background: url(images/wrapperBg.png);
}

Already, if you look at the preview, the window shape is already there. Next up, we need to figure out the header. Luckily, I've done it for you! Yay!

#header{
	text-align: center;
	height: 55px;
}

#header h1{
	font-size: 12px;
	font-weight: normal;
	padding: 5px;
}

#header h1 span{
	background: url(images/h1Spanbg.png) no-repeat left;
	padding-left: 20px;
}

#searchform{
	float: right;
	margin-right: 10px;
	background: url(images/searchBg.png) no-repeat left 1px;
	width: 135px;
	height: 22px;
}

#s{
	background: 0;
	border: 0;
	line-height: 20px;
	width: 110px;
}

#searchsubmit{
	background: 0;
	border: 0;
	height: 20px;
	width: 15px;
	margin: 0;
}

Fortunately, thats all thats needed to make the header 100% done.

Now we'll style the groups section, which is actually the categories:

#wrapper h3{
	background: url(images/h3bg.png) repeat-x;
	height: 16px;
	font-size: 10px;
	text-align: center;
	line-height: 16px;
	font-weight: normal;
	border-right: 1px solid gray;
}

#groups{
	width: 161px;
	float: left;
}

#groups li a{
	background: url(images/groupsBg.png) no-repeat 10px 4px;
}

#groups li a:hover{
	background: url(images/groupsBg.png) no-repeat 10px 4px gray;
}

#groups li, #mainSection li{
	padding: 0;
	font-size: 12px;
	overflow: hidden;
}

ul li a{
	text-decoration: none;
	color: black;
	padding: 3px 0 3px 30px;
	margin: 0;
	display: block;
}

And then the main section to slip in beside the group section:

#mainSection{
	width: 160px;
	float: left;
	position: relative;
}

#mainSection li a{
	background: url(images/h1SpanBg.png) no-repeat 10px 5px !IMPORTANT;
}

#mainSection li a:hover{
	background: url(images/h1SpanBg.png) no-repeat 10px 5px gray !IMPORTANT;
}

#livesearchpopup_box{
	position: absolute;
	top: 0;
	left: 0;
	width: 158px !IMPORTANT;
	height: 264px;
	border: 0;
}

And with that, everything is pushed into it's respective areas, except the footer. If you search, the overlay will go underneath the posts that are already there. So we need to position them absolutely. The last selector above does this.

The load area still needs to be styled. To see this fully in action, go to a single page by clicking on a contact. Before it'll look like this:

#loadArea{
	position: relative;
	overflow: auto;
	height: 280px;
	float: left;
	width: 279px;
	padding: 10px 10px 0 11px;
	font-size: 10px;
}

#loadArea strong{
	color: gray;
}

#loadArea #entryImg{
	float: left;
	width: 48px;
	padding-right: 10px;
}

#loadArea p{
	line-height: 16px;
	margin-bottom: 1em;
	clear: both;
}

#loadArea a{
	text-decoration: none;
	color: gray;
}

#loadArea span.add{
	background: url(images/add.png) no-repeat right center;
	padding: 3px 20px 1em;
	display: block;
	text-align: right;
	margin-top: 1em;
}

#loadArea a.edit-link{
	display: block;
	float: right;
	line-height: 16px;
	background: url(images/delete.png) no-repeat right 1px;
	padding: 0 20px;
}

#loadArea h2{
	font-size: 16px;
	height: 55px;
}

p.notes{
	border-top: 1px solid gray;
}

#load{
	background: url(images/ajaxLoader.gif);
	width: 32px;
	height: 32px;
	display: block;
	margin: 0 auto;
	position: absolute;
	left: 134px;
	top: 129px;
}

Log into the wp-admin, and check how it looks on a single page! The #load is for when we get some jQuery happening. But because it's appended within the jQuery, it doesn't do any harm to have it in here.

The last bit off the CSS section is to fix up the footer. Some simple CSS to do this. The only interesting thing here is that you have to float the number of cards to the right, as if you positioned it from the left it'd look weird when you were logged in.

#footer{
	height: 20px;
	line-height: 18px;
	font-size: 11px;
	padding-top: 3px;
	clear: both;
}

#footer #totCards{
	float: right;
	margin-right: 130px;
	text-shadow: #fff 1px 1px 2px;
}

#footer a.addEntry{
	margin-left: 165px;
}

#footer a.editButton{
	margin-left: 145px;
}

The CSS is now all done! That means, that the site should now be fully functional in a browser without jQuery, essentially finished. But here at NETTUTS, we like to go the extra mile. So we'll work on making the contacts load with AJAX on the home page instead of reloading the page.

Now our challenge poses a few problems. The live-search-popup Plugin uses Prototype, and sadly the developer didn't consider JS library conflict. So this means we have to use a lengthened selector, and define the noConflict setting. Not hard, just a bit different.

Open addressBook.js. At the very top, we define the noConflict.

jQuery.noConflict();

This is jQuery's method of making sure all the jQuery native code is 100% tout seule, unique from all other libaries.

Now for the document ready call. As with any jQuery, you need to wrap the code in this.

jQuery(document).ready(function() {

	//jQuery Code here

});

This tutorial uses a similar method of loading to the NETTUTS tutorial How to load in and animate content with jQuery. Let's start with the event.

jQuery('#posts li a').click(function(){

	//loading code...

});

Now we need to define a variable that contains all the single.php content that differs from index.php. This is all the custom fields.

var cardContent = jQuery(this).attr('href')+' #inner-content';

As with any self respecting AJAX developer, who doesn't want to show off that they can put a loader on their content! The loader itself has nothing to do with the actual loading, it's just shown whilst the loading is in progress!

jQuery('#load').remove();
jQuery('#loadArea').append('');
jQuery('#load').fadeIn(300);

Finally, for the actual loading. These functions use the variable, and replace what was in the #loadArea div with the inner-content of single.php.

jQuery('#loadArea').fadeOut(300, loadTheContent);
		
function loadTheContent(){jQuery('#loadArea').load(cardContent,'',showNewContent());}

function showNewContent(){jQuery('#loadArea').fadeIn(600, hideLoader);}

function hideLoader(){jQuery('#load').fadeOut('normal');}

return false;

Well Done!

If you navigate to the home page now and click on one of the names, it will load automatically! It even fades in and out! I'd love for this to work on the results of the live-search-popup plugin, however it's loaded via prototype, so any jQuery applied won't work too well. Otherwise, this concludes yet another extensive way WordPress can be used to its fuller potential as... Pretty much anything!