Applet Orchard

WordPress Page Templates (Theme Development)

[ad_1]
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:

Posted

in

by

appletorchard

Tags:

Comments

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

  1. Alexandru Andrei Avatar
    Alexandru Andrei

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

    Reply
  2. James Summers Avatar
    James Summers

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

    Reply
  3. Irvan Ludianto Avatar
    Irvan Ludianto

    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!!

    Reply
  4. Taufiq Rahman Avatar
    Taufiq Rahman

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

    Reply
  5. Kevin Rodríguez Avatar
    Kevin Rodríguez

    what text editor is he using?

    Reply
  6. Dell Anderson Avatar
    Dell Anderson

    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?

    Reply
  7. Chris Dewsnap Avatar
    Chris Dewsnap

    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.

    Reply
  8. Derick van Zyl Avatar
    Derick van Zyl

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

    Reply
  9. Doble boyler Avatar
    Doble boyler

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

    Reply
  10. Kylie Staraway Avatar
    Kylie Staraway

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

    Reply
  11. Malick Cisse Avatar
    Malick Cisse

    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.

    Reply
  12. Juliette D Avatar
    Juliette D

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

    Reply
  13. Romy Kim Avatar
    Romy Kim

    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.

    Reply
  14. rot rose Avatar
    rot rose

    Great!!!

    Reply
  15. Timothy Wellens Avatar
    Timothy Wellens

    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.

    Reply
  16. adamfeoras Avatar
    adamfeoras

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

    Reply
  17. Yanka Dudenko Avatar
    Yanka Dudenko

    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!!

    Reply
  18. Casey Williams Avatar
    Casey Williams

    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?

    Reply
  19. Luigi Octaviano Avatar
    Luigi Octaviano

    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!

    Reply
  20. Sil Emmo Avatar
    Sil Emmo

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

    Reply
  21. Fernand Anthony Tripulca Avatar
    Fernand Anthony Tripulca

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

    Reply
  22. Arjun Panday Avatar
    Arjun Panday

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

    Reply
  23. Dan Dumitru Avatar
    Dan Dumitru

    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!

    Reply
  24. Isuru Fernando Avatar
    Isuru Fernando

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

    Reply
  25. Yanira Zelaya Avatar
    Yanira Zelaya

    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

    Reply
  26. maria matkowski Avatar
    maria matkowski

    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?

    Reply
  27. Twiistrz Avatar
    Twiistrz

    Thank you for your tutorial it helps me a lot

    Reply
  28. Basem Essam Avatar
    Basem Essam

    for everyone when changing permalink to month and name have 404 error on server adding this in Custom Structure
    /index.php/%year%/%monthnum%/%day%/%postname%/

    Reply
  29. Al Kanadi Avatar
    Al Kanadi

    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?

    Reply
  30. justarogue Avatar
    justarogue

    Thanks for your help.Much appreciated

    Reply
  31. Shadowslip 71 Avatar
    Shadowslip 71

    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; }

    Reply
  32. Puneet Sharma Avatar
    Puneet Sharma

    Like your tutorials

    Reply
  33. Thomas Flynn Avatar
    Thomas Flynn

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

    Reply
  34. Satori Secrets Avatar
    Satori Secrets

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

    Reply
  35. Ευγένιος Μουστέι 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!

    Reply
  36. cisko3000 Avatar
    cisko3000

    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.

    Reply
  37. Wayne Khalifa Avatar
    Wayne Khalifa

    just wanna know which text editor are you using?

    Reply
  38. Zicko ghosh Avatar
    Zicko ghosh

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

    Reply
  39. FinalXChapter Avatar
    FinalXChapter

    He writes so damn fast holy crap lol

    Reply
  40. Mot Con Avatar
    Mot Con

    Thank you LearnWebCode. You are the hero!

    Reply
  41. ochiorbus Avatar
    ochiorbus

    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.

    Reply
  42. ochiorbus Avatar
    ochiorbus

    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.

    Reply
  43. 69ReasonsToLoveME Avatar
    69ReasonsToLoveME

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

    Reply

Leave a Reply

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