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 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).
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.
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; }
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
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.
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.
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.
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!
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.
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!
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!
Excellent tutorial series. I have been struggling with exactly how Wordpress dynamically generates html pages. Thanks for this clear and concise overview.
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!
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.
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
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.
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 :)
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.
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.
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.
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 ?
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.
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!!
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?
At 6:22 my Two column title layout doesnt work, footer jumps up through text. But when I delete title-column and text-column in style.css it is ok. Any ideas?
Adam Kantorík a quick fix for that is putting a 'clear:both' css rule on your .site-footer .site-footer { border-top: 2px solid #999; margin-top: 2em; clear: both; } hope this helps
la.den.stå I'll try to explain this as simple as i can. floats are tricky. 'clear' property is used to specify where an element isnt allowed to float. when were floating an element we are pushing that element on the direction we want it to float(e.g. float:left) leaving an empty space where that element was originally placed. on my code I have specified a width of 60% and floated it right. which means that I have a 40% empty space on the left sift of my layout. ----------------------------- div.text-column { width: 60%; float: right; } and the size of my footer was determined by the amount of elements I have inside. (which is less that 40%) ---------------------------- .site-footer nav ul li { margin-right: 1em; padding-right: 1em; border-right: 1px dotted #bbb; } which means the empty space on my 'div.text-column' is big enough to fit my entire 'site-footer'. This is where the 'clear:both' comes in. to make it simpler 'clear' property fills up all the empty spaces in your element
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
Guys, please help me. After i add the column container in php and css for a particular page, my footer (only on that page) goes to the top and stands in the middle of the text. I can't find what I did wrong...
+Marian Caraman I had the same issue. Adding "clear:right;" to the ".site-footer" in css didn't help much for me, though. Wasn't able to find a solution, I simply changed Footer->margin-top value from 30, I guess, to 120px in style.css. Looks like this: /* Footer */ .site-footer { margin-top: 120px; border-top: 2px solid #999; Probably not the smartest solution, but since I wasn't able to find what's wrong with my code, I realized that I can change this and move ahead.
+Marian Caraman Same thing happened with me. But using "clearfix" in css as mentioned in video helped to move footer again at bottom. /* CLearfix */ .clearfix:before, .clearfix:after {content: ""; display: table;} .clearfix:after{clear:both;} .clearfix{*zoom: 1;}
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
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?
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?
+Jordan Carter Absolutely! You can try looking into a plugin named "Advanced Custom Fields" which would allow you to do that. I'm hoping to create a series on custom fields shortly.
+Jordan Carter Or if you don't want to use a plugin you could make the text in the info-box it's own dedicated post. There is a video on my channel towards the end of the WordPress playlist on "Creating Custom Loops" which would show you how to then pull in that "info-box" post in your custom page template. Hope that helps!
Why when I change to Month and name and then click on some page it send me to Not Found The requested URL /wordpress/contact/ was not found on this server. ?
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?
Sebastian King hi, there is no 'float: middle' property. if you want to center something you use a margin property example HTML: . . . CSS: header.center { margin: 0 auto; } the '0' value gives a 0 length from top to bottom the 'auto' value automatically gives an equal margin length from left to right hope this helps
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 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.
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?
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!
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.
In the privious video article /* Page Layout */ .page h2{ font-size:300%; and now is different, when did you make the change ? i whant to see the full css.php
+LearnWebCode After creating a template how do I set it up so that I can start adding plugins and objects? I am trying to use a form page plugin cause I can't write the backend code to process the form.
A lot of plugins will add their own buttons / icons to the content editor on the post/page edit screen (the same area that has the bold and italic buttons, etc...). Or a lot of other plugins (like Contact Form 7 for example) will give you a "shortcode" after you create a form with the plugin and you can simply paste that shortcode into the post/page main content field. Or, a lot of other plugins give you access to new widgets. So you could add a new custom widget area to a page template. On the "WordPress" playlist on my channel you'll find a video about widgets if you're interested in that route.
I've try several templates and none of them let me put anything into the template I did. Those that have a drag and drop method lets me drag but as soon as l let go it goes away and is never put into my template. I've also tried Contact 7 which I do everything to set up the form but it never generates the page with the form in it. I never get any button to preview or display it. It is like I get the front end of these plugins but no working back end that actually creates the code in my template. Thank you for answering my questions.
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!!
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 ?
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?
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 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....
I have basically 6 pages including homepage, all have save navigation menu, but their text colour is also same on every page which is what i need to change, as i need to change every other nav menu text color white if its not homepage. I have used condition is_front_page(), but seems css is not applying to all pages except homepage(index.php).
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
I wanna ask you- when i want to make special layout, i cant because i cant see the option template, just parent and order, what should i do? many thanks
ok, I figured it out :D but little help for somone like me : first you have to write it in style.css and you will see template option while you´re editing the page, that´s why I´ve couldnt see it.
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?
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.
Is it necessary to understand the source code (ctrl-U) ? It doesn't look anything like what I typed in so far following your videos. I don't plan to make greatest website, but do want to add my own functionalities where user inputs and server does maths and returns a certain result.
I was talking about the code from ctrl-u. I know it does not show php, but other parts like html, js, etc seems quite different from what I'm used to with many many lines that I don't recognize (probably added by wordpress)
Thanks. I'm a newbie and still much more familiar to typing every single elements in a text editor. Wordpress suddenly showed so many things (at ctrl-U) that I didn't type in.... so..... that was the thing.
Thanks. Coding is the most difficult thing I've ever tried so far. If I don't get the basic concepts, I would have given up long time ago... but then, I do get basic ideas. It's just very very difficult to put them all together in a bigger tray.
Romy Kim coding is hard if you dont understand the logic or maths. Whilst you learn to code, i recommend you learn discrete maths on the side. This will help improve your coding logic and understand the maths behind the code in basically all coding languages
im am a newbie in wordpress and this tutorial teach me how to program in wordpress.. tnx.. pls upload more videos.. hehe.. ahm.. and i want to ask if wordpress can manage my tables in the database eg: inserting,updating,ect.. hehe :D tnx..
I'm at the part of setting up the two column page. Everything works except I only have one paragraph, but when I refresh it adds a copy of the paragraph (so two paragraphs) and the copied paragraph isn't floating right. I looked over the code a few times and i'm pretty sure it's correct but I could be missing something. Any ideas? These tutorials are awesome. I'm fresh to wordpress and no other tutorials have been this helpful.
I figured out why the paragraph doubled. I accidentally copied the into the text-column instead of cutting it in. BUT now my footer is crushing through the paragraph.
the previous video used to have a second part however it has gone. a few of the things in the second video will make this video alter the behaviour of the footer. if you pause at just the right time you will get enough of the code on screen to copy from
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
I'm crying 😥. Wasted a lot of time to understand it. Today, it's totally crystal clear to me. Thanks a million. 👍
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
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
OMG! You're like the best teacher someone could wish for. Great Work!
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.
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.
You are awsome instructor. The way you instruct and talk is very much directive and pointful.
Thank you very much
- And now I've got a load of CSS tags to read up on, .. (wonderful tutorials.)
Highly recommended.
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.
viewed so many tutorials but yours are awesome. Not intimidating, easy and well explained. Thank you.
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.
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.
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.
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!
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!
Excellent tutorial series. I have been struggling with exactly how Wordpress dynamically generates html pages. Thanks for this clear and concise overview.
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!
Dude! You rock!!! Best tutorials I have ever seen and I've seen a gazillion.
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.
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 :)
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.
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 :)
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.
damn, your wordpress tutorials so far are so good. Thanks.
these are great! I'm starting to like wordpress due to the coding aspect. great videos man, exactly what I was looking for!
Your tutorials are the best by far.
Thanks a lot
Very Helpful Tutorials Looking forward for more on WP Customization & Template Building Thanks A Lot
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
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 LearnWebCode. You are the hero!
Awesome teaching style thank you so much for sharing your tutorial.
Great tutorial, fantastic channel, keep up the good work.
Really easy to understand! Great job and thank you very much.
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!!!
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.
what is the syntax font you are using for coding in your code editor? the letters look beautiful...
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 ?
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.
Really nice job on explaining. I understood everything. Thanks and appreciated!
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!!
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?
At 6:22 my Two column title layout doesnt work, footer jumps up through text. But when I delete title-column and text-column in style.css it is ok. Any ideas?
Adam Kantorík a quick fix for that is putting a 'clear:both' css rule on your .site-footer
.site-footer {
border-top: 2px solid #999;
margin-top: 2em;
clear: both;
}
hope this helps
Marjo Forcado it helped, thanks
Marjo Forcado nice helped me to, but why is this needed?
la.den.stå I'll try to explain this as simple as i can. floats are tricky. 'clear' property is used to specify where an element isnt allowed to float. when were floating an element we are pushing that element on the direction we want it to float(e.g. float:left) leaving an empty space where that element was originally placed.
on my code I have specified a width of 60% and floated it right. which means that I have a 40% empty space on the left sift of my layout.
-----------------------------
div.text-column {
width: 60%;
float: right;
}
and the size of my footer was determined by the amount of elements I have inside. (which is less that 40%)
----------------------------
.site-footer nav ul li {
margin-right: 1em;
padding-right: 1em;
border-right: 1px dotted #bbb;
}
which means the empty space on my 'div.text-column' is big enough to fit my entire 'site-footer'. This is where the 'clear:both' comes in. to make it simpler 'clear' property fills up all the empty spaces in your element
Marjo Forcado thanks dude, nice answer. +1 for you fellow earthling.
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.
Thanks man! I just subscribed to your channel! You've been a great help! Kudos!
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!
Guys, please help me. After i add the column container in php and css for a particular page, my footer (only on that page) goes to the top and stands in the middle of the text. I can't find what I did wrong...
+Marian Caraman add "clear:right;" to the ".site-footer" in css, that'll work
+Marian Caraman use "clear-right" in the ".site-footer" in css.
+Marian Caraman I had the same issue. Adding "clear:right;" to the ".site-footer" in css didn't help much for me, though. Wasn't able to find a solution, I simply changed Footer->margin-top value from 30, I guess, to 120px in style.css.
Looks like this:
/* Footer */
.site-footer {
margin-top: 120px;
border-top: 2px solid #999;
Probably not the smartest solution, but since I wasn't able to find what's wrong with my code, I realized that I can change this and move ahead.
+Marian Caraman Same thing happened with me. But using "clearfix" in css as mentioned in video helped to move footer again at bottom.
/* CLearfix */
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after{clear:both;}
.clearfix{*zoom: 1;}
had the same issue and Clearfix worked magicaly
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.
Thanks LearnWebCode for your great turorial.
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?
Amazing Tutorials Thanks.
kanouni youssef I'm glad the tutorials were helpful, thanks!
Great tutorial and great explanation: thank you very much!
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
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?
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?
i want to that what is the shortcut of( div+comment ) section [what key you are pressing]
i want to know that what is the shortcut of( div+comment ) section [what key you are pressing]
Use 'Brackets' with Emmet plugin. you can get all the shortcuts you need.
Is it the same with ATOM?
Is it possible to make the text in the info-box dynamic, so that you can edit it in wordpress?
+Jordan Carter Absolutely! You can try looking into a plugin named "Advanced Custom Fields" which would allow you to do that. I'm hoping to create a series on custom fields shortly.
+Jordan Carter Or if you don't want to use a plugin you could make the text in the info-box it's own dedicated post. There is a video on my channel towards the end of the WordPress playlist on "Creating Custom Loops" which would show you how to then pull in that "info-box" post in your custom page template. Hope that helps!
+LearnWebCode I'll have to check it out. Thanks!
Why when I change to Month and name and then click on some page it send me to Not Found
The requested URL /wordpress/contact/ was not found on this server.
?
***** Thank you!
***** Thanks
***** Thanks a mill! I have been trying to fix this problem all day!!!!!
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?
Hi. If I wanted the header to sit in the middle would I write 'float:middle' ? I'm completely new to coding etc. so sorry if I'm completely wrong lol.
Sebastian King hi, there is no 'float: middle' property. if you want to center something you use a margin property
example
HTML:
.
.
.
CSS:
header.center {
margin: 0 auto;
}
the '0' value gives a 0 length from top to bottom
the 'auto' value automatically gives an equal margin length from left to right
hope this helps
Thanks a lot I'll keep that in mind :)!
Thank you so much for this! These are the techniques that I need to \know for my customizations. Continue to make sir.
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?
Great tutor! Thank you for sharing so nicely your knowledge!
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
very good and useful tutorial. Can you tell me how can be added multiple special templates?
template option is missing in page attributes pannel any solution ?? :/
+Jagroop Singh Once you add the comment like he does in the video the option appears
+Jagroop Singh /*template name:special layout
*/ if you write this correctly ,save it and refresh the page .you will get that option
Try switching to another template and then back to this, it will show up.
Template still not showing up, even after inserting the comment "template name: special template". Anybody know the fix?
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?
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?
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!
So much thanks to you ! You help me a lot ! Good tutorial, made me know a lot !
Nice and Clean Tutorial
Thank u lot...... for ur sharing ..... thank again....
Verry simple Tutorial,, like it, very helpfull.
Thanks very much.. GBU
Instead of the conditional logic method could i use a switch statement?
i learn a lot, thank you very much!!!!!
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.
In the privious video article /* Page Layout */ .page h2{ font-size:300%; and now is
different, when did you make the change ? i whant to see the full css.php
go to the previous video there is a link to show you where to go to get a zip fle of his whole project up to that point with the CSS changes ...
Thank you.
"css.php" lol
Great tutorials man!!! - trying to keep up while I work on my own stuff... just that my CSS is awfully messy.
Great job, sir! I'm really enjoing this course
+LearnWebCode After creating a template how do I set it up so that I can start adding plugins and objects? I am trying to use a form page plugin cause I can't write the backend code to process the form.
A lot of plugins will add their own buttons / icons to the content editor on the post/page edit screen (the same area that has the bold and italic buttons, etc...). Or a lot of other plugins (like Contact Form 7 for example) will give you a "shortcode" after you create a form with the plugin and you can simply paste that shortcode into the post/page main content field.
Or, a lot of other plugins give you access to new widgets. So you could add a new custom widget area to a page template. On the "WordPress" playlist on my channel you'll find a video about widgets if you're interested in that route.
I've try several templates and none of them let me put anything into the template I did. Those that have a drag and drop method lets me drag but as soon as l let go it goes away and is never put into my template. I've also tried Contact 7 which I do everything to set up the form but it never generates the page with the form in it. I never get any button to preview or display it. It is like I get the front end of these plugins but no working back end that actually creates the code in my template.
Thank you for answering my questions.
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!!
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 ?
These tutorials are incredible!!!
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?
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 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....
I have basically 6 pages including homepage, all have save navigation menu, but their text colour is also same on every page which is what i need to change, as i need to change every other nav menu text color white if its not homepage. I have used condition is_front_page(), but seems css is not applying to all pages except homepage(index.php).
So i followed the instruction with the disclaimer part but its not inside a box... any suggestions? thanks in advance.
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
just wanna know which text editor are you using?
I wanna ask you- when i want to make special layout, i cant because i cant see the option template, just parent and order, what should i do? many thanks
ok, I figured it out :D
but little help for somone like me : first you have to write it in style.css and you will see template option while you´re editing the page, that´s why I´ve couldnt see it.
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?
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.
Is it necessary to understand the source code (ctrl-U) ? It doesn't look anything like what I typed in so far following your videos.
I don't plan to make greatest website, but do want to add my own functionalities where user inputs and server does maths and returns a certain result.
I was talking about the code from ctrl-u. I know it does not show php, but other parts like html, js, etc seems quite different from what I'm used to with many many lines that I don't recognize (probably added by wordpress)
Thanks. I'm a newbie and still much more familiar to typing every single elements in a text editor. Wordpress suddenly showed so many things (at ctrl-U) that I didn't type in.... so..... that was the thing.
Thanks. Coding is the most difficult thing I've ever tried so far. If I don't get the basic concepts, I would have given up long time ago... but then, I do get basic ideas. It's just very very difficult to put them all together in a bigger tray.
Romy Kim coding is hard if you dont understand the logic or maths. Whilst you learn to code, i recommend you learn discrete maths on the side. This will help improve your coding logic and understand the maths behind the code in basically all coding languages
Thank you, this was very helpful
You're welcome! Glad this video was helpful.
im am a newbie in wordpress and this tutorial teach me how to program in wordpress.. tnx.. pls upload more videos.. hehe.. ahm.. and i want to ask if wordpress can manage my tables in the database eg: inserting,updating,ect.. hehe :D tnx..
Perfeito, suas aulas está me ajudando.
I'm at the part of setting up the two column page. Everything works except I only have one paragraph, but when I refresh it adds a copy of the paragraph (so two paragraphs) and the copied paragraph isn't floating right. I looked over the code a few times and i'm pretty sure it's correct but I could be missing something. Any ideas?
These tutorials are awesome. I'm fresh to wordpress and no other tutorials have been this helpful.
I figured out why the paragraph doubled. I accidentally copied the into the text-column instead of cutting it in.
BUT now my footer is crushing through the paragraph.
CLEARFIX! Didn't see that.. haha.
the previous video used to have a second part however it has gone. a few of the things in the second video will make this video alter the behaviour of the footer. if you pause at just the right time you will get enough of the code on screen to copy from