• jerryskate

    (@jerryskate)


    Hi!

    Ive been trying to add some javascript and a css-sheet that i at the moment have hardcoded in the header. Something is wrong with my plugin that calls the query twice, or something like this, and i hope correct linking will solve it. Ive tried a bunch of guides to use Enqueue functions, but haven’t had any luck, so I’m turning here to see if anyone could give me a idiot-proof way to do it.

    The code I’m using at the moment in the header:

    <link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>    
    
    <!-- This following line needed in the case of setting the plugin option <code>scrollOverflow</code> to <code>true</code> -->
    <script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>
    
    <script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Hardly idiot proof, but maybe a proper example will help. This enqueues one style and one script, expand on it as needed.

    function my_scripts_callback() {
    	wp_enqueue_script('my_handle', get_stylesheet_directory_uri() . '/js/jquery.fullPage.js', array('jquery'), null);
    	wp_enqueue_style('my_style', get_stylesheet_directory_uri() . '/js/jquery.fullPage.css', false, null );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_callback' );

    This goes in your theme’s functions.php. You do not want to load jquery and jquery-ui from outside sources unless you have very good reasons to use that version. WP has its own version local on your server and already registered, the outside versions will conflict with it.

    Since they are registered, you just need to specify it as a dependency and it will be loaded along with the script you are enqueuing. I showed an example dependency, I don’t know the actual dependencies, you need to verify those. See this list for proper handles of registered scripts. Also check the scripts you are enqueuing, if they use the $ shortcut instead of the explicit jQuery, they will need to be wrapped in a no conflict wrapper.

    Thread Starter jerryskate

    (@jerryskate)

    Thanks for the reply. Still can’t get this to function. I do need to load the external scripts it seems to make the plugin I’m using to work.

    Stupid question, but do i need to call the function/action in my header to make the scripts work?

    Moderator bcworkz

    (@bcworkz)

    No, that’s too late. I mentioned placing it in your theme’s functions.php which is silly since you are dealing with a plugin. It works just as well and makes infinitely more sense in your plugin’s code. I go a bit confused because you scripts were in your theme’s folders, apologies. If your files are really in your plugin folder, get_stylesheet_directory_uri() is the wrong function, you need the plugin folder equivalent.

    There’s lots of reasons jQuery might not work, but you can easily verify at least the enqueue part is working by inspecting the page’s head section for the necessary meta links. You should roughly be seeing what you had as hardcode, but this time the correct libraries are referenced and dependencies properly resolved. Check the referenced paths carefully, it’s not too hard to get them wrong.

    If you really need the external versions, you need to de-register the WP versions to prevent conflicts. I thought there was something in the Codex about this, but I cannot locate it at the moment. You can probably search as well as I can.

    One other thing that can go wrong is using the wrong hook. There’s different hooks to enqueue for different parts of WP.

    Thread Starter jerryskate

    (@jerryskate)

    Thanks again for the reply. Not following though, theres no plugin except the scripts and the function to activate them. Probably sound dumb here, sorry for that. The script I’m using is this, placed in my js folder:

    https://github.com/alvarotrigo/fullPage.js#fullpagejs

    Im not really sure i need the external versions, but i can’t make it work without them, so far at least.

    Moderator bcworkz

    (@bcworkz)

    I guess I’m picking up on the wrong cues, but no matter. You need to put some PHP code somewhere. It can be in any activated plugin code actually, but you shouldn’t be editing plugins that are not yours. It’s actually useful to create a simple site specific plugin for the sole purpose of containing random bits of custom code site admins often come up with.

    The other place to place PHP code is your theme’s functions.php file. It’s best to create a child theme for this so your code is protected from theme updates.

    As I mentioned, there’s many things that can cause code to not work. It’d be good to really confirm there’s a version issue involved. Try reverting to the hardcoded functional version. Change the external reference, one file at a time, to the equivalent WP version and test for functionality. If things work under this condition then we know the local WP version can work, something else is amiss. Apologies if this is what you did, once again, it wasn’t clear to me :/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘link javascript and css correct.’ is closed to new replies.