June 15, 2014

WordPress Page Templates Tutorial

In this lesson we learn how to use page templates and conditional logic to apply different layouts to different WP pages.

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review).

Do you want to share the WordPress website that you’ve been creating on your computer with the world? The next step is to use a web host to share your site with the world. Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month.

View the entire “Learn WordPress” series

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

12 thoughts on “WordPress Page Templates Tutorial

  1. Hi,

    I love your tutorials! They are very clear and logically arranged! Thank you so much!

    One thing I wondered is if clearfix was status quo. I had a class last fall where we hand-coded everything on our web pages, and had found a clear fix hack at one point to get something to work, and my prof said that it was a hack, and improper. We had clear:both; etc. in much of our code. However, you do this for a living.

    So, are clear fixes things that most web developers commonly use?

    Thank you so much 🙂

    1. Hi Klara, that’s an excellent question. There are certainly pros and cons to using the clearfix strategy, but I think most web developers agree that the pros significantly outweigh the cons.

      The actual CSS declarations that makeup a clearfix rule have changed over the years, but in its modern form it cannot be considered a hack, although I can understand why your professor would label it “improper.” The “clearfix” class is not semantic – so your professor might have not wanted you to add non-semantic classes to your HTML. So for example, you wouldn’t give a class of “blue” to an element, but instead give it a class of “main-item.”

      All modern frameworks include a clearfix helper class and/or a “row” or “group” or “grid” utility class that is designed to auto self-clear floats.

      There are many different modern ways of auto / self-clearing floats, but the alternative, like you mentioned, involves manually assigning “clear” declarations for elements that sit below the floated content. Most developers like to keep content modular or self-contained so it can be moved around the site without worrying what element sits below it – hence why self-clearing elements are so desirable.

      There is no right or wrong way to clear floats – it’s all just developer preference. Every relatively modern device under the sun will render both strategies exactly the same.

      Hope that helps!

  2. Hi,

    I have been following your video tutorials very closely and they are very simple and easy to understand.

    I have followed up to the place where we are setting permalinks. Once that is set and and saved, when I click on any menu button, the page does not display. Instead I get the following page.

    URL: http://localhost/wordpress/portfolio/
    This comes perfectly well but not the page.

    Not Found
    The requested URL /wordpress/portfolio/ was not found on this server.
    Apache/2.4.9 (Win64) PHP/5.5.12 Server at localhost Port 80

    Please help me sort this out. What could be the reason for this? Where have I made the mistake?


    1. Hi Hazem,

      I’ve found that selecting a new permalink scheme and saving, and then re-selecting your desired permalink option a 2nd time and saving can help iron out problems when changing permalinks.

      Also, when you edit the “Portfolio” page in WordPress, can you confirm that it’s permalink slug (directly underneath the title) matches the URL WordPress is attempting to load?

      Also sometimes restarting Wamp / Mamp / Xampp can solve the issue.

  3. Hello Brad,
    I had no problems at all along the course but there is a little thing annoyed me a lot. I can’t put the border under the disclaimer. So, when my page has no content disclaimer pass through the footer border ! 🙁 I can’t solve issue, I hope you can help me…

    1. Hi! The issue you described sounds like it might be a float problem, and you need to clear the float. I’ve created a YouTube video on the topic of clearing floats – hope that helps, thanks!

  4. Don’t let this get to your head, but…

    You are one of the best teachers I have found online! (And I have seen a lot).

    The way you don’t assume anything of the student and don’t try to make yourself look super cool by doing fancy things that you don’t explain (unfortunately common in this industry) is awesome and refreshing!

    I am consuming everything you put out like a hungry beast! (Even stuff I already know, you give some insights that I wasn’t aware of). Bravo good sir!

    1. Thanks so much for the kind words Kyle! I can definitely relate to being frustrated with people trying to do super complex / fancy things which have nothing to do with the concepts being taught… all in the name of looking cool or smart or advanced etc… I’m sure I’m guilty of that at times too haha, but I do try to avoid that as much as possible so I really appreciate you mentioning that. I hope your WordPress stuff is going well, have a good one!

  5. Hello Brad

    I agree with all the other contributors here – you have a fantastic job. One thing I’ve noticed though – your functions.php file in the screenshots and download seems to be missing the closing ?> characters from the end that I see in all other PHP scripts/files. Is there a good reason for this?


    1. Hi John, I’m glad the WordPress videos are helpful! If we were creating a PHP page from scratch we’d definitely want to include the closing “?>” and I used to even in WordPress, but I’ve since read that it’s considered a best practice in WordPress to leave that out. I can’t remember the exact reason off the top of my head but I do remember that I didn’t make it up, ha!

    2. Actually I think I can help with this one:

      It is considered best practice to leave off the ending php tag on a page that is composed entirely of php–on any php script (WordPress or not).
      The reason is because in certain circumstances any left over white space after the ending php tag can cause problems on some servers.
      And since the ending tag is not needed on a page that is entirely php, it is better and cleaner to just leave it off…

Leave a Reply

Your email address will not be published. Required fields are marked *