wp_get_archives() - Get CSS selector for current month

Question

I'm looking for how to get a class in the wp_get_archives functions to get the current month (when we are in a month archive) just like when we call wp_list_categories, the current category has a ".current-cat" selector for CSS or when we call wp_list_pages we have a '.current_page_item' selector.

Answer 1

Put the following function in your functions.php

function wpse_62509_current_month_selector( $link_html ) {
    $current_month = date("F Y");
    if ( preg_match('/'.$current_month.'/i', $link_html ) )
        $link_html = preg_replace('/<li>/i', '<li class="current-month">', $link_html );
    return $link_html;
}

And then add the following line just before calling wp_get_archives()

add_filter( 'get_archives_link', 'wpse_62509_current_month_selector' );

You might also want to remove the filter after calling wp_get_archives() so that it doesn't mess with other wp_get_archives() or get_archives_link() function calls.

remove_filter( 'get_archives_link', 'wpse_62509_current_month_selector' );

Answer 2

This function was created with the great help of Joshua Abenazer. Thanks! Basically, if is a monthly archive, go and get the current month watched, and add a class on the li. Worked great.

function wpse_62509_current_month_selector( $link_html ) {
    if (is_month()){
        $current_month = get_the_date("F Y");
        if ( preg_match('/'.$current_month.'/i', $link_html ) )
            $link_html = preg_replace('/<li>/i', '<li class="current-month">', $link_html );
    }
    return $link_html;
}

add_filter( 'get_archives_link', 'wpse_62509_current_month_selector' );

Answer 3

As of WordPress 5.3, <a> elements generated by wp_get_archives (etc) for links to the current page have the attribute aria-current="page" added to them. If you just want to style the current page link differently, you can now target this with CSS, assuming you are happy for the styles to all be on the <a>:

a[aria-current="page"] {
color: red;
}

…or even just:

a[aria-current] {
color: red;
}