Highlight Current Archives Link WordPress
- SOLVED
The following code displays Year and Month Archives in a compact sidebar of my theme. It's hard-coded (no widget) and I simply want to highlight the link with an active class to display which archive page is being viewed.
<?php
$year_prev = null;
$months = $wpdb->get_results( "SELECT DISTINCT MONTH( post_date ) AS month ,
YEAR( post_date ) AS year,
COUNT( id ) as post_count FROM $wpdb->posts
WHERE post_status = 'publish' and post_date <= now( )
and post_type = 'post'
GROUP BY month , year
ORDER BY year DESC, month ASC");
foreach($months as $month) :
$year_current = $month->year;
if ($year_current != $year_prev){
if ($year_prev != null){?>
</div>
</td>
</tr>
<?php } ?>
<tr>
<td class="specialElite">
<?php echo $month->year; ?><br>
</td>
<td class="datacloud">
<div class="cloudContain">
<?php } ?>
<a rel="tooltip" title="<?php echo $month->post_count; ?> posts" href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
<code><?php echo date("M", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>
</a>
<?php $year_prev = $year_current;
endforeach; ?></code>
<strong>Notes</strong>
I'm not sure this is the most efficient code for the job, so if it needs to be modified to integrate an active class, that's ok.
Answers (3)
John Cotton answers:
You can get the currently display year and month from the year and monthnum query vars.
So you code might be:
$active_class = $month->month == (int) get_query_var('monthnum') && $month->year == (int) get_query_var('year') ? 'current_date' : '';
<a rel="tooltip" class="$active_class".....
TheLoneCuber comments:
I like the approach John. Any chance you can provide the code in its entirety?
John Cotton comments:
<?php
$year_prev = null;
$months = $wpdb->get_results( "SELECT DISTINCT MONTH( post_date ) AS month ,
YEAR( post_date ) AS year,
COUNT( id ) as post_count FROM $wpdb->posts
WHERE post_status = 'publish' and post_date <= now( )
and post_type = 'post'
GROUP BY month , year
ORDER BY year DESC, month ASC");
foreach($months as $month) :
$year_current = $month->year;
if ($year_current != $year_prev){
if ($year_prev != null){?>
</div>
</td>
</tr>
<?php } ?>
<tr>
<td class="specialElite">
<?php echo $month->year; ?><br>
</td>
<td class="datacloud">
<div class="cloudContain">
<?php }
$active_class = $month->month == (int) get_query_var('monthnum') && $month->year == (int) get_query_var('year') ? 'current_date' : '';
?>
<a rel="tooltip" class="<?php echo $active_class; ?>" title="<?php echo $month->post_count; ?> posts" href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
<?php echo date("M", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>
</a>
<?php $year_prev = $year_current;
endforeach; ?>
TheLoneCuber comments:
Awesome John. Thank you. That works perfectly, and is exactly what i was looking for.
TheLoneCuber comments:
Although it does leave a blank class attribute on all the other links (that are not the active link). Any way to avoid that (not that it's a big deal)?
<a rel="tooltip" <strong>class=""</strong> title="314 Posts" ...
John Cotton comments:
Changing this
class="<?php echo $active_class; ?>"
to this
<?php echo $active_class ? 'class="'.$active_class.'"': ''; ?>"
would be one option, or
$active_class = $month->month == (int) get_query_var('monthnum') && $month->year == (int) get_query_var('year') ? 'current_date' : '';
to
$active_class = $month->month == (int) get_query_var('monthnum') && $month->year == (int) get_query_var('year') ? 'class="current_date"' : '';
and then just
<?php echo $active_class; ?>
in the HTML
TheLoneCuber comments:
Love your work. Thanks John.
John Cotton comments:
<blockquote>Love your work. </blockquote>
Thank you. You can show your appreciation by voting for the prize awards and upvoting my answers :) Good luck.
Francisco Javier Carazo Gil answers:
Hi,
I would create a CSS class to highlight and with jQuery, for example, add this using the URL.
Francisco Javier Carazo Gil comments:
var pathname = window.location.pathname;
$('a[href="' + pathname + '"]').addClass("highlighted");
Francisco Javier Carazo Gil comments:
You should also delete all highlighted class in every page load:
$("a[rel=tooltip]").removeClass("highlighted");
Abdelhadi Touil answers:
Hi.
Often ignore using the body class function, why not to try to use it?
[[LINK href="http://codex.wordpress.org/Function_Reference/body_class"]]http://codex.wordpress.org/Function_Reference/body_class[[/LINK]]
TheLoneCuber comments:
How would I use body_class in this instance?
There might be 20 archive links on the page, and I need to highlight the active archive link.