WordPress Page Templates (Theme Development)
ฝัง
- เผยแพร่เมื่อ 8 ก.พ. 2025
- Join my 2024 Complete WordPress Course here learnwebcode.t...
In this lesson we learn how to use page templates and conditional logic to apply different layouts to different WP pages.
My recommendation to host your WordPress website is DreamHost (I've used them for 19 years). If you use my link to DreamHost it helps support my TH-cam channel click.dreamhost...
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):
learnwebcode.co...
Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at learnwebcode.com/
Follow me on Twitter for updates and cat pics:
/ learnwebcode
I can't believe this series is 10 years old. While a lot has changed in WordPress over the years the core concepts remain the same and I hope this series is helpful in your learning journey. For anyone who is curious, my recommendation for hosting your WordPress website is DreamHost and specifically their "Shared Unlimited" yearly plan (the exact plan I've used for 19 years). If you use my link to DreamHost it helps support my TH-cam channel and costs you nothing extra: click.dreamhost.com/aff_c?offer_id=109&aff_id=17231
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
I'm crying 😥. Wasted a lot of time to understand it. Today, it's totally crystal clear to me. Thanks a million. 👍
OMG! You're like the best teacher someone could wish for. Great Work!
FOR ALL THOSE WHO CAN'T GET THE PAGE ID ON THE URL:
At the bottom-left of the wordpress control panel you have a button Settings. In that click permalinks. And then click on simple/default (depends).
Thank You!!
Thank you !!! You re a blessing!!
thank you for this comment
Thank you !!!
Thank you
Hey, Brad. I've recently completed 3 of your courses on Udemy. Now I am looking for some information and here you are teaching me again from the past. I've built my developer career thanks to you. Excelsior! PD: Your voice have changed, man! Lol
Kudos to the author and his team. I have never written a .css .php or a .htm file, although I admit having programming exp in other languages. The lecture are a well thought presentation of carefully selected ideas. The voice over and pace is also great.
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.
This video explained WP themes / theme development better than any tutorial elsewhere EVER, video or blog. Just wanted to drop a GIGANTIC THANK YOU for making the video and explaining everything so clearly. I think now I have a much better understanding of how to architect whole sites from scratch without the need to tweak some random theme, and especially, read other people´s code. No one likes that.
Henrik Tenhovirta Thanks! I'm glad you found the video helpful!
Yea bro, thanks a ton! It is really better than anyone, anywhere. You've gone the extra mile. Thank You So much.
Man your tutorials give a lot, i mean a lot for people to develop with Wordpress. Impressive. I was thinking of just hacking one of the themes and overriding it with my customizations, your tutorials really sped things up. Thanks.
- And now I've got a load of CSS tags to read up on, .. (wonderful tutorials.)
Highly recommended.
viewed so many tutorials but yours are awesome. Not intimidating, easy and well explained. Thank you.
You are awsome instructor. The way you instruct and talk is very much directive and pointful.
Thank you very much
Awesome tutorial series!
First one I've encountered that shows Wordpress for what it is: simple and powerful. I've postponed learning Wordpress for way too long now. Thank you for ending my procrastination!
Thanks very much for theese tutorials! I was trying to follow other tutorials on the same topic but where very hard to follow for people like me that has no much knowledge of php and wordpress. But your tutorials are easy to follow and very practical! My desperation of thinking that I'm not gonna be able to create my own Wordpress Theme is falling away. Thanks a lot!
Obviously, you were born to teach ! Although I'm French (nobody's perfect... just kidding !), I find your tutorials super easy to follow and, moreover, really entertaining!
You must be an extremely talented web developer to be able to make such videos. I've been watching many courses on several networks but yours are simply unrivaled!
To quote Nicolas Boileau :
"Ce que l'on conçoit bien s'énonce clairement,
Et les mots pour le dire arrivent aisément."
Thank you for the efforts and preparation time that it represents!
Thank you for the kindest words I could possibly imagine! I'm happy to hear you enjoy the videos! I'll have a few more ready to view this week.
Dude! You rock!!! Best tutorials I have ever seen and I've seen a gazillion.
This is a great tutorial. Most other tutorials on this topic are unclear or throw you in the deep end. This video series builds a theme incrementally from the bottom up, explaining clearly every step of the way. Thank you
Charles Pilgrim Thanks so much for the kind words! It's great to hear that you've found the series useful (I'm hoping to add more WP videos soon :)
Thanks for this tutorial, really helpful. I don't think I'm ready to start building my own themes yet, but this gave me good understanding of how everything works. I'm probably going to modify an existing theme with this information.
***** I'm glad it was helpful! Modifying an existing theme is one of the best ways to learn and get more comfortable with WordPress. Sounds like a great plan! Having said that, some themes are easier to edit than others :)
Excellent tutorial series. I have been struggling with exactly how Wordpress dynamically generates html pages. Thanks for this clear and concise overview.
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; }
what does this code do? It dont affect the output.
Hello , even after doing this , my code just does not seem to be doing anything!, the styling will not work for the two column layout. dont know if you could help, know this was a while ago for you haha
You are a hero
thnx dude
Hold CTR and f5 at the same time, it should force refresh your page. That is what helped me. Do that on your portfolio or the page you want to effect, not at the WP admin.
damn, your wordpress tutorials so far are so good. Thanks.
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!
Thank you LearnWebCode. You are the hero!
Thank you very much for all your efforts. This is amazing to have this level quality of education for free of cost. Thank you LearnWebCode and of course TH-cam.
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.
Thanks for this tutorial playlist, i am finding it extremely helpful, it is the best Wordpress tutorial on TH-cam to code your own Templates.
Thanks for this tutorial, really helpful. I don't think I'm ready to start building my own themes yet, but this gave me good understanding of how everything works. I'm probably going to modify an existing theme with this information.
these are great! I'm starting to like wordpress due to the coding aspect. great videos man, exactly what I was looking for!
Why is it that I find this free tutorial more useful than the tutorials on template development on lynda.com which I pay for? Awesome tutorial. Thanks dude.
ShawnnyGee because most of them leech for money and leave you with the bare minimum knowledge not enough for practical use
Your tutorials are the best by far.
Thanks a lot
Great tutorial, fantastic channel, keep up the good work.
Really easy to understand! Great job and thank you very much.
Very Helpful Tutorials Looking forward for more on WP Customization & Template Building Thanks A Lot
Awesome teaching style thank you so much for sharing your tutorial.
Really nice job on explaining. I understood everything. Thanks and appreciated!
what is the syntax font you are using for coding in your code editor? the letters look beautiful...
FYI: I wasn't able to change my CSS until I realized that SOMETIMES YOUR BROWSER DOESN'T CLEAR YOUR CACHE MEMORY when you refresh your page. So, although i was refreshing the page, it was still using the previously saved version of the CSS file. I cleared my history and it worked. Hope this helps someone
this saved my day (night), thank you!
Beautiful Course.Thank You Vrey Much ...I learn many many things,U could be a teacher ,u expalain very good and very easy to understand!!!
Thanks man! I just subscribed to your channel! You've been a great help! Kudos!
Amazing Tutorials Thanks.
kanouni youssef I'm glad the tutorials were helpful, thanks!
These tutorials are incredible!!!
These videos are very detailed and explain things clearly for beginners like me. Do you think it'd be worthwhile explaining the WP Hierarchy. I sort of understand it but I'm sure you could explain it well in a video.
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.
Thanks LearnWebCode for your great turorial.
Thank you so much for this! These are the techniques that I need to \know for my customizations. Continue to make sir.
Thank you #LearnWebCode These tutorials are really awesome.Guys go eat those Tutorials
Great tutor! Thank you for sharing so nicely your knowledge!
At around 5:30, you created a div and were able to define its class and comments with three cursors simultaneously. How did you do that?
+Aaron Makaruk It is an editor called sublime text
www.sublimetext.com
Thanks, but how do you select two locations and write on them both at the same time like you did - custom shortcode?
+Aaron Makaruk Hi Aaron, you can find a good way to do this here on SO - stackoverflow.com/questions/22099813/sublime-text-2-multiple-line-edit
Thank you, this was very helpful
You're welcome! Glad this video was helpful.
Great tutorial and great explanation: thank you very much!
i learn a lot, thank you very much!!!!!
So much thanks to you ! You help me a lot ! Good tutorial, made me know a lot !
For the text inside the disclaimer box, its there a way to expose that within the wordpress admin UI or does something like that have to specifically be hard coded?
in 6:23 how come that footer stayed in same position, i did just like u did and i had to use clear both for footer so it stays in same place.
Love this series. Still have quite a few to watch, but starting to understand WordPress more and more. I like the disclaimer boxes, but how would you make it to where the user could edit the text that goes in them? Or would you even want to give that functionality? Thanks!!
Great job, sir! I'm really enjoing this course
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?
I created a "News page" for posting articles. I also want to have some custom code for banner on the top. So the articles will be under. I created page-news.php to do custom banner. How do u do put blog posting and other custom code together?
Amazing tutorial series. Thank you so much!
I love you sir.... such a nice lecture....
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!!
Nice and Clean Tutorial
Thank u lot...... for ur sharing ..... thank again....
Verry simple Tutorial,, like it, very helpfull.
Thanks very much.. GBU
Loving your tutorials, great videos and brilliantly explained!!
I have a question on the "disclaimer" text at 10:36 ...Supposing a client wanted to change the text in a box like this from time to time, obviously you wouldn't want them messing around with PHP files, so is it possible to include this text as HTML in another page, and include that page inside the box, i.e. like a kind of ?
Great tutorial
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?
Another note to quickly find the page ID. If you go to page list and just hover over the pages you will see the URL in the bottom left. Just a quick way of gathering id's
Hey LearnWebCode , awesome tutorials !! Your videos have given me the confidence to not only build my first theme but to try other things like create a single page home page. The problem I am having atm is that I would like the conditional if statement to target front-page.php is that possible?
how can i put the content of the info-box using the dashboard? or do i need to put the content manually on the special page template?
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!
i have real estate website and when i add new properties in page attributes i get parent and in the drop down list of page parent i get a list of recently posted properties instead of menus or pages, how i can edit this parent drop down list
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?
Perfeito, suas aulas está me ajudando.
What if I'm developing a multilingual website using the polylang plugin, I cannot use the page-[slugname] or page[pageID] to have different layouts for some pages, since each page has different Id or slug name for each language :/, is there anything i can do to fix this problem ?
Very good tutorial !!!
Whenever you write something you do this so fast! :D I cant keep up with writing the code! ;D
Very Nice wordpress Tutorials....
Thank You..
Just Love your tutorial
very helpful tutorial,thank you sir
Hi, thanks for this awesome course. Is there any way I can do the comments and class all at the same time, in visual studio code?
Why does my style sheet not always translate into the page.php files? I followed along with the same exact code and the div.info-box styles didn't apply to the page files. Any idea why?
Thank You!.... Great tutorial
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.
i want to that what is the shortcut of( div+comment ) section [what key you are pressing]
When I add the page template (page-11.php in my case) the footer goes full-width. Do you know why this is happening? Do I need to create a page template specifically for the footer as well? The video is going great by the way. I just had this quick question. Thanks!
Nvm, I was able to fix the error. Great tutorial again! I feel like a real developer already!
Great tutorials man!!! - trying to keep up while I work on my own stuff... just that my CSS is awfully messy.
Cheers to u bro.....Thanks :) The only good tutorial for wordpress
Thanks for your help.Much appreciated
very good and useful tutorial. Can you tell me how can be added multiple special templates?
I don't know if this has changed since this video was made but my url bar isn't displaying the page id. Neither Firefox nor Chrome.
+Kevin Houk Looks like you need to go to settings and set the permalinks to plain in order to make it display.
Amazing TUT!!!!!!!!!!!!
I have question, how to add pagination in the blog page?? onload i want to show only 4 blog post rest will show only i click next page or previous page.
Im having issues with getting the 2 column layout to work and also the little 'disclaimer' box. i've copied the code exactly, it just doesnt want to pick up the styling at all. did anyone else have this issue?
So your columns aren't floating to the right or left? What styling isn't getting picked up?
Really HelpFull TuTorials :)
Hello,
I am following your video, but my wordpress version is 4.9.1 and i don't have Template on Page Attributes.
How can i do ?
Regards
i have a couple of questions,
1) the footer is raised to the top of the page when i make a 2 column text and
2)when creating the "disclaimer title"box the text from the page also is sent into it.
Are these issues being caused by the extra code you have added in?
+Ben Haden (Samuel Finch)
Yes. Because he's using floats, the formatting relies on clearfix in the style.css file. Try pausing the video @ 6:03 or so and copy the clearfix CSS into your style.css. Also make sure that your page-*.php file has the clearfix selector.
+cam moorehead thanks for that will, give that a try
best best best and at last best
nice way of instruction Thanks.
i can not use the page-portfolio.php file i have to use (page-14.php), even when my permalink setting are on Post names or Month and Names its working with the number version... same for the conditional logic, i have to use if (is_page(14)).... why is that....
thnx buddy really grt tutorial i am looking for like this