Bizarrely low patron count, will definitely contribute if I can turn this knowledge into revenue. Thank you for not being a 'magician' and showing exactly how everything works, hope karma gets back to you quickly :)
This is a nice little added bonus. I can achieve this same tab layout using Bootstrap but since you can't use Bootstrap with Wordpress, this part of the tutorial is extra helpful!
You actually can! I am using it while following this tutorial! Go to your Enqueue.php and add these lines: wp_enqueue_style( 'bootstrapcss', 'stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrapjs', 'stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js' );
Great, great series!!! I'm very happy to be following alongside, doing my own independent plugin idea, and not really following everything exactly, but you've explained everything so well that I'm able to successfully go my own direction without everything falling off the rails. Thanks for a great tutorial series!!
If you are using jquery instead of common javascript then do not use tabs[i] as selector because internally it means tabs.get(i) that returns raw dom on which you cannot use selector .on, instead using 'tabs.eq(i)' that returns jquery object, so you can extent the work using .on, so this should be tabs.eq(i).on('click',switchTabs); yes js use raw data to work on so it would be better option but jquery works with object made by jquery itself. So this method should be adopted. Happy Coding!
@@free2idol1 you're welcome. Not properly... try to study the display and float properties of CSS to understand better it. It's the only way to understand better...You have to understand that all items have specific property on CSS ... for example: if you use display:inline-block you know that the items take specific rules and comportment. If you use the rule float the item became in block element and the block element has determinate rules. If you use a block element you never will never write the with property for example because it heredity from browser
If someone has OCD like me and want make he pane background not overflowing, just add the box-sizing property like this: .tab-content > .tab-pane { box-sizing: border-box; float: left; width: 100%; display: none; }
mystyle.css is not loading. I've checked and triple checked the code. Everything is identical to part 18. If I load the example for this module, the links don't display at the top either.
Did you check my source code on GitHub? Even if you copy that code nothing works? Do you have any errors in your console? Are you sure composer is properly installed and your classes are being initialized properly?
So I stopped for the day and started again this morning. Went through everything. Double checking composer, enqueue, etc. But for some reason and I don't know why, it just started to work. I didn't make a single change. I guess the point is moot now. Time to press on...
I have the same problem here, css is not loading, I mean it is loaded when you inspect the network and reload the page but there are no visible changes. UPDATE: After some debugging I found the problem: Instead of writing wp_enqueue_style('mypluginstyle', $this->plugin_url . 'assets/mystyle.css'); you have to set a slash right before the path of the assets folder so it should be like this: wp_enqueue_style('mypluginstyle', $this->plugin_url . '/assets/mystyle.css'); Do the same for the JS file. I think it has some differences between Mac OS and Windows.
Hello Alex, The javascript is not working in my plugin folder, the file is being ,loaded when I check the network tab, any idea / solution is appreciated.
Hey Thanks Alex for this great videos they still help alot of ppl :) like me, i started following this series for plugins. my question i know html and basic css, shall i learn JS basics before continuing this series ? also i need create a rich user dashboard and admin page plugin , i may need JS much? Thanks!
Hi, I have a problem Almost all of my code is the same as that of Lesson 18, but the style and script do not work properly I can even see these two in the network
Here is the solution as Go to Admin.php file and then go below u can find this public function setFields() { $args = array( array( change the 'label_for' To 'label-_id' . so u can view the tabs transition
Hi @Alessandro Castellani, is there any reason why you don't use the default nav-tab-wrapper that is provided by wordpress? Any cons of using nav-tab-wrapper?
Excellent tutorial series so far. After 6 years (now using WordPress 6.4.3), everything still seems to work exactly right.
Bizarrely low patron count, will definitely contribute if I can turn this knowledge into revenue.
Thank you for not being a 'magician' and showing exactly how everything works, hope karma gets back to you quickly :)
Eheh, thank you so much
This is a nice little added bonus. I can achieve this same tab layout using Bootstrap but since you can't use Bootstrap with Wordpress, this part of the tutorial is extra helpful!
Thanks, I'm happy it was helpful, lots of users hated the digression to a sort of another topic :D
You actually can! I am using it while following this tutorial! Go to your Enqueue.php and add these lines:
wp_enqueue_style( 'bootstrapcss', 'stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrapjs', 'stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js' );
@@kriscloutier4537 Maybe it would be better to download bootstrap and put it into the plugin itself?... cause of performance ^^'
Great, great series!!! I'm very happy to be following alongside, doing my own independent plugin idea, and not really following everything exactly, but you've explained everything so well that I'm able to successfully go my own direction without everything falling off the rails. Thanks for a great tutorial series!!
Now onto the .js bit....and finally done. Thanks for another great tutorial!
If you are using jquery instead of common javascript then do not use tabs[i] as selector because internally it means tabs.get(i) that returns raw dom on which you cannot use selector .on, instead using 'tabs.eq(i)' that returns jquery object, so you can extent the work using .on, so this should be tabs.eq(i).on('click',switchTabs); yes js use raw data to work on so it would be better option but jquery works with object made by jquery itself. So this method should be adopted.
Happy Coding!
Thanks for the heads up
11:38 Anyone know why putting float: left; at .nav-tabs > li > a makes the spacing larger?
simply because an item with float property will become automatically with property display: block;
@@maxcanzonieri thanks for the answer, I've been quite confused about that for a while. Do you know any source telling more about that stuff?
@@free2idol1 you're welcome. Not properly... try to study the display and float properties of CSS to understand better it. It's the only way to understand better...You have to understand that all items have specific property on CSS ... for example: if you use display:inline-block you know that the items take specific rules and comportment.
If you use the rule float the item became in block element and the block element has determinate rules. If you use a block element you never will never write the with property for example because it heredity from browser
Looking forward to see new tuts. Thanks!
New WP tutorial coming tomorrow :D
ciao mamma sono alla lezione 18 e tutto procede bene :D
Eddaje!
Alessandro, are you going to make a video about validation and sanitization of input?
Absolutely :D
If someone has OCD like me and want make he pane background not overflowing, just add the box-sizing property like this:
.tab-content > .tab-pane {
box-sizing: border-box;
float: left;
width: 100%;
display: none;
}
Man .. I really love you so much ❤
Ah, thanks :D
mystyle.css is not loading. I've checked and triple checked the code. Everything is identical to part 18. If I load the example for this module, the links don't display at the top either.
Did you check my source code on GitHub? Even if you copy that code nothing works? Do you have any errors in your console? Are you sure composer is properly installed and your classes are being initialized properly?
So I stopped for the day and started again this morning. Went through everything. Double checking composer, enqueue, etc. But for some reason and I don't know why, it just started to work. I didn't make a single change. I guess the point is moot now. Time to press on...
I have the same problem here, css is not loading, I mean it is loaded when you inspect the network and reload the page but there are no visible changes.
UPDATE: After some debugging I found the problem:
Instead of writing
wp_enqueue_style('mypluginstyle', $this->plugin_url . 'assets/mystyle.css');
you have to set a slash right before the path of the assets folder so it should be like this:
wp_enqueue_style('mypluginstyle', $this->plugin_url . '/assets/mystyle.css');
Do the same for the JS file.
I think it has some differences between Mac OS and Windows.
Thanks! Was having that issue and did not see it until I read your comment
KnowledgeBase thanks bro it works greate
Hello Alex, The javascript is not working in my plugin folder, the file is being ,loaded when I check the network tab, any idea / solution is appreciated.
Hey Thanks Alex for this great videos they still help alot of ppl :) like me, i started following this series for plugins.
my question i know html and basic css, shall i learn JS basics before continuing this series ?
also i need create a rich user dashboard and admin page plugin , i may need JS much?
Thanks!
i want to create my plugin setting pageg in submenu then how can i do it? pls guide..
Hi, is there any change you can create a tutorial about Woocommerce Plugin Development?
Not sure I will do that, but the process and methods are pretty much the same as regular plugin development.
Hello Alessandro, could you tell which package you are using inside Sublime Text 3 to manage JS auto completion?
I don't remember as I switched to VSCode now. Try to search for Javascript autocomplete or something like that. Cheers
vanila js interesting dude!!!
Yup, super light and easy to use without the necessity of any framework or compiler.
Cheers
At which Video did you add the following line to admin.php
I don't remember, sorry.
You can do a research on GitHub and see when it was implemented first.
part 17c
Hi, I have a problem
Almost all of my code is the same as that of Lesson 18, but the style and script do not work properly
I can even see these two in the network
same here
Here is the solution as Go to Admin.php file and then go below u can find this public function setFields()
{
$args = array(
array(
change the 'label_for' To 'label-_id' . so u can view the tabs transition
@@lenny99mc check once
Thanks a lot!
Hey do u have any other ideas of diffrent theme sin wordpress development like booking or classified
Mh, I'm not sure I understand your question, what type of theme are you looking to build?
bike booking or car booking or room booking like these tutorial
waiting for the part where we can store data to the database
With the Settings API work we did, the data in those fields is already getting stored in the DB.
Are you looking for something specific?
Yes, I am working a lot with web scraping but never use it with Wordpress (I am using $wpdb), just wondering if there is a better way.
maybe create a new table
Can’t we use the bootstrap to develop the admin section?
Absolutely !
Good! Thanks
You're very welcome :D
great
Perfect!!!
Indeed :D
anyone else get a space between tab list and the tab content?
need more tuts
Coming soon
Hi @Alessandro Castellani, is there any reason why you don't use the default nav-tab-wrapper that is provided by wordpress? Any cons of using nav-tab-wrapper?
No specific reason, I just wanted to show how to code everything from scratch :D