We are about to create a custom contact page that will work under WP 3.0, and more precisely with Twenty Ten theme. Obviously, with some minor changes you will be able to do the same in your theme.

The script

Let’s start: in your theme folder, create a new file called contact.php (or whatever other name with php extension) and write this code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?php
/*
Template Name: Contact me
*/
if($_POST[sent]){
	$error = "";
	if(!trim($_POST[your_name])){
		$error .= "<p>Please enter your name</p>";
	}
	if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
		$error .= "<p>Please enter a valid email address</p>";
	}                        
	if(!trim($_POST[your_message])){
		$error .= "<p>Please enter a message</p>";
	}
	if(!$error){
		$email = mail(get_option("admin_email"),trim($_POST[your_name])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nReply-To:".trim($_POST[your_email]));
	}
}
?>
<?php get_header(); ?>
<div id="container">
	<div id="content" role="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<div class="entry-content">
			<?php if($email){ ?>
				<p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
			<?php } else { if($error) { ?>
				<p><strong>Your messange hasn't been sent</strong><p>
				<?php echo $error; ?>
			<?php } else { the_content(); } ?>
				<form action="<?php the_permalink(); ?>" id="contact_me" method="post">
					<input type="hidden" name="sent" id="sent" value="1" />
					<ul class="contactform">
						<li>
							<label for="your_name">Name</label>
							<input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" />
						</li>
						<li>
							<label for="your_email">Email</label>
							<input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" />
						</li>
						<li>
							<label for="your_message">Message:</label>
							<textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
						</li>
						<li>
							<input type="submit" name = "send" value = "Send email" />
						</li>
					</ul>
				</form>
				<?php } ?>
			</div><!-- .entry-content -->
		</div><!-- #post-## -->
		<?php endwhile; ?>
	</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now let’s see what we’ve done:

Lines 2-4: This is the way we assign a template name to the page. In this case, the name is Contact me

We’ll see later what lines 5-19 do, and let’s jump to…

Lines 21-27: this is the same content you can find in page.php file into Twenty Ten theme folder, and if you’re using a different theme it should be the same content you can find in your theme page.php file until the beginning of the content of the page (typically the_content()).

In my case, I just replaced

1
2
3
4
5

<?php if ( is_front_page() ) { ?>
	<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>	
	<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>

with

<h1 class="entry-title"><?php the_title(); ?></h1>

because I know a contact page can’t be the front page.

Lines 28-33: Here come to play two variables, called $error and $email, you’ll see later how to set their values, meanwhile you have to know $error is an empty string or a string with an error (something like “You email address is not valid”) and $email is true if the email has been successfully sent.

The code proceeds this way:

* If the email has been sent, show a “Thank you message” and nothing else

* If the email has not been sent and there is an error, show the error and the form

* If the email has not been sent and there isn’t an error, show the page content (something like “Hello!! This is my fancy contact page!! Drop me a mail!!) and the form

Lines 34-53: The form itself, the easiest possible, it’s up to you to add some more fields, if needed, and some styling.

Lines 55-61: The end of the page, like in the normal Twenty Ten page.

Now it’s time to see the php that handles emails and errors

Line 5: If “Send email” button (line 50) has been pressed…

Line 6: set $error variable to empty string

Lines 7-9: creating an error message if the user did not enter his name

Lines 10-12: same as before, looking for a valid email address

Lines 13-15: same as before, looking for a message

Lines 16-18: if I did not find any error, I send the email with a basic formatting and sanitizing.

The setup

Once you created this file, create a new page this way:

Look how I assign the page template according to the file recently created.

And this is what you’ll get:

Your own custom contact page. It’s just a basic one, but if I receive good feedback, I can improve it with some jQuery magic…

Named Thelonious after the american jazz composer Thelonious Sphere Monk (October 10, 1917 – February 17, 1982), will represent a revolution in WP community.

Major new features in this release include:

• a sexy new default theme called Twenty Ten
• Short links support
• Custom backgrounds
• Custom headers
• Custom shortlinks
• Custom menus
• Custom post types
• Custom taxonomies
• Multi users support
• Contextual help in admin area

And obviously… it works with Triqui MochiAds arcade theme and plugin.

Now it’s time to dive into theme development!!

I received some interesting suggestions, and one of them is to link all posts of the same series. This is what a reader said: “In the first post, put a link of all the steps (requires manual editing)”.

I found a way to put an index on each post of a series using custom fields, and I am sure you’ll find it interesting. Let’s take Create a Flash game like Rebuild Chile series as example.

I want, in every post of the series, to show the full list of posts of the series. Without a lot of manual editing, of course.

So, that’s what I did: first, for every post of the series, I added a custom field called series with Create a Flash game like Rebuild Chile value. The idea is to add a series custom field to every post in every series with a proper value.

If you don’t know how to add a custom field, here it is a little help:

At the end of the Post page admin, you’ll find the form to add new custom fields. That’s how I added series custom field. Now, a few lines of code to rule them all… this is what you have to include somewhere inside the so-called WordPress Loop:

1
2
3
4
5
6
7
8
9
10

<?php $series = get_post_meta($post->ID, 'series', true); if($series): ?>
	<div id = "series">
		<h2>Read all <em><?php echo $series; ?></em> series</h2>
		<ul>
		<?php $chapters = get_posts('numberposts=-1&meta_key=series&orderby=date&order=ASC&meta_value='.$series); foreach($chapters as $chapter):?>
			<li><?php if($chapter->ID != $post->ID): ?><a href ="<?php echo get_permalink($chapter->ID); ?>"><?php endif; echo $chapter->post_title; ?></a></li>
		<?php endforeach; ?>
		</ul>
	</div>
<?php endif; ?>

Line 1: Assigning to a variable called $series the value of the series custom field value, if any. Then, if there is a value…

Line 5: Creating a $chapters array and populating it with every post (numberpost=-1) whose series custom field (meta_key=series) has $series value (meta_value=$series) ordering them by date (orderby=date) in ascending way (order=ASC). Then scanning the entire array, saving each item into $chapter
variable.

Line 6: Adding the post title, along with a link if it’s not the current post

The remaining lines are just HTML to let me style the content.

You can see the result in the Create a Flash game like Rebuild Chile series… I have to find the right style but I think I’m on the right way.

Do you like this way to use custom fields?

That’s why today we’ll discover the magic of Google Font API.

The Google Font API lets you include in your pages high-quality web fonts provided by the Google Font Directory.

This means you can use custom fonts in your design, and they are hosted and served by Google.

That’s nothing new, since services like Typekit are already on the wild for quite a while, and scripts like cufòn already enhance the beauty of most premium templates.

But unlike cufòn, texts rendered with the Google Font API are selectable, and there isn’t any copyright issue, and unlike Typekit, Google Font API is free.

So let me show you the simplest example…

Let’s take the CSS of this blog post titles:

#content h1 {
	font-family: "Times New Roman";   
	font-size:24px;
	font-weight:normal;
	text-align: left;
	margin: 10px 0px 5px 0px;
	color: #181818;
	text-transform:uppercase;
	border-left:15px solid #242424;
	padding-left:10px;
}

and change the first line to

font-family: "Yanone Kaffeesatz", "Times New Roman";

and then just add somewhere between <head> and </head> (normally in the header.php file located in your theme directory)

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

and… see the difference:

Nice, elegant and without any important downside, if you can bare with a small number of fonts (but don’t forget we are talking about Google, so expect the number to grow fast) and the lack of iPhone/iPad compatibility (hey… shouldn’t CSS heroes design a i/whatever specific layout anyway?)

I tried to secure the blog in every possible way without any luck.

Finally, I think I figured out what allowed hackers to exploit the blog. I use a custom theme built on an old version of Silhouette theme by Brian Gardner.

As you can see from the link, the theme is not longer available for download, but I believe the file comments.php contains a vulnerability.

Here it is:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if (!empty($post->post_password)) { // if there's a password
		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
			?>
 
			<p class="nocomments">This post is password protected. Enter the password to view comments.<p>
 
			<?php
			return;
		}
	}
 
	/* This variable is for alternating comment background */
	$oddcomment = 'alt';
?>
 
<!-- You can start editing here. -->
 
<div id="commentblock">
<?php if ($comments) : ?>
	<p id="comments"><b><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</b></p>
 
	<ol class="commentlist">
 
	<?php foreach ($comments as $comment) : ?>
 
		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
			<?php comment_author_link() ?> on
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			<?php comment_date('F jS, Y') ?> <?php comment_time() ?> <?php edit_comment_link('Edit','',''); ?>
 
			<div class="commenttext">
			<?php comment_text() ?>
			</div>
 
		</li>
 
	<?php /* Changes every other comment to a different class */
		if ('alt' == $oddcomment) $oddcomment = '';
		else $oddcomment = 'alt';
	?>
 
	<?php endforeach; /* end for each comment */ ?>
 
	</ol>
 
 <?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
 
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p></div>
 
	<?php endif; ?>
<?php endif; ?>
 
 
<?php if ('open' == $post->comment_status) : ?>
 
<p id="respond"><b>Leave a Reply</b></p>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p></div>
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
<?php if ( $user_ID ) : ?>
 
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>
 
<?php else : ?>
 
<p><label for="author">Name <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" /></p>
 
<p><label for="email">Email Address<?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" /></p>
 
<p><label for="url">Website</label><br />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" /></p>
 
<?php endif; ?>
 
<!--<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>-->
 
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
 
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
 
<?php do_action('comment_form', $post->ID); ?>
 
</form>
</div>
 
<?php endif; // If registration required and not logged in ?>
 
<?php endif; // if you delete this the sky will fall on your head ?>

Since I changed it, I am not having injections for a month.

Moreover, I found a couple of sites using the same theme reporting an hack attack.

Any security hero willing to tell us if I am right? Of if it’s just a coincidence and hackers simply decided to leave me alone?

I am finishing and polishing LineBall’s official site built with WordPress and Ajax.

I plan to finish it before this week ends, then release the theme next week. So if you have suggestions, feedback or want more information, this is your turn.

Help me to make the ultimate WordPress Flash game theme.

Some features already developed:

* Highly customizable by setup page – no need to edit the code

* Ajax powered to browse it without reloading the header (the game itself)

* Minimal theme, a very few lines of code

Let me know what do you think about it. And don’t pay that much attention to contents… I just wrote a couple of lines just to make some tests

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

<?php wp_head(); ?>

That is the JQuery part

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("h2 a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/triqui-ajax/",{id:post_id});
		return false;
	});
});
</script>

I already explained the first 4 lines in the previous tutorial.

Line 5: Waiting for the user to click on an hypertext over an h2 heading. I am doing it because in Kubrick post titles are rendered this way:

<h2><a href="<?php the_permalink() ?>"....

This should change from theme to theme, but this works on Kubrick

Line 6: Retrieving the rel attribute of the link and saving it in a variable called post_id. You’ll see later in this tutorial how this attribute will contain the unique ID of the post we want to show.

Line 7: In an element with your_post_here id I am writing “loading…” because I’m starting to load the post. You’ll see later in this tutorial where to place the element

Line 8: Now thw ajax magic… in the your_post_here element this time I load the output of a page of the blog called triqui-ajax. You’ll se later in this tutorial how to create it. This will work if the permalinks of your blog aren’t the default ones. Go to Settings -> Permalinks and select Day and name

I am also passing in POST a variable called id with the content of post_id variable (the post unique id)

Line 9: I added this line to prevent the browser to jump to the link… remember? I want to load the post in the same page.

Now it’s time to make some changes to index.php

This is how I modified it:

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
43
44
45

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
get_header(); ?>
 
	<div id="content" class="narrowcolumn" role="main">
	<div id = "your_post_here"></div>
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry"> 
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>
 
	<?php endif; ?>
 
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

To tell the truth, I only added a line and changed a bit another one:

Line 10: This is the div that will contain the post, the one I change with jQuery (remember? lines 7 and 8 in the jQuery script)

Line 16: Here I changed the rel attribute to store the unique id of the post I want to load. I used it at line 6 in the jQuery script

And the template files do not need any other change.

Now it’s time to create a new page template with some code that will load the selected post.

In your template directory create a new php file, no matter its name… you can call it example.php and write this:

<?php
/*
Template Name: Triqui Ajax Post
*/
?>
<?php
	$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
	<?php setup_postdata($post); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry"> 
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endif; ?>

As you can see it’s almost the same code you can find in index.php at lines 15-24… because I just want to load a post in the same way the index file does. I just removed the anchor tag in the title, because I don’t want it to be clickable. And obviously I read the id value passed by the jQuery script at line 8

The only interesting lines are lines 2-4… yes, the comment… because this way I am giving the template page the name Triqui Ajax Post.

Now in your admin area create a new page, call it Triqui Ajax (do you remember the permalink url at line 8 in the jQuery script…) and select Triqui Ajax Post as template

And that’s it… you don’t need anything else, and the blog will work as in the video.

Enjoy

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it.

In this case all changes have been made in header.php file, adding nine lines after

<?php wp_head(); ?>

Here they are:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	var refresh = setInterval(function(){   	
		$("#description_span").load("<?php bloginfo('template_url'); ?>/example.php");
	},1000);
});
</script>

First, I am loading jQuery using Google as content delivery network.

Then, when the document is ready, I disable the cache to stop jQuery .load response from being cached.

Now I just execute an ajax call to example.php file at every second and print the result in the element with description_span id

This is example.php content

<?php
 
echo rand(1,10000);
 
?>

Now it’s time to locate description_span element… it’s in the header, next to the description of the blog.

<div class="description"><?php bloginfo('description'); ?> like other <span id = "description_span"></span> ones</div>

And that’s it. This time I changed the header without touching the content, next time (the aim of my experiment) I’ll change the content without touching the header, maybe because the header contains a Flash game called LineBall… (yes, I am designing a WP theme for a game official site).

Here’s something new: did you notice, during this month, two ads about Farmville secrets and iPhone application development? Here they are:

These two ads belong to ClickBank, an ad network which at the moment made its clients earn more than a billion dollars.

As you can see in these two pictures, I did not earn a cent.

Let’s see what happened:

The reasons behind a failure

When I signed up at ClickBank, I obviously decided to display ads having something to do with my blog… this means programming, gaming or monetizing.

The most “interesting” products I was able to find were:

* A couple of registry cleaners (??)
* A couple of PS3 scam backup system (scam because you won’t be able to play with your backups)
* A dozen ebooks about the ULTIMATE (yeah) way to make money with a blog, or with ebay, or whatsoever
* Some hosting services

The first question was: did I really want my readers to buy a useless PS3 backup system? Come on…

So i opted for a FarmVille guide, even if I am not a FarmVille fan and I hate people posting on Facebook they just found a cripple blind sheep in their damned banana field. All in all FV is a great viral game and I thought a guide would be useful for some addicted players.

The other choice was a guide to iPhone programming… why not… I have a lot of programmers among blog readers.

Why it did not work

Well, every blog has its niche readers. Programmers are quite smart… unlike blogging mogul wannabes, they won’t buy anything from one-page websites claiming to sell the “Ultimate Guide to [put your favorite topic here, obviously all uppercase]”

People like you are looking for real deals from real companies, supported by real case studies… that’s why I was one of the three most important MochiAds referral while I wasn’t able to sell a single ClickBank guide.

So it was a waste of time. Wait. It wasn’t

Thanks to my experience, if you have a programming blog you can improve your ads revenue looking for products you can really review, test and suggest, leaving “ultimate guides” to newbies.

This obviously is my personal story, and results may vary according to the niche you’re talking at.

So I am releasing the new version, compatible with the new feed and tested with WordPress 2.9.2. You can find it at the official page.

Talking about plugins, I am developing a new theme/plugin using crontables that automatically feeds the games, fixes the tables if MochiMedia updates the feed, and chooses the best games to publish.

Everything without any interaction from the user. The ultimate “forget about it and make money with your arcade site” plugin.

Stay tuned.