adding javascript to a page

  • Hi all,

    I am a WP newbie adding javascript to a page. Below is a full working html non wP page – and I would like to get something like it working on a WP page. When I copy the text inside the body tags below – then paste in to WP TEXT AREA – it does not do anything…

    Q: How Do I get this javascript working?

    THANKS – DAVE

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>dshow</title>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<br><br>

<p align=center>
test 1 this line will always show<br><br><br>
</p>

<div align=center id="test1">

here is some  stuff<br><br>
some link <a href="page1.html"  rel="external">click this</a>
<br><br>
and more stuff
[wpbb post:acf name=‘edl’]
</div>

<script>
$(document).ready(

function(){
	
var sometest =  '1';	
//var sometest =  '0';	
	

if (
sometest == '1'
)

{
$("#test1").hide(0);
$("#test1").show(2000);
}else{
$("#test1").hide(2000);
}

}

);
</script>

</body>
</html>
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi.

    First, your code is not correct for WordPress. By default you can’t use $ sign to access jQuery so you would do:

    
jQuery(document).ready(function($){
	//code here
});

    and then you can use $ sign, inside that function, to select elements.

    Second, you can use a plugin called Scripts n Styles in order to attach the javascript to a post or page.

    If you just want to hack your way around and be excited about your new page, you can just remove all the blank lines and paste the code in Text mode of the WP editor. That should work.

    Moderator bcworkz

    (@bcworkz)

    scorcher’s comment about the $ shortcut is correct for the native jQuery library shipped with WP because the WP version runs in noConflict mode.

    But if all you did is copy the body content into a post, then viewed the post, the reason your code did not work is because no jQuery library was loaded at all. If you checked your browser console it would tell you as much. You can also view your post’s page source using your browser and you would see there is no reference to any jQuery library.

    A small clarification. WP does not load jQuery by default for front end content, however, some themes or plugins may do so, so it’s possible you would see a reference and no console error for that, but there would be something about unexpected $.

    While that scripts n styles plugin probably works fine and is likely handy for those that can’t be bothered, if you intend to do any decent amount of jQuery coding, you should learn to get your scripts loaded correctly without having to rely on another plugin. While no one would argue that getting scripts loaded in WP is easy, it’s not all that bad. It is sort of convoluted and takes some effort to grasp what’s happening. Once you do understand what’s happening though, it’ll become second nature.

    The root of the whole thing is you need to use wp_enqueue_script() to cause your script files to be loaded. When properly enqueued, WP will make sure the jQuery library is loaded in the correct order with any other dependent modules. You won’t need to worry about dependencies other than if they exist. WP handles the rest.

    A dependency on jQuery is specified by the third parameter of wp_enqueue_script(). Dependencies need to be in an array, even if one element, like so: array('jquery') And it is correctly all lowercase in this context.

    Don’t forget that the common $ shortcut doesn’t work unless you use a “wrapper” function like scorcher suggests.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘adding javascript to a page’ is closed to new replies.