Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Turn Anchor/$_GET Links into Ajax Tabs WordPress

  • SOLVED

I have two tabs on a home page I'm working on here: http://silverlakepictureshow.com/wordpress2013

The two tabs are part way down the page and say "Updates" and "Movies". Right now, I am using query vars and anchor links to switch between the two views, but what I really want is for the two views to switch without the page refreshing.

I know this needs to be done with Ajax, and I understand it's pretty simple, but I am super dumb when it comes javascript/ajax.

I'm offering my prize to somebody who can either give me detailed steps on how to do it myself, or can simply use my home page template and do it themselves. Either way.

It's not a huge template, so I'll go ahead and throw it all in here for you:

<?php
/**
* The Home Page Template
*
* @package WordPress
* @subpackage Twenty_Eleven
*/

get_header(); ?>

<div class="main-section home">

<?php get_template_part('home-marquee'); ?>

<span id="hometabs"></span>
<div class="subsection left home" >

<div class="subsection-title tabs">
<div class="<?php if (($_GET['tab'] == 'updates') || (!isset($_GET['tab'])) ) { echo 'current'; } ?>">
<a href="<?php echo add_query_arg('tab','updates'); ?>#hometabs"></a>
UPDATES
</div>
<div class="<?php if ($_GET['tab'] == 'movies') { echo 'current'; } ?>">
<a href="<?php echo add_query_arg('tab','movies'); ?>#hometabs"></a>
MOVIES
</div>
</div>

<?php
//The Query Conditions
if (($_GET['tab'] == 'updates') || (!isset($_GET['tab'])) ) {
$posttype = 'post';
} elseif ($_GET['tab'] = 'movies') {
$posttype = 'movies';
}

// The Query parameters
$homequery = array(
'post_type' => $posttype,
);
// The Query
$the_query = new WP_Query($homequery);

// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>

<div class="update-wrapper">

<div class="update-title">
<?php the_title(); ?>
</div>
<div class="update-image">
<?php echo get_the_post_thumbnail(get_the_id() ,'sidebar'); ?>
</div>
<div class="update-excerpt">
<div class="update-date">
<?php the_time('m\/d'); ?>
</div>
<?php the_excerpt(); ?>
</div>
<div style="clear:both;"></div>
</div>



<?php endwhile;
wp_reset_postdata();?>

</div>
</div>

<?php get_template_part('main-sidebar'); ?>


<?php get_footer(); ?>

2013-05-11 by Zac Eckstein

Answers (4)

2013-05-11

Arnav Joy answers:

here is your modified code of the home page

<?php

/**

* The Home Page Template

*

* @package WordPress

* @subpackage Twenty_Eleven

*/



get_header(); ?>



<div class="main-section home">



<?php get_template_part('home-marquee'); ?>



<span id="hometabs"></span>

<div class="subsection left home" >



<div class="subsection-title tabs">

<div id="post" class="tab_click <?php if (($_GET['tab'] == 'updates') || (!isset($_GET['tab'])) ) { echo 'current'; } ?>">

<a href="javascript:;"></a>

UPDATES

</div>

<div id="movies" class="tab_click <?php if ($_GET['tab'] == 'movies') { echo 'current'; } ?>">

<a href="javascript:;"></a>

MOVIES

</div>

</div>

<div class="ajax_output">

<?php

//The Query Conditions

if (($_GET['tab'] == 'updates') || (!isset($_GET['tab'])) ) {

$posttype = 'post';

} elseif ($_GET['tab'] = 'movies') {

$posttype = 'movies';

}



// The Query parameters

$homequery = array(

'post_type' => $posttype,

);

// The Query

$the_query = new WP_Query($homequery);



// The Loop

while ( $the_query->have_posts() ) :

$the_query->the_post(); ?>



<div class="update-wrapper">



<div class="update-title">

<?php the_title(); ?>

</div>

<div class="update-image">

<?php echo get_the_post_thumbnail(get_the_id() ,'sidebar'); ?>

</div>

<div class="update-excerpt">

<div class="update-date">

<?php the_time('m\/d'); ?>

</div>

<?php the_excerpt(); ?>

</div>

<div style="clear:both;"></div>

</div>







<?php endwhile;

wp_reset_postdata();?>

</div>

</div>

</div>



<?php get_template_part('main-sidebar'); ?>

<script>
jQuery(document).ready(function($){
$('.tab_click').click(function(){

$('.ajax_output').html('please wait.....');
var post_type = $(this).attr('id');

jQuery.ajax({
type : "post",
url : '<?php echo admin_url("admin-ajax.php");?>',
data : {action: "get_tab_data", post_type : post_type },
success: function(response) {
$('.ajax_output').empty().html(response);
}
})

});
});
</script>



<?php get_footer(); ?>


you have to add following code to functions.php

add_action("wp_ajax_get_tab_data", "get_tab_data");
add_action("wp_ajax_nopriv_get_tab_data", "get_tab_data");

function get_tab_data(){



$post_type = $_REQUEST['post_type'];

$homequery = array( 'post_type' => $post_type);

$the_query = new WP_Query($homequery);

if( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) :

$the_query->the_post();

$str .= '<div class="update-wrapper">
<div class="update-title">'.get_the_title().'</div>
<div class="update-image">'.get_the_post_thumbnail(get_the_id() ,"sidebar").'</div>
<div class="update-excerpt">
<div class="update-date">'.get_the_time("m\/d").'</div>'.get_the_excerpt().'</div>
<div style="clear:both;"></div>
</div>';
endwhile;

else :

echo 'No post found';
endif;
wp_reset_postdata();

echo $str;

die;
}

Arnav Joy comments:

you also have to include jquery if it is not included before so do include it write following in function.php




add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
wp_enqueue_script( 'jquery' );
}

Zac Eckstein comments:

Excellent, this worked perfectly!

2013-05-11

Giri answers:

Hi please test this code..

Take backup before using this code..

Just let me know whether it outputs both updates and movies in the same page or not.. If it outputs both on the same page, then we are on the correct path..



<?php
/**

* The Home Page Template

*

* @package WordPress

* @subpackage Twenty_Eleven

*/

get_header(); ?>

<div class="main-section home">

<?php get_template_part('home-marquee'); ?>

<span id="hometabs"></span
<div class="subsection left home" >
<div class="subsection-title tabs">
<ul class="tabs">
<li><a href="#updates" class="tab active">Updates</a></li>
<li><a href="#movies" class="tab">Movies</a></li>
</ul>
</div>
<?php
// The Query parameters
$homequery = array(
'post_type' => 'post',
);
// The Query
$the_query = new WP_Query($homequery);
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<div class="update-wrapper" id="post">
<div class="update-title">
<?php the_title(); ?>
</div>
<div class="update-image">
<?php echo get_the_post_thumbnail(get_the_id() ,'sidebar'); ?>
</div>
<div class="update-excerpt">
<div class="update-date">
<?php the_time('m\/d'); ?>
</div>
<?php the_excerpt(); ?>
</div>
<div style="clear:both;"></div>
</div>
<?php endwhile;
wp_reset_postdata();?>
<?php
// The Query parameters
$homequery = array(
'post_type' => 'movies',
);
// The Query
$the_query = new WP_Query($homequery);
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<div class="update-wrapper" id="movies">
<div class="update-title">
<?php the_title(); ?>
</div>
<div class="update-image">
<?php echo get_the_post_thumbnail(get_the_id() ,'sidebar'); ?>
</div>
<div class="update-excerpt">
<div class="update-date">
<?php the_time('m\/d'); ?>
</div>
<?php the_excerpt(); ?>
</div>
<div style="clear:both;"></div>
</div>
<?php endwhile;
wp_reset_postdata();?>
</div>
</div>
<?php get_template_part('main-sidebar'); ?>
<?php get_footer(); ?>

Giri comments:

If it outputs both updates and movies on the same page, then you have to tabify using tabs plugin. There is simple plugin called tabify.

http://unwrongest.com/projects/tabify/

Just download the code and add jquery.tabify.js file either in the head or before closing the body...

Giri comments:

I think Arnav Joy posted a better answer. Use that

2013-05-11

Daniel Yoen answers:

I can do this, I'm going to work on my demo server, let you know soon :-)

2013-05-11

Christianto answers:

Hi Zac,

Please check this code, put it on your functions.php
first function will include jQuery framework on your site,
the second one using [[LINK href="http://api.jquery.com/jQuery.get/"]]jQuery.get[[/LINK]] (ajax) method, we bind function to retrieve each post content for each tab link.

/*
First include jQuery framework
*/
function my_js_script() {
wp_enqueue_script( 'jQuery' );
}
add_action( 'wp_enqueue_scripts', 'my_js_script' );

/*
Add jQuery ajax script to footer,
this function will get content from each tab link and replace current post
*/
function cajax_tabs(){ ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tabs a').each(function(){
$(this).click(function(e){
e.preventDefault();
var o = $(this), w = o.parents('.subsection'), url= o.attr('href');
jQuery.get(url, function(data){
var posts = $('.update-wrapper', data);
$('.update-wrapper').remove();
w.append(posts);
});
});
});
});
</script><?php
}
add_action('wp_footer', 'cajax_tabs');