Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2012-10-22

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.

2012-10-22

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");

2012-10-22

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.