It is official, today I purchased my ticket for WordCamp Denver! I as well as Jeana from Jeana Says, will be flying out to Colorado! Now all we need to do is find a place to stay..

If you take a look at my current sidebar (right) and see the heading Google Search you’ll notice that when you click it the Google Search box show’s into view.

Let me show you how this is done.

First make sure that your WordPress site is calling jQuery, buy pluggin this code into our header.php file above the <?php wp_head(); ?> text:

<?php wp_enqueue_script('jquery'); ?>

Then anywhere above the </head >, plug this code in:

<script type="text/javascript">
jQuery(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  jQuery('#toggle-search').hide();

 // toggles the slickbox on clicking the noted link
  jQuery('a#slick-slidetoggle').click(function() {
	jQuery('#toggle-search').slideToggle(400);
	return false;
  });
});
</script>

That’s simple, huh. Okay now lets write the Search code:

<h2><a href="#" id="slick-slidetoggle">Google Search</a></h2>
	<div id="toggle-search" style="padding:10px;">
    <form method="get" id="search" action="<?php bloginfo('home'); ?>/">
        <div>
            <input type="text" value="Enter Keyword" onclick="this.value='';" name="s" id="s" />
            <input type="text" name="search-button" id="search-button" value="<?php _e('Search') ?>" />
        </div>
    </form>
</div>

That’s it.

I have show you how to create a custom widget in a previous post. But how about adding and additional “Archives” widget that won’t list the last 3 years (if you’ve been around that long) in month form stretching down your whole sidebar?

Well, lets take a look at the original code found in the widgets.php file in the ./wp-includes/ folder.

<?php

/**
* Display archives widget.
*
* @since 2.2.0
*
* @param array $args Widget arguments.
*/
function wp_widget_archives($args) {
extract($args);
$options = get_option('widget_archives');
$c = $options['count'] ? '1' : '0';
$d = $options['dropdown'] ? '1' : '0';
$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);

echo $before_widget;
echo $before_title . $title . $after_title;

if($d) {
?>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c"); ?> </select>
<?php
} else {
?>
<ul>
<?php wp_get_archives("type=monthly&show_post_count=$c"); ?>
</ul>
<?php
}

echo $after_widget;
}

/**
* Display and process archives widget options form.
*
* @since 2.2.0
*/
function wp_widget_archives_control() {
$options = $newoptions = get_option('widget_archives');
if ( isset($_POST["archives-submit"]) ) {
$newoptions['count'] = isset($_POST['archives-count']);
$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('widget_archives', $options);
}
$count = $options['count'] ? 'checked="checked"' : '';
$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
$title = attribute_escape($options['title']);
?>
<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
<p>
<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
<br />
<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
</p>
<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php } ?>

Simple enough? Or not..

Anyway lets just add on and change a few things. Then will add the final code to your functions.php file.

Okay, starting with the first function: wp_widget_archive and rename to widget_archive_limit

Should look like this now:

function widget_archives_limit($args) {

Then under the this line:

$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);

Add:

$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);

At this line:

<?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?>

We have added in &limit=$limit. The same goes for the second wp_get_archives:

<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>

At the end of this code add:

wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);

The whole code should look like this:

function widget_archives_limit($args) {
	extract($args);
	$options = get_option('widget_archives');
	$c = $options['count'] ? '1' : '0';
	$d = $options['dropdown'] ? '1' : '0';
	$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
	$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);

	echo $before_widget;
	echo $before_title . $title . $after_title;

	if($d) {
?>
		<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?> </select>
<?php
	} else {
?>
		<ul>
		<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>
		</ul>
<?php
	}

	echo $after_widget;
}

wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);

That takes care of the widget its self, now we need to create the controls. Once again find the second function and change wp_widget_archive_control to widget_archives_limit_control

Find this line:

$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));

and add this line below:

$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));

Then find this line:

$title = attribute_escape($options['title']);

and add this line below:

$limit = attribute_escape($options['limit']);

Finally look for this line:

<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
			</p>

and add this line below:

<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>

then register the widget controls:

wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );

The code should look like this:

function widget_archives_limit_control() {
	$options = $newoptions = get_option('widget_archives');
	if ( isset($_POST["archives-submit"]) ) {
		$newoptions['count'] = isset($_POST['archives-count']);
		$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
		$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
		$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));
	}
	if ( $options != $newoptions ) {
		$options = $newoptions;
		update_option('widget_archives', $options);
	}
	$count = $options['count'] ? 'checked="checked"' : '';
	$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
	$title = attribute_escape($options['title']);
	$limit = attribute_escape($options['limit']);
?>
			<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
			<p>
				<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
				<br />
				<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
			</p>
			<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>
			<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php } 

wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );

The final code:

/**
 * Display archives widget.
 *
 * @since 2.2.0
 *
 * @param array $args Widget arguments.
 */
function widget_archives_limit($args) {
	extract($args);
	$options = get_option('widget_archives');
	$c = $options['count'] ? '1' : '0';
	$d = $options['dropdown'] ? '1' : '0';
	$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
	$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);

	echo $before_widget;
	echo $before_title . $title . $after_title;

	if($d) {
?>
		<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?> </select>
<?php
	} else {
?>
		<ul>
		<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>
		</ul>
<?php
	}

	echo $after_widget;
}

wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);

/**
 * Display and process archives widget options form.
 *
 * @since 2.2.0
 */
function widget_archives_limit_control() {
	$options = $newoptions = get_option('widget_archives');
	if ( isset($_POST["archives-submit"]) ) {
		$newoptions['count'] = isset($_POST['archives-count']);
		$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
		$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
		$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));
	}
	if ( $options != $newoptions ) {
		$options = $newoptions;
		update_option('widget_archives', $options);
	}
	$count = $options['count'] ? 'checked="checked"' : '';
	$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
	$title = attribute_escape($options['title']);
	$limit = attribute_escape($options['limit']);
?>
			<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
			<p>
				<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
				<br />
				<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
			</p>
			<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>
			<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php } 

wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );