7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.15 The Full Width and Contact Page Templates

Hey, welcome back. In the previous lesson, I wrote the 404 page and search.php, which displayed search results based on a certain keyword. Well, right now, if we take a look at the road map, we can see that we still have to build the full-width template and the contact template. So, let's do that right now. First of all, the full-width template. Basically, it's for a page that doesn't have a sidebar. So, this is probably the easiest one to do. We just go to page.php, we copy the content, and then we create a new file called template-full-width.php. We paste this in and then on the very top of the page, we do this, template-full-full-width.php, and the one line of code that will make WordPress recognize this as a page template is this, Template Name: Full Width Page. So now if we go into our WordPress back end andpPages and let's say we find this lorem ipsum page. We go to Template and we have Full Width Page. Select this, Update. And now if we access that page, it's gonna use this newly created template. So what we got to do here is remove the sidebar, and since the main-content is designed at first to work on 8 columns, we're gonna change this to 12 columns, because we don't have a sidebar anymore. So we're gonna save, refresh, and now the sidebar is gone. We only have the content and then the footer. So, that's basically the full width template. Now, for the contact template, I went ahead and coded for you. And I'm just gonna explain what I did there, because it's not actually related to WordPress. It's more PHP involved and your final theme will most likely contain like a plug-in to generate your contact form. Like Contact 7, I think it was Gravity Forms. We'll also have great forms that you can use. So I just made this template contact to show you one way you can do it. So first of all, it's like a normal template. It has the headerm, it has the main content, it has the page header with the thumbnail, the title, and it also has the footer with the edit link. And then it has a sidebar and a footer. Now the tricky part is in the content. So I have a, let's see, Pages. I've created a page called Contact which has the contact page template with some very simple content. And in my PHP file I've also added a form with three fields, one for name, one for email and one for message which uses a text area. At the very top when the form is submitted, I get the posted values and put them in these variables. Then I validate each one and I've made a function called alpha validate length which, let me just show you real quick. So alpha_validate_length basically takes two parameters, the field value, which you'll need to validate and the minimum length it must have. And in here I just return the result of strlan, which is a function that measures a string's length. Of course I trim the value first to remove trailing and leading white space, and then if the length is higher than the minimum length, then I return true. Else, I return false, and this in turn will activate some variables here. If I have an error, then $isError will be set to true. And in In the $errors array that I declared right here on the top, I get an $errorName which is defined right here. To check the email, I use the is_email function, which is native. And then on the message I use my own custom function. So, if there is no error, then I initialize some variables for the emails subject, body, and headers. And also I get the email receiver as the admin email. Which can be set from going to users, selecting admin, and this is your email. So once I do that, I declare a variable called email is sent, and it will receive the result of the wp_mail function, which is a work Press function for sending emails. Now once I do that, I'm using that variable to determine if my email was sent successfully or there was an error. And also, I'm using the error variables to show an error if a certain field is invalid, okay? So, let's do a quick test here. If I refresh my page, send message, sorry it seems there was an error, and it displays the error message under each field. So if I fill in message, I don't have an error here anymore if I fill in the wrong email address. Yeah, it still needs a valid email, the server I'm running right now cannot send email. So even if I fill these correctly and send message, it's still gonna say the message has been successfully sent, even those it hasn't been. But I have tested this on a live server, and the script does work. And as I said, on an end theme, you'll probably use like a plugin to power up the content forms. But this is a solution that you can have just in case you need something simpler. So with these complete, the only thing left to do is the widgets, and that's coming up in the next lesson.

Back to the top