I have change the look and feel of my blog. I can say it’s simple & “sexy?”. What say you?

If you can see, “Archive” block on the right sidebar is hidden onload. The block will expand on mouse click. There is a simple way to do this in wordpress. Actually, you’ll need prototype (a javascript framework). You can include prototype.js in wordpress by using wp_enqueue_script(). No need to download prototype.js because it’s already in your wp-includes/js/ folder. All you need to do is to insert this code into your header.php (it should be in /wp-content/themes/<your theme folder>/).

<?php wp_enqueue_script(’prototype’); ?>

Prototype is not the only script that can be loaded with wp_enqueue_script(). Take a look in wp-includes/script-loader.php to see some of the other scripts that wp_enqueue_script() can load by default.

Okey! We’re now able to use prototype. It means we can use all its functions and Element.Toggle is one of them. We need to modify the sidebar.php (it depends on your theme). This is the code :

<li> <h2 onclick="$('archives').toggle();" style="cursor: pointer"><?php _e('Archives'); ?></h2> <ul id="archives" style="display:none;"> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <p>

In prototype, $('archives') is the same as document.getElementById('archives'). That’s it! Hope it’s useful for those who want to make their “Archive” block looks nice.

Posted on May 2nd, 2007 by SMD
Filed under: AJAX, CSS, Wordpress