For those who don't want to override your code and want to continue: 1. install npm if you don't have it (Google npm) 2. copy package.json from github repo, edit package.json to match your plugin information (name, version, description...) 3. in terminal go to your plugin folder and run: npm install 4. copy gulpfile.js from github repo 5. if you are Windows users, install gulp globally for using gulp command: npm install -g gulp 6. make sure back up your js and css files before run gulp watch, because gulp watch will override them with minified files. 7. move your myscript.js code to src/js/myscript.js 8. comment out 47-53 in gulpfile.js, the json object in browerSync.init. (No idea what for, but it works so far. Need to watch the gulp video later.) 9. copy src/scss/ folder from the github repo. If you have custom css, copy to mystyle.scss The only thing I'm not sure it's step 8. If I don't comment it out, it will throw error.. Really need to check out the related tutorial..
Thanks for the overview and easy steps to follow. The browserSync is for browser autoreload feature, meaning that whenever you save a file, the browser will refresh itself without you doing it. I showed in the gulp series how to set it up and how it works. Cheers
Thank you so much for the great tutorial alex. anyone who has problem with this I recommend please follow his gulp series and you will be just fine. it won't take you much time and you will learn something new really great!
Hi Alex, I started watching this playlist because I would like to start developing WordPress plugins. Often in the videos you recommend watching your previous playlists, especially the "101" and the next on creating a "premium theme" to better understand some things in this playlist. I have already looked back at the playlist "101" and recently watched the first 20 videos on the "premium theme" playlist, this is, as usual, very well done but it often focuses on CSS and other topics that at least for now I would like to skip, because I have no much time. This long introduction to ask you: how much is it really necessary to look at all that long playlist before switching to this on the plugins? Are there any videos you recommend and others that I can skip? P.S .: you are great and your channel is one of the most interesting for me, thanks!
Hi, thank you so much for watching my videos. It's not 100% necessary to watch the previous series, you can keep going and stick with the plugin series. Happy Coding
I have a problem with Gulp, task function must be specified. What am I supposed to do? I have searched for the solution and the problem turns out to be the GULP version?
Hi Alessandro. This is a nice tutorial. I am familiar with gulp....however i might need to dive deep into gulp tutorial hence there are some decencies that i need to look at.
I didn't wanted to use your code so I did my own setup with npm, gulp and all the necessary packages. Usually setting up the environment is the biggest pain for me, always errors coming up, but this time I managed things really good in a short period of time, luckly, so setting up wasn't a problem. There is one thing I skipped and that's Certificates in gulpfile.js for the browser-sync. I see there is some work setting it up, so I will leave that for later. Great video as always Alessandro, keep it up :)
Alex, this is an awesome tutorial as usually you did. I completely the setttings api which you have created. It's a bit completed even though it seems much easier to create and manage the option pages.
Hi Alex, thanks very much for this super useful serie! I know it's a while since you publish it. I'm following it at the moment, and unfortunately facing quite a lot of errors when running npm install from the plugin folder (downloaded from your github). As a consequence, gulp watch simply carry an error 'zsh: command not found: gulp'. Any clue where I should look to fixe this ? Thanks in advance !
The way I solved the issue with sass etc here is that i just ran "npm init", installed sass only, set up the folder structure and started coding in one single scss file. I will leave javascript in a single file for now. Gulp is discontinued and its all a mess now with newer versions of node...cheers, great series.
damn i was able to type it all until now, and at the same time to make slight changes I wanted for the future - I was hoping to keep doing that but this throws a wrench into what I've been doing, too bad because it was great to actually type it all and create it all from scratch - I really miss a video that explains how you actually got to the config you're asking to download from github. It's a big jump from 18 to 19 and I'm not sure why you skipped it, I may have to abandon the tutorial. sigh
@@alecaddd I am in the same boat as danicolaj in that I was following along until now with slight modifications (plugin name for one thing…) to suit my needs. And going through that series you linked to will not be "quick" with 11 videos at approximately 2.5 hours total running time. I was just getting my head around everything you were throwing at us and was starting to feel comfortable. Now I need to change everything? pass thanks
Your videos are great! The videos have helped me so much. I did have trouble with your gitHb repo for this lesson. The gulpfile.js does not match with the latest version of gulp. I had to add returns to the tasks and change the args to the default and watch tasks to use gulp.series(). you may want to update this in your repo or provide two version of the file, based on what version of gulp folks are using.
I went through this video and all the way through part 50. I went through your 9 videos on gulp. For this video part, 19 is gulp set up any differently than the end of your gulp series? Also, do I do anything differently with the namespaces using composer than before in part 10? Is the namespaceing totally separate from gluping? You lost me from 18 to 19 of plug-in development.
Oh, sorry for the confusion. Namespace is a PHP only feature via Composer, so it doesn't affect anything JS or CSS related. The Gulp automation is only used for assets. The gulpfile.js should be fairly identical to the one we built in the Gulp series, probably something minor could have changed because of package updates, but nothing drastic and the final result would be the same. Cheers
@@djangoWarri0r It was a long process and lots of trial and error. I don't know offhand everything, but I don't mind sharing my gulp files so you can install it yourself. I made lots of comments through the whole gulp series of tutorials you can also look at. Alessandro locked some of my comments on some of the gulp videos. I'll have to see how I can get these files to anyone who wants them. Maybe my website or maybe I could try github. I did not go to browse refresh every time I change a file.
@@TimothyCareyDV i have skipped gulp for now but ill appreciate if you help me out by sharing files (via github or your website) you referenced in the comment.
Thanks for the video again... I have been following your tutorial and have been creating my own admin settings pages. Your videos really helped a lot. In between I have been looking at another plugin and I created a totally different setup. I have noticed that there are some problems with your current handling of the settings that I really would like to discus with you. for example in example 17c If you look at the database options table and look at your entries you will find: optionId, first_name, text optionId, text_example, text In my setup this will become: optionId, optionsPage, a:3:{s:6:"some text";s:18:"some text";s:6:"some text";s:6:"some text";s:6:"some text";s:9:"some text";} if you look at the other options in the table they also use this format. I'm a little busy at the moment but I will try to have my code on github tomorrow so you can see what I have created with your help. thanks a lot.
Yup, that's a serialized data entry in the DB. It's a built-in feature of WordPress for storing the data in the DB with one simple option_name instead of a dedicated one for each field. It definitely keeps the DB cleaner, but it comes with some issues when dealing with URLs and DB transfer from localhost to live site. Anyway, a database optimization video is part of this series and will come later. Curious to check your code, thanks for sharing :D
Awesome tutorial again Alex. So I following your gulp tutorial to create the package.json file in the plugin folder. However, I noticed you have a gulpfile.js and there are decencies listed in your package.json file. Did I miss something in the gulp tutorial on how to create the dependencies and the gulpfile.js? This is a new to me and I did not want to copy your files. I want to see if I could get the same result as you. Please let me know where I went wrong. Thanks.
+adrian20065 nothing is wrong. The Gulp series is still in progress. I'll publish other 4 videos in that series to explain how to build the same gulpfile.js I built. Sorry for the confusion, I didn't want to wait the end of the gulp series before being able to publish a new WP episode.
I would also very much appreciate a video on this gulpfile.js, As well, I did watch the most of the gulp series, but I'm still lost. Kinda silly to make an amazing series like this, and then leave out important bits on making all the needed files. I had many issues in my server getting everything installed and working(all figured out now... I think) and would like to continue on without just copying your files, as I'm here to learn from a great teacher! Thanks.
Hi, thanks for watching. The Gulp series is completed and I explained all the important sections of the file I'm using. You should be able to understand how to bundle and compile SCSS and JS files, how to properly use the package.json file, and how to activate BrowserSync for fast development. Cheers
I just rewatched a them, and think I might be getting closer, but right now WordPress saids it can't find my style.scss file "Errno::ENOENT: No such file or directory - mystyle.scss"; It's in the src/scss directory. In the gulpfile.js I've tried "var projectURL = 'myurl.com/var/www/html/wp-content/plugins/pluginname'; var styleSRC = './src/scss/style.scss'; var styleURL = './assets/'; var mapURL = './'; " and var projectURL = 'myurl.com'; as well as pointing the styleSRC directly to the file. I've also pointed to the ssl key and crt in the file for the browser-sync and think that's all working. Any ideas? If not no worries, Thanks again for all the videos!
Thanks for the super amazing videos.You really helped me to learn new ways of coding.Thank you.Can you tell me which theme are you using for sublime 3?
It took me a while to absorb the information of how Gulp works as I used Gulp 4 for my project and my functions appear a lot different (I used the ES6 arrow functions style) but at least Node js plugins have some good documentation.
Alessandro, I try to use your Lesson19_starter. This is a great video series. I do have an issue here. The first command "npm install" did work and I have the "package-lock.json" file. But the next command "gulp watch" does not work. I get this message: "'gulp' is not recognized as an internal or external command, operable program or batch file.". I am running this on Windows 10. Did I miss something?
Regarding setting-up the key and crt file paths on Windows for BrowserSync, if you are using Laragon for your local dev environment, you can change line 49 and 50 of the gulpfile.js to your Laragon program folder /etc/ssl/ For example, I have Laragon installed on my G: drive and the path for each are as follows: line 49: key: 'G:/laragon-6.0.0/etc/ssl/laragon.key', line 50: cert: 'G:/laragon-6.0.0/etc/ssl/laragon.crt' Now running 'gulp watch' works like a dream.
Thanks for the great video Alessandro! I have a question. If you want to have a button (like Add) in order to add more settings field, (so modular settings field), how would you do that? I'm thinking you would have to somehow have a function that adds the field to the setFields array? and also to remove it?
Yes, you need to create a controller that takes care of storing your options and for each one of them, generate a field. I did something similar in future videos to generate a modular custom post type controller. The concept is identical, you just need to change the methods. Cheers
Am not too technical but can see that there are issues with versioning as time marches on. I could not download from GitHub easily as I could not find 'download' button or link, similarly, if my typing is bad, I wish there was a way to determine files updated in a lesson to minimise the compare/download. However my problem really is the error I am getting on running 'gulp watch' - fs.js:114 throw err; - no idea how on what to do! Incidentally, I think your videos are wonderful. They certainly taught me a lot.
Hi Alessandro, When I try including my admin.php file, i get an error: require_once(/home2/webgig/plugintest.webgigg.com/wp-content/plugins/my-plugin/inc/.'templates/admin.php'): failed to open stream: No such file or directory in /home2/webgig/plugintest.webgigg.com/wp-content/plugins/my-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 12. Truthfully reported, the templates folder is not in the inc folder. I don't know why it's using that as the path? Should I move the templates folder into the inc folder, but I think that will mess up the rest of the plugin files. Everything is the same as your code on Github. Pls what do you think I should do?
hi alessandro thank you for this great tutorial I have watched from beginning to episode 19 , you showed that how can we have a sign in form in our admin page . but I need to know how can we have that form in wp pages . I mean adding that custom form for users. do I face that in further episodes? by the way thank you very much it was perfect .
Please never randomly change your project mid-in the tutorials.. if you do so also make a video what to do to convert your project. First you tell everyone to do things differently if you want and now I have the problem that I have to convert the entire project to use gulp... this wastes allot of time. This makes me hesitant to follow any of your other tutorials, which is a shame since they seem to be quite good.
I find it an odd choice to change the entire project structure midway through the tutorial without showing how to within said tutorial. The gulp tutorial has given me an immense amount of headache due to it's age and the provided github starter doesn't even seem to work anymore. After like a week straight of hitting my head against a wall I finally think I got a somewhat functional ish gulp setup, even if some things you got in your gulpfile are missing
So if i am saving an authentication key, and when user clicks on save button and we need to check if that auth key is correct from an ajax request and if its correct then save it to DB if not then show Error. where do i write callback for that? i mean how do i handle the data before saving it to DB from this Architecture. pls help thanks in advance
Keep following the tutorial, I will add a feature like that one. In future lessons, I'm showing how to sanitize and validate data before saving it into the Database.
thanks and Awesome tutorials bro! it helped me a lot, i recently started learning plugin development and guides on official WordPress website is too hard to understand for a beginner , your tutorial helped me a lot . SO THANK You
This was refreshing. I noticed we made so many arrays that had only one item changing value. Can't we do another array in array and use a for each loop to generate options? That would guarantee less code. All we would do is update the array with options ids.
That is correct :D And it's an optimization I already recorded in video 21. Try to go ahead and do it yourself, then we can see if our approaches were different and why.
Hi guy thanks for golden tutos: i devore them!!! :) actually, i'm trying to set up gulp for autumation. i've installed: npm & gulp. but when i run: gulp watch, i get this (help me please): [17:10:15] Using gulpfile C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin\gulpfile.js [17:10:15] Starting 'styles'... [17:10:15] Finished 'styles' after 61 ms [17:10:15] Starting 'js'... [17:10:15] Starting 'browser-sync'... [17:10:15] Finished 'browser-sync' after 68 ms [Browsersync] 2 files changed (mystyle.css.map, mystyle.css) [Browsersync] 2 files changed (myscript.js.map, myscript.js) [17:10:18] Finished 'js' after 3.32 s [17:10:18] Starting 'default'... [17:10:18] Finished 'default' after 14 ms [17:10:18] Starting 'watch'... [17:10:40] Finished 'watch' after 22 s fs.js:646 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or directory, open 'C:\Users\alecaddd\.valet\Certificates\test.dev.key' at Object.fs.openSync (fs.js:646:18) at Object.fs.readFileSync (fs.js:551:33) at getKey (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\utils.js:38:15) at getHttpsServerDefaults (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\utils.js:45:14) at Object.getHttpsOptions (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\utils.js:67:41) at C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\utils.js:81:44 at Object.getServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\utils.js:85:15) at createProxyServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\proxy-server.js:87:35) at createServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\index.js:69:41) at module.exports.plugin (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins asir-plugin ode_modules\browser-sync\dist\server\index.js:12:20)
Hey Alessandro...quick question...Im trying to enqueue a script based on the checkbox being checked.I have this inside the checkboxField function: if ( $checkbox == 'checked' ) { wp_enqueue_script('materialize_js', $this->plugin_url . 'js/materialize.min.js'); } and this inside a function within the class: add_action('wp_enqueue_scripts', array($this, 'checkboxField ') ); Is my conditional correct? Ive made purchases thru your amazon link btw : )
How are you passing the $checkbox variable? I guess it should work, but without looking at the full code structure I can be sure. Probably I should show how to dynamically enqueue files based on user's preferences.
Ciao Alessandro e innanzitutto grazie, volevo chiederti come tradurre gulp.task( 'default', ['styles', 'js'], function() { gulp.src( jsURL + 'myscript.min.js' ) .pipe( notify({ message: 'Assets Compiled!' }) ); }); con la nuova versione di gulp, per passare le due funzioni styles e js, ho fatto una cosa del genere function default(styles,js){ styles(); js(); } però mi da problemi
when click on parent category then only sub-category should be display in woocommerce, im been searching for this solution but could find it, can any one help me with it....
When i callback function checkBoxField in setfield function, the var_dump of checkBoxField function of ManagerCallBack class print string(0). I didn't find any solution why it happen can you please help me.
I had similar issiue but mine was bool(true) instead of string(0). It was an error on SettingsApi.php on line where it is called "add_settings_field". The last parameter is: isset($field["args"]) ? $field["args"] : '' . I made a tipo error and it became if $field["args"] is set instead of $field["args"] itself so i got only bool(true) as input parameter in callback function. Your error sounds like $field["args"] is not propelly set or it is not written well so you get as parameter the empty string that is what is set in code when isset is false. Debug the $field["args"] in that line and maybe you can find the error in your code.
hello from ubuntu ... i got this error. Anyone know how to fix it=> aq@Devilsbook:/var/www/html/wp-content/plugins/shamd-plugin$ gulp watch [11:13:08] Using gulpfile /var/www/html/wp-content/plugins/shamd-plugin/gulpfile.js [11:13:08] Starting 'styles'... [11:13:08] Finished 'styles' after 18 ms [11:13:08] Starting 'js'... [11:13:08] Starting 'browser-sync'... [11:13:08] Finished 'browser-sync' after 22 ms fs.js:646 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or directory, open '/Users/shamd/.valet/Certificates/test.dev.key' at Object.fs.openSync (fs.js:646:18) at Object.fs.readFileSync (fs.js:551:33) at getKey (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:38:15) at getHttpsServerDefaults (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:45:14) at Object.getHttpsOptions (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:67:41) at /var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:81:44 at Object.getServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:85:15) at createProxyServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/proxy-server.js:87:35) at createServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/index.js:69:41) at module.exports.plugin (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/index.js:12:20)
i figured it out, i had to out my ssl key and cert here => key: '/Users/alecaddd/.valet/Certificates/test.dev.key', cert: '/Users/alecaddd/.valet/Certificates/test.dev.crt' Thanks :D
I'm following along and I just finished installing npm, next I tried to run 'gulp watch' but got this error: -bash: gulp: command not found Did I get this error because I updated npm from version 5.6.0 to 6.5.0? Thanks ahead of time!
i checked all the code but options.php cannot be found, everytime i click save after clicking on the checkboxes there is a error the the options page cannot be found as in your video but i have everything correct also with the mention of 'class'. i checked everything fourthtimes... i cannot find the failure , i also doublechecked with yuor repo on github but no failure found. i also tried to change the path with php 5 versions but still same failure.
@@alecaddd local with xampp, SSL configured via xamp and the files i needed, i think May there is maybe a Problem but that should be Not cause all other things also work? Really strange, i did Not used your code from. Github i only checked it with it, i followes all tutorial parts until this Video also with gulp and there is also a Problem cause when i define the. Https and sll key and cert i have an syntax error but i think cause the site is already running SSL. Only the Option. PHP wont Load
Why are my checkboxes always checked? Even after unchecking then and saving, they come back checked! Does it have to do with the "ui-class"? What library has to be enabled for it to work?
Thanks for the reply! Actually I fixed it by changing the "selectCheckBox" function to send "1" or "0" instead of true or false. Then I changed the the addCheckBox function to use empty() instead of isset() and it worked using the WordPress built-in function "checked()". Since you're setting the value of the checkbox as "1" anyway, I thought that made more sense instead of true/false. Honestly, I don't know how that code worked for you on the video but oh, well... I figured it out! Great video series, by the way!
the callback function does not work when you use the input of type text, it only saves the first field and shows value ... plus the value of the second input comes empty
I showed in future videos how to deal with different input types with one single Callback. Keep watching the series and you'll learn everything you need.
In 2024, up till now everything in this tutorial still works (WordPress seems pretty conservative and backwards compatible, which is nice). However, introducing gulp and all the different packages for minifying, auto-refreshing the browser etc, just doesn't work the same now as it did 6 years ago. I recommend skipping this altogether, as it doesn't have much to do with WordPress development anyway.
Why noone is complaning about the gulp issue ENOENT: no such file or directory, open 'C:\Users\alecaddd\.valet\Certificates\test.dev.key' Besides changing the name of [alecaddd] where do I get certificates or something *scratches head*
You can't simply change the username! The gulp setup for browser-sync works only if you point it to the proper certificates in your local environment. I guess you're on Windows, so, which system are you using for your local environment? WAMP? Laragon? Also, if you're not using a secured domain (HTTPS), you don't need to specify the key and cert.
I ran into some issues using the code straight from the repository as I am using xampp as my testing server and I'm using windows 8.1. I thought I'd share the solutions in case anyone ran into the same thing. Issue 1: I kept getting the error: "'gulp' is not recognized as an internal or external command, operable program or batch file." Solution: Gulp had to be installed globally for any gulp command to work in the terminal. Issue 2: I was getting an error saying the /Users/alecaddd/.valet/Certificates/test.dev.key didn't exist. Solution: I just commented this out as I'm not using https. Alessandro talks about this in his gulp series in the episode linked here (8min in): ruclips.net/video/NDjE_LCHbuI/видео.html Issue 3: Browsersync wasn't working with xampp. Solution Add a port number to browsersync function in the gulpfile.js: function browser_sync(done) { browserSync.init({ proxy: projectURL, port: 8000, injectChanges: true, open: false }); done(); }; Thank you for your hard work, Alessandro!
why does the test on real server not work? everytime other issues, now i fixed the problem with dirname and file, and now the admincallback does not work , cause require once with this ->plugin_path does not work correct see her failur on server . he does not take the plugin path correctly otherwise he takes the path including folder inc? i do not undertand why? Warning: require_once(/home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc//templates/admin.php): failed to open stream: No such file or directory in /home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 15 Fatal error: require_once(): Failed opening required '/home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc//templates/admin.php' (include_path='.:/usr/share/php') in /home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 15
This comments shows that you don't know what NPM is and how it should be used. the node_modules folder is only used in local during development. You don't need to upload that folder on your server, and the plugin doesn't need that folder in order to work. All those packages and modules are used during the generation compiling of the assets. In order to work, your plugin only needs the final css and js assets.
@@alecaddd I do also not know what NPM is and what it does. In your viodeo you simply state: "Run the command 'nom install' in the plugin directory". But (off cause) I get the 'npm is not a command' error message. What do we need to do to make the lesson-19 starter get to work please?
This is brilliant. But I'd like to point to one thing. Level of intelligence of viewers, as well as short term memory varies. So, if it is possible to point in your videos with what class[extension] particular method is related to. I know it might add to the length of the videos, but it would bring so much to explanation of how things work. At this point I'm loosing you more and more, and consequence of that is that I'm just retyping everything from the screen without understanding in depth of what am I really doing. Other than that, just fu.king brilliant! Oh, one more thing, can you integrate iDeal payment on your support page?
I thought I was pretty clear in explaining everything. It's normal to feel lost and not remembering which belongs to what, it happens when first dealing with OOP. I'd suggest rewatching the video another time, and then trying to code that structure by yourself. It takes some time, but you can do it. Sorry, but I don't think I'll open any extra payment option, no worries if you can't, I'm already super happy you're watching my videos. Cheers
All was fine until this gulp npm stuff... failed to install that. Got several warnings and 100 errors or more on npm intall command. Tried it the hole day. Don't know why this npm should be good if it has so many problems installing stuff of an 3 year old project. Of course I am a neewby but it is so sad that I have to abort the nice plugin series just because this gulp stuff is not working
Hello Alessandro, As promised I have put the code on Github: github.com/Pleisterman/wp-enhanced-JWT-plugin The name is because i know a lot about JWT's and the current JWT's for rest-api plugins lack some basic functions that I think I can improve on. It is just a start to handle some admin pages like what you have done in your tutorial, but I think its a good template. Hope to hear from you if you have any questions or comments.
That would really be great! I really like the interface stuff so I am willing to learn how to create better code. I downloaded the default example plugin from Wordpress and its horrible. Why is it so difficult to get a nice example. It's as if this has never been done before. But: We keep on learning because we love it. Thx, have a nice holiday.
Damm!! tutorial is complicated. I am saying this because when people want to create plugin they know php, u are making complicated coz half of the part in this tutorial is making code clean and i am in 19 part and still tutorial is talking about callbacks. Always follow the KISS rule mate.
All my tutorials and videos are organized in playlists, which are easily accessible on my channel. Here's the Gulp series: ruclips.net/video/oRoy1fJbMls/видео.html
@@alecaddd , but there are no guide how to get to 19 lesson starter. I did follow your setup, but I made my customizations. So in this video, I don't know how to set up everything. I added package.json, gulpfile.js to my project, run npm install... And there is no `gulp watch`, some variables in gulpfile.js is not used. I would like to see how to change my folder structure to continue following your videos. Could you specify files to change or create from after 18video to 19 start.
@@alecaddd I am in agreement with Povalis--- There is no introduction that bridges the gap between customized content post lesson 18 and lesson 19, meaning we have to either throw away our customized content to make it work or somehow get gulp to work in conjunction with what we have by ourselves.... which after 3 hours I've still not managed to do. This is incredibly vexing to be honest and I think you really should have completely setup a working environment at the start of the series so people know what they're getting into, instead of adding things later on without showing how to (within the series' context!). For now, I'll try to somehow get gulp to work, but if I somehow fail to do that, it just means I cannot continue your series, which would be a huge shame since it's been very helpful so far.
For those who don't want to override your code and want to continue:
1. install npm if you don't have it (Google npm)
2. copy package.json from github repo, edit package.json to match your plugin information (name, version, description...)
3. in terminal go to your plugin folder and run: npm install
4. copy gulpfile.js from github repo
5. if you are Windows users, install gulp globally for using gulp command: npm install -g gulp
6. make sure back up your js and css files before run gulp watch, because gulp watch will override them with minified files.
7. move your myscript.js code to src/js/myscript.js
8. comment out 47-53 in gulpfile.js, the json object in browerSync.init. (No idea what for, but it works so far. Need to watch the gulp video later.)
9. copy src/scss/ folder from the github repo. If you have custom css, copy to mystyle.scss
The only thing I'm not sure it's step 8. If I don't comment it out, it will throw error.. Really need to check out the related tutorial..
Thanks for the overview and easy steps to follow. The browserSync is for browser autoreload feature, meaning that whenever you save a file, the browser will refresh itself without you doing it.
I showed in the gulp series how to set it up and how it works. Cheers
I see thank you so much! I really need to watch your gulp series after I finish this wp plugin! Thank you so much for the great tutorial!
thank you so much! :D
Should I do gulp watch after step 6 or after all steps?
Is line 47-53 necessary? or will it still work fine without it, i want to make this series project as my base project for other plugin I would make
Thank you so much for the great tutorial alex. anyone who has problem with this I recommend please follow his gulp series and you will be just fine. it won't take you much time and you will learn something new really great!
Only two words: "THE BEST" :)))
Ahaha, thank you so much :D
Hi Alex, I started watching this playlist because I would like to start developing WordPress plugins. Often in the videos you recommend watching your previous playlists, especially the "101" and the next on creating a "premium theme" to better understand some things in this playlist.
I have already looked back at the playlist "101" and recently watched the first 20 videos on the "premium theme" playlist, this is, as usual, very well done but it often focuses on CSS and other topics that at least for now I would like to skip, because I have no much time.
This long introduction to ask you: how much is it really necessary to look at all that long playlist before switching to this on the plugins? Are there any videos you recommend and others that I can skip?
P.S .: you are great and your channel is one of the most interesting for me, thanks!
Hi, thank you so much for watching my videos. It's not 100% necessary to watch the previous series, you can keep going and stick with the plugin series.
Happy Coding
This video took me 4 hours to watch due to all the headache in a npm hell and the gulp certificate configuration
At least I learned something!
I have a problem with Gulp, task function must be specified. What am I supposed to do? I have searched for the solution and the problem turns out to be the GULP version?
@@maciej__kw same issue how did u fix it?
@@mhengrasparil6166 I didnt XD but you don't need to use gulp for plugin development
@@maciej__kw oh that good to hear hahaha, maybe i should continue where i left in ep 18, without npm and all just the old css and js
Hi Alessandro. This is a nice tutorial. I am familiar with gulp....however i might need to dive deep into gulp tutorial hence there are some decencies that i need to look at.
I didn't wanted to use your code so I did my own setup with npm, gulp and all the necessary packages. Usually setting up the environment is the biggest pain for me, always errors coming up, but this time I managed things really good in a short period of time, luckly, so setting up wasn't a problem. There is one thing I skipped and that's Certificates in gulpfile.js for the browser-sync. I see there is some work setting it up, so I will leave that for later. Great video as always Alessandro, keep it up :)
Awesome, thanks for following the series.
Happy Coding :D
Alex, this is an awesome tutorial as usually you did. I completely the setttings api which you have created. It's a bit completed even though it seems much easier to create and manage the option pages.
Thanks for following, the Settings API interface we created is gonna be so useful throughout the entire series.
Cheers
Hi Alex, thanks very much for this super useful serie! I know it's a while since you publish it. I'm following it at the moment, and unfortunately facing quite a lot of errors when running npm install from the plugin folder (downloaded from your github). As a consequence, gulp watch simply carry an error 'zsh: command not found: gulp'. Any clue where I should look to fixe this ?
Thanks in advance !
The way I solved the issue with sass etc here is that i just ran "npm init", installed sass only, set up the folder structure and started coding in one single scss file. I will leave javascript in a single file for now. Gulp is discontinued and its all a mess now with newer versions of node...cheers, great series.
damn i was able to type it all until now, and at the same time to make slight changes I wanted for the future - I was hoping to keep doing that but this throws a wrench into what I've been doing, too bad because it was great to actually type it all and create it all from scratch - I really miss a video that explains how you actually got to the config you're asking to download from github. It's a big jump from 18 to 19 and I'm not sure why you skipped it, I may have to abandon the tutorial. sigh
Or you could quickly go through this series to learn everything you need about Gulp: ruclips.net/p/PLriKzYyLb28lp0z-OMB5EYh0OHaKe91RV
:D
@@alecaddd hey legend can we have something on NPM :D , I guess same thing can be done using npm , laravel mix ??
@@alecaddd I am in the same boat as danicolaj in that I was following along until now with slight modifications (plugin name for one thing…) to suit my needs.
And going through that series you linked to will not be "quick" with 11 videos at approximately 2.5 hours total running time.
I was just getting my head around everything you were throwing at us and was starting to feel comfortable. Now I need to change everything? pass thanks
Your videos are great! The videos have helped me so much. I did have trouble with your gitHb repo for this lesson. The gulpfile.js does not match with the latest version of gulp. I had to add returns to the tasks and change the args to the default and watch tasks to use gulp.series(). you may want to update this in your repo or provide two version of the file, based on what version of gulp folks are using.
Thanks for the heads up, I will update the gulpfile
I went through this video and all the way through part 50. I went through your 9 videos on gulp. For this video part, 19 is gulp set up any differently than the end of your gulp series? Also, do I do anything differently with the namespaces using composer than before in part 10? Is the namespaceing totally separate from gluping? You lost me from 18 to 19 of plug-in development.
Oh, sorry for the confusion.
Namespace is a PHP only feature via Composer, so it doesn't affect anything JS or CSS related.
The Gulp automation is only used for assets.
The gulpfile.js should be fairly identical to the one we built in the Gulp series, probably something minor could have changed because of package updates, but nothing drastic and the final result would be the same.
Cheers
@@alecaddd I had to set up gulp differently because of a new version. I'm finally getting to this video. Five months plus.
@@@TimothyCareyDV hey there, how did you figured it out? Do you mid sharing the solution!!
@@djangoWarri0r It was a long process and lots of trial and error. I don't know offhand everything, but I don't mind sharing my gulp files so you can install it yourself. I made lots of comments through the whole gulp series of tutorials you can also look at. Alessandro locked some of my comments on some of the gulp videos. I'll have to see how I can get these files to anyone who wants them. Maybe my website or maybe I could try github. I did not go to browse refresh every time I change a file.
@@TimothyCareyDV i have skipped gulp for now but ill appreciate if you help me out by sharing files (via github or your website) you referenced in the comment.
Thanks for the video again...
I have been following your tutorial and have been creating my own admin settings pages.
Your videos really helped a lot.
In between I have been looking at another plugin and I created a totally different setup.
I have noticed that there are some problems with your current handling of the settings that I really would like to discus with you.
for example in example 17c
If you look at the database options table and look at your entries you will find:
optionId, first_name, text
optionId, text_example, text
In my setup this will become:
optionId, optionsPage, a:3:{s:6:"some text";s:18:"some text";s:6:"some text";s:6:"some text";s:6:"some text";s:9:"some text";}
if you look at the other options in the table they also use this format.
I'm a little busy at the moment but I will try to have my code on github tomorrow so you can see what I have created with your help.
thanks a lot.
Yup, that's a serialized data entry in the DB.
It's a built-in feature of WordPress for storing the data in the DB with one simple option_name instead of a dedicated one for each field. It definitely keeps the DB cleaner, but it comes with some issues when dealing with URLs and DB transfer from localhost to live site.
Anyway, a database optimization video is part of this series and will come later.
Curious to check your code, thanks for sharing :D
Awesome tutorial again Alex. So I following your gulp tutorial to create the package.json file in the plugin folder. However, I noticed you have a gulpfile.js and there are decencies listed in your package.json file. Did I miss something in the gulp tutorial on how to create the dependencies and the gulpfile.js? This is a new to me and I did not want to copy your files. I want to see if I could get the same result as you. Please let me know where I went wrong. Thanks.
+adrian20065 nothing is wrong. The Gulp series is still in progress. I'll publish other 4 videos in that series to explain how to build the same gulpfile.js I built.
Sorry for the confusion, I didn't want to wait the end of the gulp series before being able to publish a new WP episode.
Thank you, Alex. As always quick response and great job teaching and explaining.
I would also very much appreciate a video on this gulpfile.js, As well, I did watch the most of the gulp series, but I'm still lost. Kinda silly to make an amazing series like this, and then leave out important bits on making all the needed files. I had many issues in my server getting everything installed and working(all figured out now... I think) and would like to continue on without just copying your files, as I'm here to learn from a great teacher! Thanks.
Hi, thanks for watching. The Gulp series is completed and I explained all the important sections of the file I'm using. You should be able to understand how to bundle and compile SCSS and JS files, how to properly use the package.json file, and how to activate BrowserSync for fast development. Cheers
I just rewatched a them, and think I might be getting closer, but right now WordPress saids it can't find my style.scss file "Errno::ENOENT: No such file or directory - mystyle.scss";
It's in the src/scss directory.
In the gulpfile.js I've tried
"var projectURL = 'myurl.com/var/www/html/wp-content/plugins/pluginname';
var styleSRC = './src/scss/style.scss';
var styleURL = './assets/';
var mapURL = './';
"
and var projectURL = 'myurl.com';
as well as pointing the styleSRC directly to the file.
I've also pointed to the ssl key and crt in the file for the browser-sync and think that's all working.
Any ideas?
If not no worries, Thanks again for all the videos!
i just want to share, we can also use this
isset($input) ?: false
which is the same with: isset($input) ? true : false
Yup, true. From PHP 7.1 we can avoid the truthy variation if it's identical to the output of the condition in a ternary operation.
Cheers
Can you make a quick video for css3 (specially for new features and understanding how can we use transitions etc without js)
Oh, interesting request.
Yes, I think I'll do a mini-series about CSS3 after I finish the Gulp series.
Cheers
Alessandro Castellani thanks!
Thanks for the super amazing videos.You really helped me to learn new ways of coding.Thank you.Can you tell me which theme are you using for sublime 3?
Thank you so much :D
I'm using Material Theme. I made a video about my ST3 setup: ruclips.net/video/oHmPrjSzmwU/видео.html
Cheers
It took me a while to absorb the information of how Gulp works as I used Gulp 4 for my project and my functions appear a lot different (I used the ES6 arrow functions style) but at least Node js plugins have some good documentation.
Alessandro, I try to use your Lesson19_starter. This is a great video series. I do have an issue here.
The first command "npm install" did work and I have the "package-lock.json" file. But the next command "gulp watch" does not work. I get this message: "'gulp' is not recognized as an internal or external command,
operable program or batch file.". I am running this on Windows 10. Did I miss something?
Solved: gulp 4.0.0 did not work; reverted to 3.9.0
I'm releasing a video on how to upgrade from v3 to v4 and update the methods to respect the new syntax.
I had the same problem here. I'll watch your v3 to v4 update videos. Thank you
Regarding setting-up the key and crt file paths on Windows for BrowserSync, if you are using Laragon for your local dev environment, you can change line 49 and 50 of the gulpfile.js to your Laragon program folder /etc/ssl/
For example, I have Laragon installed on my G: drive and the path for each are as follows:
line 49: key: 'G:/laragon-6.0.0/etc/ssl/laragon.key',
line 50: cert: 'G:/laragon-6.0.0/etc/ssl/laragon.crt'
Now running 'gulp watch' works like a dream.
Thanks for the great video Alessandro!
I have a question. If you want to have a button (like Add) in order to add more settings field, (so modular settings field), how would you do that?
I'm thinking you would have to somehow have a function that adds the field to the setFields array? and also to remove it?
Yes, you need to create a controller that takes care of storing your options and for each one of them, generate a field. I did something similar in future videos to generate a modular custom post type controller. The concept is identical, you just need to change the methods. Cheers
I agree with danicolaj. I am in the same mess... too bad!!!
Am not too technical but can see that there are issues with versioning as time marches on. I could not download from GitHub easily as I could not find 'download' button or link, similarly, if my typing is bad, I wish there was a way to determine files updated in a lesson to minimise the compare/download.
However my problem really is the error I am getting on running 'gulp watch' - fs.js:114 throw err; - no idea how on what to do!
Incidentally, I think your videos are wonderful. They certainly taught me a lot.
Hi Alessandro,
When I try including my admin.php file, i get an error:
require_once(/home2/webgig/plugintest.webgigg.com/wp-content/plugins/my-plugin/inc/.'templates/admin.php'): failed to open stream: No such file or directory in /home2/webgig/plugintest.webgigg.com/wp-content/plugins/my-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 12.
Truthfully reported, the templates folder is not in the inc folder. I don't know why it's using that as the path? Should I move the templates folder into the inc folder, but I think that will mess up the rest of the plugin files.
Everything is the same as your code on Github. Pls what do you think I should do?
Love this tutorial. My only problem is that my shortcode can't see the enqueued style sheet. What do I do?
hi alessandro thank you for this great tutorial I have watched from beginning to episode 19 , you showed that how can we have a sign in form in our admin page . but I need to know how can we have that form in wp pages . I mean adding that custom form for users. do I face that in further episodes? by the way thank you very much it was perfect .
Yes, we will create user facing forms in future videos of this series. Cheers
Please never randomly change your project mid-in the tutorials.. if you do so also make a video what to do to convert your project. First you tell everyone to do things differently if you want and now I have the problem that I have to convert the entire project to use gulp... this wastes allot of time. This makes me hesitant to follow any of your other tutorials, which is a shame since they seem to be quite good.
plenty of errors from gulp
ENOENT: no such file or directory, open '/Users/alecaddd/.valet/Certificates/test.dev.key'
same here. any solutions for this, please?
I find it an odd choice to change the entire project structure midway through the tutorial without showing how to within said tutorial. The gulp tutorial has given me an immense amount of headache due to it's age and the provided github starter doesn't even seem to work anymore. After like a week straight of hitting my head against a wall I finally think I got a somewhat functional ish gulp setup, even if some things you got in your gulpfile are missing
Great tutorial ever seen
Thanks :D
So if i am saving an authentication key, and when user clicks on save button and we need to check if that auth key is correct from an ajax request and if its correct then save it to DB if not then show Error. where do i write callback for that? i mean how do i handle the data before saving it to DB from this Architecture. pls help thanks in advance
Keep following the tutorial, I will add a feature like that one.
In future lessons, I'm showing how to sanitize and validate data before saving it into the Database.
thanks and Awesome tutorials bro! it helped me a lot, i recently started learning plugin development and guides on official WordPress website is too hard to understand for a beginner , your tutorial helped me a lot . SO THANK You
how to take input value from input field in admin section and paste that input in javascript file which loads in front end
This was refreshing. I noticed we made so many arrays that had only one item changing value. Can't we do another array in array and use a for each loop to generate options? That would guarantee less code. All we would do is update the array with options ids.
That is correct :D
And it's an optimization I already recorded in video 21. Try to go ahead and do it yourself, then we can see if our approaches were different and why.
Alessandro Castellani Gai sensei 👍🏿😭😭😭 already tried so let's wait for your solution. Thank you for thinking ahead.
Hi guy thanks for golden tutos: i devore them!!! :)
actually, i'm trying to set up gulp for autumation. i've installed: npm & gulp. but when i run: gulp watch, i get this (help me please):
[17:10:15] Using gulpfile C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin\gulpfile.js
[17:10:15] Starting 'styles'...
[17:10:15] Finished 'styles' after 61 ms
[17:10:15] Starting 'js'...
[17:10:15] Starting 'browser-sync'...
[17:10:15] Finished 'browser-sync' after 68 ms
[Browsersync] 2 files changed (mystyle.css.map, mystyle.css)
[Browsersync] 2 files changed (myscript.js.map, myscript.js)
[17:10:18] Finished 'js' after 3.32 s
[17:10:18] Starting 'default'...
[17:10:18] Finished 'default' after 14 ms
[17:10:18] Starting 'watch'...
[17:10:40] Finished 'watch' after 22 s
fs.js:646
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open 'C:\Users\alecaddd\.valet\Certificates\test.dev.key'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at getKey (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\utils.js:38:15)
at getHttpsServerDefaults (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\utils.js:45:14)
at Object.getHttpsOptions (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\utils.js:67:41)
at C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\utils.js:81:44
at Object.getServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\utils.js:85:15)
at createProxyServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\proxy-server.js:87:35)
at createServer (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\index.js:69:41)
at module.exports.plugin (C:\xampp\htdocs\wp_caspluginsdev\wp-content\plugins
asir-plugin
ode_modules\browser-sync\dist\server\index.js:12:20)
You should remove the key part since those are related to my setup. Check the Gulp from Scratch series to learn what those values are meant for.
Hey Alessandro...quick question...Im trying to enqueue a script based on the checkbox being checked.I have this inside the checkboxField function:
if ( $checkbox == 'checked' ) {
wp_enqueue_script('materialize_js', $this->plugin_url . 'js/materialize.min.js');
}
and this inside a function within the class:
add_action('wp_enqueue_scripts', array($this, 'checkboxField ') );
Is my conditional correct? Ive made purchases thru your amazon link btw : )
How are you passing the $checkbox variable?
I guess it should work, but without looking at the full code structure I can be sure.
Probably I should show how to dynamically enqueue files based on user's preferences.
Ciao Alessandro e innanzitutto grazie, volevo chiederti come tradurre
gulp.task( 'default', ['styles', 'js'], function() {
gulp.src( jsURL + 'myscript.min.js' )
.pipe( notify({ message: 'Assets Compiled!' }) );
});
con la nuova versione di gulp, per passare le due funzioni styles e js, ho fatto una cosa del genere
function default(styles,js){
styles();
js();
}
però mi da problemi
when click on parent category then only sub-category should be display in woocommerce, im been searching for this solution but could find it, can any one help me with it....
When i callback function checkBoxField in setfield function, the var_dump of checkBoxField function of ManagerCallBack class print string(0). I didn't find any solution why it happen can you please help me.
I had similar issiue but mine was bool(true) instead of string(0). It was an error on SettingsApi.php on line where it is called "add_settings_field". The last parameter is: isset($field["args"]) ? $field["args"] : '' . I made a tipo error and it became if $field["args"] is set instead of $field["args"] itself so i got only bool(true) as input parameter in callback function. Your error sounds like $field["args"] is not propelly set or it is not written well so you get as parameter the empty string that is what is set in code when isset is false. Debug the $field["args"] in that line and maybe you can find the error in your code.
Nice tutorial
Thanks
hello from ubuntu ... i got this error. Anyone know how to fix it=>
aq@Devilsbook:/var/www/html/wp-content/plugins/shamd-plugin$ gulp watch
[11:13:08] Using gulpfile /var/www/html/wp-content/plugins/shamd-plugin/gulpfile.js
[11:13:08] Starting 'styles'...
[11:13:08] Finished 'styles' after 18 ms
[11:13:08] Starting 'js'...
[11:13:08] Starting 'browser-sync'...
[11:13:08] Finished 'browser-sync' after 22 ms
fs.js:646
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/Users/shamd/.valet/Certificates/test.dev.key'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at getKey (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:38:15)
at getHttpsServerDefaults (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:45:14)
at Object.getHttpsOptions (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:67:41)
at /var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:81:44
at Object.getServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/utils.js:85:15)
at createProxyServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/proxy-server.js:87:35)
at createServer (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/index.js:69:41)
at module.exports.plugin (/var/www/html/wp-content/plugins/shamd-plugin/node_modules/browser-sync/dist/server/index.js:12:20)
By the way, what is meant by this =>
key: '/Users/alecaddd/.valet/Certificates/test.dev.key',
cert: '/Users/alecaddd/.valet/Certificates/test.dev.crt'
do i have to put ssl key here ?
found your solution on github, where is the .env file ??
i figured it out, i had to out my ssl key and cert here =>
key: '/Users/alecaddd/.valet/Certificates/test.dev.key',
cert: '/Users/alecaddd/.valet/Certificates/test.dev.crt'
Thanks :D
I'm following along and I just finished installing npm, next I tried to run 'gulp watch' but got this error:
-bash: gulp: command not found
Did I get this error because I updated npm from version 5.6.0 to 6.5.0? Thanks ahead of time!
did you install gulp globally? `npm install gulp -g`
i checked all the code but options.php cannot be found, everytime i click save after clicking on the checkboxes there is a error the the options page cannot be found as in your video but i have everything correct also with the mention of 'class'. i checked everything fourthtimes... i cannot find the failure , i also doublechecked with yuor repo on github but no failure found. i also tried to change the path with php 5 versions but still same failure.
Mh, that is strange. If you used my source code from GitHub everything should work. Are you working locally or remotely on a server?
@@alecaddd local with xampp, SSL configured via xamp and the files i needed, i think May there is maybe a Problem but that should be Not cause all other things also work? Really strange, i did Not used your code from. Github i only checked it with it, i followes all tutorial parts until this Video also with gulp and there is also a Problem cause when i define the. Https and sll key and cert i have an syntax error but i think cause the site is already running SSL. Only the Option. PHP wont Load
Why are my checkboxes always checked? Even after unchecking then and saving, they come back checked! Does it have to do with the "ui-class"? What library has to be enabled for it to work?
No "library" is necessary as it's just simple CSS. If something doesn't work, check my source code on GitHub.
Thanks for the reply! Actually I fixed it by changing the "selectCheckBox" function to send "1" or "0" instead of true or false. Then I changed the the addCheckBox function to use empty() instead of isset() and it worked using the WordPress built-in function "checked()". Since you're setting the value of the checkbox as "1" anyway, I thought that made more sense instead of true/false. Honestly, I don't know how that code worked for you on the video but oh, well... I figured it out! Great video series, by the way!
If you are now using glup to convert the sass files to css, do we actually need to install ruby sass?
No need to, all the dependencies and packages will be handled by NPM
the callback function does not work when you use the input of type text, it only saves the first field and shows value ... plus the value of the second input comes empty
I showed in future videos how to deal with different input types with one single Callback. Keep watching the series and you'll learn everything you need.
In 2024, up till now everything in this tutorial still works (WordPress seems pretty conservative and backwards compatible, which is nice). However, introducing gulp and all the different packages for minifying, auto-refreshing the browser etc, just doesn't work the same now as it did 6 years ago. I recommend skipping this altogether, as it doesn't have much to do with WordPress development anyway.
Had to stop at this point. NPM | Gulp Stuff doesn't work anymore. Was a great tutorial but that's a pity!
Same here, grate tutorial however the NPM and Gulp didn't work as a lot of NPM libraries have been deprecated. and the gulp command didn't work.
@alessandro brother how to include package.json file into this repository?
I don't understand the question. Just watch my tutorials, I'm literally creating the files as I go.
Why noone is complaning about the gulp issue
ENOENT: no such file or directory, open 'C:\Users\alecaddd\.valet\Certificates\test.dev.key'
Besides changing the name of [alecaddd] where do I get certificates or something *scratches head*
You can't simply change the username!
The gulp setup for browser-sync works only if you point it to the proper certificates in your local environment.
I guess you're on Windows, so, which system are you using for your local environment? WAMP? Laragon?
Also, if you're not using a secured domain (HTTPS), you don't need to specify the key and cert.
I'll research on this later.Thanks for the concern!
I ran into some issues using the code straight from the repository as I am using xampp as my testing server and I'm using windows 8.1. I thought I'd share the solutions in case anyone ran into the same thing.
Issue 1:
I kept getting the error: "'gulp' is not recognized as an internal or external command, operable program or batch file."
Solution:
Gulp had to be installed globally for any gulp command to work in the terminal.
Issue 2:
I was getting an error saying the /Users/alecaddd/.valet/Certificates/test.dev.key didn't exist.
Solution:
I just commented this out as I'm not using https. Alessandro talks about this in his gulp series in the episode linked here (8min in): ruclips.net/video/NDjE_LCHbuI/видео.html
Issue 3:
Browsersync wasn't working with xampp.
Solution
Add a port number to browsersync function in the gulpfile.js:
function browser_sync(done) {
browserSync.init({
proxy: projectURL,
port: 8000,
injectChanges: true,
open: false
});
done();
};
Thank you for your hard work, Alessandro!
Thank you so much for your recap of the most common issues. I'm gonna pin this comment to the top as it will be super useful to others.
Cheers
No problem! Us Alessandros have to stick together! Haha
Thank you for your amazing tutorials!
Thanks for taking the time to share. I had the same issue.
why does the test on real server not work? everytime other issues, now i fixed the problem with dirname and file, and now the admincallback does not work , cause require once with this ->plugin_path does not work correct see her failur on server . he does not take the plugin path correctly otherwise he takes the path including folder inc? i do not undertand why?
Warning: require_once(/home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc//templates/admin.php): failed to open stream: No such file or directory in /home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 15
Fatal error: require_once(): Failed opening required '/home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc//templates/admin.php' (include_path='.:/usr/share/php') in /home/www/sslmate/wordpress/wp-content/plugins/ssl-soul-plugin/inc/Api/Callbacks/AdminCallbacks.php on line 15
Which version of PHP are you running on your live server?
problem solved
Hey Alec,
You want me to npm install into the plugin directory? That's almost 75MB! This plugin will be to slow and bloated to do anything.
This comments shows that you don't know what NPM is and how it should be used.
the node_modules folder is only used in local during development. You don't need to upload that folder on your server, and the plugin doesn't need that folder in order to work.
All those packages and modules are used during the generation compiling of the assets.
In order to work, your plugin only needs the final css and js assets.
@@alecaddd
I do also not know what NPM is and what it does.
In your viodeo you simply state: "Run the command 'nom install' in the plugin directory".
But (off cause) I get the 'npm is not a command' error message.
What do we need to do to make the lesson-19 starter get to work please?
gulp watch command errors enable to compile checkbox.scss file
Check my source code on GitHub to see if you have any typos
This is brilliant.
But I'd like to point to one thing. Level of intelligence of viewers, as well as short term memory varies. So, if it is possible to point in your videos with what class[extension] particular method is related to. I know it might add to the length of the videos, but it would bring so much to explanation of how things work.
At this point I'm loosing you more and more, and consequence of that is that I'm just retyping everything from the screen without understanding in depth of what am I really doing.
Other than that, just fu.king brilliant!
Oh, one more thing, can you integrate iDeal payment on your support page?
I thought I was pretty clear in explaining everything.
It's normal to feel lost and not remembering which belongs to what, it happens when first dealing with OOP. I'd suggest rewatching the video another time, and then trying to code that structure by yourself.
It takes some time, but you can do it.
Sorry, but I don't think I'll open any extra payment option, no worries if you can't, I'm already super happy you're watching my videos.
Cheers
Thanks man, but at moments it feels overwhelming. :))) Which by itself is not reason to give up. Thanks for this.
All was fine until this gulp npm stuff... failed to install that. Got several warnings and 100 errors or more on npm intall command. Tried it the hole day. Don't know why this npm should be good if it has so many problems installing stuff of an 3 year old project. Of course I am a neewby but it is so sad that I have to abort the nice plugin series just because this gulp stuff is not working
Hello Alessandro,
As promised I have put the code on Github:
github.com/Pleisterman/wp-enhanced-JWT-plugin
The name is because i know a lot about JWT's and the current JWT's for rest-api plugins lack some basic functions that I think I can improve on.
It is just a start to handle some admin pages like what you have done in your tutorial, but I think its a good template.
Hope to hear from you if you have any questions or comments.
Great, thanks for sharing. I will take a look at it in the next couple of days and get back to you.
Good job :D
That would really be great!
I really like the interface stuff so I am willing to learn how to create better code.
I downloaded the default example plugin from Wordpress and its horrible.
Why is it so difficult to get a nice example. It's as if this has never been done before.
But: We keep on learning because we love it.
Thx, have a nice holiday.
gulp v4 Files: Use gulp w instead of gulp watch. github.com/gittac/GulpForPulginTutorial
Thanks for sharing
I'm first commentor! yipee
The fastest man alive
Damm!! tutorial is complicated. I am saying this because when people want to create plugin they know php, u are making complicated coz half of the part in this tutorial is making code clean and i am in 19 part and still tutorial is talking about callbacks. Always follow the KISS rule mate.
This video made me to stop following you series. You split your content too much. Where are links for GULP?
All my tutorials and videos are organized in playlists, which are easily accessible on my channel. Here's the Gulp series: ruclips.net/video/oRoy1fJbMls/видео.html
@@alecaddd , but there are no guide how to get to 19 lesson starter. I did follow your setup, but I made my customizations. So in this video, I don't know how to set up everything. I added package.json, gulpfile.js to my project, run npm install... And there is no `gulp watch`, some variables in gulpfile.js is not used. I would like to see how to change my folder structure to continue following your videos. Could you specify files to change or create from after 18video to 19 start.
@@alecaddd I am in agreement with Povalis--- There is no introduction that bridges the gap between customized content post lesson 18 and lesson 19, meaning we have to either throw away our customized content to make it work or somehow get gulp to work in conjunction with what we have by ourselves.... which after 3 hours I've still not managed to do.
This is incredibly vexing to be honest and I think you really should have completely setup a working environment at the start of the series so people know what they're getting into, instead of adding things later on without showing how to (within the series' context!).
For now, I'll try to somehow get gulp to work, but if I somehow fail to do that, it just means I cannot continue your series, which would be a huge shame since it's been very helpful so far.
Broooo i stop following this, all modules are deprecated.
can i skip the installation of gulp and all? then just have my js and css not be minified?
im having hard time with this so many errors