working example of dynamic archives WordPress

idt answers:

Here are the steps:

1. Create archives.php. Put the code below to the archives.php. (If you already have archives.php in your theme, replace it with the code below). Then upload it to your theme directory


<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>


<div id="archive-browser">
<div>
<h4>Month</h4>
<select id="month-choice">
<option val="no-choice"> &mdash; </option>
<?php wp_get_archives(array(

'type' => 'monthly',
'format' => 'option'

)); ?>
</select>
</div>
<div>
<h4>Category</h4>
<?php

wp_dropdown_categories('show_option_none= -- ');

?>
</div>
</div>
<div id="archive-wrapper">
<div id="archive-pot">
</div></div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>


2. Create a blank page "Archive" and assign it to use the template Archives you just created on step 1. (Page Attribute>Template>Archives) located on the right rail of the page creation.

3. Create archive-getter.php. Add the code below to and upload it to your theme directory.

<?php

/*
Template Name: Archives Getter
*/

$year = htmlspecialchars(trim($_POST['digwp_y']));
$month = htmlspecialchars(trim($_POST['digwp_m']));
$cat = htmlspecialchars(trim($_POST['digwp_c']));

$querystring = "year=$year&monthnum=$month&cat=$cat&posts_per_page=-1";

query_posts($querystring);

?>

<?php if (($year == '') && ($month == '') && ($cat == '-1')) { ?>

<table id="archives-table"><tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Please choose from above.</td></tr></table>

<?php } else { ?>

<table id="archives-table">
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<tr>
<td><img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" style="width: 35px;" /></td>
<td><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></td>
<td><?php comments_popup_link(' ', '1 Comment', '% Comments'); ?></td>
<td><?php the_date('m/j/Y'); ?></td>
</tr>
<?php
endwhile; else:

echo "<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Nothing found.</td></tr>";

endif;
?>
</table>

<?php } ?>

4. Create a blank page named "Archive Getter" and assigned it to use the Archive getter template you just created on step 3. (Page Attribute>Template>Archives Getter) located on the right rail of the page creation.
5. Create archives.js. Add the code below and upload it to your js folder inside your theme directory.

jQuery(function() {

jQuery("#archive-wrapper").height(jQuery("#archive-pot").height());

jQuery("#archive-browser select").change(function() {

jQuery("#archive-pot")
.empty()
.html("<div style='text-align: center; padding: 30px;'>Loading...</div>");

var dateArray = jQuery("#month-choice").val().split("/");
var y = dateArray[3];
var m = dateArray[4];
var c = jQuery("#cat").val();

jQuery.ajax({

url: "/archive-getter/",
dataType: "html",
type: "POST",
data: ({
"digwp_y": y,
"digwp_m" : m,
"digwp_c" : c
}),
success: function(data) {
jQuery("#archive-pot").html(data);

jQuery("#archive-wrapper").animate({
height: jQuery("#archives-table tr").length * 50
});

}

});

});

});

Step 6. Add this to your header.php inside your theme directory.
<?php if (is_page_template("archives.php")) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/archives.js" type="text/javascript"></script>
<?php } ?>