With my humble design skills I created dalaipsum.com :

In order to solve this problem I created three custom fields, style, content left and content right. Entering the values for these is very simple in WordPress, the entry form is just below the main rich text editor. If they are missing in your version, be sure to check the Screen Options in the right upper corner.

I’ve extended the footer template to use those new custom fields:

<footer id="colophon" role="contentinfo" class="<?php echo get_post_meta(get_the_ID(), 'style', true);?>">
	<div class="secondary">
		<p><?php echo get_post_meta(get_the_ID(), 'left content', true);?><p>
	</div>
	<div class="primary">
		<div class="footer-content">
			<?php echo get_post_meta(get_the_ID(), 'right content', true);?>
		</div>
	</div>
	<div id="site-generator">
		......
</footer><!-- #colophon -->

As you can see from this code, the way to display a custom field is by <?php echo get_post_meta(get_the_ID(), ‘Field Name’, true);?>, where Field Name is the name you entered for your field.

Finally I changed the CSS and added the following lines:

footer.red .secondary{
	background-color: #e60000;
}
footer.red .primary h3{
	color: #e60000;
}

First of all I’ve used the excellent CodeIgniter Library for MailChimp API v1.3 from Wayn Hall. I’ve placed the MCAPI.php into the application/libraries folder and renamed it to Mcapi.php, and renamed the class itself to Mcapi:

<?php
class Mcapi{

On the MailChimp site I’ve collected my API Key (Account, Extras, API Keys & Authorized apps) and after creating a new mailinglist I got the list id (Lists, settings, list settings and unique id. Since these are config values, I stored them in my site’s config file in application/config/my_site.php

/*
* MailChimp Settings
*/
$config['mailchimp_key'] = 'xxxxxxxxxxxxxxxxxxxxxxx-us2';
$config['mailchimp_list_id'] = 'yyyyyyyyy';

My config file is autoloaded through application/config/autoload.php:

$autoload['config'] = array('my_site');

In my controller I’ve added a private function to handle the subscription calls

/**
* Handle subscription
* @return string
*/
private function _subscribe(){
	$success = true;
	if(!$this->input->get('firstname')){
		$message =  "No firstname provided";
		$success = false;
	}
	if($success && !$this->input->get('lastname')){
		$message =  "No lastname provided";
		$success = false;
	}
	if($success && !$this->input->get('emailaddress')){
		$message =  "No email address provided";
		$success = false;
	}
	if ($success){
		$this->load->library('Mcapi', array(
			'apikey' => $this->config->item('mailchimp_key')
		));
		if ($this->mcapi->listSubscribe($this->config->item('mailchimp_list_id'), $this->input->get('emailaddress'), array(
			'FNAME' => $this->input->get('firstname'),
			'LNAME' => $this->input->get('lastname')
		)) === true){
			//	It worked!
			$message = 'Success! Check your email to confirm sign up.';
		} else {
			$success = false;
			//	An error ocurred, return error message
			$message =  'Error: ' . $this->mcapi->errorMessage;
		}
	}
	return array('message' => $message, 'success' => $success);
}

The actual controller function itself is :

/**
 * @var dataStorage
 */
private $data;
/**
 * Handle incoming request for /soon/
 * Enter description here ...
 */
public function index()	{
	if ($this->input->is_ajax_request()){
		$result = $this->_subscribe();
		echo json_encode($result);
		exit;
	}
	$this->load->view('soon', $this->data);
}

The view contains just a HTML5 form. There are a lot of small neat little tricks you can do in HTML5 forms with placeholders and required flags. Automatic validation for email fields is done by type=”email” and is done serverside by MailChimp as well. So I skipped the regex validation of the incoming email address in the controller _subscribe() function.

<aside>
	<form method="post" id="keepmeposted" action="/soon" >
		<fieldset>
			<legend class="hidden">keepmeposted</legend>
			<label for="firstname">First name</label>
			<input name="firstname" id="firstname" placeholder="First name" required>
			<label for="lastname">Last name</label>
			<input name="lastname" id="lastname" placeholder="Last name" required>
			<label for="emailaddress">email</label>
			<input id="emailaddress" type="email" name="emailaddress" placeholder="me@everythingyouliked.com" required>
			<button>Keep me posted!</button>
		</fieldset>
	</form>
	<p id="response">
		<img src="/images/yes.png" alt="yes">Yes, we will keep you updated when we will go live!<br>
		<img src="/images/no.png" alt="no">No, we won't spam or sell your email address.
	</p>
</aside>

The form submit is handled by a small JQuery script:

$(document).ready(function() {
	$('#keepmeposted').submit(function() {
		$('#response').html('submitting your email....');
		$.getJSON('ajax/soon/', {
				'emailaddress':$('#emailaddress').val(),
				'firstname':$('#firstname').val(),
				'lastname':$('#lastname').val(),
			}, function(data){
			if (data.success == true){
				$("input").val('');
			}
			$('#response').html(data.message);
		});
		return false;
	});
});

What does it al do?

Whenever you submit the form, jquery will do an ajax call to our controller and will get a response JSON object in return containing two values, a boolean value for success and a string value as message. On success I clear out the form with $(“input”).val(”); and always replace the <p id=”response”> with the result from the ajax call.

What I haven’t done!

I left out the normal form handling for non javascript calls. I also didn’t use the standard form validation required when handling non-javascript submits.