Support » Themes and Templates » WordPress and js

  • Hello there,

    I’m encountering several issues with a portfolio I am trying to set up in my theme. I have asked for help before but no one has answered so far. As I am more than a beginner in js (especially in WP), I have a few questions for you in order to check I’m not doing anything wrong.

    1. In my functions.php, I’ve added new scripts thanks to the function wp_enqueue_script(). To do so, I’ve added a new function rather than adding my scripts to the theme function already in place. Is that ok? I have tried to do it both way and yet it wouldn’t work anyways.

    2. I was advised, in a different forum, to add immediately after my function add_action(‘init’, ‘plutobis_scripts’);, plutobis being of course my function. But what does this add_action do? I haven’t found much information about it and it doesn’t appear after my other wp_enqueue_script() functions.

    For those who are curious to understand what I am trying to achieve (or in need to know to answer), here it is:

    I’m trying to attain this:
    And it gives me this:

    I have the latest version of WP and my theme is not child. I work local with MAMP. I have incorporated my portfolio in the homepage with a custom template.

    Thanks a lot!


Viewing 15 replies - 1 through 15 (of 16 total)
  • paulwpxp


    Font hero

    The screenshot looks like there is no JS loaded on the page resulting in images align in markup and no effect.

    What you wrote about wp_enqueue_script() indicates that you just declare the function but hadn’t hook it in yet ? If that’s so, then the function won’t do anything.

    Review this wp_enqueue_script() carefully.

    Yes, there is no javascript loaded.

    I have tried to declare my function. All attempts were a failure (I followed different tutorials). As a matter of fact, I have started by using the exact same codes as in the demo to make sur I wouldn’t do it wrong.

    It has never worked so far. Either it doesn’t change anything or it simply crashes another slider I have on my homepage.

    This is why I’m totally at loss…



    Font hero

    Could you post all the function codes that you use to enqueue your js ?

    ( post just that part, not the whole function.php, post it here and wrap it in backticks )

    Here’s the code:

    function plutobis_scripts() {
    wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/siteasso/wp-content/themes/Pluto/js/catslider.js’);
    wp_enqueue_script( ‘secondscript’, get_template_directory_uri() . ‘/siteasso/wp-content/themes/Pluto/js/modernizr.js’);
    add_action(‘init’, ‘plutobis_scripts’);

    Also, for some odd reasons my get_template_directory_uri() won’t point to the root folder of my theme. I’ve noticed this with my error logs and I’ve found out it was pointing at htdocs. I’ve added the “missing” path and I don’t get any errors anymore.

    I don’t know where that came from. I’ve had some unfixable error 505 so I’ve uninstalled both MAMP and WP. After reinstalling everything, the get_template_directory_uri() would still point at htdocs.


    Moderator Jose Castaneda



    What I’m wondering is why you are hooking to ‘init’ when you should be hooking to wp_enqueue_scripts instead.

    I was told on a forum to use this code because mine was supposedly wrong.

    As I didn’t know about the add_action part, I followed this piece of advice. And this is also why I started this topic asking about it. I’m going to give it a shot and I’ll be right back.

    Alright, just tried and it doesn’t work.

    What exactly am I supposed to type instead of add_action(‘init’, ‘plutobis_scripts’);?

    Oh, and BTW, I didn’t notice there was somebody new here. Hello 🙂



    Font hero

    This wp_enqueue_scripts notice the s

    add_action( 'wp_enqueue_scripts', 'plutobis_scripts' );

    And since your scripts need jQuery so you need to put in the 3rd parameter in your function too, see this example

    Moderator Jose Castaneda



    The code should read:

     * JS that loads on front-end
    add_action ( 'wp_enqueue_scripts', 'plutbis_scripts' );
    function plutobis_scripts() {
        wp_enqueue_script( 'pluto', get_template_directory_uri() . '/js/pluto.js' ); // If if requires any dependencies use: array( $deps ) in addition
        wp_enqueue_script( 'modernizr', get_template_directoru_uri() . '/js/modernizr.js' );

    As far as why it’s giving you the wrong directory is a little odd to me. 😐

    Hello again,

    I am sorry, I feel really stupid now. I have used your code and it still doesn’t work. I’ve tried different ways of calling the scripts in my template page and nothing moves. Even not slightly!

    I’ve read somewhere else that I shouldn’t be calling js in head. Would that make the difference? If so, should I call my js in my header’s body despite the fact I need those scripts only in one specific page (custom template)?

    I have tried both <script type=”text/javascript” src=”/scripts/emailpage.js”></script> and <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/pathto/yourscript.js”></script> (I’ve just copied-pasted the exemple from the codex, I’ve changed path and file name). None has changed anything.

    I’ve also included the following code as in the slider’s demo:

    $(function() {

    $( ‘#mi-slider’ ).catslider();


    In the demo, it is included right before body closes but there is no footer. I’ve tried to use it before my footer, after my footer, before my slider’s div, after my slider’s div and in my slider’s div. Nothing changes. It only crashes my other slider when I use it in the footer. Other than that, nothing!

    I apologize in advance if I’m making silly mistakes, I’m really really new to this use of javascript.

    Thanks again.

    I’ve tried to include simple javascript in a different page of my website (div slide down and up) and it doesn’t work either.

    So there are two solutions: either I’m doing something terribly wrong or there’s something I’m missing on WP.

    Any clue? 🙂



    Font hero

    Code from Jose will work only if you correct the path issue and put in the 3rd parameter (dependency).

    Now let try this first

    • hardcode the full path link to the js
    • see if the js is loaded and works.

    This will make sure that your script does really work.

    When it is confirmed working properly, next is to fix the path issue of your MAMP, and then adjust the loading of js to a proper WP way.

    Alright. I have managed to make it work using php include rather than adding it directly to my template.

    However it conflicts with my other slider (“revolution slider”). When this one works, the other one stops working (i.e. the loading icon goes round and round but nothing loads). So here I am, stuck again!

    I have added both via the include function.



    Font hero

    So, your js is working.

    The conflict with other plugin is another issue.

    Now, did you find out why the path is wrong yet ? That needs to be taken care of, and when WP is setup properly, this is to add the js to footer. ( change myslider to yours ).

    add_action ( 'wp_enqueue_scripts', 'myslider_scripts' );
    function myslider_scripts() {
    	wp_enqueue_script( 'myslider', get_stylesheet_directory_uri() . '/js/myslider.js', array( 'jquery' ), '0.1', true );
Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘WordPress and js’ is closed to new replies.