Are you familiar with JavaScript?
I’m not familiar with JavaScript. I did find a JQuery script that I think will solve my problem but I am having trouble integrating the JQuery with wordpress.
Okay I went through a JQuery tutorial and have the basics down. I played with a code snippet from StackOverflow and have this working on my desktop right now:
<!doctype html>
<html>
<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="container" style="width:600px;text-align:center">
<img id="largeImage" src="1.jpg" style="width:300px;"/>
</div>
<div id="thumbs">
<img style="width:150px;" src="1.jpg" alt="1st image description" />
<img style="width:150px;" src="2.jpg" alt="2nd image description" />
<img style="width:150px;" src="3.jpg" alt="3rd image description" />
<img style="width:150px;" src="4.jpg" alt="4th image description" />
</div>
<script>
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
</script>
</body>
</html>
Very simple and working just fine! Excited to have it working! Now I need to get this into wordpress somehow …. Every way I’ve tried embedding JQuery scripts I’ve done something wrong. Any assistance would be appreciated.
Thanks!
ok.
Please notice: Changes on your template files and template directory structure maybe over written by template updates
1. Upload jquery to your wp install via ftp. Depending on your template find this directory
/wp-content/themes/YOURTEMPLATE/js
if js does not exist, create it
2. Find a file like header.php, head.php… (depending on your template) within your template dir
3. Add meta tag to <header></header>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-xxxxx.js"></script>
4. Login to wp and create a new article or page, switch to TEXT mode
Paste your div’s
<div id="container" style="width:600px;text-align:center">
<img id="largeImage" src="1.jpg" style="width:300px;"/>
</div>
<div id="thumbs">
<img style="width:150px;" src="1.jpg" alt="1st image description" />
<img style="width:150px;" src="2.jpg" alt="2nd image description" />
<img style="width:150px;" src="3.jpg" alt="3rd image description" />
<img style="width:150px;" src="4.jpg" alt="4th image description" />
</div>
Point img src path to images in your wp upload directory
You can try to paste the script part too, but as far as I know, wp will truncate script tags.
5. Find a file like footer.php within your template path
6. Add script before closing body tag
<script>
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
</script>
Have fun!
ELExG thank you so much for the detailed help. I’ve followed every step and it is not working. Here is the URL.
The source code shows the script loading and also appearing in the footer. Huh?
Upload jquery to your wp install via ftp.
What on earth for?! jQuery is bundled and loaded by default in WordPress.
esmi,
I do have a JQuery script I’m uploading though. However … with having followed ELExG’s directions I also include it in the footer anyways between a SCRIPT tag. Do I need to add it twice?
Either way it’s not working at this time and I’m unsure why.
You should not be adding anything in the manner suggested above. All .js files should be enqueued using wp_enqueue_script() in the child theme’s functions.php file.
@esmi: mea culpa
@lvalfre
better way:
find function.php within your template and try this one
function enablejQuery() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'enablejQuery');
Don’t forget do delete what you added in 3) (meta tag)
Nooooo. You do not need to enqueue jQuery. It is loaded by default on all WordPress sites. You only need to enqueue the custom .js file.
@esmi
Don’t get me wrong, but I don’t think so. Have a look at http://www.html5live.at.
If I’m a dumb, tell me where I’m wrong.
Ok I got it. Sorry but I was away from wordpress for some years now, and a lot changed. obviously!
1) as esim told, don’t add any <script> to any file.
So just undo 3) and 6)
Then, as jquery is present you have to tell your template additional script to use, and there for you have to create your own JS file.
3) So create myscripts.js (any name you want) in js directory
Open it and
4) add this to myscripts.js
function myFunction(){
jQuery('#thumbs img').hover(function(){
jQuery('#largeImage').attr('src',jQuery(this).attr('src').replace('thumb','large'));
});
}
jQuery(document).ready(function(){
jQuery(myFunction);
});
5) find functions.php and add
function my_scripts_method() {
wp_enqueue_script('custom-script',get_stylesheet_directory_uri() . '/js/myscripts.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Okay after adding 5) to my functions.php the code is showing up on the page. My total functions.php file looks like this:
<?php register_nav_menus(
array(
'primary-menu' => 'Primary Menu',
'side-menu' => 'Side Menu' )
);
?>
<?php if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar Widgets',
'id' => 'sidebar-widgets',
'description' => 'Widget Area',
'before_widget' => '<div id="sidebar" class="sidebar">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
} ?>
function my_scripts_method() {
wp_enqueue_script('thumbscript',get_stylesheet_directory_uri() . '/js/thumbscript.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
I wrapped up the function in PHP and it doesn’t show the text on my page anymore. It now looks like this:
<?php function my_scripts_method() {
wp_enqueue_script('thumbscript',get_stylesheet_directory_uri() . '/js/thumbscript.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
thumbscript.js doesn’t appear to be loading on the page source though. Do I need to add something in Header.PHP?
