Archives widget dropdown to be styled like Bootstrap dropdown

3 Views

In WordPress, there is default Archives widget that displays a form select with the list of monthly archives and on change executes:

document.location.href=this.options[this.selectedIndex].value;

Read More

I need the same functionality but styled like a Bootstrap dropbdown 

<div class="btn-group dropdown">
    <button class="btn btn-link">Dropdown Button</button>
    <button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>

    <ul class="dropdown-menu">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

How can I achieve this?

Is there any class that I could add to the select, so that I get the Bootstrap dropdown style along with the same functionality?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. There’s no way of modifying the output for that widget. You have to copy the whole WP_Widgets_Archives and create your own widget.

    See the Widgets_API and this old, but still valid article: The complete guide to creating widgets in WordPress 2.8.

    You’ll have to place your code in this block:

    if ( $d ) {
    ?>      
        <div class="btn-group dropdown">
            <button class="btn btn-link">Dropdown Button</button>
            <button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <?php wp_get_archives( array('type' => 'monthly', 'format' => 'html', 'show_post_count' => $c)); ?>
            </ul>
        </div>
    <?php
}

    Note the format html for wp_get_archives, this produces a <li> list.