One very important aspect of a premium WordPress theme is the flexibility it offers to the users. That flexibility comes from the theme’s options panel. Some themes have ten options and some even have hundreds. But why doesn’t anyone allow the potential buyers to try the options out, make changes and see the full demonstration of a theme they are about to buy, not even WooThemes does that.

Why?

Well it’s quite simple, every time someone makes a change it will overwrite someone else’s changes and there is a big possibility that more people will be testing the options out at the same time and keep overwriting each other’s changes and wouldn’t be able to see how it works and behaves properly thus confusing everybody.

You probably have a blog, do you? Well imagine few more people making changes to it at the same time as you do, it’s like that. Stuff changes and you have no idea why, you didn’t change it.

So, How?

Well the idea is pretty simple, if you’re a theme/plugin developer you know that we have to add a prefix to our field names that go inside the database in order to avoid conflicts with other themes/plugins that could use the same names. For example, an option where the user inputs text he wants to be shown in the footer of a theme, we can call it “footer_text” but then it might conflict, so we add a prefix like “wpcp_”, “aviatic_” or anything else that we think should be unique or at least unlikely to be used by something else, so we get wpcp_footer_text.

Using that same method we can add the username of the user that makes changes as a suffix or prefix (doesn’t matter) so if a user with username “John” makes changes they will be saved and later retrieved as “wpcp_footer_text_John” and when a different user with username “Michael” makes changes it will be “wpcp_footer_text_Michael” so no conflicts will be made and no data will be overwritten.

Database Usage

For themes that have a big amount of options (like WooThemes or PliablePress) it will use a lot of data. For example 50 options changed by 100 users is 5000 rows in the database. But that’s not a big problem because WordPress can be set to delete the data after a certain time period.

Does It Really Work?

Well in theory it should work just fine, it’s pretty simple, i haven’t tested it yet but i started working on a little example and will update this post when it’s done. In the meantime if anybody is reading this let me know your thoughts.

Update: It Works

I just tested it and it works without a problem. I needed 2 minutes to alter a theme to support this, yes just 2 minutes, few lines of code. Check back later, i’ll throw in a demo so you can all test it out.

CSS hack

This hack is a simple CSS hack that allows you to change the height of the default 200px to a new fixed height.

add_action('admin_head', 'categories_list_height_css');

function categories_list_height_css() {
	echo'
	<style type="text/css">
		#category-all.tabs-panel{ height:500px; }
	</style>
	';
}

jQuery hack

This is a bit better hack because it will change the height dynamically to fit all the categories.

add_action('admin_head', 'categories_list_height_jquery');

function categories_list_height_jquery() {
	echo'
	<script type="text/javascript">
		jQuery(function($){
			$("#category-all.tabs-panel").height($("#categorychecklist").height());
		});
	</script>
	';
}

Both hacks go inside functions.php file inside your theme folder.

function top_comment_authors($amount = 5){

	global $wpdb;

	$results = $wpdb->get_results('
		SELECT
			COUNT(comment_author_email) AS comments_count, comment_author_email, comment_author, comment_author_url
		FROM
			'.$wpdb->comments.'
		WHERE
			comment_author_email != "" AND comment_type = "" AND comment_approved = 1
		GROUP BY
			comment_author_email
		ORDER BY
			comments_count DESC, comment_author ASC
		LIMIT '.$amount

	);

	$output = "<ul>";
	foreach($results as $result){
		$output .= "<li>".$result->comment_author."</li>";
	}
	$output .= "</ul>";

	echo $output;

}

Now you can call it anywhere in your theme using the top_comment_authors() function. By default it will show top 5 but if you want a different amount simply call it like top_comment_authors(7) which will show top 7 comment authors.

If you want to show more data in the listing you can use these:

• $result->comment_author_email the email address of the commentator
• $result->comments_count comments number of the commentator
• $result->comment_author_url the website address of the commentator

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes(){
	return 'class="styled-button"';
}

What actually this snippet does is adding the html you return in the function to the anchor.

<a href=’link’ HERE>

So you can add ID, classes and other attributes an anchor can have. By default it will only have the href attribute.

How to install WordPress Locally?

Adding A Custom Field Automatically On Post/Page Publish

Free Theme: Magazine Basic v2.6.1

Flattr Button for WordPress without a Plugin

20 Must Have WordPress Plugins For Every Website

A Refresher On Custom Taxonomies

5 Reasong Gravity Forms Makes Your From Plugin Look Like Crap

WordPress: From Kubrick to Twenty Ten

add_action('publish_page', 'add_custom_field_automatically');
add_action('publish_post', 'add_custom_field_automatically');
function add_custom_field_automatically($post_ID) {
	global $wpdb;
	if(!wp_is_post_revision($post_ID)) {
		add_post_meta($post_ID, 'field-name', 'custom value', true);
	}
}

That’s it. Hope this helps.

Add Custom Column To WordPress Post Manage Page

WordPress JSON API Plugin

Your First WordPress Plugin: Simple Optimization

Goodbye, headaches. Hello, menus!

Free Theme: Jillz Theme

WordPress 3.0: Changing The Way We Manage Content

A Complete To-Do List & Plugins for WordPress Site Maintenance

Create A Powerful jQuery-Powered Archives Page In WordPress

WordPress Related Videos At Present On Youtube

WordPress Theme Development: Custom versus Commercial

Here is a function you can use to get and echo the number of comments a comment author made. Put it in the functions.php file in your theme.

function commentCountAuthor(){

	$oneText = 'One comment';
	$moreText = '% comments';

	global $wpdb;

	$result = $wpdb->get_var('
		SELECT
			COUNT(comment_ID)
		FROM
			'.$wpdb->comments.'
		WHERE
			comment_author_email = "'.get_comment_author_email().'"'
	);

	if($result == 1): 

		echo str_replace('%', $result, $oneText);

	elseif($result > 1): 

		echo str_replace('%', $result, $moreText);

	endif;

}

Simply call the functions inside the comments loop.

commentCountAuthor();

• PHP validation
• jQuery validation
• AJAX submission (if javascript is turned off it will be submitted normally)

We’re going to use WordPress custom template for this. Ready to get started? Just so you know, if you encounter any problems following this steps feel free to ask me about resolving them using the comment form and i’ll do my best to help you out.

Step 1 – Creating the template

First of all we need to create a custom template for our contact page. Simply create a new file in the theme folder, name it template-contact.php and add the code bellow.

<?php
/*
Template Name: Contact Form
*/
?>

Now open up page.php file from your theme and copy the whole content after the code we just added. You should end up with something similar to the code bellow.

<?php
/*
Template Name: Contact Form
*/
?>

<?php get_header(); ?>

	<div id="main">

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

			<div class="post" id="post-<?php the_ID(); ?>">

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

				<div class="entry">

					<?php the_content(); ?>

				</div>

			</div>

		<?php endwhile; endif; ?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

If you have more content then that don’t worry, it depends on the theme you’re currently using. If you are familiar with coding a WordPress theme then you can remove the comments part, but it’s not really necessary because you can disable commenting from inside the admin panel.

Now, if you take a look at the code bellow you will see where the rest of the code will go (the commented green colored parts)

<?php
/*
Template Name: Contact Form
*/
?>

<!-- PHP PART 1 GOES HERE (PROCESSING) -->

<?php get_header(); ?>

<!-- jQuery GOES HERE (VALIDATION AND AJAX PROCESSING) -->

	<div id="main">

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

			<div class="post" id="post-<?php the_ID(); ?>">

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

				<div class="entry">

					<?php the_content(); ?>

				</div>

			</div>

		<?php endwhile; endif; ?>

		<!-- CONTACT FORM HTML AND PHP PART 2 (MESSAGES) GOES HERE -->

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Step 2 – HTML

In this step we will create the form, just copy the snippet bellow in the place for the HTML part (as shown in the part 1).

<div id="contact-form">
	<form action="<?php the_permalink(); ?>" id="contact-form" method="post">

		<p><label for="c_name"><?php _e('Name') ?></label> <input type="text" name="c_name" id="c_name" /></p>

		<p><label for="c_email"><?php _e('Email') ?></label> <input type="text" name="c_email" id="c_email" /></p>

		<p><label for="c_subject"><?php _e('Subject') ?></label> <input type="text" name="c_subject" id="c_subject" /></p>

		<p><label for="c_message"><?php _e('Message') ?></label> <textarea name="c_message" id="c_message"></textarea></p>

		<p><label for="c_submit">&nbsp;</label> <input type="submit" name="c_submit" id="c_submit" /></p>

		<input type="hidden" name="c_submitted" id="c_submitted" value="true" />

	</form>
</div>

If you’re confused about where exactly to put it, then simply place it after the “loop” (<?php endwhile; endif; ?>), it’s important that it is in the same div as the div with class “post”.

Step 3 – CSS

We made the form, but it’s not really good looking so let’s add some simple styling. I commented some of the lines so it should be easy to understand what’s what.

Notice: The CSS goes in the style.css file, not inside the new template we created.

#contact-form  label {
	display:block; /* needed in order to set a width */
	float:left; /* make it inline with the input field */
	width:100px;
}
#contact-form textarea {
	width:300px;
	height:80px;
}
#contact-form .error {
	margin-left:100px; /* same as label width */
	color: #9e2828;
}

Now it looks better, let’s move on.

Step 4 – PHP

The first chunk of code goes before the “<?php get_header(); ?>”.

<?php

$name_error = '';
$email_error = '';
$subject_error = '';
$message_error = '';

if($_REQUEST['c_submitted']){

	//check name
	if(trim($_REQUEST['c_name'] == "")){
		//it's empty
		$name_error = __('You forgot to fill in your name');
		$error = true;
	}else{
		//its ok
		$c_name = trim($_REQUEST['c_name']);
	}

	//check email
	if(trim($_REQUEST['c_email'] === "")){
		//it's empty
		$email_error = __('Your forgot to fill in your email address');
		$error = true;
	}else if(!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_REQUEST['c_email']))){
		//it's wrong format
		$email_error = __('Wrong email format');
		$error = true;
	}else{
		//it's ok
		$c_email = trim($_REQUEST['c_email']);
	}

	//check name
	if(trim($_REQUEST['c_subject'] === "")){
		//it's empty
		$subject_error = __('You forgot to fill in the subject');
		$error = true;
	}else{
		//it's ok
		$c_subject = trim($_REQUEST['c_subject']);
	}

	//check name
	if(trim($_REQUEST['c_message'] === "")){
		//it's empty
		$message_error = __('You forgot to fill in your name');
		$error = true;
	}else{
		//it's ok
		$c_message = trim($_REQUEST['c_message']);
	}

	//if no errors occured
	if($error != true) {

		$email_to = "your_email_here@gmail.com"; //change this with your email address
		$message_body = "Name: $c_name \n\nEmail: $c_email \n\nComments: $c_message";
		$headers = "From".get_bloginfo('title').' <'.$emailTo.'>' . "\r\n" .'Reply-To' . $email;

		mail($email_to, $c_subject, $message_body, $headers);

		$email_sent = true;
	}

}

?>

It’s a big chunk of code but it’s really simple, first we validate the submitted data by checking if it’s empty and is the email correct. If it is empty or the email isn’t in the right format we set the “error” variable to true and the error messages so after finishing with the validation we can know what to do and let the user know too, submit or not. If the error variable is not set to true then we process with the emailing and if everything goes well we set up another variable, email_sent, to true so we know that the email is sent.

Don’t forget to change the $email_to variable to your email address.

In the second part of the PHP we are going to show the user if everything is correct, and if it’s not let him know what’s wrong. The new codes are mixing up with the previous coding so let’s take it slowly.

First of all when the contact email is successfully sent we don’t want to show the contact form, right?

<?php if(isset($email_sent) && $email_sent == true){ ?>

	<p class="email-sent"><?php _e('Thank you for contacting. I will answer your email as soon as possible.') ?></p>

<?php }else{ ?>

	<div id="contact-form">
		<!-- the contact form -->
	</div>

<?php } ?>

Using a simple if/else check we are either gonna show the message for the successful contact or the contact form. The part inside the }else{ and } is the contact form HTML, nothing new.

Now, it’s time for adding the code that show the error messages if something isn’t filled in right. After every paragraph (<p>content</p>) we will check if the error variables are not empty and if they aren’t then echo that error. This is how it looks after all the fields are updated.

<p><label for="c_name"><?php _e('Name') ?></label> <input type="text" name="c_name" id="c_name" /></p>
<?php if($name_error != '') { ?>
	<p class="error"><?php echo $name_error;?></p>
<?php } ?>

<p><label for="c_email"><?php _e('Email') ?></label> <input type="text" name="c_email" id="c_email" /></p>
<?php if($email_error != '') { ?>
	<p class="error"><?php echo $email_error;?></p>
<?php } ?>

<p><label for="c_subject"><?php _e('Subject') ?></label> <input type="text" name="c_subject" id="c_subject" /></p>
<?php if($subject_error != '') { ?>
	<p class="error"><?php echo $subject_error;?></p>
<?php } ?>

<p><label for="c_message"><?php _e('Message') ?></label> <textarea name="c_message" id="c_message"></textarea></p>
<?php if($message_error != '') { ?>
	<p class="error"><?php echo $message_error;?></p>
<?php } ?>

<p><label for="c_submit">&nbsp;</label> <input type="submit" name="c_submit" id="c_submit" /></p>

That’s it. Hope i was clear enough about this part, let me know if you have any questions.

Step 5 – Validation and ajax submissions with jQuery

I made some comments inside the code to explain what’s what but if you don’t understand something feel free to ask.

<script type="text/javascript">
<!--//--><![CDATA[//><!--

	jQuery(document).ready(function(){

		jQuery('#contact-form form').submit(function(e){

			//prevent the normal processing
			e.preventDefault();

			//delete the errors (so we don't get duplicates ')
			jQuery("#contact-form .error").remove();

			//declaring and setting vars
			var value, theID, empty_error, email_error, error, emailReg;
			empty_error = '<p class="error">This field is required</p>';
			email_error = '<p class="error">The email you entered is not valid</p>';
			error = false;
			emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;				

			//validating
			jQuery('#contact-form textarea, #contact-form input[type=text]').each(function(){
				value = jQuery(this).val();
				theID = jQuery(this).attr('id');
				if(value == ''){
					jQuery(this).parent().append('<p class="error">'+empty_error+'</p>');
					error = true;
				}
				if(theID == 'c_email' && value != '' && !emailReg.test(value)){
					jQuery(this).parent().append('<p class="error">'+email_error+'</p>');
					error = true;
				}
			});

			//send email and loaded message
			if(error == false){
				jQuery('#contact-form').load('<?php the_permalink(); ?> .email-sent', jQuery('#contact-form form').serialize());
			}

		});

	});

//-->!]]>
</script>

Step 6 – Adding the page

Now when everything is coded let’s create the page, follow these steps:

• Go to the create new page in the admin panel
• On the right side, bellow the “publish” widget you should see “attributes” widget, in the template dropdown/selectbox choose “Contact Form”
• If you want to show some content before the contact form simply add it like when you add content for any other page/post.
• Hit publish and that’s it.

Notice

Have in mind that if you are building a plugin or theme for wide use then you should read more about internationalizing plugins and themes. That way it can be translated easily to more languages.

Final Words

We’re done. If you would also like this contact page to have javascript/jQuery validation and ajax processing then say so in the comments and i’ll update this tutorial.

Hope it was easy to follow this tutorial and if you liked it then follow wpCanyon on twitter or subscribe to the RSS feed, you don’t want to miss out on more cool tuts like this one, don’t you?

Build A WordPress Powered Featured Content Area

WordPress Default CSS Styles

How To Create Search By Category Functionality In WordPress

15 High Quality Free PSD WordPress Theme

Aqualine: A Free Minimalist WordPress Theme

Adding A Featured Content Slider To Thesis In 5 Quick Steps

What Top Niche Web Designers Say about Thesis Theme for WordPress

WordPress 3.0 Release Candidate

Rock-Solid WordPress 3.0 Themes using Custom Post Types

WordPress caching, Part 2