WordPress.org

Ready to get started?Download WordPress

Forums

WordPress and js (17 posts)

  1. Kalmirew
    Member
    Posted 10 months ago #

    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: http://tympanus.net/Tutorials/ItemSlider/
    And it gives me this: http://sdz-upload.s3.amazonaws.com/prod/upload/Screen%20Shot%202013-05-24%20at%2011.00.26%20PM.png

    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!

    Celine

  2. paulwpxp
    Font hero
    Posted 10 months ago #

    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.
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  3. Kalmirew
    Member
    Posted 10 months ago #

    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...

  4. paulwpxp
    Font hero
    Posted 10 months ago #

    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 )

  5. Kalmirew
    Member
    Posted 10 months ago #

    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.

    Thanks!

  6. Jose Castaneda
    Member
    Posted 10 months ago #

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

  7. Kalmirew
    Member
    Posted 10 months ago #

    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.

  8. Kalmirew
    Member
    Posted 10 months ago #

    Alright, just tried and it doesn't work.

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

  9. Kalmirew
    Member
    Posted 10 months ago #

    Oh, and BTW, I didn't notice there was somebody new here. Hello :)

  10. paulwpxp
    Font hero
    Posted 10 months ago #

    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
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Link_a_Theme_Script_Which_Depends_on_jQuery

  11. Jose Castaneda
    Member
    Posted 10 months ago #

    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. :|

  12. Kalmirew
    Member
    Posted 10 months ago #

    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:

    <script>
    $(function() {

    $( '#mi-slider' ).catslider();

    });
    </script>

    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.

  13. Kalmirew
    Member
    Posted 10 months ago #

    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? :)

  14. paulwpxp
    Font hero
    Posted 10 months ago #

    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.

  15. Kalmirew
    Member
    Posted 10 months ago #

    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.

  16. paulwpxp
    Font hero
    Posted 10 months ago #

    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 );
    }
  17. Kalmirew
    Member
    Posted 10 months ago #

    I've made several tests. I've tried the slider's code in a new php document. It was working. This is how I came to use the include function. Out of curiosity, I've tried pasting the code within my template again and the js was not working.

    The conclusion is as follow:
    - When this slider is directly coded within my template, my js is not working. But my other slider does load.
    - When the slider is called through an include function, it is working. But my other slider does not load.

    Very odd!

    I haven't found out the reason my path is wrong. I'm going to try figure it out tonight.

Reply

You must log in to post.

About this Topic