Home > plugins > How to include this jQuery File in wordpress?

How to include this jQuery File in wordpress?

February 17Hits:1

Ok I have this jQuery that I have tested in a static html page and it works fine.

How would I include jQuery to work on wordpress in a plugin?

So this is the html page.

<head> <title> Welcome to my page</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css"> </head> <body>   <a id="word" href="#">Google</a> <span id="hoovertext"> a powerful search engine</span>   </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/hide.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script>  </body> 

SO this is the jQuery file that works for this html page

$('a').mousemove(function(){      $('#hoovertext').show();  });  $('#hoovertext').mouseleave(function(){     $(this).fadeOut();  }); 

Basically I want this jQuery to work on specific words on my wordpress site.. in the sense that when somebody hovers mouse over text it gives a description. exactly what my code above does.

Can somebody please show me how, since I including jQuery into wordpress is the one thing that I still don't quite understand.



You should be using wp_register_script() and wp_enqueue_script(), so, for example:

add_action( 'wp_enquque_scripts', 'my_script_enqueue' );

function my_script_enqueue() {
    wp_enqueue_script( 'my-jquery', 'URL TO THE FILE', array( 'jquery' ) );

Also, as mentioned by Zack, you should be registering your jQuery as such, as wordpress does not use $ for jQuery by default.

jQuery( document ).ready( function( $ ) {
    //your jquery

You may want to look at wp_enqueue_script. Although, I just noticed you are using the $ prefix.

Try to do something like this:

<script type="text/javascript">
   (function($) {
      // my javascript/jquery here

Basically, I forget the technical reason why you have to do this, but something with $ being using already by another javascript library. What this code does is create an anonymous function that takes a parameter of "$". This function also passes the jQuery object to it so, in essence, $ is jQuery again, for this function.

EDIT: Thanks to Chip in the comments, the technical reason is because jQuery with WordPress is running in no conflict mode.

Related Articles

  • How to include this jQuery File in wordpress?February 17

    Ok I have this jQuery that I have tested in a static html page and it works fine. How would I include jQuery to work on wordpress in a plugin? So this is the html page. <head> <title> Welcome to my page</title> <link rel="stylesh

  • how to include other jquery file and css file in wordpress pluginsJune 20

    I have jquery file like as follows "portfolio.css" "jquery-ui-1.8.18.custom.css" "portfolio.js" I want to include these files into my plugin... if anyone have solution for how to include above mentioned file into wordpress pl

  • how to include multiple jquery filesJuly 8

    is it possible to include multiple jquery files like this one ? (function ($) { Drupal.behaviors.mymodule = { attach: function(context) { //my code } } }(jQuery)); I use this to include the files drupal_add_js(drupal_get_path('module', 'mymodule') .

  • the 'proper' way to include/require php files in wordpressOctober 27

    I'm a new WP dev and recently I've been having problems (on multiple sites) with include[_once] and require[_once] for PHP files. If I include (get_theme_directory_uri() . 'subdir/file') the specified file gets included (or required, which leads to f

  • How does one include the JQuery UI plugin to wordpress and enque it correctly in a plugin form?January 20

    I have a basic admin top-level plugin I wrote which has a submenu driving a php form with a grid table populated from wp_dbase (from a custom table 'Branches' in it). My installation is a clean WP 3.3.1 on WAMPServer. Only changes are including the b

  • How do I include javascript/jquery image resizing with wordpress?September 30

    I wan't to include this script in my wordpress theme, making it resize all of the images inside posts according to the current window height: https://github.com/gutierrezalex/photo-resize I've made a basic test page in my text editor and it resizes t

  • Include Jquery libraries in wordpress theme?April 27

    I have a file in my theme's JS folder named cycle2.js. How do I include the Jquery from 'wordpress→includes' into my theme? How do I load this custom JavaScript file 'cycle2.js' into my theme? I have: function watercolor_js_scripts(){ if (!is_admin()

  • How do I create a single Wordpress page that will use PHP to include different HTML files based on a vaule in the URL?September 23

    I have used PHP on a page to include HTML files on a page such as: <?php require("http://www.mysite.edu/_sports/static/season_box.html"); ?> This works well for including a single file that gets updated frequently. I am hoping to find a wa

  • Adding javascript files to WordPress and jQuery versionSeptember 12

    I've been trying to use the recommended method of adding javascript files to WordPress, after reading this http://codex.wordpress.org/Function_Reference/wp_enqueue_script but I'm having a hard time figuring it out... I've added this to my functions.p

  • Include js file in Page Layout, after jQuery file in Master PageMay 21

    I'm trying to include a javascript file in my page layout file. I already have it inside the "PlaceHolderAdditionalPageHead" Content Placeholder, and it includes the file, however I need it to be included after the jQuery file that is included i

  • Include Class File in WordpressJuly 2

    I'm including a Class file in functions.php file require_once get_template_directory() . "/core/classes/General.php"; require_once get_template_directory() . "/core/classes/User.php"; When I do $user->getCredits($user_id); in some p

  • Calling a php file from a javascript file in wordpressMarch 23

    I have a simple pop up form code written in javascript. It is in js/script.js folder inside themes folder. I am using jquery ajax method to communicate with a php file to store data in db. The php file is in themes folder. Also i would like to use th

  • WooThemes PremiumNews Theme jQuery Conflict with WordPress 3.2July 5

    This morning I updated my wp, and after that few of the jquery of my site is not working. I am using woo themes premium newspaper theme. After the upgrade, the categories drop down menu(superfish menu) stopped working. I was using lightbox plugin for

  • How to Register/Link to .js Files in WordPress Dynamicaly in Header.phpOctober 29

    Can you please let me know how I can dynamically register/link to my js files in wordpress? I have two js files as below code but I do not know how to map to them uring the bloginfo() as it is taking parameters! <!--[if lt IE 9]> <script src=&quo

  • Including a header file with proper content and structureJune 25

    I am new to HTML and programming in general and am currently working on setting up my first website. For this I created a couple of PHP pages with a separate file for each of them and in order to avoid duplicating code I tried to remove as much as po

  • jquery UI in wordpress adminJanuary 24

    Does anyone have experience with using the jQuery UI plugins in the Wordpress admin area? I´ve been trying to use the datepicker functionality in jQuery UI, but its conflicting with the built- in jQuery in wordpress admin. http://docs.jquery.com/UI/D

  • 10 jQuery File Upload Plugins

    10 jQuery File Upload PluginsJune 9

    10 Awesome jQuery File Upload Plugins to upload files ajax style'y. Today I have collected top 10 excellent jQuery upload plugins which are cool and easy to integrate to upload files to your forms or web pages. Enjoy! :) Related posts: 10 Jquery Ajax

  • Dynamically link /sites/default/css/css_***.css file for WordPress template headerAugust 17

    FYI, I don't know Drupal at all. What I've done is stick a WordPress install at /blog/ and pull in the /sites/default/css/css_randomstring.css and static html from the Drupal page - and along with the WordPress loop in the index.php file of Wordpress

  • How to add a .php file to WordPressJanuary 22

    I have a php file in my server (say www.example.com/up/up.php). If i access that file through the url, my site says no page found. but i want to call that php file using url parameter. I want to call that file to a download file using url access( say

  • Include another HTML file in a HTML fileJanuary 24

    I have 2 HTML files, suppose a.html and b.html. In a.html I want to include b.html. In JSF I can do it like that: <ui:include src="b.xhtml" /> It means that inside a.xhtml file, I can include b.xhtml. How can we do it in *.html file? -----

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.655 s.