I’ve been trying to use the Jquery UI tabs but can’t get it to work. I think there’s a javascript conflict with the wordpress native jquery libraries? If you figure it out, let me know!!
I did figure it out! I added to the head:
<link type="text/css" href="/wp-content/uploads/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/wp-content/uploads/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/js/jquery-ui-1.8.16.custom.min.js"></script>
replace the source on each to where you upload the .js and .css files
and then where ever you put your tabs
[Code moderated as per the Forum Rules. Please use the pastebin]
With the help of a different plugin (exec-php) I was able to put seperate queries in it and put it in my widget text area
http://texasspineandjoint.724impact.com/ (the site is still in development but you can see on the left side where I used tabs.)
nice work! some of your code got lost, could you repost it? i think they want you to use pastebin. thanks!
WordPress does not include a full version of jQuery, and I don’t thinkit uses jQuery UI at all. To override this you need to deregister the version that is loaded and then register and enqueue the version you want. You add a piece of code like this:
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui',("http//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"), false, '1.8.16');
wp_enqueue_script('jquery-ui');
}
to your theme’s functions.php file. This is safer than simply adding the scripts to the header.php as it will not cause them to be loaded twice if some plugin needs them as well.
thanks pkwooster. though i don’t follow why it would be dependent on !is_admin. doesn’t that mean that if I’m logged in as an administrator it would not perform the following lines of code?
Also, I’m using the buddypress default theme, so I would put this in that theme file, right? Would there be any functionality difference? Thanks!
thanks! it seems to be loading the libraries properly, but still no dice on making it work. Nothing I can do. Just to be sure, it’s correct that I put this script just before the closing /head tag, right?
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
thanks!
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div class="homeposts">
<div id="tabs">
<ul>
<li><a href="#tabs-1">News</a></li>
<li><a href="#tabs-2">Our Quality</a></li>
</ul>
<div id="tabs-1">
<?php
query_posts('cat=13&posts_per_page=2');
while (have_posts()) : the_post(); ?>
<h1>Posted on <?php the_time('F jS, Y') ?></h1>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
<hr />
<?php endwhile; ?>
</div>
<div id="tabs-2">
<?php
query_posts('cat=12&posts_per_page=3');
while (have_posts()) : the_post(); ?>
<h1>Posted on <?php the_time('F jS, Y') ?></h1>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
<hr />
<?php endwhile; ?>
</div>
</div>
</div>
dont know why my code didnt show, but here it is again. you can see where I have my queries, just delete that and put in your content. I didnt do the de-register and it was just fine, but then I loaded an image slider and the image slider isnt working, do you think that is why?
aaah, ok i know why my code didnt show because it was more then ten lines! haha I will break it up. try 3-
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
thats the script to precede the tabs.
<div class="homeposts">
<div id="tabs">
<ul>
<li><a href="#tabs-1">News</a></li>
<li><a href="#tabs-2">Our Quality</a></li>
</ul>
the tabs
<div id="tabs-1">
<?php query_posts('cat=13&posts_per_page=2');
while (have_posts()) : the_post(); ?>
<h1>Posted on <?php the_time('F jS, Y') ?></h1>
<h2><?php the_title(); ?></h2>
<div class="entry-content"><?php the_excerpt(); ?></div>
<hr />
<?php endwhile; ?>
</div>
tab one with my first query
`<div id=”tabs-2″>
<?php query_posts(‘cat=12&posts_per_page=3’);
while (have_posts()) : the_post(); ?>
<h1>Posted on <?php the_time(‘F jS, Y’) ?></h1>
<h2><?php the_title(); ?></h2>
<div class=”entry-content”> <?php the_excerpt(); ?> </div>
<hr />
<?php endwhile; ?> </div> </div> </div>`
last tab, 2nd query, closing divs
The reason for the if( !is_admin()){ is that you probably don’t want to override the libraries used by wp-admin, if you do wish to do that, then remove the test.
It doesn’t depend on how you are logged in, it’s testing for whether this is an admin page.
/peter
Thanks for your solution, Peter. It works quite well. However, when using this solution in the wp-admin section, which I need, the media uploader breaks. It appears to still be looking for jQuery 1.6.1. Does anyone know how to solve this?
Thank you all.
Just thought I’d post in here because I came across this thread when looking elsewhere.
WordPress actually DOES include a lot of the default libraries with the latest version. You can find out more info at (which also includes instructions for how to enqueue the various libraries)
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
