search

SimonPadbury / WBST

Starter theme for WordPress, with Bootstrap and WooCommerce compatibility
MIT License
29 stars 14 forks source link

Jquery enqueues #13

Open danielmrey opened 6 years ago

danielmrey commented 6 years ago

Hi Simon:

First of all thank you for the BST family!... Best clean bootstrap themes out there!

I have been using BST and now I am adventuring to use WBST and Regarding JQuery enqueues:

I have noticed that BST:

But in WBST:

Can you please let me know which is the best option?

Thank you!

Daniel.

SimonPadbury commented 6 years ago

Hi Daniel,

I have not maintained BST or WBST for 2 years (I will not be updating them). These days I am working on B4ST (for Bootstrap 4) https://github.com/SimonPadbury/b4st

For BST/WBST I think it is best to use the WP onboard jQuery, because it is and already available to you within the WordPress Core. (I see lots of tutorials that say "of course it is better" to enqueue jQuery from a CDN, usually mentioning Google CDN. But I am not convinced. See:

https://ttmm.io/tech/dont-dequeue-wordpress-jquery/

https://premium.wpmudev.org/blog/replacing-default-wordpress-scripts/

There was a time in history then lots of tutorials recommended enqueue'ing another jQuery, because the WP core jQuery was an old version. Search/Google/ search for "wordpress current version of jquery" and you will see a list. It says WordPress 4.6 contains jQuery 1.12.4

But maybe for B4ST, don't do this. For B4ST, I did enqueue a newer, slim version of jQuery (jquery-3.2.1.slim.min.js) from a CDN, because this is the same version as in the Bootstrap 4 documentation.

Look at the big table of included scripts that you can directly enqueue from the WordPress Core (scroll down) https://developer.wordpress.org/reference/functions/wp_enqueue_script/

You already know that your WordPress exists -- so you can depend upon the scripts that they have included and approve of.

Will your website be slightly slower to load (during first visit) than if your site is requesting jQuery from a CDN? Sometimes (e.g. if the visitor already visited other websites that have put jQuery in your browser cache from that same CDN). But visitors will probably not notice this. Your images may take more time to load than jQuery, if they are big and numerous.

Do you need a newer jQuery than what is included in the WP core? Sometimes. You know your own JS (and you know what is recommended in the Bootstrap docs for your preferred Bootstrap version). That should guide your decision.

jQuery in the <head> or at the end of the <body>? Because of WordPress being in control of delivering your website, I think it does not matter.

If your HTML link to jQuery fetches the jQuery (in a static website), then consider the paragraph [*] below. But in WordPress, your jQuery is being pushed to the visitor by WordPress, by the enqueue. WordPress will not wait until the HTML has fully arrived at the visitor, before it begins to push jQuery to the visitor. (And the other scripts probably will not execute until document ready, anyway.)

[* E.g. if you have (for example) some added CSS class, or added HTML, that is under the control of jQuery, then you should put jQuery in your <head>. But I usually have jQuery controlling stuff only after a click/tap, or only after a delay (e.g. in a slideshow).]

Simon

danielmrey commented 6 years ago

Simon... Thank you so much for your so detailed reply... I will study all very carefully!

Thanks again!

SimonPadbury commented 6 years ago

:-)

danielmrey commented 6 years ago

I have been using your BST as a base for a long time, so long that now is very different, I added a lot of functions and functionalities and it works great!... Do you recommend me to move to your B4ST?... is Bootstrap 4 fully compatible now?... and which are the main differences in a nutshell of your BST and your B4ST?

Thank you!

SimonPadbury commented 6 years ago

Hi Daniel,

BST and B4ST are very similar. B4ST is different in that it has its header.php etc. in the root folder, and the includes folder is now named loops.

Bootstrap 4 is already quite stable. I don't think it will change much. I can't see it doing anything different in all the modern browsers that I have used (Safari, Chrome, Firefox, Opera, Vivaldi, Brave, Edge, on MacOS and iOS). Maybe they still have problems with old IE (e.g. problems with images inside a flexbox grid), or with unusual situations.

I like Bootstrap 4 a lot better than Bootstrap 3. If you know Pug, you may like to try this: https://simonpadbury.github.io/Atomic-Boot-Pug/

Maybe if you still need to support IE9, then continue using Bootstrap 3. I have not looked at Bootstrap 4 on an old Windows PC.

Simon

danielmrey commented 6 years ago

So apart from files and folder structure (and obviously the Bootstrap 4 files) I understand I could migrate very easily from BST to B4ST... Thank you!

You are maybe tired of me but I am passionate about web development!... and you are a great source of inspiration for me, so if you don't mind, I have more questions for you... (sorry):

Thank you again Simon!

SimonPadbury commented 6 years ago

No problem. I enjoy being helpful.

The change from BST and B4ST is easy. The change from Bootstrap 3 to Bootstrap 4 -- this is where you need to focus.

Don't use a plugin to remove jquery-migrate. Just do this: https://derekshirk.com/what-is-migrate-js-and-why-does-wordpress-enqueue-it/

Maybe I am a web dinosaur already!

danielmrey commented 6 years ago

Thank you Simon!

SimonPadbury commented 6 years ago

Bootstrap 4: you will be an expert in a short time. Maybe just watch some YouTube videos or follow some tutorials on people's blogs.

For simple things like registering, enqueuing, etc., where you only need to do something once, no it is not necessary to wrap it in a function.

danielmrey commented 6 years ago

Thank you Simon!

SimonPadbury commented 6 years ago

Yes it can be done your way, easily, I expect.

Render blocking CSS is about slow, bug CSS files, isn’t it?

Maybe this is what you need I already use this plugin but I never did what this article says:

http://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/

Simon

On 29 Nov 2017, at 19:42, danielmrey notifications@github.com wrote:

Thank you Simon!

Will learn bootstrap 4 then! So removing jquery-migrate can also be done using my way What do you think about Eliminating render-blocking CSS in above-the-fold content? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

SimonPadbury commented 6 years ago

Corrected typo in my reply

danielmrey commented 6 years ago

Thank you!

I will see those plugins although I would like to do it by code, something like this, but precisely this one doesn't seem to work: https://wordpress.stackexchange.com/questions/186065/how-to-load-css-in-the-footer

SimonPadbury commented 6 years ago

Thanks, I will test this tomorrow, it is late here in England. I will let you know if I can get it to work.

What use above the fold, just a few in head styles?

Have you tried BassCSS or Tachyons CSS? These are also good for when you need to do styling within a post, in the editor.

On 29 Nov 2017, at 19:57, danielmrey notifications@github.com wrote:

Thank you!

I will see those plugins although I would like to do it by code, something like this, but precisely this one doesn't seem to work: https://wordpress.stackexchange.com/questions/186065/how-to-load-css-in-the-footer

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

danielmrey commented 6 years ago

Thank you so much for all your help today!... I am also in England but can't stop today!... :-)

I tried this and it is great: https://wordpress.org/plugins/autoptimize/ but I always prefer to find it programatically

Above the fold I have 2 CSS files, one is bootstrap and the other my styles, buy Google is telling me that I should eliminate render-blocking CSS in above-the-fold content...

Never tried BassCSS or Tachyons CSS

danielmrey commented 6 years ago

I found this: https://premium.wpmudev.org/forums/topic/moving-appointments-css-to-footer

Have a good night Simon, and thanks again!

SimonPadbury commented 6 years ago

Morning Daniel,

This works. You still need to register Bootstrap before you can enqueue it. Either register it before the function (as in this example) or within the function:

wp_register_style('bootstrap-css', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css', false, '4.0.0-beta.2', null);
//wp_enqueue_style('bootstrap-css');

//Register other styles that you want to add in the footer

function prefix_add_footer_styles() {
    wp_enqueue_style('bootstrap-css');

    //Enqueue other styles that you want to add in the footer

};
add_action( 'get_footer', 'prefix_add_footer_styles' );

I'm still not clear why this would make much difference to your speed. And surely, if Bootstrap is styling anything above the fold (even think about the CSS reset that is within Bootstrap, called Reboot), then you need it up in the head or else people on slow connections/ phones will get a flicker of wrongly-styled stuff. E.g. does your site not have a Bootstrap navbar?

Images are usually the biggest items that need loading. Maybe you need to lazy load images that are below the fold.

Anyway, whose fold? Phones? Your site will load slowest on phones (any any devices connected to the internet via 3G).

danielmrey commented 6 years ago

Hi Simon:

Thank you for this, I will try this code... and sorry for the late reply... I had to put a website live and it gave me a lot of problems due to a very old hosting...

My concern about placing all in footer is because Google PageSpeed Insights keep telling me to do this to eliminate render-blocking JavaScript and CSS in above-the-fold content

Yes my websites have bootstrap navbars

Never done lazy loading for images... Can that be done easily in Wordpress?

The fold lines are dictated by Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

Thanks again!

SimonPadbury commented 6 years ago

Hi Daniel,

Then you need Bootstrap CSS up in the Head, so that it can style your important navbar above the fold.

For lazy load images, you need a script and you also need a set of fast, low-res images.

What happens: The page loads quickly, and low res images (=thumbnails enlarged too much) are used to layout the page below the fold. And when the visitor scrolls down, these rubbish images are swapped for their high res version, each when they will be shown. (And meanwhile, some scripts continue loading the images.)

WordPress can create all the low res images for you.

http://www.wpbeginner.com/plugins/regenerate-thumbnails-new-image-sizes-wordpress/ http://www.wpbeginner.com/plugins/regenerate-thumbnails-new-image-sizes-wordpress/

Then you need one of these options:

Plugins:

https://managewp.com/lazy-load-tools https://managewp.com/lazy-load-tools

http://www.wpbeginner.com/plugins/how-to-do-lazy-load-images-in-wordpress/ http://www.wpbeginner.com/plugins/how-to-do-lazy-load-images-in-wordpress/

Other options:

https://www.kevinmuldoon.com/lazy-load-wordpress-plugins/ https://www.kevinmuldoon.com/lazy-load-wordpress-plugins/

https://www.giftofspeed.com/lazy-load-images/ https://www.giftofspeed.com/lazy-load-images/

o o o o o o o

Meanwhile, also use WPTotalCache (or similar) so that your visitors get served already-built HTML from a cache folderm (like as for a static website) instead of waiting for WordPress building each page every time for every visitor.

Hope this helps,

Simon

On 1 Dec 2017, at 14:47, danielmrey notifications@github.com wrote:

Hi Simon:

Thank you for this, I will try this code... and sorry for the late reply... I had to put a website live and it gave me a lot of problems due to a very old hosting...

My concern about placing all in footer is because Google PageSpeed Insights keep telling me to do this to eliminate render-blocking JavaScript and CSS in above-the-fold content

Yes my websites have bootstrap navbars

Never done lazy loading for images... Can that be done easily in Wordpress?

The fold lines are dictated by Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/pagespeed/insights/ Thanks again!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-348513248, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpVNShz0aEN2xsWAo_FOlqe_bipQHks5s8BGZgaJpZM4QkGUg.

danielmrey commented 6 years ago

You are right... Bootstrap has to be in the header, will keep that code for when I need to add more CSS's and can be in the footer.

Will investigate the lazy load... But doesn't the process make the contents creation more complex for client?... also doesn't the new addition of a plugin slow down a bit the website?... At the moment what I am doing is generating progressive JPG, I know is not the same but uses the same concept.

I used WPTotalCache before and it is great but when I update code and contents the cache is very sticky... The solution is deactivate it make changes and then activate it?

I have some clients with slow server response and I would like to know who to "blame"... Is there a way of isolating the server timing from Wordpress processes or even from theme programming?... So I will know if is the hosting what slow the website or if it is my Theme?

Thank you!

danielmrey commented 6 years ago

Just in case I didn't mention, I use these 2 plugins:

danielmrey commented 6 years ago

How can I remove the annoying inline style that Wordpress add to the captions? I tried this but does not work:

;(function ($) {

"use strict";

$(document).ready(function () {

    // Remove inline style
    $(".wp-caption").removeAttr("style");
    $(".attachment-full").removeAttr("style");

});

}(jQuery));

danielmrey commented 6 years ago

Correction: I used "WP Super Cache" not "WP Total Cache"

SimonPadbury commented 6 years ago

Hi Daniel,

I actually never deployed lazy load, but I know that this plugin is popular: https://wordpress.org/plugins/bj-lazy-load/ https://wordpress.org/plugins/bj-lazy-load/

WPTotal Cache (WPTC) serves “already created” HTML webpages to the visitor, and it creates the page when you click Publish. (I can’t remember whether WPTC does modify these pages when you click “Update”.) But WPTC doesn’t detect when you edit PHP files.

So that you can see your changes while you work, you need to (a.) switch off WPTotal Cache, and (b.) empty the cache.

When you are happy with your changes, switch on WPTC again. It will generate a completely new cache.

For slow server response time, I would Google and find any recent blog post with a list of things you can do, e.g. not have too many plugins, not have too many versions of jquery added, not have images that are too big. When you are satisfied that you have done all that you can do, you can blame the slowness on the server! :-)

Simon

On 4 Dec 2017, at 11:15, danielmrey notifications@github.com wrote:

You are right... Bootstrap has to be in the header, will keep that code for when I need to add more CSS's and can be in the footer.

Will investigate the lazy load... But doesn't the process make the contents creation more complex for client?... also doesn't the new addition of a plugin slow down a bit the website?... At the moment what I am doing is generating progressive JPG, I know is not the same but uses the same concept.

I used WPTotalCache before and it is great but when I update code and contents the cache is very sticky... The solution is deactivate it make changes and then activate it?

I have some clients with slow server response and I would like to know who to "blame"... Is there a way of isolating the server timing from Wordpress processes or even from theme programming?... So I will know if is the hosting what slow the website or if it is my Theme?

Thank you!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-348932635, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpeAE7EWnXzNH-P3Ily87SVoAQCYEks5s89RQgaJpZM4QkGUg.

SimonPadbury commented 6 years ago

Hi Daniel,

Don’t try to remove the style by jQuery — but use this PHP to stop the style being added:

http://wp-snippets.com/remove-default-inline-style-of-wp-caption/ http://wp-snippets.com/remove-default-inline-style-of-wp-caption/

Simon

On 4 Dec 2017, at 13:08, danielmrey notifications@github.com wrote:

How can I remove the annoying inline style that Wordpress add to the captions? I tried this but does not work:

;(function ($) {

"use strict";

$(document).ready(function () {

// Remove inline style
$(".wp-caption").removeAttr("style");
$(".attachment-full").removeAttr("style");

}); }(jQuery));

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-348957352, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpbefIsqpJgD6XRG45OuiF_wQ2jrCks5s8-7DgaJpZM4QkGUg.

danielmrey commented 6 years ago

Hi Simon:

I will try all your pieces of code, thank you so much!

When you say WPTC you mean W3 total cache?... I have used WP Super Cache... I am looking for something simple but effective, mainly because my clients need to be able to use it and normally they are not very good with programming and IT...

In Xmas and new year I normally do not have many clientS so I will use that tile to learn Bootstrap 4, and probably will use your B4ST as base... Is your B4ST compatible with Woocommerce?

Thanks.

SimonPadbury commented 6 years ago

Hi Daniel,

I haven’t built a Woocommerce site in a long time — I haven’t put together Woocommerce and Bootstrap 4 yet. I doubt that there will be a problem, they should be compatible.

What I like to do is style the WooCommerce buttons etc to be the same as Bootstrap — so that you don’t get two different styles of buttons on one website. For some stuff, Boostrap classes can be added in easily. Other stiff will require copying Bootstrap CSS and applying it to Woocommerce classes.

If I get opportunity in late December I will gave a crack at this. I iwll probably begin with this:

https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/ https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/

https://wpthememakeover.com/2016/06/02/how-to-add-woocommerce-support-to-your-theme/ https://wpthememakeover.com/2016/06/02/how-to-add-woocommerce-support-to-your-theme/

https://www.youtube.com/watch?v=dyVH9zAcd5s https://www.youtube.com/watch?v=dyVH9zAcd5s

https://www.youtube.com/watch?v=1wtBdrPDIhc https://www.youtube.com/watch?v=1wtBdrPDIhc

Yes, by WPTC I meant WordPress Total Cache. Saves writing it out lots of times.

Simon

On 8 Dec 2017, at 12:27, danielmrey notifications@github.com wrote:

I will try all your pieces of code, thank you so much!

When you say WPTC you mean W3 total cache?... I have used WP Super Cache... I am looking for something simple but effective, mainly because my clients need to be able to use it and normally they are not very good with programming and IT...

In Xmas and new year I normally do not have many clientS so I will use that tile to learn Bootstrap 4, and probably will use your B4ST as base... Is your B4ST compatible with Woocommerce?

Thanks.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-350251683, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpQBpmYiNARLkwE7PNgPvncBl16B1ks5s-StDgaJpZM4QkGUg.

danielmrey commented 6 years ago

Hi Simon:

Your WBST is Woocommerce compatible so I compared it with your BST to get the Woocommerce compatibility to added it to my version of your BST (... hard work!) and I found this:

1- new-css: /css/wbst.css: I used only rules starting with .woocommerce 2- new-js: /js/wbst.js 3- new-function: /functions/woocommerce-setup.php 4- new-template: /woocommerce.php: with woocommerce_content();

Then I added these files to be loaded in its files: A- Two new enqueues in: /functions/enqueues.php: wbst.css (1) + wbst.js (2) needs jQuery B- One new function in: /funtions.php: call woocommerce-setup.php (3)

And it works beautifully... (just needs some styling adjustments)

So if you add this to your B4ST to make it WB4ST it should work... But I understand what you mean about styling Woocommerce buttons with Bootstrap 4 and not having 2 styling for buttons in the same web.

RE Cache plugins: is "WordPress Total Cache" same as "W3 Total Cache" ?

Thanks!

SimonPadbury commented 6 years ago

Hi Daniel,

Yes W3 Total Cache is the same thing as WP Total Cache. It’s what I meant.

Thanks, I will hopefully make a combination B4ST with WooCommerce as another separate repository, late December if/when I get some spare time.

But maybe WB4ST would be too silly for a name. I’ll have to think of something cool. WooBoot4 ? Maybe not! :-)

I called another project of mine “Atomic Boot Pug”.

Take care,

Simon

On 8 Dec 2017, at 13:38, danielmrey notifications@github.com wrote:

Hi Simon:

Your WBST is Woocommerce compatible so I compared it with your BST to get the Woocommerce compatibility to added it to my version of your BST (... hard work!) and I found this:

1- new-css: /css/wbst.css: I used only rules starting with .woocommerce 2- new-js: /js/wbst.js 3- new-function: /functions/woocommerce-setup.php 4- new-template: /woocommerce.php: with woocommerce_content();

Then I added these files to be loaded in its files: A- enqueues new-css + new-js: /functions/enqueues.php: wbst.css (1) + wbst.js (2) needs jQuery B- function new-function: /funtions.php: call woocommerce-setup.php (3)

And it works beautifully... (just needs some styling adjustments)

So if you add this to your B4ST to make it WB4ST it should work... But I understand what you mean about styling Woocommerce buttons with Bootstrap 4 and not having 2 styling for buttons in the same web.

RE Cache plugins: is "WordPress Total Cache" same as "W3 Total Cache" ?

Thanks!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-350265158, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpRSCRTYAcFgMeHeohN4MBgXHmoVPks5s-TvogaJpZM4QkGUg.

danielmrey commented 6 years ago

Hi Simon:

Or maybe just add compatibility to B4ST that can be activated/deactivated so you do not need to have to maintain so many projects... just a thought... I can help you testing... :-)

BTW I love WooBoot4 for a name!

I saw your Atomic Boot Pug... I liked the top nav and left nav at the same time... try to isolate it to use it my theme but I didn't get a clean code tho...

Thanks!

SimonPadbury commented 6 years ago

Hi Daniel,

Yes, too many projects — my Bootstrap 3 themes multiplied into BST, WBST and BST-Plus. (I don’t plan on updating any of these, because Bootstrap 4 is already much better than Bootstrap 3).

I think, however, that I do want B4ST and WooBoot4 (maybe that name is beginning to stick!) to be two separate projects — unless there’s an easy way to include/disinclude if developer doesn’t need it. I will think about that.

Do you use/have you experimented with:

  1. Sass, SCSS, Less or other CSS pre-processor?
  2. Pug, Handlebars or some other HTML pre-processor?
  3. A static site generator (such as Jekyll)?
  4. Free “command line” developer software such as Webpack, Grunt or Gulp to do pre-processing, or paid software such as Codekit (Mac) or Prepros (Windows) to do preprocessing?

Answer me at simon.padbury@icloud.com

Simon

On 11 Dec 2017, at 14:41, danielmrey notifications@github.com wrote:

Hi Simon:

Or maybe just add compatibility to B4ST that can be activated/deactivated so you do not need to have to maintain so many projects... just a thought... I can help you testing... :-)

BTW I love WooBoot4 for a name!

I saw your Atomic Boot Pug... I liked the top nav and left nav at the same time... try to isolate it to use it my theme but I didn't get a clean code tho...

Thanks!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimonPadbury/WBST/issues/13#issuecomment-350743116, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpTwhJyWO3qZoOo-wvNdAPyFsKNYbks5s_T8IgaJpZM4QkGUg.

danielmrey commented 6 years ago

Hi Simon:

I think adding Woocommerce compatibility to B4ST is very easy and if developer does not use Woocommerce then these files, rules and functions are simply not used

1- add new rules to bst.css, starting with class .woocommerce that will not affect if you do not use Woo 2- wbst.js include bst.js anyway 3- new-function woocommerce-setup.php is a matter of calling this function only if you use Woo 4- new-template: woocommerce.php with woocommerce_content(); used only if you use Woo

But obviously is your project!

Thanks!