Help With Dynamic WordPress Archives WordPress
- SOLVED
I'm attempting to use this original tutorial to build a Dynamic Archives Page in a custom WP theme: http://digwp.com/2010/10/dynamic-archives/. The demo(found here: http://digwp.com/archives/ ) clearly works. After trying and failing to implement his code, I resorted to the comments section to see if anyone else was having an issue. I actually found a question posted on this site that in a very detailed way, showed how to implement the code. That question and answer is here: http://wpquestions.com/question/showChrono/id/1087
When I strictly follow the steps posted, I get the drop down menu with relevant months and categories. However, as soon as I select an item from either dropdown menu I get the 'Nothing Found' message.
If I comment out :
$month = htmlspecialchars(trim($_POST['digwp_m']));
within 'Archive Getter', I get posts to show, but it shows all posts regardless of what month I select. The category selection in this case seems to be working.
I've deactivated all plugins to see if there were any conflicts - that rendered unsuccessful in addition to switching to the default twentytwelve theme. I also tried clearing my functions.php to see if there was any issues there. I'm having no luck. I'm currently working in WP 3.5.1. I'm posting my code here to see if by chance I'm missing anything:
<strong>archives.php Page Assigned to Archives WP Page</strong>
<?php
/*
Template Name: Archives
*/
?>
<?php get_header(); ?>
<div class="clear"></div>
<div class="container_16" >
<div class="grid_4">
<div id="sidebar">
<div class="sidebar header green">
<h2>About</h2>
</div>
<?php include (TEMPLATEPATH . '/includes/accordion-script.php'); ?>
<div id="dc_jqaccordion_widget-s1-item" class="dcjq-accordion">
<div class="menu-home-sidebar-menu-container">
<ul class="menu" id="menu-home-sidebar-menu">
<?php wp_list_pages('title_li=&child_of=187&post_type=page'); ?>
</ul>
</div>
</div>
</div><!-- End Sidebar -->
</div>
<div class="grid_12">
<div class="content">
<div class="breadcrumb">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="gh-entry">
<div id="archive-browser" style="margin-bottom: 20px;">
<div style="display: inline-block;">
<h4 style="float: left;">Month: </h4>
<select id="month-choice">
<option val="no-choice"> — </option>
<?php wp_get_archives(array(
'type' => 'monthly',
'format' => 'option'
)); ?>
</select>
</div>
<div style="display: inline-block;">
<h4 style="float: left;">Category:</h4>
<?php
wp_dropdown_categories('show_option_none= Please select a category ');
?>
</div>
</div>
<div id="archive-wrapper">
<div id="archive-pot">
</div></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<?php get_footer(); ?>
<strong>archive-getter.php Page Assigned to Archive Getter WP Page</strong>
<?php
/*
Template Name: Do Not Use - 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><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></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 } ?>
<strong>archives.js Inside my theme's js folder</strong>
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;'><img src='http://localhost/ghs-wp/wp-content/themes/themename/images/loader.gif' /></div>");
var dateArray = jQuery("#month-choice").val().split("/");
var y = dateArray[3];
var m = dateArray[4];
var c = jQuery("#cat").val();
jQuery.ajax({
url: "http://localhost/ghs-wp/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
});
}
});
});
});
<strong>archives.js called in theme header</strong>
<?php if (is_page_template("archives.php")) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/archives.js" type="text/javascript"></script>
<?php } ?>
You're help would be greatly appreciated!!
Answers (1)
Arnav Joy answers:
try changing
var y = dateArray[3];
var m = dateArray[4];
to
var y = dateArray[4];
var m = dateArray[5];
Arnav Joy comments:
here is full code of archives.js ,
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;'><img src='http://localhost/ghs-wp/wp-content/themes/themename/images/loader.gif' /></div>");
var dateArray = jQuery("#month-choice").val().split("/");
var y = dateArray[4];
var m = dateArray[5];
var c = jQuery("#cat").val();
jQuery.ajax({
url: "http://localhost/ghs-wp/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
});
}
});
});
});
<?php if (is_page_template("archives.php")) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/archives.js" type="text/javascript"></script>
<?php } ?>
your problem is that you are using
url: "http://localhost/ghs-wp/archive-getter/",
and the demo site is using
url: "/archives-getter/",
so in your case
var y holds ghs-wp and m holds 2013 that is wrong , so adjust these two variables to hold year and month respectvely , you can also test it doing alert it like
alert(y)
alert (m);
then increase/decrease value of dateArray[4];and dateArray[5];
to dateArray[5];dateArray[6]; and continuly alert that to check if y is getting year value and m is getting month value
hope it is clear to you.
brandonpence comments:
Arnav - Fantastic and clear answer. Thank you so much!