These tutorials are great, paced just right with no rambling or wasted time and explained clearly and expertly. Just like to point out that because IF evaluates boolean and the variable ANSWER is a boolean, then in the line: 'if( answer == true){' the '== true' is superfluous, all that is needed is: if(answer){
Hi Alex cant wait for the next one, WordPress 101 and Create a Premium WordPress Theme are the best tuts on youtube for sure keep up the great work! Grazie Ale :)
I've really learned a lot through these tutorials. Thanks so much for sharing. I'm posting this in case it helps. My custom header and background options were not showing up in the "Appearance" menu. I realized that I missed the part about including "theme-support.php" in the "functions.php" file using the following code: require get_template_directory() . '/inc/theme-support.php'; "D'oh!"
+Jose Rafael Rojas B. Your comments are a guarantee in every video, thank you so much for following. I'm trying to increase the amount of videos per week
Alessandro, I got a question. I have an opportunity to create some backend functionality on a theme I am building. I came back and watched parts 3-9 to wrap my head around this to better understand the concept. My question is dealing with the "@" symbol. After spending sometime searching for, finding and reading about the use of the symbol, I am curious as why you used it? The symbol suppresses errors. The function works perfectly without it. What types of errors are we worried about? Thanks for your reply and your expertise in explaining the concept.
Hello!! Thanks for these tutorials, they are super helpful! Question: Yes, we've removed the picture itself, but how do we simultaneously remove the attached css so that there is not empty space where the picture was? The full name should theoretically move up if we wanted to remove the picture (and the space it takes up). Thanks again for these videos, I am learning so much from you! :)
You can change classes of a container in jQuery by using the removeClass(). If you want to totally hide that section if an image is not present, you can also simply point at the image container in jQuery and use the hide() functions. Cheers.
So I tried this: $('#remove-picture').on('click', function(e){ e.preventDefault(); var answer = confirm("Are you sure you want to remove your Profile Picture?"); if(answer == true){ $('#profile-picture').val(''); $('#profile-picture-preview').hide(); $('.sunset-general-form').submit(); } return; }); And the result was the section being hidden for a brief moment while the page processed my clicking the 'remove profile picture' button, but as soon as the settings were saved and stored, the section became visible again. So how would I tell wordpress that if the value of #profile-picture is empty, then hide the section, else show? Would it need to be in a different function from the one above?
+Jasper Meijer There are definitely some differences, but WooCommerce strictly follows functions and logic of WordPress, to be always compatible with every release and updates of WordPress. So, most likely, all the hooks and functions of WordPress, can be used with WooCommerce. I will do a series of tutorials only for WooCommerce in the near future. Thank you for following.
Thanks for your reply, really getting me motivated. Going to follow all of your current videos. Cannot wait to see the serie about WooCommerce, would be superdupperawesome if you make simple Bootstrap based html/css/php template that is compatible with Wordpress and the WooCommerce plugin. Keep up the good videos and we keep the spirit up! Greetings Jasper
I strongly believe in free education, especially for something for beginners. I have a full time job, so I don't do this to make money, but mostly to improve my English and help other developers. The few dollars I earn with advertising and donations are enough. I didn't start the jQuery series yet, but I'm planning to do that after I conclude the Git series. Thank you so much for your comment, and Happy Coding!
Hi it's me again. I just have to correct you a little bit. At 07:58 you wrote "answer == true". That makes your script unnecessary slower. In your variable "answer" is allready written a true or flase. So there is no need to check if true equals to true. Wouldn't it be better, when you (at 13:05) instead of the String "Save Changes" put there the default parameter of this function (null) to let wordpress handle the name of this button? So you can avoid that an non english wordpress installation get an english word there.
Hi, thank you again for your important insights. Sometimes I tend to over explain or over code stuff not really necessary, but just because I want to make the code as readable and understandable as possible to a beginner developer. I totally agree with your suggestion and I know that to check a bool I don't have to specify "== true", but for beginners having a simple "if( answer )" is less obvious to understand. Also for your second suggestion, I'm planning to do a couple of videos on how to build a theme ready for multilingual, and I will thoroughly explain all best practices to achieve that. For now I try to make everything as linear and simple as possible, to avoid confusion for beginners. Both your suggestions are absolutely fantastic and as usual thank you so much for your feedback. I'm really happy to have an experienced developer watching my videos. Please continue to help me improve myself. Happy Coding :D
Thank you for that compliment, but i wont call me self an experienced developer. There is so much I don't know and so much i personally could do better :D
That what makes a good developer, knowing that you don't know everything, and the will of learning something new everyday. Glad to have you in this community, I hope we can learn a lot from each other!
I solved it in field id post-formats function admin php $options = get_option( 'post_formats' ); and $options = get_option( 'post-formats' ); in theme-support php I changed the underlining dashes to dashes and it was fixed
Hi Alex. Thank you for the video. I wrote "var answer=confirm("Are you sure you want to remove your Profile Picture?"); if(answer==true){ console.log('Yes, please delete!'); } else{ console.log('No, Oh My God, please don\'t!'); } return;" and a window popped up on Internet Explorer but a window didn't pop up on Google Chrome. Why is that?
Hi, thanks for watching. Do you have any popup block on IE by default? Also, check your console and syntax to see if JS triggers any error. Sometimes a syntax that works on Chrome or FF, doesn't work on IE because of the different javascript support offered by the browser. Happy Coding!
Hello sir! I hope you will be fine. I m Also Very Well. Sir I want to talking with you on this video topic. Actually i want be help in this topic i have same problem here after the video time 22:36. can you help me in this topic. here in the Appearance don't Showing the Header & Background Option. i can put the same to same coding but don't showing. before 21:10 All coding is the perfect and also working good. please help me
Thank you so much for such a detailed tutorials. When I click Remove button, the profile picture does not disappear from preview pane automatically. When I hit save changes it gets removed and disappear from preview. I am having hard time figuring it out why this is happening. what might be the reason? Thank you once again..
Did you check your console and see if you get any error while triggering the remove button. You can always compare your source code with mine by downloading it from Github. Cheers
Thanks you! But what if do not change the submit_button itself(the id) and we just can trigger the click of submit button instead $("#submit").trigger('click'); instead of $(".sunset-original-form").submit(); Of course will have conflicts if there are multiple forms and save buttons
You can do that of course. I always prefer to bound the trigger to the submission of the form. Sometimes users tend to press the enter key after filling up a form, instead of clicking on submit. When that happen, if you don't have any action triggered by the form submit, something unexpected could happen.
Well, I'm using WP 4.7.5 and I did everything exactly as you pointed out. But for some strange reason no 'background' nor 'header' appeared in appearance menu, and there are no new options in customize panel. I have no errors, options from checkboxes are saved (I can see '1' in database). So, what is wrong? Is that new WP incompatibility or just I should check something else? Where to start investigation? So far everything was perfect, but this time I'm lost.
Thank you for the answer. No, I didn't, because I was not aware there is the code on github! :) I coded everything by hand listening to you. Great done, btw. Pretty good explanation, consise, to the point and really well shown. Second to none! Now I realized you have every lesson on github! AWESOME!!! Thank you!
YEAH! I've found it! Instead of $background I've put accidentally @background in the theme-support.php, inside the "if", and then no error was reported at all, nor the if was working. Now everything is OK and is perfectly set up!
I'm glad you foud the issue! I decided to release every bit of code for free on Github exactly for these reasons. No matter how good a tutorial can be, it's always hard to follow along a video, and be 100% accurate. Having access to the source code it's helpful sometimes :D
Yes, exactly that was a very good idea. You're a great teacher, and I'm pretty weak in typing, watching what I typed and watching what's going on on the video at the same time. And for the sake of saving time, I watch usually with 1.25 - 1.5 speed :) No time for learning :(
When you check the checkbox (custom_header or custom_background) Alex coded you can see in the *theme-support.php* that Alex check if the box is checked. If it is checked he runs the *add_theme_support('...')* What he does is just to turn on a default feature by WordPress. Look at this page: developer.wordpress.org/reference/functions/add_theme_support/
Hello, awesome tutorial. I had a little problem with an error code "Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in D:\MAMP\htdocs\wordpress\wp-includes\functions.php on line 3721" from Wordpress function file. I had to place this peace of code onder the custom header and background to let it work. remove_action( 'shutdown', 'wp_ob_end_flush_all', 1 ); . Can anybody tell me if this will couse more problems or that is the solution?
These tutorials are great, paced just right with no rambling or wasted time and explained clearly and expertly. Just like to point out that because IF evaluates boolean and the variable ANSWER is a boolean, then in the line: 'if( answer == true){' the '== true' is superfluous, all that is needed is: if(answer){
+Michael Smith thanks for your suggestion and for watching the video :D
Hi Alex cant wait for the next one, WordPress 101 and Create a Premium WordPress Theme are the best tuts on youtube for sure keep up the great work!
Grazie Ale :)
Oh wow, thank you so much
at 11:17 you solved my twenty-year long question. Thank you Sir
Wow, I'm happy to hear that :D
This is awesome!!!!
Can you please include more tutorials with this series ? Like hooking woocommerce to the theme and how to use visual composer ?
I like how your videos always have 0 thumbs down. Don't know if I ever seen another youtube-channel having that?
+jellycoding ehehe, yeah, that's a good trend, but I'm sure is not gonna last for too long :D
Obviously some frick had read this comment and obviously has to press downvote just because :( sigh.
Lol they did it
I've really learned a lot through these tutorials. Thanks so much for sharing. I'm posting this in case it helps. My custom header and background options were not showing up in the "Appearance" menu. I realized that I missed the part about including "theme-support.php" in the "functions.php" file using the following code: require get_template_directory() . '/inc/theme-support.php'; "D'oh!"
Thanks for watching and for sharing this useful tip.
Cheers
thank you
Again - great stuff, Alessandro!
+Ann Cascarano Thank you :D
Hello , thank you for this great tutorial ,
Why you don't use bootstrap ??
Thank you... I am also waiting for next part
Dear Alex, would you please explain how to put a meta box at the top of everything or below the title?
Another great tutorial, Just waiting for next video.....
+Jose Rafael Rojas B. Your comments are a guarantee in every video, thank you so much for following.
I'm trying to increase the amount of videos per week
man you're a legend in WP
thank u
Amazing tutorials ! Where is the repo of this lesson? last one is the lesson 7
+Nicolas Fernandez Caamaño Damn, I forgot to update the repo. Thanks for the heads up. i will update everything later today.
Sorry for the issue.
Alessandro, I got a question. I have an opportunity to create some backend functionality on a theme I am building. I came back and watched parts 3-9 to wrap my head around this to better understand the concept. My question is dealing with the "@" symbol. After spending sometime searching for, finding and reading about the use of the symbol, I am curious as why you used it? The symbol suppresses errors. The function works perfectly without it. What types of errors are we worried about? Thanks for your reply and your expertise in explaining the concept.
Great tutorial ! thank you sir
amazing tutorial.. i ask if you can explain how to create WordPress theme Support Multi Languages also RTL !!
I will make a tutorial about it, thanks
thank you very much your tutorial is the best. keep it up
+Raphael Jay Bernardo Happy to hear that. Thank you so much!
Great job Alessandro
+Marin Nikolli Thank you so much
love from bangladesh.you are awesome.
+saniul hasan thank you so much!
Awesome tutorial
Thank you so much!
Hello!! Thanks for these tutorials, they are super helpful! Question: Yes, we've removed the picture itself, but how do we simultaneously remove the attached css so that there is not empty space where the picture was? The full name should theoretically move up if we wanted to remove the picture (and the space it takes up).
Thanks again for these videos, I am learning so much from you! :)
You can change classes of a container in jQuery by using the removeClass().
If you want to totally hide that section if an image is not present, you can also simply point at the image container in jQuery and use the hide() functions.
Cheers.
So I tried this:
$('#remove-picture').on('click', function(e){
e.preventDefault();
var answer = confirm("Are you sure you want to remove your Profile Picture?");
if(answer == true){
$('#profile-picture').val('');
$('#profile-picture-preview').hide();
$('.sunset-general-form').submit();
}
return;
});
And the result was the section being hidden for a brief moment while the page processed my clicking the 'remove profile picture' button, but as soon as the settings were saved and stored, the section became visible again. So how would I tell wordpress that if the value of #profile-picture is empty, then hide the section, else show? Would it need to be in a different function from the one above?
Thank you! Greate job as always
Thanks so much
Is this also possible with the plugin Woocommerce?
+Jasper Meijer There are definitely some differences, but WooCommerce strictly follows functions and logic of WordPress, to be always compatible with every release and updates of WordPress. So, most likely, all the hooks and functions of WordPress, can be used with WooCommerce.
I will do a series of tutorials only for WooCommerce in the near future.
Thank you for following.
Thanks for your reply, really getting me motivated. Going to follow all of your current videos. Cannot wait to see the serie about WooCommerce, would be superdupperawesome if you make simple Bootstrap based html/css/php template that is compatible with Wordpress and the WooCommerce plugin. Keep up the good videos and we keep the spirit up! Greetings Jasper
why dont you put this on like udemy or something, videos are top notch!, on a side note, did u ever do the jQuery lessons?
I strongly believe in free education, especially for something for beginners. I have a full time job, so I don't do this to make money, but mostly to improve my English and help other developers. The few dollars I earn with advertising and donations are enough.
I didn't start the jQuery series yet, but I'm planning to do that after I conclude the Git series.
Thank you so much for your comment, and Happy Coding!
very nice man, very nice!
Hi it's me again.
I just have to correct you a little bit.
At 07:58 you wrote "answer == true". That makes your script unnecessary slower. In your variable "answer" is allready written a true or flase. So there is no need to check if true equals to true.
Wouldn't it be better, when you (at 13:05) instead of the String "Save Changes" put there the default parameter of this function (null) to let wordpress handle the name of this button? So you can avoid that an non english wordpress installation get an english word there.
Hi, thank you again for your important insights.
Sometimes I tend to over explain or over code stuff not really necessary, but just because I want to make the code as readable and understandable as possible to a beginner developer.
I totally agree with your suggestion and I know that to check a bool I don't have to specify "== true", but for beginners having a simple "if( answer )" is less obvious to understand.
Also for your second suggestion, I'm planning to do a couple of videos on how to build a theme ready for multilingual, and I will thoroughly explain all best practices to achieve that. For now I try to make everything as linear and simple as possible, to avoid confusion for beginners.
Both your suggestions are absolutely fantastic and as usual thank you so much for your feedback.
I'm really happy to have an experienced developer watching my videos. Please continue to help me improve myself.
Happy Coding :D
Thank you for that compliment, but i wont call me self an experienced developer. There is so much I don't know and so much i personally could do better :D
That what makes a good developer, knowing that you don't know everything, and the will of learning something new everyday.
Glad to have you in this community, I hope we can learn a lot from each other!
I allready did learn a lot from you. And hopfully a lot more.
I solved it in field id post-formats function admin php
$options = get_option( 'post_formats' ); and $options = get_option( 'post-formats' ); in theme-support php I changed the underlining dashes to dashes and it was fixed
Hi Alex. Thank you for the video. I wrote "var answer=confirm("Are you sure you want to remove your Profile Picture?");
if(answer==true){
console.log('Yes, please delete!');
} else{
console.log('No, Oh My God, please don\'t!');
}
return;"
and a window popped up on Internet Explorer but a window didn't pop up on Google Chrome. Why is that?
Hi, thanks for watching.
Do you have any popup block on IE by default?
Also, check your console and syntax to see if JS triggers any error. Sometimes a syntax that works on Chrome or FF, doesn't work on IE because of the different javascript support offered by the browser.
Happy Coding!
Hello sir! I hope you will be fine. I m Also Very Well. Sir I want to talking with you on this video topic. Actually i want be help in this topic i have same problem here after the video time 22:36. can you help me in this topic. here in the Appearance don't Showing the Header & Background Option. i can put the same to same coding but don't showing. before 21:10 All coding is the perfect and also working good. please help me
Thank you so much for such a detailed tutorials.
When I click Remove button, the profile picture does not disappear from preview pane automatically. When I hit save changes it gets removed and disappear from preview. I am having hard time figuring it out why this is happening.
what might be the reason?
Thank you once again..
Did you check your console and see if you get any error while triggering the remove button.
You can always compare your source code with mine by downloading it from Github.
Cheers
Hi Alex, Thank you so much for your reply. I have figured it out and the issue is resolved. I really appreciate your help in this regard.
Surender Kumar what was the prob? I am having same prob. no errors..
Thanks you!
But what if do not change the submit_button itself(the id)
and we just can trigger the click of submit button instead
$("#submit").trigger('click');
instead of
$(".sunset-original-form").submit();
Of course will have conflicts if there are multiple forms and save buttons
You can do that of course.
I always prefer to bound the trigger to the submission of the form. Sometimes users tend to press the enter key after filling up a form, instead of clicking on submit. When that happen, if you don't have any action triggered by the form submit, something unexpected could happen.
Well, I'm using WP 4.7.5 and I did everything exactly as you pointed out. But for some strange reason no 'background' nor 'header' appeared in appearance menu, and there are no new options in customize panel. I have no errors, options from checkboxes are saved (I can see '1' in database). So, what is wrong? Is that new WP incompatibility or just I should check something else? Where to start investigation? So far everything was perfect, but this time I'm lost.
Sunset theme works perfectly on WP 4.7.5 for me.
Did you check my source code on Github to see if you have any small typo, or something is missing?
Thank you for the answer. No, I didn't, because I was not aware there is the code on github! :) I coded everything by hand listening to you. Great done, btw. Pretty good explanation, consise, to the point and really well shown. Second to none! Now I realized you have every lesson on github! AWESOME!!! Thank you!
YEAH! I've found it! Instead of $background I've put accidentally @background in the theme-support.php, inside the "if", and then no error was reported at all, nor the if was working. Now everything is OK and is perfectly set up!
I'm glad you foud the issue!
I decided to release every bit of code for free on Github exactly for these reasons. No matter how good a tutorial can be, it's always hard to follow along a video, and be 100% accurate.
Having access to the source code it's helpful sometimes :D
Yes, exactly that was a very good idea. You're a great teacher, and I'm pretty weak in typing, watching what I typed and watching what's going on on the video at the same time. And for the sake of saving time, I watch usually with 1.25 - 1.5 speed :) No time for learning :(
One thing I don't understand... How did you link 'custom_background' or 'custom_header' .. to Appearance menu? Where's that parameter setted? Thanks
When you check the checkbox (custom_header or custom_background) Alex coded you can see in the *theme-support.php* that Alex check if the box is checked. If it is checked he runs the *add_theme_support('...')*
What he does is just to turn on a default feature by WordPress. Look at this page:
developer.wordpress.org/reference/functions/add_theme_support/
crazy tutorial. many many thanks.
+MD Rahi "Crazy" means that is insanely good, or just insane?
Thanks for watching :P
I mean too good. :(
MD Rahi ahahahah, I know man, I was just jocking 😃
(:
Do I need to add something to my theme, to use it for ecommerce? For example to use it with Woocommerce.
WooCommerce has some specific hooks and methods, but the basic functionalities are identical to the default used to build a regular theme.
This is freaking awesome.
I'm glad you're enjoying it :D
Hi Alessandro, i think the remove picture is not working in google chrome?
It should. Check my source code on GitHub if you have any issue
waiting for next ...
+mahesh kadam Tomorrow is the magic day :D
Thanks again.
+maruf ahmed You're welcome
Hello, awesome tutorial. I had a little problem with an error code "Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in D:\MAMP\htdocs\wordpress\wp-includes\functions.php on line 3721" from Wordpress function file. I had to place this peace of code onder the custom header and background to let it work. remove_action( 'shutdown', 'wp_ob_end_flush_all', 1 ); . Can anybody tell me if this will couse more problems or that is the solution?
Did you check my source code on Github? Compare it with yours to see if you have any typo
Alessandro Castellani Yes i did and everything is checked with github code. Notting is wrong
Thank you so much dude :-)
+Abdul Rafay Thank you for following
You deserve it..
Wonderful
Thanks :D
Thaaaaaaaaaanks
this tut was very hard man.......... php noobs me
You can do it :D
Along with u Bro. ....