WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jQuery UI tabs (13 posts)

  1. sarah.osborne
    Member
    Posted 2 years ago #

    Has anyone used tabs in wordpress before? I customized my style and downloaded the files. Where do I upload the files to and what code do I need to put in the head?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. iftomkins
    Member
    Posted 2 years ago #

    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!!

  4. sarah.osborne
    Member
    Posted 2 years ago #

    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.)

  5. iftomkins
    Member
    Posted 2 years ago #

    nice work! some of your code got lost, could you repost it? i think they want you to use pastebin. thanks!

  6. Peter Wooster
    Member
    Posted 2 years ago #

    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.

  7. iftomkins
    Member
    Posted 2 years ago #

    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!

  8. iftomkins
    Member
    Posted 2 years ago #

    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!

  9. sarah.osborne
    Member
    Posted 2 years ago #

    <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?

  10. sarah.osborne
    Member
    Posted 2 years ago #

    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

  11. Peter Wooster
    Member
    Posted 2 years ago #

    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

  12. dzimney
    Member
    Posted 2 years ago #

    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.

  13. Darren Ethier (nerrad)
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic