Develop a WordPress Theme from scratch — Part 3
On the first part and second part of this 3 parts article — we installed WordPress and registered some important WordPress actions, implement the theme design and got familiar with the WordPress page template hierarchy.
On this final part, we will implement the contact page design and functionality.
Contact Page
The page hierarchy indicates that if there is a file with the name page-$slug.php (where a slug is the URL slug) is being displayed before the page.php file. So, if we created a page in the admin dashboard with the URL services , when browsing this page WordPress will look for a file with the name page-services.php, if it exists the system will display this page, if not it will display the page.php file (and if there is no such file, it will display the index.php file).
For our scenario, to create the contact page, we will create a page-contact.php file and implement the design and logic in it.
Let’s create a page-contact.php in our theme folder and add this code
<?php get_header(); ?> <div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<?php echo $response; ?>
<h2>Contact</h2>
<br><br>
<form action="<?php the_permalink(); ?>" method="post">
<div class="form-group">
<label for="email">Name <span>*</span></label>
<div class="row">
<div class="col">
<input type="text" class="form-control" name="first_name" value="<?php echo esc_attr($_POST['first_name']); ?>">
<p class="form-paragraph">First Name</p>
</div>
<div class="col">
<input type="text" class="form-control" name="last_name" value="<?php echo esc_attr($_POST['last_name']); ?>">
<p class="form-paragraph">Last Name</p>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email address <span>*</span></label>
<input type="email" class="form-control" name="email" id="email" value="<?php echo esc_attr($_POST['email']); ?>">
</div>
<div class="form-group">
<label for="subject">Subject <span>*</span></label>
<input type="text" class="form-control" name="subject" id="subject" value="<?php echo esc_attr($_POST['subject']); ?>"/>
</div>
<div class="form-group">
<label for="text">Message <span>*</span></label>
<textarea rows="3" cols="10" class="form-control" name="text" id="text" ><?php echo esc_attr($_POST['text']); ?></textarea>
</div>
<input type="hidden" name="submitted" value="1">
<input type="submit" value="SUBMIT" class="submit-btn">
</form>
</div>
<div class="col-lg-3"></div>
</div>
</div><?php get_footer(); ?>
For now, we added the get_header() and get_footer() methods and implement an HTML markup for the form. Since this is a contact form, there might be some errors when a user submits the form, this is why we add the line <?php echo $response;?> and for every input, we echo the $_POST value so we can display the submitted data if there was an error when submitting. Also, we assigned the form action to be action="<?php the_permalink();?>" . This line will let the form to be submitted to the current page.
If we will go to mydomain.com/contact we can see the form being displayed.
Add the form logic
The logic will be as simple as we can. A user submits a form, the system will check for validation and errors, if there are errors display a message to the user indicates the errors, if there are no errors, send the data to the admin email.
To begin with, let’s create and assign some variables. At the top of the file, add the following code
<?php
//response messages
$missing_content = "Please supply all information.";
$email_invalid = "Email Address Invalid.";
$message_unsent = "Message was not sent. Try Again.";
$message_sent = "Thanks! Your message has been sent.";//user posted variables
$firstName = $_POST['first_name'];
$lastName = $_POST['last_name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['text'];// body of the mail
$body = '<div>
<h4>name:'.$firstName.','.$lastName.'</h4>
<p>email:'.$email.'</p>
<p>subject:'.$subject.'</p>
<p>message:'.$message.'</p>
</div>';//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers = 'From: '. $email . "\r\n" .
'Reply-To: ' . $email . "\r\n";
?>
At first, we create some form errors variables with messages to let the user know what the errors are. Then, we assign the form input data to variables. After that, we create the email message that will be sent to the admin and we declare the php mailer variables such as — who to send the message to, the mail subject and the mail headers.
Side Note: php mailer is the default library used by WordPress for sending emails
Validate the submitted form
To simplify, we will create a method to generate an error or success message depending on the response messages we declare before. At the top of the file, add this code
<?php
//response generation function
$response = "";//function to generate response
function my_contact_form_generate_response($type, $message){global $response;if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";}
At this point, we can add some logic to validate the form and look for errors. Let’s add the following code after the php mailer variables we added before.
if(!empty($_POST['first_name']) && !empty($_POST['last_name']) && !empty($_POST['email']) && !empty($_POST['subject']) && !empty($_POST['text'])){
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else{
$sent = wp_mail($to, $subject, strip_tags($body), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?>First thing we do here, is checking if each data value is not empty. If something is empty we generate a response to be displayed for the user with the $missing_content variable we declare before.
Next, we check the email value for a valid email address with the FILTER_VALIDATE_EMAIL filter. If the email is not valid, we generate a response with the $email_invalid variable we declared.
Next thing, we send the data with the wp_mail method and assign the mailer variables from before with the $body variable we created. If the mail has been sent, we generate a success message with the variable $message sent, else we generate an error message with the $message_unset variable.
Finally, we will add the error and success classes. Add this style to the top of the file -
<style type="text/css">
.error{
padding: 5px 9px;
border: 1px solid red;
color: red;
border-radius: 3px;
}.success{
padding: 5px 9px;
border: 1px solid green;
color: green;
border-radius: 3px;
}
</style>
The final file should look like this -
<style type="text/css">
.error{
padding: 5px 9px;
border: 1px solid red;
color: red;
border-radius: 3px;
}.success{
padding: 5px 9px;
border: 1px solid green;
color: green;
border-radius: 3px;
}
</style><?php//response generation function
$response = "";//function to generate response
function my_contact_form_generate_response($type, $message){global $response;if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";}
//response messages
$missing_content = "Please supply all information.";
$email_invalid = "Email Address Invalid.";
$message_unsent = "Message was not sent. Try Again.";
$message_sent = "Thanks! Your message has been sent.";//user posted variables
$firstName = $_POST['first_name'];
$lastName = $_POST['last_name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['text'];$body = '<div>
<h4>name:'.$firstName.','.$lastName.'</h4>
<p>email:'.$email.'</p>
<p>subject:'.$subject.'</p>
<p>message:'.$message.'</p>
</div>';//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers = 'From: '. $email . "\r\n" .
'Reply-To: ' . $email . "\r\n";if(!empty($_POST['first_name']) && !empty($_POST['last_name']) && !empty($_POST['email']) && !empty($_POST['subject']) && !empty($_POST['text'])){
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
my_contact_form_generate_response("error", $email_invalid);
}else{
$sent = wp_mail($to, $subject, strip_tags($body), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?><?php get_header(); ?>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<?php echo $response; ?>
<h2>Contact</h2>
<br><br>
<form action="<?php the_permalink(); ?>" method="post">
<div class="form-group">
<label for="email">Name <span>*</span></label>
<div class="row">
<div class="col">
<input type="text" class="form-control" name="first_name" value="<?php echo esc_attr($_POST['first_name']); ?>">
<p class="form-paragraph">First Name</p>
</div>
<div class="col">
<input type="text" class="form-control" name="last_name" value="<?php echo esc_attr($_POST['last_name']); ?>">
<p class="form-paragraph">Last Name</p>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email address <span>*</span></label>
<input type="email" class="form-control" name="email" id="email" value="<?php echo esc_attr($_POST['email']); ?>">
</div>
<div class="form-group">
<label for="subject">Subject <span>*</span></label>
<input type="text" class="form-control" name="subject" id="subject" value="<?php echo esc_attr($_POST['subject']); ?>"/>
</div>
<div class="form-group">
<label for="text">Message <span>*</span></label>
<textarea rows="3" cols="10" class="form-control" name="text" id="text" ><?php echo esc_attr($_POST['text']); ?></textarea>
</div>
<input type="hidden" name="submitted" value="1">
<input type="submit" value="SUBMIT" class="submit-btn">
</form>
</div>
<div class="col-lg-3"></div>
</div>
</div>
<?php get_footer(); ?>
Let’s test
we can start testing it by submitting the form with no content at all. This should be the output
When filling out all the information, the output will be like this
Conclusion
We now have a working contact form page with the ability to send messages that will get to the website admin email.
Our theme is ready to be used and is working nicely.
What should we do next?
Although we have a working theme, there are some things we can improve. Here are some options I thought of that you can implement so the theme will be better -
- Create a 404 page. Now, if you browse to any page that we don't have on the
pagessection in the admin panel, we will see thepage.filetemplate (obviously, an image will not be shown). - Add a
blogandpostpage. WordPress is mainly about creating posts. Currently, we don’t have any design or functionality for posts. - Enhance the functionality of the contact form by not showing the submitted data in the
inputonce the form has been sent. - Most likely that the messages from the contact form will be sent to the
spamfolder. You can overcome it by using SMTP. - Add a ReCaptcha or something else for the form.
- Move the form validation logic to a different file, just for convenience.
There must be other things that can be added to improve the theme. For now, this theme is working good and for my friend, it is exactly what he needs.
Hope you enjoyed this article and most importantly, you learned something new!
