jQuery on WordPress
There is absolutely needed to outline how jQuery should be used together with WordPress because one can fail easily. I used my time to figure out what steps I need to undertake to have the perfect match.
Here are the rules you should follow if you want to use jQuery that is already present in WordPress installation. #1. You should edit your header.php file of your WordPress theme like this.
<?php wp_enqueue_script("jquery");?>
<?php wp_head(); ?>
Comment: Your theme most probable has wp_head()
function in it and you should add the line BEFORE!!!!!! wp_head()
function.
#2. After wp_head()
function add your jQuery code like this:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("a").mouseover(function(){
alert("mouse over the link");
});
});
</script>
#3. The above code from #1 and #2 must be inside the wp_head()
tags of your header.php file in your theme.
Note that I have fond the similar explanation here.
Note that one can use theme functions.php file to add jQuery support. This can be done the following way:
<?php wp_enqueue_script('jquery');
function hook_to_wp_head(){
?>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("a").mouseover(function(){
alert("mouse over the link");
});
});
</script>
<?php
}
add_filter('wp_head', 'hook_to_wp_head');
?>
If you updated your functions.php file this way than and your header.php file as shown above than your mouseover function will execute twice.
…
tags: & category: -