Great ! Is there anyway to add something like a button in the editor to make it easier for the user to use the short codes we implemented or otherwise how he will know he could use them ?!
Thanks for the great tutorial. Anyway, I am working on a little different scenario. I would like to input the boolean and array value as the attribute of the Shortcode, but I have noticed that the value is changed from Boolean or Array into the String. Any advice?
Hi Alex, You have added the JavaScript code in the already exisiting file "sunset.js. As the exisiting code in the file is for the working of Load more button for AJAX. I just want to have the JS code which can only run the tooltip. Will you provide me th code which will pickup the tooltip. As you have shown that revealposts() function will do that. Just want the code to add in the sunset.js only for the tooltip, no AJAX.
Hi Alex, I discovered a issue with shortcode. it does't work well with the tag. I made a shortcode [views] to give user a views count of the post. In the editor, I write [views]. the published result would be (### represents the count of views): ### For this problem, my user can't align the count numbers to their will. Of course, I can give my users the option to use attributes to align the element. ([views pos=center]), then I apply CSS position and transform tricks to make it center align. But I want know whether this is a bug or I am doing stuff wrong. Thanks sir.
If you're returning an inline value or container, you shouldn't have any problem with the alignment of the paragraph. Can you share your shortcode function so I can take a look?
It's weird that even if I simply output 'hello' in the shortcode, it won't go into the tag. Anyways, The shortcode processing part is here ( function views_count() ): github.com/JJPro/kellyyu/blob/master/inc/class-jk-shortcodes.php And the CSS part is here: github.com/JJPro/kellyyu/blob/master/css/sass_base/_shortcode-views-count.scss Thanks Alex.
I think I found a couple of issues. A div cannot physically stay in a p tag. it's an inline element that can't wrap a , a block element by nature. Also, always RETURN, never ECHO! I said it in the video too :P Try to change the div wrapper to a span, and swap the echo with a return. let me know, I hope it'll help. P.S.: I love how clean your code is and how well built is your class!
oh crap. I echoed in shortcode. I dont think is the issue, because I tried simply echo 'hello' without any tags and didn't work. I'm gonna try 'return' and report back soon. :)
WOW!!!! ALEX YOU ARE TOTALLY RIGHT. BOTH OF THEM ARE ISSUES. Lessons well learned: 1. use inline wraps so that client can align them to their will. 2. NEVER EVER EVER echo in shortcode. THANK YOU SOOOOOO MUCH ALEX!!!
Really appreciate your tutorials, you have really been helpful to my growth. I would like to know if you could make a tutorial on how to setup and use PhpStorm to develop WordPress. I know your tutorials take time and I am very much willing to pay a fee for it (it is worth it to me). If you could contact me so we can discuss it more, would be great.
Hi, thank you so much for your positive feedback. My tutorials are and will always be free, so no need to pay a fee, but thank you anyway for your proposal. Unfortunately I never used PhpStorm, so I can't really help you. Anyway if you do a research on Google with the keywords "setup PhpStorm for wordpress" the first result is a Confluence page with a pretty good tutorial. Thanks for your message and Happy Coding!
Hm, again, having a nice tooltips requires a bootstrap integration. I decided to not include bootstrap, but you are showing that it's worth it in quite some of places. So, the question is how to pick only smallest possible parts from bootstrap without all the mess and include only those pieces together. I would like to have tool-tips or let's say media queries only. Maybe even slider... How to strip and select such parts only? Is the bootstrap configurator capable of stripping soo much from it? I afraid of some generic unnecessary classes which still could be required - because it's a framework. Or instead, maybe somewhere are there simple tiny JS codes ready to incorporate (like ace editor in admin)? Or maybe it could be done just with plain jquery, which will be probably the most 'tiny' and is already included? I'm observing a disturbing tendency of my sass files to GROW; they have nearly thousand of lines right now! And I'm just in half of the course... After sass compression they already have 36kB.
You can or include a small JS library to have a super light tooltip, check Github or the NPM site for those, or customise Bootstrap to have only what you need, and you can do it from this page: getbootstrap.com/customize/ Either both solutions are ok, but of course, always pick the one you feel more comfortable with. About the length of your SASS file, if you're following along you will notice that my SASS is not really optimised. I repeat a lot of classes and some declarations are redundant and not properly structured. That's because I was more interested in focusing on WordPress and not spending too much time thinking about the SASS structure. You can always revisit your files at the end of the project and try to optimise them by removing duplicated declarations, using loops and variables to avoid repetitions, separating the code in files, using more mixins, and extending classes. Also that part is fun :D
Sure! My styling is just very different and full of nice details. Also im still learning how to make sass smaller by using tricks with nesting, extending and mixIng, but the resultIng code becomes complicated. Some solutions require compass and it seems that there are no good CSS redundancy optimizers.
If you have a public repository, you could integrate CodeClimate to evaluate your code. It's pretty good in detecting repetitions, redundancies, and suggesting solutions in optimising it. Not sure if it works with SASS as good as it does with PHP, tho. codeclimate.com/
Hi Alex, I'm trying to use ajax in WP to navigate between pages, but I don't know the proper way to do it. I had problems like duplicated header and footer and if i remove them it would be a problem which is how anyone can access the single page directly if there's no header. I would appreciate your help :)
Hi, if you follow my Ajax infinite loading tutorial you will have all the info you need. The method is exactly the same, the only difference is to call a page with its ID and return just that page. Remember to return a file without header and footer, like a content.php, to avoid duplication.
Sorry to be a pain, keep following your tutorial managed to sort my other issue it was an error with the jquery content. On this tutorial for some reason, I am using google chrome if that matters. Where would I have made an error in the code if my a link is getting its styling from bootstrap not from my Css?
Bootstrap has a really well built and strict CSS structure when it comes to its nav-bar. Try to emulate the same structure to overwrite it properly, or use the !imprtant declaration in your css attributes to give them higher priority.
A strange issue that I am experiencing with this is that the Tooltip works without me adding ** $('[data-toggle="tooltip"]').tooltip() ** to the 'revealPosts' function in the .js file. In fact when I DO add this,I get a console error log: Uncaught TypeError: $(...).tooltip is not a function and the post does not display at all. The Tooltip is also not styled the same as in the bootsrap documentation. Any help with this would be greatly appreciated as ever.
Hi Allesandro!Thanks for getting back to me dude.I'm using Bootstrap 3.3.7 and as far as I can tell Bootstrap seems to be properly enqueued and I also added ** @import url("bootstrap.min.css"); ** at the top of my .css just to be sure the CSS is being properly called.....
Without ** $('[data-toggle="tooltip"]').tooltip() ** in the revealPosts function I get no console errors.....when adding it I get ** Uncaught TypeError: $(...).tooltip is not a function ** which I think is an error to do with the order of the scripts being implemented i.e JQuery script is being called AFTER the bootstrap script maybe?
Hi Allesandro!Thanks for getting back to me dude.I'm using Bootstrap 3.3.7 and as far as I can tell Bootstrap seems to be properly enqueued and I also added ** @import url("bootstrap.min.css"); ** at the top of my .css just to be sure the CSS is being properly called.....
Excellent tutorial series! Really helpful thank you! Looking forward to the next part!
Thank you so much, the next couple of tutorials will be uploaded on Thursday.
Cheers
Thank you very much for your hard work!
You're very welcome!
Great !
Is there anyway to add something like a button in the editor to make it easier for the user to use the short codes we implemented or otherwise how he will know he could use them ?!
Yes, it's on my list for upcoming videos
well, I'm waiting and thank you ;-)
Thanks for the great tutorial. Anyway, I am working on a little different scenario. I would like to input the boolean and array value as the attribute of the Shortcode, but I have noticed that the value is changed from Boolean or Array into the String. Any advice?
Hi Alex,
You have added the JavaScript code in the already exisiting file "sunset.js.
As the exisiting code in the file is for the working of Load more button for AJAX.
I just want to have the JS code which can only run the tooltip.
Will you provide me th code which will pickup the tooltip. As you have shown that revealposts() function will do that.
Just want the code to add in the sunset.js only for the tooltip, no AJAX.
Hi Alex, I discovered a issue with shortcode. it does't work well with the tag.
I made a shortcode [views] to give user a views count of the post.
In the editor, I write [views].
the published result would be (### represents the count of views):
###
For this problem, my user can't align the count numbers to their will.
Of course, I can give my users the option to use attributes to align the element. ([views pos=center]), then I apply CSS position and transform tricks to make it center align.
But I want know whether this is a bug or I am doing stuff wrong.
Thanks sir.
If you're returning an inline value or container, you shouldn't have any problem with the alignment of the paragraph.
Can you share your shortcode function so I can take a look?
It's weird that even if I simply output 'hello' in the shortcode, it won't go into the tag.
Anyways, The shortcode processing part is here ( function views_count() ):
github.com/JJPro/kellyyu/blob/master/inc/class-jk-shortcodes.php
And the CSS part is here:
github.com/JJPro/kellyyu/blob/master/css/sass_base/_shortcode-views-count.scss
Thanks Alex.
I think I found a couple of issues.
A div cannot physically stay in a p tag. it's an inline element that can't wrap a , a block element by nature.
Also, always RETURN, never ECHO! I said it in the video too :P
Try to change the div wrapper to a span, and swap the echo with a return.
let me know, I hope it'll help.
P.S.: I love how clean your code is and how well built is your class!
oh crap. I echoed in shortcode.
I dont think is the issue, because I tried simply echo 'hello' without any tags and didn't work. I'm gonna try 'return' and report back soon.
:)
WOW!!!!
ALEX YOU ARE TOTALLY RIGHT.
BOTH OF THEM ARE ISSUES.
Lessons well learned:
1. use inline wraps so that client can align them to their will.
2. NEVER EVER EVER echo in shortcode.
THANK YOU SOOOOOO MUCH ALEX!!!
Really appreciate your tutorials, you have really been helpful to my growth. I would like to know if you could make a tutorial on how to setup and use PhpStorm to develop WordPress. I know your tutorials take time and I am very much willing to pay a fee for it (it is worth it to me). If you could contact me so we can discuss it more, would be great.
Hi, thank you so much for your positive feedback.
My tutorials are and will always be free, so no need to pay a fee, but thank you anyway for your proposal.
Unfortunately I never used PhpStorm, so I can't really help you. Anyway if you do a research on Google with the keywords "setup PhpStorm for wordpress" the first result is a Confluence page with a pretty good tutorial.
Thanks for your message and Happy Coding!
Hm, again, having a nice tooltips requires a bootstrap integration. I decided to not include bootstrap, but you are showing that it's worth it in quite some of places. So, the question is how to pick only smallest possible parts from bootstrap without all the mess and include only those pieces together. I would like to have tool-tips or let's say media queries only. Maybe even slider... How to strip and select such parts only? Is the bootstrap configurator capable of stripping soo much from it? I afraid of some generic unnecessary classes which still could be required - because it's a framework. Or instead, maybe somewhere are there simple tiny JS codes ready to incorporate (like ace editor in admin)? Or maybe it could be done just with plain jquery, which will be probably the most 'tiny' and is already included?
I'm observing a disturbing tendency of my sass files to GROW; they have nearly thousand of lines right now! And I'm just in half of the course... After sass compression they already have 36kB.
You can or include a small JS library to have a super light tooltip, check Github or the NPM site for those, or customise Bootstrap to have only what you need, and you can do it from this page: getbootstrap.com/customize/
Either both solutions are ok, but of course, always pick the one you feel more comfortable with.
About the length of your SASS file, if you're following along you will notice that my SASS is not really optimised. I repeat a lot of classes and some declarations are redundant and not properly structured. That's because I was more interested in focusing on WordPress and not spending too much time thinking about the SASS structure.
You can always revisit your files at the end of the project and try to optimise them by removing duplicated declarations, using loops and variables to avoid repetitions, separating the code in files, using more mixins, and extending classes.
Also that part is fun :D
Sure! My styling is just very different and full of nice details. Also im still learning how to make sass smaller by using tricks with nesting, extending and mixIng, but the resultIng code becomes complicated. Some solutions require compass and it seems that there are no good CSS redundancy optimizers.
If you have a public repository, you could integrate CodeClimate to evaluate your code.
It's pretty good in detecting repetitions, redundancies, and suggesting solutions in optimising it. Not sure if it works with SASS as good as it does with PHP, tho. codeclimate.com/
I'll definitely look into that, thanks!
Hi Alex, I'm trying to use ajax in WP to navigate between pages, but I don't know the proper way to do it. I had problems like duplicated header and footer and if i remove them it would be a problem which is how anyone can access the single page directly if there's no header. I would appreciate your help :)
By the way Alex, I found a typo in your about section on your channel :)
Hi, if you follow my Ajax infinite loading tutorial you will have all the info you need.
The method is exactly the same, the only difference is to call a page with its ID and return just that page.
Remember to return a file without header and footer, like a content.php, to avoid duplication.
+Alessandro Castellani So you mean like a template ? I'll try to implement it, thanks :)
Sorry to be a pain, keep following your tutorial managed to sort my other issue it was an error with the jquery content.
On this tutorial for some reason, I am using google chrome if that matters. Where would I have made an error in the code if my a link is getting its styling from bootstrap not from my Css?
Bootstrap has a really well built and strict CSS structure when it comes to its nav-bar. Try to emulate the same structure to overwrite it properly, or use the !imprtant declaration in your css attributes to give them higher priority.
A strange issue that I am experiencing with this is that the Tooltip works without me adding ** $('[data-toggle="tooltip"]').tooltip() ** to the 'revealPosts' function in the .js file. In fact when I DO add this,I get a console error log:
Uncaught TypeError: $(...).tooltip is not a function
and the post does not display at all.
The Tooltip is also not styled the same as in the bootsrap documentation.
Any help with this would be greatly appreciated as ever.
Are you sure your bootstrap CSS and JS are properly uploaded and enqueued?
Are you using Bootstrap 3 or 4?
Hi Allesandro!Thanks for getting back to me dude.I'm using Bootstrap 3.3.7 and as far as I can tell Bootstrap seems to be properly enqueued and I also added ** @import url("bootstrap.min.css"); ** at the top of my .css just to be sure the CSS is being properly called.....
Without ** $('[data-toggle="tooltip"]').tooltip() ** in the revealPosts function I get no console errors.....when adding it I get ** Uncaught TypeError: $(...).tooltip is not a function
** which I think is an error to do with the order of the scripts being implemented i.e JQuery script is being called AFTER the bootstrap script maybe?
Hi Allesandro!Thanks for getting back to me dude.I'm using Bootstrap 3.3.7 and as far as I can tell Bootstrap seems to be properly enqueued and I also added ** @import url("bootstrap.min.css"); ** at the top of my .css just to be sure the CSS is being properly called.....