WordPress Page Templates (Theme Development)

In this lesson we learn how to use page templates and conditional logic to apply different layouts to different WP pages. Check out my “Get a Developer Job” course:

To view a complete list of the WordPress lessons in sequential order visit:

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):

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month ($60 savings):

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






43 responses to “WordPress Page Templates (Theme Development)”

  1. Alexandru Andrei Avatar

    very good and useful tutorial. Can you tell me how can be added multiple special templates?

  2. James Summers Avatar

    Instead of that conditional code, couldn't you just create a portfolio template instead?

  3. Irvan Ludianto Avatar

    I tried to make a theme file with a matching name (call it page1.php), it success. Then I create a new custom page templates and I made page1 use the custom template. That make my page1.php become useless. If I change page1 into default template page1.php works again. So template file with a matching name can only be used if the page is using default template or not?

    By the way your tutorial is great, really helps. Thanks mate!!

  4. Taufiq Rahman Avatar

    </header> become a syntax error when I take that "if" function, please help me guys,

  5. Kevin Rodríguez Avatar

    what text editor is he using?

  6. Dell Anderson Avatar

    Great explanation of custom templates, however I have one question: Since you simply copied the main page code content used by default template, then added the 'info box' for the special template, what happens if you later decide to edit the default template main page content? Are you stuck editing in two places or is there a DRY method to do this? Can we use SSI (Server Side Includes) instead with WP to modularize development better?

  7. Chris Dewsnap Avatar

    Your tutorials are great, I used a different CMS before trying WordPress, but I have ran into an issue.

    I am following you tutorials line for line, but WP does not seem to recognise page.php.

    The changes you go through in your tutorials are not affecting my page themes.

    Please guide me as I feel changing to WP was a good move.

  8. Derick van Zyl Avatar

    Dude! You rock!!! Best tutorials I have ever seen and I've seen a gazillion.

  9. Doble boyler Avatar

    Verry simple Tutorial,, like it, very helpfull.
    Thanks very much.. GBU

  10. Kylie Staraway Avatar

    Is there a way to make an empty page with just 2 buttons before the site? Using filezila is to difficult

  11. Malick Cisse Avatar

    Very nice tutorial. I have followed this series from the beginning and don't remember where you mentioned the importance of clearfix. I encountered a problem with the footer and I didn't know how to go about it until I read in the comment that we should include the clearfix in the CSS not just the page-portfolio.php.

  12. Juliette D Avatar

    Btw for those, like me, who's conditional page is the home page, you can simply put: if (is_home())

  13. Romy Kim Avatar

    With manual coding, I have so much trouble with CSS showing quite different results on different browsers. Does anyone know if WordPress has a built-in method to better handle this issue ? Also, is it possible to use javascript within WordPress ? Simple tests proved it doesn't work as is.

  14. Timothy Wellens Avatar

    hi man great vids! Do you mind telling me which code writer you use? It seems to fill out soms things on its self and look super handy cause i am typinng sooo much. Thanks man.

  15. adamfeoras Avatar

    The disclaimer is appearing, but none of the associated class-styling (i.e. div.info-box) is appearing.

  16. Yanka Dudenko Avatar

    Hey! I used SPECIAL LAYOUT Template (with INFO BOX) for a page which doesn't have any other written content yet, other than the header. My footer menu is running through it rather than having yielded and moved to the bottom. The only info which moved to the bottom of the info box is the copyright. Any solutions? Thanks!!

  17. Casey Williams Avatar

    I have literally copied and pasted your code from the zip files and can't get portfolio page to work. The content text on my portfolio page eventually begins in to leak into the left column underneath the title. Anyone have any ideas?

  18. Luigi Octaviano Avatar

    Another tip: You can also use echo function inside the if else statement if you want. but for the sake of this tutorial, i did his method so that everything will no go wrong. Nice tutorial btw. Thanks!

  19. Sil Emmo Avatar

    If someone has a way to change the text in the infobox with the dashboard that will be great.

  20. Fernand Anthony Tripulca Avatar

    Thanks man! I just subscribed to your channel! You've been a great help! Kudos!

  21. Arjun Panday Avatar

    You are awsome instructor. The way you instruct and talk is very much directive and pointful.
    Thank you very much

  22. Dan Dumitru Avatar

    I cant get past the two column layout, all the code appears to be right, i tripple checked all of it over and over but the right side just kind of wraps around the title it does not separate and float to the right. I dont understand what im doing wrong. Please help! I'd really appreciate it! Thanks!

  23. Isuru Fernando Avatar

    Really easy to understand! Great job and thank you very much.

  24. Yanira Zelaya Avatar

    For the first time I really understand THIS wordpress famous hierarchie.
    Your tutorials are of the best of the best.

     A big thanks to you

  25. maria matkowski Avatar

    Great tutorial! Thanks a lot for that! But what did you do to get your Editor to give you the whole comment and div-Code just tipping in "info" and div? How did you preset this?

  26. Twiistrz Avatar

    Thank you for your tutorial it helps me a lot

  27. Basem Essam Avatar

    for everyone when changing permalink to month and name have 404 error on server adding this in Custom Structure

  28. Al Kanadi Avatar

    If you change the style.css file, will the changes remain after the theme is updated to a new version? Will the custom css suddenly disappear after an update?

  29. justarogue Avatar

    Thanks for your help.Much appreciated

  30. Shadowslip 71 Avatar

    For those who are not getting the text to sit next to the title in the portfolio page, copy the below into your css file. You can see the code at 6:05.

    Would have been helpful to have mentioned this in the video!.

    /* Clearfix */
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }

  31. Puneet Sharma Avatar

    Like your tutorials

  32. Thomas Flynn Avatar

    So i followed the instruction with the disclaimer part but its not inside a box… any suggestions? thanks in advance.

  33. Satori Secrets Avatar

    ?!? How do you get the PHP Files!?!

  34. Ευγένιος Μουστέι Avatar

    hello sir! How did you add post to other page than the index… I want to add a post to portfolio page and try what you did but any post that i create goes to index page. Please help. Thanx!

  35. cisko3000 Avatar

    Awesome videos. I never really liked WordPress because of PHP and some bad experiences but these tutorials have opened my mind about custom theme development. I think I'll enjoy it. Will definitely pick a WordPress based gig now.

  36. Wayne Khalifa Avatar

    just wanna know which text editor are you using?

  37. Zicko ghosh Avatar

    superb tutorial sir……i'm a fan of your channel now

  38. FinalXChapter Avatar

    He writes so damn fast holy crap lol

  39. Mot Con Avatar

    Thank you LearnWebCode. You are the hero!

  40. ochiorbus Avatar

    At 10:40 you said it is easier to update it because it is only in one place. I was wondering how can you include this functionality within wordpress dashboard in order to update the text from there, especially if the user is a not a developer.

  41. ochiorbus Avatar

    Isnt a bad approach using the page id ? I mean, if I delete the page, and then add it again, I would need to change the id in the conditional statement too, right ?

    Also, customizing with css different menu locations using the menu group container seems a bad idea.

  42. 69ReasonsToLoveME Avatar

    what should I do if the wordpress tool bar is not showing and it only shows my webpage

Leave a Reply

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