Best way to organize scripts on my WP site

  • Hi All,
    I am making a site and using simple javascript to control certain elements on my pages, formatting, animations etc. As the pages are different the scripts which work on one page will throw errors on another as the target elements are not there. I only know two solutions to this problem :

    1) Put conditions before calling all my functions if the target elements exist…
    if($myElement.length){runMyFucntion()};
    2) Otherwise create a separate page_template (tempalte_home, template_about etc.) for every page on my site, and only run the scripts I need on each template.

    Neither of these scenarios seems ideal to me, but my knowledge of javascript is not very advanced. Is there a better way? What is the recommended method of running different js scripts across pages on a WP site?

    Thnks!!

    • This topic was modified 5 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @gulliwog,

    I hope you’re doing good. If any of the script is breaking something on the page then I guess you should reconsider the code inside it.

    The ideal way from my aspect would be to create a single script file that’s minimized so its size is cut-shorted. So, it would become easier for the browsers to catch it, which in result will increase the performance of the website. However, if you will create a separate javascript file for each page then the browser will have to do some extra work.

    However, if you still want to load separate javascript files for each page then there are few ways that you can use.

    Thread Starter gulliwog

    (@gulliwog)

    Tyvm for the reply. The reason the scripts are “throwing errors” is because, for example, on my home page I have an element with the ID #my_cool_svg, which I animate using javascript… but that element ONLY appears on my homepage, so when I am on my Contact page if the script is trying to add classes to #my_cool_svg, it won’t exist and I will get an “undefined” error in console.

    This is where my inexperience in js comes through, I am not sure which is the best way to manage that. Like I said in my original post, I have simply added a condition before calling functions, e.g. if($my_target_svg.length){ // call my function}.

    From what you are saying it sounds like it is better maybe to add conditions and leave all my scripts in one .min file rather than separate them out into different files. I am just asking what normal to do in this situation, I sure lots of sites run scripts which are only used or necessary on certain pages… whats the usual strategy?

    I used more or less the method in your first link to enqueue scripts but using wordpress page templates as the condition :

    if(is_page()){ //Check if we are viewing a page
    global $wp_query;
    $template_name = get_post_meta( $wp_query->post->ID, ‘_wp_page_template’, true );
    if($template_name == ‘my-page-template.php’)… etc.

    I try to avoid using plugins for anything I am able to achieve myself so as not to bloat my site too much… I am already using quite a bloated theme and I don’t like loading the site down with more crap.

    Thanks again for the answer.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Best way to organize scripts on my WP site’ is closed to new replies.