wp_dequeue_script VS Deleting the script from functions.php - javascript

firstly please pardon my complete ignorance in regards to Wordpress and Web Development in general if in being completely honest.
I have a theme on my website which came with a whole bunch of Javascript addons (like pretty photo) that i dont want. There are literally tons of them. Now, i want to remove the relevant files altogether, but that will result in 404 on those files (which wont help with my load times).
My question, i have been reading an aweful lot about wp_dequeue_script , and how it removes files.
Why not just delete the actual wp_enqueue_ files from function.php??
Does that cause problems? Any insight into the matter would be much appreciated.

Welcome to the world of Wordpress.
Why not just delete the actual wp_enqueue_ files from function.php??
The only answer and explanation to this question is, if you are not the author of a plugin or theme, never make any type of modification to that plugin or theme. This also goes for Wordpress core files. The simple reason being, if you ever upgrade your theme/plugin/core, all your changes will be lost and cannot be retrieved. This is a very costly mistake
The proper way
In your case, you should use functions like wp_deregister_script() and wp_dequeue_script() to remove scripts you don't need. See this post on how to correctly remove scripts.
This functions should go in either a custom plugin or a child theme. This should never go into the theme directly as this will be deleted when you update your theme.
I hope this helps

Related

How do i fix "id attribute is not unique" in wordpress site (checking on achecker for wcag2.0)?

I am trying to make a wordpress website wcag 2 compatible. I am running the test on achecker and getting the error that matchHeight-js is not unique. How can I determine and fix the problem? I am viewing the page source and i can see the 2 id's that are the same but don't know what to do with them. Here is the website link Here is the error I'm getting achecker error and here is the part of my code that is wrong faulty page source. Can someone please help me fix this problem?
It looks like a bit more than just two elements happening to have the same id.
It looks as though two parts of your system are loading the same jquery library, albeit with slightly different versions.
The first is the plugin primary-addon-for-elementor and the second is your site's theme, bizberg. One or other of them should have checked to see whether the library assets they needed were already loaded.
Do you have access to a test site and/or the plugins or themes directory or can you inspect your theme's files in the WP backend as administrator under Appearance>Edit theme [I don't advise doing this on a live site!]. It may be simply a case of removing one of the calls (the <script lines that load the library) so they don't get called twice.
Any info you can give on what access you have to the system would be helpful and we may be able to pinpoint the problem more directly.

Integrating plugins from github to html

Okay, I know this is a beginner question and may sound dumb because I hardly know anything about coding. So, forgive my ignorance.
I'm building this website with Bootstrap 3 framework and found quite a lot of cool plugins on github (e.g https://github.com/ixisio/bootstrap-touch-carousel). I know nothing about it, so I tried to research on what github is.
A lot of introductions out there only cover the 'Why github is useful' and 'Simple beginner's command line on github'. But what about the next step? A lot of documentation and Quickstart document on these plugins are very brief and seems to assume that you already know the basics.
It's quite intimidating to have to write cmd lines, and then bombarded with new terms like 'bower', 'grunt', 'npm' or 'json'. I'm just completely lost at what steps do I have to take to take those plugins and apply them to my html.
What I humbly ask from you guys is, please explain the steps from installing github up to having the plugins functions applied to my html site. And please explain it as if I'm 5 :)
I even have question like 'Why the heck would you go through the trouble of installing git shell and write those command lines when you can just hit that cute Download as Zip button' But then when I did that, of course none of it has worked for me so far... so I suspect there's a large step I was missing.
Best suggestion is look at the source code on the demo page. Note the css and scripts that are specific to that plugin.
Then download the source from github and add appropriate css and scripts based on paths you download them too.
Then follow other docs to initialize the plugin.
When you are ready to try your plugin make sure to check browser console for any errors that are thrown.
If you see things like $.myPlugin is not a function type error then your path to the plugin file is probably not right.

How to include WooCommerce Frontend JS into custom theme - best practice

I am building a custom theme from scratch for WooCommerce (using the hooks/dev method). I just finished the Shop page and I found out that the select tag filter for the products (filter by price/date/name) is not working. I quickly switched to Twenty Eleven and figured out that I am missing some frontend JS from Woocommerce.
Now I could copy all those Js files that I need but in the assets/js/frontend are a lot of more .js files and I think that I may need them as I am far away from being done with the theme. Copying either the necessary or all the js from the WC plugin folder to my theme JS folder would not be a problem but I feel that this is not the best practice to deal with this issue.
I read somewhere that in order to override the frontend JS from WC you have to dequeue and then enqueue your JS file. Which will work for me, still similar to the copy method, as will have nothing to override (as I am not loading any WC JS) but I will end up with the scrips loaded (as I will queue them).
Am I missing something? There's nothing to cover around this subject. If there's no other way I would simply copy them.
Thank you
Please be sure that you have wp_head() and wp_footer() in your theme's header.php and footer.php respectively. See Theme Development for best practices and standards.

jQuery loading or appending scripts on specified page

Im a bit clules on the following situation, i am building a site, and right now all my js functions are in one js file, yes i know its a very bad idea.
What i am unfamiliar with, when i was checking other sites, i saw they include jQuery in the header and in the footer, different scripts are loaded.
I am unfamiliar, and please be nice i am a bit of a beginner.
Do people use some kind of plugin for this? or they include every script manualy in the specified file at the buttom?
I would like to break the scripts to parts, and not to include everything in one file.
What i mean by this, some functions only required in the profile page, some in the settings, and some in the login.
If someone could please give me some info about this would really help me.
Thank you
That's the sort of thing that one would use RequireJS for.
http://requirejs.org/docs/start.html
It will allow you to setup dependencies for your different JS files. These dependencies would then be loaded as needed.
Do people use some kind of plugin for this? or they include every script manualy in the specified file at the buttom?
Well, usually websites are made in PHP from individual components. Think of it as bricks. Some of these bricks contain JS code. When they are put together you end up with some pages having unique parts of javascript code in different places. It's not particularly good, but can dramatically simplify and speed up development.
I would like to break the scripts to parts, and not to include everything in one file.
Usually you want to include your JS with <script> tags in website header. If for some reason you'd like to dynamically include external JS then you may try to use this simple function: include();
i am building a site, and right now all my js functions are in one js file, yes i know its a very bad idea.
It's bad from development point of view, but when it comes to deploying the website it's a very good habit as it can decrease loading time of your website (and the loading time is one of most essential things). There are even applications compiling multiple .js files into a single minified file in order to get best performance.

Modular approach to client-side applications

This is a follow-up to my previous question.
Suppose there is a single web page with a login form and sign-up link. When a user clicks on the link a new sign-up form is displayed. Suppose also I create separate HTML, CSS, and JavaScript files for both forms for modularity.
Now the web page should contain some JavaScript code to load the login form, when the page is loaded, and load the sign-up form upon click on the link.
Does this approach make sense? Are there any frameworks/libraries, which implement this approach? How would you suggest implement it?
I think the idea has some issues. First you should know that there are some old fashion ways to load another completely separated page in the main document. Using "iframe" tag is one of the most popular and unsecure ways to do such a thing. Showing popups and use "window.open" is another way that can show a new window and load the specific url completely separated. BUT...
There are many reasons that I'm now gonna suggest you not to do that in any of mentioned ways. You can simply use some libraries like "JQuery" to load another html in the current page without any need to load new resources that cause performance issues for you. I believe you should search for "JQuery $.get" and you will see how easy it would be.
Hope it helps.
Cheers
Yes that makes sense to me. I really like this approach as I think breaking an app into smaller chunks will make the development & maintenance much easier.
Basicly you need to load the css and js files by appending a link and script tag respecticly into the head section of the html. For loading the html part of the module you can simply use jQuery.get() method as suggested by other answer.
I have tried to implement it. I recently released my work on this. a small code base. actually in my approach each module has its own folder with its js, html and css files and optionally a server-side file too like a php or aspx file that will be called by javascript to query the server.
here is the project page in github called Yuva
take a look and let me know if this makes sense to you.

Categories