its been 8 years since you published this course and i am still sitting here watching every bit of it and learning and thanking you for all your efforts you are a Man! i hope you never see any bad days in your life. Stay Very Happy Alex God Bless you! Happy Coding!
Amazing, amazing, absolutely amazing tutorials. It is rare to fine someone like you that is knowledgeable and that freely shares information AND that can explain it so fully. You are a truly a rare gem in a desert of rocks.
Hello Alessandro, I have recently discovered your tutorials and let me tell you they are absolutely the best I have ever seen. I admire your knowledge and your will to give them as free on TH-cam so anyone can access them. Thank you!
There should be a separate addicton department for Allesandro addicts. ;) Following your tutorials consumes all my free time and a lot of sleepless nights. I am learning a lot about Wordpress thanks to you. You exlain everything very clear, but the pause button is often used. Keep up the good work and I will keep on following you for developing my own variation of your theme.
+Jouke Nienhuis Ahahaha, that's amazing, thank you so much for this wonderful comment. I'm trying to improve the quality and pace of mu videos to make them easier to digest and a bit shorter. I'm really happy to hear that you're learning a lot, and I'm sorry for your sleepless nights, but honestly I love those, coding at 2am is when I'm more productive :D Looking forward to see your amazing custom theme. Happy Coding!
I have watched the 13th video of this tutorial. It's really amazing things. I'm sure, that if I search it by my self, I could spend more than 5 hours for solving such kind on problems. Thank you Alex, you help me to study even better and faster. You are awesome !!! :)
+Nikša Fantela Hello, thank you so much for following! I'm really happy my tutorials are helpful also for a developer that needs some polish on WordPress, and not only beginners. Thank you again!
Thanks Alex for your amazing tutorials. We would love if you can do more tutorials - typically with other PHP framework as PHP 8 has just released recently with a great improvment in performance. I'm pretty sure you may have much more supports & donation accordingly ^ ^
Hi i did everything like you but i'm blocked at 25:58 because the thing were you write you css doesn't appear there only the /* Sunset custom css */ thing and the writing space have dissapeared
Really awesome But, I think in this tutorial one thing is missing. You cannot explain how to implement CSS that is written in the Custom CSS area with our theme that we are developing? I am Creating Theme option > Custom CSS page and develop this Custom CSS area on a theme that already has its home page. When I am writing some CSS for the home page elements it is not implemented on the block. Please tell me how to do it?
How many episode you want to create to complete full project ? BTW, great tutorial i have ever watched about WordPress. Keep going and try to finish all episode as soon as possible. I can't keep calm. Love it!
@Alessandro Castellani loving the tutorials. I have everything working fine in the Custom CSS page, except at the final hurdle, when I add text to the coder and save, the code disappears. I've searched hi and lo for a missing . or ' but cannot find anything. Any idea what might be causing this, please? Note: I have used a different ace theme , but tried it with monokai and still didn't work!
Hello, I have the same Issue. Downloaded the files and everything seems to be good. I even get the Settings saved message. But it is not saving. I look into the database and the option name existes and the value is blank.
I realize this video is pre 4.7, but now that you can add additional css in appearance>customize>additional css, is it necessary to include this feature in a theme? Regardless, I’m learning a ton from each of these tutorials. I can’t wait to start the plugin tutorial you’re producing now.
Yes, you're right. Since that feature is available out of the box, this part is no 100% necessary, but still, there are some things I'm explaining here that could be interesting, like how to enqueue specific assets only in some specific admin pages, and how to use a neat JS library. Your call, anyway. Thanks for watching, and Happy Coding :D
Thx for this amazing series!! Everything is really well explained, much appreciated :) A small question: you will show in the future how to include this css code you use in the custom css panel into the site? At the moment it just prints on the textarea.
+Emilio Rodrigo Parra Sure, absolutely. That's the point of the entire series, building a fully functional premium theme. I just started building the front-end, and we will implement all the data we saved in our admin panel. Thanks for watching!
hi. i find that your tutorials are really usefull. thanks for all your effort. just an update since i find some problems in the sanitize function. instead of esc_textarea i found out it's best to use sanitize_textarea_field. i hope it may help beginner like me.
Thanks so much Alex for the tutorial, I have checked it out and I can see how to implement this in the plugin I'm developing using your wp plugin creation course/guide. I have a question is it possible to have the code by users stored in a file as well? What I mean is when a user adds their own code (either css or php) a file should be generated in the uploads folder to store the code not only into the database ... Is it something possible? Thanks once again for the great works
Alessandro, first, let me thank you for the tutorial you provided. All of them are equally well, and enriched. It's been a great series so far. Now, the point is, I am having some problem in this part of the tutorial with the $hook function you used. first of all, the values it is showing is suppressed beneath the admin bar and I can't see it and copy it ( although I see a part of it). So, I can't get the exact value it is passing on, which makes no style or script attachment through 'enqueue.php' file. secondly, what role exactly the hook function is playing? I got a slug name of the page, so is it possible to declare any variable and storing the slug name into it and use it into if-elseif statements? Please explain in details the use of $hook parameter within the function. Last point, use of Ace page-builder. please tell us which specific (or as a whole) folder to use for sure. thanks in advance..
Okay, I just spent one hour figuring out, why Ace is not showing and why am I getting an error "ace.edit can't find div #customCss". Finally I realized I've accidentally skipped the version argument in script enqueing. So scripts were added to the top so #customCss wasn't there yet when script fired. There is so much source code. I always overlook something in it. This is very different then me writing my own CMS.
Mark Grover can you please help me adding emmet? I tried lots of method by searching on Google but every time I failed. It shows some errors in the console. My ace css editor is working normally but I just want to add the emmet here.
you could create a custom one with Advanced Custom Fields. Otherwise there are plenty of Slider plugins in the WordPress repository. not sure which one is the best, tho
+Alessandro Castellani Great Tutorial again. But I have one problem, maybe you can help me. If I type something inside the ace editor and click the save button, nothing gets stored in the hidden textarea - but if I use the chrome developer tools and edit the textarea, then click the save button, the editor will show what I typed in the textarea manually. So for me, the connection form editor -> textarea is not working, but from textarea -> editor it is. Do you have any idea where I could have made a mistake? I compared your code from github step by step with what I got and cant find any differences except "sunset" is not called "sunset" for me :)
+JayToTheRRR Hi, thanks for following. So, for what you wrote it looks like your problem is related to the javascript file, and mostly by the fact that, after you click SAVE, the javascript code can't update the texture before submitting the form. Can you check in the inspector if your JS file is properly enqueued? Is your browser blocking javascript in some way? Check if you have some error in your console. Happy Coding!
+Alessandro Castellani if you got some minutes ;-) gist.github.com/chumiiger/72ec5c255ab4257f241f i triple checked everything, but maybe i am just code-blind atm :( edit: yep, indeed I was blind -_- I had
Hi Alessandro can you please help me to fix this "Uncaught ReferenceError: define is not defined at ace.js?ver=4.7.7:37" also "Uncaught ReferenceError: ace is not defined at sunset.custom_css.js?ver=1.0.0:4" where line 4 is "var editor = ace.edit('customCss');"
I've had the same error. It's a different package. Just download as ZIP, take the src-min folder to your project and rename to ace. github.com/ajaxorg/ace-builds
Good Trade !, I'm not able to add the ace editor . Not be working for me . Already revises the class twice and not sure God . As I can not activate it on my theme ?
hello. please help. i cant find what i did wrong. i get the ERROR: options page not found.. and im checking everything you did and it should be right. got any tips what could be wrong? BTW. i love this tutorial. you are awesome!
it is just that cant find it. i tried to copypaste and change the id's and stuff. sunset-custom-css.php, sunset.custom_css.js, enqueue.php should be right. and i checked function-admin.php too. but im stuck hehe cant find it. anyway i can search after it? but typo is the only reason you think it could be ? :) thx for the help!
hi ,alex can you help me in my problem i take your font icon except your logo and i put my logo and upload it to iconmoon and edate ?class then download it and put css in scss file, but it show for me empty rectangle not icon, can you help me to solve it
If you edited my files, I don't know how I can help you. Try to follow exactly my workflow and be precise. If something breaks during the process it means you're doing something wrong.
Hi Alex, You are doing great. (I am sorry if I wrongly shorten your name as Alex from Alessandro ) Everything looks fine but you didn't mention how the styles from this custom CSS will affect the front end. I think you told about it in any next part.
Alex is the perfect short version of my name :D The CSS can affect the front-end depending of what type of code you write. By default, because it's pasted in line, it will have an higher priority over the rest, and can override everything, giving full power to the user. Cheers
Actually, I wanted to know that where did you echo the styles in the front end. if I don't echo the written CSS in the front end, it will not work. I just did in the header.php and now I got what I was looking for. Am I doing it correctly?
I looked at it from start again and checked that I wrote the code right. Then I copied all code-rows he wrote (to be extra sure) from the git-hub repo. The only result I get is the same as in all my tries is the comment we made in the if statement: /* Sunset Theme Custom CSS */ I can see that the css is working since the button Save Changes goes down (height: 400px). Can it be something wrong I do when I copy the downloaded ace folder into my js folder? I just take the folder from the zip and add it to the js folder.
Did you ever figure this out? I am having the exact same issue and I've rewritten this part of the code 3 times. Something with Ace isn't working for me.
Amazing tutorial again, but one question, why i have error when i push submit button, wordpress tell me that options.php not found. Edit: found my error nvm
Good Trade !, I'm not able to add the ace editor . Not be working for me . Already revises the class twice and not sure God . As I can not activate it on my theme ? REPLY
ghosh, this time I've spend FEW hours of struggling, looking for a mistake typo in the code. I've just accidentally wrote textarea="sunset_css" and everything worked, just was not saved into the database. No errors, nothing! This is very frustrating. Programming in such an environment resembles me to ride on a rollercoaster without any safety belts.
If you have issues, always check my source code on Github, it's easier to spot mistakes or typos. But yeah, I kinda agree with you, programming is definitely like riding a rollercoaster without any safety belts :D
Hey, the tutorials have been great. For some reason, I keep getting notices in the console on "define" not being defined and ace.js not being found. I think the version has changed, which I've tried to accommodate but it still isn't working
Yes, I believe so, but with the newest version of Ace I thought the lines would need a little adjusting. Is it possible I am downloading the wrong thing? I downloaded the zip file from the following github page: github.com/ajaxorg/ace The version is now 1.2.6 if I am not mistaken, and the file path appears to be a little different than what you have on github, right now. I would think the file path for us should be js/ace/lib/ace/ace.js. Until my github account is established, I have the following in enqueue.php: wp_enqueue_style('ace', get_template_directory_uri() . '/css/sunset.ace.css', array(), '1.0.0', 'all'); wp_enqueue_script('ace', get_template_directory_uri() . '/js/ace/lib/ace/ace.js', array('jquery'), '1.2.6', true); wp_enqueue_script('sunset-custom-css-script', get_template_directory_uri() . '/js/sunset.custom_css.js', array('jquery'), '1.0.0', true); When I use these lines, the files are found but, again, "define" is not registered as being defined
For the time being, I've decided to download the old ace.js from your github page. It is working when I do that. Either way, keep up the good work, Alessandro. I've learned a whole lot from your stuff.
Hi Robert! I'm running into a similar issue using ACE 1.2.6. I had the "define" is undefined issue as well as the "ace" is undefined issue. You CAN fix the "define" is undefined issue by using one of the pre-made ace builds found here: github . com/ajaxorg/ace-builds That should fix the first issue, but i haven't figured out how to resolve the "ace" is undefined issue yet. Alessandro, perhaps you have some input on what we can do to use the up to date version? I'll be plugging away at this for the next few hours, so if I figure it out I'll let you know!
It should work on Chrome without problems. Did you check my source code on Github? Did you also check a demo of ace to see if it works on their website?
I already copied your 'ace' folder into my directory, the other demos work just fine. I don't know what's the problem with chrome, it loaded the editor once, and never again. On Microsoft Edge works fine.
Hey man, I know this is an old video of yours but I'm busy going through your tutorials... I just can't get this ace to work at all.. looks like 1.2.9 has changed everything because the error i get is : "ReferenceError: define is not defined ace.js:37:1" then my custom_css.js file creates the same error too... file structure changed as well but managed to sort that out..
I didn't want to bug you about this, it's just i've spent 2 days now rewriting this lesson over and over again and end with same result.. your code and mine are the same except where the js files are called because the structure changed..
I am now using your version of ace, redid the lines that pointed to the older version and it fixed everything.. Wonder why it wouldn't let me use the newer one ?!? Anyways, thank you for responding sir! You are a very patient teacher and I thank you for all the trouble of making these tutorials!
This is soooooo annoying I'm admitting defeat -I've spent two hours on this and I just can't figure out how to download these js files, I know where they are on Git Hub but can't get them downloaded. Thanks
Hi Alessandro, the green button seems to be top level only - it downloads everything not just one file or folder. Thanks for the tutorials by the way, they are so helpful.
Amazingly amazing tutorial, i'm so smiling now as i pulled this off. I was even able to make the process faster by using this library: github.com/ryanburnette/textarea-as-ace-editor then $('#TextareaID').asAceEditor(); var editor = $('#TextareaID').data('ace-editor'); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/css"); Thanks so much Alex, you're the best
its been 8 years since you published this course and i am still sitting here watching every bit of it and learning and thanking you for all your efforts you are a Man!
i hope you never see any bad days in your life.
Stay Very Happy Alex God Bless you!
Happy Coding!
Amazing, amazing, absolutely amazing tutorials.
It is rare to fine someone like you that is knowledgeable and that freely shares information AND that can explain it so fully.
You are a truly a rare gem in a desert of rocks.
Oh wow, thank you so much for this amazing comment :D
Hello Alessandro, I have recently discovered your tutorials and let me tell you they are absolutely the best I have ever seen. I admire your knowledge and your will to give them as free on TH-cam so anyone can access them. Thank you!
Hi Vicky, thank you so much for this wonderful comment, I'm really glad my tutorials are helpful for you.
Welcome to the channel and Happy Coding :D
There should be a separate addicton department for Allesandro addicts. ;) Following your tutorials consumes all my free time and a lot of sleepless nights. I am learning a lot about Wordpress thanks to you. You exlain everything very clear, but the pause button is often used. Keep up the good work and I will keep on following you for developing my own variation of your theme.
+Jouke Nienhuis Ahahaha, that's amazing, thank you so much for this wonderful comment.
I'm trying to improve the quality and pace of mu videos to make them easier to digest and a bit shorter.
I'm really happy to hear that you're learning a lot, and I'm sorry for your sleepless nights, but honestly I love those, coding at 2am is when I'm more productive :D
Looking forward to see your amazing custom theme.
Happy Coding!
Looks like I'm alecaddd tutorials addicted person :) Thanks man for doing good things. My prayers are always with you!
Welcome to the tunnel of tutorial addiction :D
Thank you sir!
I have watched the 13th video of this tutorial. It's really amazing things. I'm sure, that if I search it by my self, I could spend more than 5 hours for solving such kind on problems.
Thank you Alex, you help me to study even better and faster. You are awesome !!! :)
Thank you so much for watching, I'm glad it was helpful for you :D
Greetings from Croatia, love Your work, realy upgraded my WordPress knowledge with your great tutorial series :)
+Nikša Fantela Hello, thank you so much for following! I'm really happy my tutorials are helpful also for a developer that needs some polish on WordPress, and not only beginners. Thank you again!
Thanks a lot, you teach every theme so easy. Greatings from Bogotá-Colombia
You're very welcome, thanks for watching :D
Best tutorial i ever watched! Alessandro thanks and keep going :) Can't wait for new episode.
Amazing, amazing, absolutely amazing tutorials
Thank you so much!
Thnx a lot, for such useful and clear tutorials, I really enjoy it
Alessandro nice tutorial. waiting for new series.. Thank you
Thanks Alex for your amazing tutorials. We would love if you can do more tutorials - typically with other PHP framework as PHP 8 has just released recently with a great improvment in performance. I'm pretty sure you may have much more supports & donation accordingly ^ ^
Hi i did everything like you but i'm blocked at 25:58 because the thing were you write you css doesn't appear there only the /* Sunset custom css */ thing and the writing space have dissapeared
Check my source code on GitHub if you have any issue.
@@alecaddd I checked your source code but still couldn't fix this issue :(
Really awesome
But,
I think in this tutorial one thing is missing.
You cannot explain how to implement CSS that is written in the Custom CSS area with our theme that we are developing?
I am Creating Theme option > Custom CSS page and develop this Custom CSS area on a theme that already has its home page. When I am writing some CSS for the home page elements it is not implemented on the block.
Please tell me how to do it?
How many episode you want to create to complete full project ? BTW, great tutorial i have ever watched about WordPress. Keep going and try to finish all episode as soon as possible. I can't keep calm. Love it!
+Hossain Saddam Don't really know the right amount, I think the entire series could be around 30 episodes, but I'm not sure. Thank you for following!
@Alessandro Castellani loving the tutorials. I have everything working fine in the Custom CSS page, except at the final hurdle, when I add text to the coder and save, the code disappears. I've searched hi and lo for a missing . or ' but cannot find anything. Any idea what might be causing this, please? Note: I have used a different ace theme , but tried it with monokai and still didn't work!
Hi, thank you so much for following.
The first thing I suggest you to do is to download my source code from GitHub and compare ti with yours.
Cheers
Did that Chief. Not to worry, ripped it out and starting this tutorial again. Perseverance is king! Thanks...
I had the same trouble as you but i did what +Mike Buendia commented and it worked
Hello, I have the same Issue. Downloaded the files and everything seems to be good. I even get the Settings saved message. But it is not saving. I look into the database and the option name existes and the value is blank.
I realize this video is pre 4.7, but now that you can add additional css in appearance>customize>additional css, is it necessary to include this feature in a theme? Regardless, I’m learning a ton from each of these tutorials. I can’t wait to start the plugin tutorial you’re producing now.
Yes, you're right. Since that feature is available out of the box, this part is no 100% necessary, but still, there are some things I'm explaining here that could be interesting, like how to enqueue specific assets only in some specific admin pages, and how to use a neat JS library.
Your call, anyway. Thanks for watching, and Happy Coding :D
Thx for this amazing series!! Everything is really well explained, much appreciated :)
A small question: you will show in the future how to include this css code you use in the custom css panel into the site? At the moment it just prints on the textarea.
+Emilio Rodrigo Parra Sure, absolutely. That's the point of the entire series, building a fully functional premium theme. I just started building the front-end, and we will implement all the data we saved in our admin panel.
Thanks for watching!
hi. i find that your tutorials are really usefull. thanks for all your effort. just an update since i find some problems in the sanitize function. instead of esc_textarea i found out it's best to use sanitize_textarea_field. i hope it may help beginner like me.
Thanks for sharing 👍
This is great! Thank you again
You're very welcome :D
Thanks so much Alex for the tutorial, I have checked it out and I can see how to implement this in the plugin I'm developing using your wp plugin creation course/guide. I have a question is it possible to have the code by users stored in a file as well? What I mean is when a user adds their own code (either css or php) a file should be generated in the uploads folder to store the code not only into the database ... Is it something possible? Thanks once again for the great works
Alessandro,
first, let me thank you for the tutorial you provided. All of them are equally well, and enriched. It's been a great series so far.
Now, the point is, I am having some problem in this part of the tutorial with the $hook function you used. first of all, the values it is showing is suppressed beneath the admin bar and I can't see it and copy it ( although I see a part of it). So, I can't get the exact value it is passing on, which makes no style or script attachment through 'enqueue.php' file.
secondly, what role exactly the hook function is playing? I got a slug name of the page, so is it possible to declare any variable and storing the slug name into it and use it into if-elseif statements? Please explain in details the use of $hook parameter within the function.
Last point, use of Ace page-builder. please tell us which specific (or as a whole) folder to use for sure.
thanks in advance..
Okay, I just spent one hour figuring out, why Ace is not showing and why am I getting an error "ace.edit can't find div #customCss".
Finally I realized I've accidentally skipped the version argument in script enqueing. So scripts were added to the top so #customCss wasn't there yet when script fired.
There is so much source code. I always overlook something in it. This is very different then me writing my own CMS.
Thank you Aless..
awesome tutorial
can we add auto fill in this ??
Yup, the ace editor comes with autocomplete options. Check the official documentation to extend the functionalities.
Did you know you can add to the 'snipit' file for ACE?
That will allow for an EMMIT Style tab completion. Pretty Sweet man!
+Mark Grover Yup, ACE is full of surprises and a great tool. Thanks for the heads up!
Mark Grover can you please help me adding emmet? I tried lots of method by searching on Google but every time I failed. It shows some errors in the console. My ace css editor is working normally but I just want to add the emmet here.
Thanks a lot Alessandro Castellani
You're very welcome :D
Alessandro Castellani :)
Hello Alessandro, where can i find a very good Plugin Tutorial for a slider plugin, i need a Slider for my client, with custom fields and so on?
you could create a custom one with Advanced Custom Fields. Otherwise there are plenty of Slider plugins in the WordPress repository. not sure which one is the best, tho
+Alessandro Castellani Great Tutorial again. But I have one problem, maybe you can help me.
If I type something inside the ace editor and click the save button, nothing gets stored in the hidden textarea - but if I use the chrome developer tools and edit the textarea, then click the save button, the editor will show what I typed in the textarea manually. So for me, the connection form editor -> textarea is not working, but from textarea -> editor it is. Do you have any idea where I could have made a mistake? I compared your code from github step by step with what I got and cant find any differences except "sunset" is not called "sunset" for me :)
+JayToTheRRR Hi, thanks for following.
So, for what you wrote it looks like your problem is related to the javascript file, and mostly by the fact that, after you click SAVE, the javascript code can't update the texture before submitting the form.
Can you check in the inspector if your JS file is properly enqueued? Is your browser blocking javascript in some way? Check if you have some error in your console.
Happy Coding!
+Alessandro Castellani
if you got some minutes ;-) gist.github.com/chumiiger/72ec5c255ab4257f241f
i triple checked everything, but maybe i am just code-blind atm :(
edit: yep, indeed I was blind -_- I had
+JayToTheRRR
var updateCSS = function updateCSS(){
//code here
}
That worked for me. Naming the Function
+JayToTheRRR
Make sure you save files In the code editor
especially the (sunset-custom-css.php) file
after writing all codes
:)
Hi Alessandro can you please help me to fix this
"Uncaught ReferenceError: define is not defined
at ace.js?ver=4.7.7:37"
also
"Uncaught ReferenceError: ace is not defined
at sunset.custom_css.js?ver=1.0.0:4"
where line 4 is "var editor = ace.edit('customCss');"
Check my source code in Github to see if you have any typos
I've had the same error. It's a different package. Just download as ZIP, take the src-min folder to your project and rename to ace. github.com/ajaxorg/ace-builds
Good Trade !, I'm not able to add the ace editor . Not be working for me . Already revises the class twice and not sure God . As I can not activate it on my theme ?
:) i was think errors in js or ace but i found me put a plus space in register_settings when i remove it code work right
Great!
awesome
hello. please help. i cant find what i did wrong. i get the ERROR: options page not found.. and im checking everything you did and it should be right. got any tips what could be wrong?
BTW. i love this tutorial. you are awesome!
Check my source code on Github to see if you have any typo.
Cheers
it is just that cant find it. i tried to copypaste and change the id's and stuff. sunset-custom-css.php, sunset.custom_css.js, enqueue.php should be right.
and i checked function-admin.php too. but im stuck hehe cant find it.
anyway i can search after it?
but typo is the only reason you think it could be ? :) thx for the help!
hi ,alex can you help me in my problem i take your font icon except your logo and i put my logo and upload it to iconmoon and edate
?class then download it and put css in scss file, but it show for me empty rectangle not icon, can you help me to solve it
If you edited my files, I don't know how I can help you. Try to follow exactly my workflow and be precise. If something breaks during the process it means you're doing something wrong.
Hi Alex, You are doing great. (I am sorry if I wrongly shorten your name as Alex from Alessandro )
Everything looks fine but you didn't mention how the styles from this custom CSS will affect the front end. I think you told about it in any next part.
Alex is the perfect short version of my name :D
The CSS can affect the front-end depending of what type of code you write.
By default, because it's pasted in line, it will have an higher priority over the rest, and can override everything, giving full power to the user.
Cheers
Actually, I wanted to know that where did you echo the styles in the front end. if I don't echo the written CSS in the front end, it will not work. I just did in the header.php and now I got what I was looking for. Am I doing it correctly?
I sugest you using wp_head hook and properly write down your style header code with concatenation etc
Hi, I faced a problem with ace editor. This doesn't work for me. I can't active this in my theme.
please check the code. There must be some syntax error.
Its working fine.
I looked at it from start again and checked that I wrote the code right. Then I copied all code-rows he wrote (to be extra sure) from the git-hub repo. The only result I get is the same as in all my tries is the comment we made in the if statement:
/* Sunset Theme Custom CSS */
I can see that the css is working since the button Save Changes goes down (height: 400px).
Can it be something wrong I do when I copy the downloaded ace folder into my js folder? I just take the folder from the zip and add it to the js folder.
make sure you use enqueue function the file name must be same.
Did you ever figure this out? I am having the exact same issue and I've rewritten this part of the code 3 times. Something with Ace isn't working for me.
u fixed it? if not tell me ur problem, i had the same problem like you but i firgure out how to solve it. Sr abt my english :'(
Amazing tutorial again, but one question, why i have error when i push submit button, wordpress tell me that options.php not found.
Edit: found my error nvm
I'm glad you solved it, what was the error? Maybe could be useful for another user in your same situation.
Happy Coding!
Good Trade !, I'm not able to add the ace editor . Not be working for me . Already revises the class twice and not sure God . As I can not activate it on my theme ?
REPLY
REPLYING....
Check my source code on Github and compare it with yours to see if you have any typo.
REPLIED!
ghosh, this time I've spend FEW hours of struggling, looking for a mistake typo in the code. I've just accidentally wrote textarea="sunset_css" and everything worked, just was not saved into the database. No errors, nothing! This is very frustrating.
Programming in such an environment resembles me to ride on a rollercoaster without any safety belts.
If you have issues, always check my source code on Github, it's easier to spot mistakes or typos.
But yeah, I kinda agree with you, programming is definitely like riding a rollercoaster without any safety belts :D
Hey, the tutorials have been great. For some reason, I keep getting notices in the console on "define" not being defined and ace.js not being found. I think the version has changed, which I've tried to accommodate but it still isn't working
+Robert Dillon did you check my source code on GitHub to see if you have any typos or mistakes?
Let me know, Happy Coding
Yes, I believe so, but with the newest version of Ace I thought the lines would need a little adjusting. Is it possible I am downloading the wrong thing? I downloaded the zip file from the following github page: github.com/ajaxorg/ace The version is now 1.2.6 if I am not mistaken, and the file path appears to be a little different than what you have on github, right now. I would think the file path for us should be js/ace/lib/ace/ace.js. Until my github account is established, I have the following in enqueue.php:
wp_enqueue_style('ace', get_template_directory_uri() . '/css/sunset.ace.css', array(), '1.0.0', 'all');
wp_enqueue_script('ace', get_template_directory_uri() . '/js/ace/lib/ace/ace.js', array('jquery'), '1.2.6', true);
wp_enqueue_script('sunset-custom-css-script', get_template_directory_uri() . '/js/sunset.custom_css.js', array('jquery'), '1.0.0', true);
When I use these lines, the files are found but, again, "define" is not registered as being defined
For the time being, I've decided to download the old ace.js from your github page. It is working when I do that. Either way, keep up the good work, Alessandro. I've learned a whole lot from your stuff.
Hi Robert! I'm running into a similar issue using ACE 1.2.6. I had the
"define" is undefined issue as well as the "ace" is undefined issue.
You CAN fix the "define" is undefined issue by using one of the pre-made ace builds found here: github . com/ajaxorg/ace-builds
That
should fix the first issue, but i haven't figured out how to resolve
the "ace" is undefined issue yet. Alessandro, perhaps you have some
input on what we can do to use the up to date version? I'll be plugging
away at this for the next few hours, so if I figure it out I'll let you
know!
i think we use: editor.session.setMode("ace/mode/css"); ?
Hey Alex, the editor doesn't work on Chrome, do you know anything about it? Thank you.
It should work on Chrome without problems. Did you check my source code on Github?
Did you also check a demo of ace to see if it works on their website?
I already copied your 'ace' folder into my directory, the other demos work just fine. I don't know what's the problem with chrome, it loaded the editor once, and never again. On Microsoft Edge works fine.
The editor works fine though when I use your theme on Chrome, I checked my code several times i can't find the problem.
Wow! cool! Support Allesandro, he is a amazing tutor!!
+africa mia Ahahah, thank you so much, your passion is really refreshing and contagious :D
Hey man, I know this is an old video of yours but I'm busy going through your tutorials...
I just can't get this ace to work at all..
looks like 1.2.9 has changed everything because the error i get is :
"ReferenceError: define is not defined
ace.js:37:1"
then my custom_css.js file creates the same error too...
file structure changed as well but managed to sort that out..
I didn't want to bug you about this, it's just i've spent 2 days now rewriting this lesson over and over again and end with same result.. your code and mine are the same except where the js files are called because the structure changed..
Hi, sorry for your issue. Did you try to download my source code from Github? Maybe try using the same version of ace I'm using.
Cheers
I am now using your version of ace, redid the lines that pointed to the older version and it fixed everything..
Wonder why it wouldn't let me use the newer one ?!?
Anyways, thank you for responding sir!
You are a very patient teacher and I thank you for all the trouble of making these tutorials!
@@TheOriginalMigz I had the same problem. But I was also writing $(document).ready instead of jQuery(document).ready… Ooops
hi, I want to build wp theme and upload to themeforest to sell, with follow this series, can I do it?
You can learn a lot from this series, the rest is up to you and your ability to create a modern and solid theme.
Happy Coding!
Still relevant for 2020 when we can customize CSS in the Customizer panel?
adding visibility: hidden is kinda overkill hehe
You're never too sure :P
ace file cant wokr it can you send me your ace file link
Check my source code on GitHub, is all there
@@alecaddd i check but ace/mode/css cant effect it
This is soooooo annoying
I'm admitting defeat -I've spent two hours on this and I just can't figure out how to download these js files, I know where they are on Git Hub but can't get them downloaded.
Thanks
Even more annoying - I've just figured it out: download the entire theme from alecaddd.com and copy the files you need.
What? Why did you download my blog theme? XD
Couldn't you download the GitHub repo? There's a green button on the top right that says "Download"
Hi Alessandro, the green button seems to be top level only - it downloads everything not just one file or folder.
Thanks for the tutorials by the way, they are so helpful.
Download this, take src-min folder and rename to ace
github.com/ajaxorg/ace-builds
Amazingly amazing tutorial, i'm so smiling now as i pulled this off. I was even able to make the process faster by using this library: github.com/ryanburnette/textarea-as-ace-editor
then
$('#TextareaID').asAceEditor();
var editor = $('#TextareaID').data('ace-editor');
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/css");
Thanks so much Alex, you're the best