archive 'sortby/ view per page/ pagination' bar-2/28/12

<?php
function add_jquery_to_head(){
wp_deregister_script('jquery');// unregister default wp jquery
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');//set new jquery
wp_enqueue_script('jquery');// then load it
}
add_action('template_redirect', 'add_jquery_to_head');

function addurlscript(){?>
<script type="text/javascript">
/*http://eureka.ykyuen.info/2011/07/09/jquery-%E2%80%93-get-url-query-string */
$.extend({ // get values from URL
	getUrlVars: function(){
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++) {
			hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
		}
        return vars;
	},
    getUrlVar: function(name){
		return $.getUrlVars()[name];
	}
});

/*http://blog.rutwick.com/use-jquery-to-reorder-your-wp-posts-on-the-fly */
$(document).ready(function(){
	$('.sorter-dropdown').change(function(){
		var sort_str = $(this).val();
		//check for other values
		if ($.getUrlVar('amt_per') ==undefined){ var amt_str = '10';} /// if undefined make default pg amount
		else{ var amt_str =$.getUrlVar('amt_per');} // else get variable from url
		if ($.getUrlVar('order_dir') ==undefined){ var amt_str = 'DESC';} /// if undefined make default order direction
		else{ var ord_str =$.getUrlVar('order_dir');} // else get variable from url

		window.location.href = "?sort_by="+sort_str+"&amt_per="+amt_str+"&order_dir="+ord_str;
		$(this).addClass("highlight");
	});

	//
	$('.order-button').click(function(){
    	var ord_str = $(this).val();
		//check for other values
		if ($.getUrlVar('sort_by') ==undefined ){ var sort_str = 'date';} // if undefined make default
		else{ var sort_str =$.getUrlVar('sort_by');} // else get variable from url
		if ($.getUrlVar('amt_per') ==undefined){ var amt_str = '10';} /// if undefined make default pg amount
		else{ var amt_str =$.getUrlVar('amt_per');} // else get variable from url

		window.location.href = "?sort_by="+sort_str+"&amt_per="+amt_str+"&order_dir="+ord_str;
		$(this).addClass("highlight");
	});
	//


	$('.amt-button').click(function(){
    	var amt_str = $(this).val();
		//check for other values
		if ($.getUrlVar('sort_by') ==undefined ){ var sort_str = 'date';} // if undefined make default
		else{ var sort_str =$.getUrlVar('sort_by');} // else get variable from url
		if ($.getUrlVar('order_dir') ==undefined){ var amt_str = 'DESC';} /// if undefined make default order direction
		else{ var ord_str =$.getUrlVar('order_dir');} // else get variable from url

		window.location.href = "?sort_by="+sort_str+"&amt_per="+amt_str+"&order_dir="+ord_str;
		$(this).addClass("highlight");
	});


	// trying to make higlight stylecarry over.
	$(window).load(function(){
		// get the amt per value from url set it as amt_highlight var
    	var amt_highlight = $.getUrlVar('amt_per');
		// if a button with class.amount-buttons value is equal to amt_highluight
		if ( $('.amt-button').val(); == amt_highlight){
		// then add class to that button
		$(this).addClass("highlight");
		}
	});



});

</script>
<?php }
add_action('wp_head', 'addurlscript');


/* Must use pretty permalinks */
function change_amt_archive(){
?>
<style type="text/css">
button.amt-button,button.order-button {background-color:#eee;border-width:0;}
button.amt-button:hover,
button.order-button:hover{background-color:#ccc;}
button.highlight,
option.highlight{font-weight:bold;}
.archive-bar{height:23px;background-color:#ddd; font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;}
select.sorter-dropdown, select.sorter-dropdown option, button {font-size:10px;}
.sorter-div{width:25%;margin-left:1%;display:inline-table; text-align:left;}
.sorter-dropdown{width:100px;}
.change-order-div{width:16%;float:none;display:inline-table;text-align:center;}
.change-amt-div{width:26%;float:none;display:inline-table;text-align:center;}
.pagination-div{ margin-right:1%;width:28%;float:right;display:inline-table;text-align:right;}
</style>
<?php
global $sort;
global $sortby;
global $amt;
global $amtper;


//set up sort cases
if(isset($_GET['sort_by']) && $_GET['sort_by'] != ''){
	$sort = $_GET['sort_by'];
	switch($sort){
		case 'date'    : $sortby = 'date';          break;
		case 'date-mod': $sortby = 'modified';      break;
		case 'title'   : $sortby = 'title';         break;
		case 'comment' : $sortby = 'comment_count'; break;
	}
}else{ $sortby = 'date';}

// set up order direction cases
if(isset($_GET['order_dir']) && $_GET['order_dir'] != ''){
	$ord = $_GET['order_dir'];
	switch($ord){
		case 'asc' : $orderdir = 'ASC';  break;
		case 'desc': $orderdir = 'DESC'; break;
	}
}else{ $orderdir = 'DESC';}

// set up amount cases
if(isset($_GET['amt_per']) && $_GET['amt_per'] != ''){
	$amt = $_GET['amt_per'];
	switch($amt){
		case '10' : $amtper = '10'; break;
		case 'all': $amtper = '-1'; break;
	}
}else{ $amtper = '10';}



?>
<div class="archive-bar">
<div class="sorter-div">
<b>Sort by:</b>
<select class="sorter-dropdown" >
<option value="date" <?php echo (!isset($sort) || $sort == '' || $sort == 'date')? 'selected="selected"':''; ?>>Date (default)</option>

<option value="date-mod" <?php echo ($sort == 'date-mod')?
'selected="selected"':''; ?>>Date Modified</option>

<option value="title" <?php echo ($sort == 'title')?
'selected="selected"':''; ?>>Title</option>

<option value="comment" <?php echo ($sort == 'comment')?
'selected="selected"':''; ?>>Most Popular</option>
</select>
</div>

<div class="change-order-div">
<b>Order:</b>
<button class='order-button' value="asc">&and;</button>
<button class="order-button" value="desc" >&or;</button>
</div>


<div class="change-amt-div">
<b>Per page:</b>
<button class="amt-button" value="10">10</button>
<button class="amt-button" value="all">view all</button>
</div>

<?php
query_posts(array(
	'posts_per_page' => $amtper,
	'orderby' => $sortby,
	'order' => $orderdir
));
global $wp_query;
$big = 999999999; // need an unlikely integer this is set here so pagionation works below

?>
<div class="pagination-div"><?php
echo paginate_links( array(
	'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'total' => $wp_query->max_num_pages
));
?></div>
</div>
<?php

}//close change_amt_archive function

/* template tag: (paste above archive loop in archive.php template)
<?php $paged = (get_query_var('paged')) ? (int) get_query_var('paged') : 1;
$page_link = get_permalink($id) ?>
<?php if(function_exists('change_amt_archive')){ change_amt_archive(); } ?>
*/



?>