• 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?

Comment subscription is a great thing for those readers that are interested in the comments on a specific post. What it does basically is letting the subscriber know when a new comment has been published. If he subscribed to it there is a big chance that he is interested in a discussion and will probably leave a comment.

• Subscribe to comments plugin

DoFollow links in comments

DoFollow is simply an internet slang term given to web pages or sites that are not utilizing NoFollow. NoFollow is a hyperlink inclusion that tells search engines not to pass on any credibility or influence to an outbound link.
squidoo.com

Since WordPress is automatically adding rel=”nofollow” to links inside comments you will need to use a plugin or a “hack” to remove it. Bellow you can find some links to articles, plugins and hacks to achieve this.

• Ultimate List of DoFollow & Nofollow Plugins – Banish Nofollow From Comments and Trackbacks
• http://www.catswhocode.com/blog/how-to-get-rid-of-the-nofollow-attribute-on-your-wordpress-blog (core change, not recommended)
• DoFollow: Increase Your Backlinks with DoFollow Sites

Implement CommentLUV

Screenshot taken from 1stWebDesigner.com

CommentLUV is a great way to give something back to commentators that have a blog and encourage them to comment. What it actually does is show the comment author’s latest blog post in his comment.

• CommentLUV website
• CommentLUV plugin
• Get the most out of your comment luv links

Show a link to their twitter account

This is quite rare but very nice way to encourage commenting. If the comment author has a twitter account he can leave the username when commenting and a link to his twitter account will be shown in the comment.

• TwitterLink Plugin

Showing top comment authors

Showing top comment authors (the ones that posted most comments) and a link to their website in the sidebar (or somewhere else you might think it’s better) is a great way to encourage your visitors to comment.

Keeping those links as “doFollow” will be even more encouraging but it’s not a must.

• Top Commentators Plugin

Allow threaded comments

Above screenshot taken from CSS-Tricks.

Great way to engage users in a conversation is by using threaded comments. This allows your visitors to reply to some comment and that reply will be shown directly bellow that specific comment. Before this was possible we have been using “@” to refer to a specific commenter, which wasn’t that useful because all the comments are shown chronologically.

The comment form

Between a visitor and his comment is a comment form, and it’s very well known that unattractive and messy forms can discourage form completion (in this case the comment form).

Another thing that can turn your visitors away from commenting is CAPTCHA. I know there are a lot of spam comments, but akismet is a godsent plugin that stands between spam and you. Yes, once in a while a spam comment will get past it but it’s better to send a comment to spam once in a while then suffer decrease in real comments due to captcha.

• Design a Prettier Web Form with CSS 3 (Tutorial)
• 77 Inspiring Blog Comment Form Designs (Roundup)
• 37 Ways to Design the Comments Form (Roundup)
• 65+ Comment Form Designs (Showcase)

Engage in conversation

Another great way to encourage conversation is to be a part of it. Reply to the comments with your own opinion, not to every single comment but to the ones that you think that you can say something worthy.

The logical

There are some logical ways to encourage your visitors to comment and i don’t want to place them all as separate ways because i hate when i am reading for example an article about ways for increasing traffic and see that most of them are simply logical and everybody knows it (example “content is king”).

• Write about interesting and popular subjects
• Ask your visitors a question related to the subject
• Offer some kind of a reward to the most interesting comments
• Don’t require your visitors to be registered to comment
• Highlight interesting comments

Final words

Hope you found this article useful and if you know some more cool ways say so in the comments and i’ll be happy to update this article and of course mention you with a link to your website.

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<li id="comment-<?php comment_ID() ?>" class='commentItem'>
			<!-- THE COMMENT LAYOUT -->
		</li>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

Above we can see a stripped version of an ordinary comment loop which will show comments, trackbacks and pingbacks all in one place. Let’s change that.

1st Step / Separating

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<?php
		$commentType = get_comment_type();
		if($commentType == 'comment') :
		?>

			<li id="comment-<?php comment_ID() ?>" class='commentItem'>
				<!-- THE COMMENT LAYOUT -->
			</li>

		<?php endif;/* end if comment check */ ?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

get_comment_type is a function that returns “comment”, “trackback” or “pingback” depending what type the current comment is.

Now just copy paste the same code again and just change “if($commentType == ‘comment’)” to if($commentType != ‘comment’) which is the opposite of “==” and change the class from “commentItem” to “trackbackItem” so you can easily make different styles.

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<?php
		$commentType = get_comment_type();
		if($commentType != 'comment') :
		?>

			<li id="comment-<?php comment_ID() ?>" class='trackbackItem'>
				<!-- THE PINGS LAYOUT -->
			</li>

		<?php endif;/* end if NOT comment check */ ?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

2nd Step / The Layout

Making the layout for pinbacks/trackbacks is very simple, there is only 1 function we are going to use, comment_author_link(). It just echoes the trackback/pingback link and that’s all we need.

<li id="comment-<?php comment_ID() ?>" class='trackbackItem'>
	<?php comment_author_link(); ?>
</li>

That’s it. Styling is up to you

Notice: The whole comments part is simplified for easier understanding of how to separate this, but you shouldn’t leave out the part where you check if the comment is awaiting moderation or comments are closed.

Why separate?

Thought about going through this before jumping into the code but i decided to put it at the end.

Let’s take a look at 2 screens i made.

All mixed together

The screenshot above is taken from 1stWebDesigner.

The biggest problem in my opinion is that the conversation is broken and can become less useful. Another thing is that some articles can get a big amount of pings and push the comment to far down. And it doesn’t look nice, doesn’t it?

Separated

The screenshot above is taken from the blog you are reading at the moment

As you can see the conversation isn’t broken by the pings. The comment form won’t be pushed to far down if there are many pings. And it looks nice, doesn’t it?

Let me know what you think about this.

A good way to secure yourself is not to place wordpress in the root directory, but to place it in a folder whose name is something meaningful only to you, or even something that even you don’t understand. Maybe some random word like skidending, you can always check the folder name via FTP.

After you do that, you will need to change some paths and transfer files to root so the blog can be accessed normally like http://theblogurl.com. Here is what you need to do:

• move index.php and .htaccess from the folder to the root directory.
• Inside of the index.php file change require(‘./wp-blog-header.php’) to require(‘./folderName/wp-blog-header.php’)

2. New administrator account, but keep the original…

No, this one isn’t like in every other “top x ways to secure wordpress…”. We’re not gonna delete the admin account.

Make a new account with any username you like, give it full privileges, then login with that new account, and change the privileges of the admin username to subscriber. That’s better then deleting the admin account.

Why? Because hacker or bot or whatever will first check for the admin username, and if it doesn’t exists wordpress will say so in the error, but if it does exists he will believe that’s the real administrator account and he will try to break the code for it. Even if he manages to do it, he’s logged in as a subscriber, he can’t do any harm at all. So we’re basically misleading him in a wrong direction.

3. Limit failed login attempts

You probably won’t need 5 times to successfully login to the admin panel, and the person who wants to access the admin panel will need more then 5 times.

So, how to limit login attempts? There is a pretty good plugin to help you out limit them easily. It’s Login LockDown. There are few options you can select like amount of unsuccessful login attempts in a certain period of time, and the “ban” time.

4. Update, update, update

This is very important. As soon as a new update comes for WordPress or Theme or Plugin backup your database and click the update button without hesitating. Besides some cool features that might have been added to wordpress in that new version there is a big chance that some big security hole is fixed.

5. Use WordPress plugins for security

There a lot of plugins out there that improve security of wordpress by fixing some of it’s known flaws.

Here are some of them:

• Stealth login
• AskApache password protect
• WP Security Scan

I’m not going to explain how they work, check the description on the plugin page, but you can expect a special article on wordpress plugins for improving security.

6. Use .htaccess

.htaccess is a really powerful file, and one of it’s many abilities is security.

Here is one example which will allow access to wp-admin only for a specific IP Address.

order deny,allow
allow from 123.123.123.123
deny from all

If you have dynamic IP address this won’t be much useful to you. Change the numbers on line 2 with your ip address. The .htaccess file with these lines should be placed in the wp-admin folder.

There are a lot of ways to protect it with .htaccess, and an article on WpShout.com called A to Z of WordPress .htaccess hacks explains quite a few of them.

7. Make database backups

You can’t be 100% secure, no one can. Imagine you have about 100 posts, and a hacker somehow finds a way in and deletes everything. What can you do then? Nothing if you don’t have the database backup. It takes a min to make a backup and who knows how much time to write all the post again.

You can easily make a backup using phpmyadmin , but if you don’t know how there are also a lot of plugins that can do that instead of you.

8. Make a good password

Yes i know, you’re sick and tired from this tip. But having a good password is a MUST. And with the 2nd tip (new account), this could be great. Make a password without any meaning, completely random.

So 2nd + this one = Pain in the ass for anyone trying to hack into your admin by pass guessing.

Over at pctools.com there is a really nice random password generator.

9. Authentication Unique Keys in wp-config.php

A lot of wordpress users probably forget this. In wp-config.php there are 4 lines:


define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');


In order to be secured you must change the values of those 4 keys. The wordpress website has a nice random generator specially made for these 4 lines.

10. Change the wp_ table prefix

The default prefix for tables in the database is “wp_” and it’s advisable to change it to something else. You can use the WP Security Scan plugin to do that and a lot more on improving security.

Final Words

That’s it. I hope these 10 ways helped or will help you to increase the security of your wordpress powered website. Good luck…

]]> http://wpcanyon.com/tutorials/10-effective-ways-to-secure-your-wordpress-blog/feed/ 16 http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/ http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/#comments Thu, 04 Feb 2010 07:57:57 +0000 Boba http://wpcanyon.com/?p=48 Until now there was no feature in WordPress to allow you to post thumbnails, so we had to use custom fields or plugins or embed a picture inside the content to act as a thumbnail (that’s what i did when i first started with wordpress). The new version comes with that feature.

I assume you know what a post thumbnail is, you do know, right? Ohh ok, sorry, had to ask. Well let’s get to the point.

We will go through 3 simple steps in this tutorial.

• First – Activating thumbnail feature
• Second – Adding thumbnail to a post
• Third – Showing the thumbnail in a theme

1. Activating The Feature

Add the code bellow to the functions.php file in your theme folder.

add_theme_support(‘post-thumbnails’);

There is another function for thumbnails, and it’s used to automatically resize the image you set to be the thumbnail, so if you want your thumbnail to be exactly the same as the image you uploaded feel free to skip to second step.

That function is set_post_thumbnail_size(), which you call after the add_theme_support() function and if called, the image you have set as the thumbnail will be automatically resized. You can declare 3 variables inside of it, width, height and cropping. Cropping is set to false by default so it’s not required.

set_post_thumbnail_size(150, 100);

With the code above your thumbnail will be resized to approx 150px wide and 100px tall, keeping the aspect ratio. So the resized image will be closest to or exactly 150×100 which depends on the original size.

set_post_thumbnail_size(150, 100, true);

With the code above your thumbnail will be resized to exactly 150px wide and 100px tall, but you might loose a part of the image, because it’s cropped.

2. Adding Thumbnail To A Post

Go to your admin dashboard and either go to create a new post or edit existing one.

Notice: If you are creating a new post, first fill the title field so it can save the draft, otherwise you can’t add a thumbnail.



Click on the set thumbnail link, and you will get the same modal window like when you are adding an image. Now upload an image and when done you will see this.



Click the use as thumbnail link and in few seconds you will see the thumbnail tab gets updated with the thumbnail like on the next screenshot.



3. Show it

The code bellow is used to echo the post thumbnail image.

the_post_thumbnail();

But for example if you have a div wrapping the thumbnail, and you haven’t set a thumbnail for some post, then you will get an empty div. So it’s advised to run a little if statement to check if the post has a thumbnail.

if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

Congrats, you have added thumbnails feature to your blog.

Some additional codes

Well, one more if statements is suggested, just to make sure the theme is running on WordPress version that can use add_theme_support() function which is introduced in 2.9. I’m not using it on my blog because i know i won’t downgrade it to an older version.

1. The activating

if ( function_exists( 'add_theme_support' ) ){
add_theme_support(‘post-thumbnails’);
//and add the resizing function here if you need it
}

2. The Showing

if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail();
}

You might also want to check a screencast made by Jeffrey Way on setting up and using the feature.

Final Words

That’s it, i hope you learned something from this tutorial. If i made a mistake somewhere or you think there is a better way to achieve some part feel free to say so in the comments.

]]> http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/feed/ 23