As I have been developing the WordPress theme for this site, I decided it would be nice to use jQuery to minimize/maximize content like the current jQ theme does, though I wanted to do things a bit differently. Mainly I wanted to have different buttons for minimizing and maximizing, and I wanted to be able to use them on parts of the site other then posts. At first I thought this would be accomplished using the jQuery .toggle function, but once I started making it cross-browser compatible I realized things weren’t going to be so simple.

To begin with, we will need a WordPress theme. That theme will need to be widget ready so make sure that is the case with your theme. We will also need to include the jQuery library into our theme, which is generally as simple as including a reference to the file. We will also need a maximize and minimize image to use (there are other ways to do this but that is what I chose.) Once you have all of these things you can begin. In this tutorial I will go over the end result of my development, explaining why I did things the way I did. This was a process as I began by using the .toggle function of jQuery but soon realized that that particular function does not work smoothly in all instances. Let’s begin.

The first thing I did was come up with a simple layout I wanted to use for each widget. This basically consisted of a “header” bar and content area, very similar to windows/Mac environment. The “header” would contain the images for minimizing and maximizing, aligned to the right of the bar. The basic end markup for this became the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="widget-container" align="center">
     <div class="widget-header">
          <span class="control-info"></span>
          <div class="widget-controls">
               <div class="minimize-widget">
                    <img src='" . get_bloginfo( 'template_directory' ) . "/images/minimize.png'alt="Minimize Widget Button" />
               </div>
               <div class="maximize-widget">
                    <img src='" . get_bloginfo( 'template_directory' ) . "/images/maximize.png' alt="Maximize Widget Button" />
               </div>
          </div>
     </div>
     <div class="widget-content">
     </div>
</div>
<br/>

Of Note

To add this to our theme, it is a simple matter of opening up our functions.php file for the theme (or creating if we don’t have one,) and adding some code using the standard WordPress method of styling widgets. The code should be self-explanatory and is posted below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
if (function_exists('register_sidebar'))
{
    $after_title = '</span><div class="widget-controls"><div class="minimize-widget">';
    $after_title .= "<img src='" . get_bloginfo( 'template_directory' ) . "/images/minimize.png'"; 
    $after_title .= 'alt="Minimize Widget Button" /></div><div class="maximize-widget">';
    $after_title .= "<img src='" . get_bloginfo( 'template_directory' ) . "/images/maximize.png'";
    $after_title .= 'alt="Maximize Widget Button" /></div></div></div><div class="widget-content">';	
 
	$sidebar_options = array('before_widget' => '<div class="widget-container" align="center">',
        			'after_widget' => '</div></div><br/>',
        			'before_title' => '<div class="widget-header"><span class="control-info">',
       	 			'after_title' => $after_title);	
 
    register_sidebar($sidebar_options);
}
?>

Once we have uploaded this, our markup will be added to each of our widgers. However, we still need to style the markup so that it looks right. For my theme the markup was as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.widget-container
{
	border:1px solid #000064;	
}
 
.widget-header
{
	width:100%;
	height:24px;
	background-color:#000064;
	color:#fff;
	text-align:left;
	font-size:1.1em;	
}
 
.widget-header img
{
	border-style:none;
	text-align:left;
}
 
.maximize-widget
{
	display:none;
}
 
.widget-controls
{
	float:right;
}
 
.widget-content
{
	padding:5px 5px 5px 5px;
	text-align:left;
}
.control-info
{
	font-weight:bold;	
	padding-left:5px;
	line-height:1.7em;
	width:80%;
	float:left;
}

Of Note

This should take care of styling our widgets and now they will have nice looking header and window style. In this case they are dark blue although changing color is easy enough (and the basis for an upcoming tutorial I will be doing!) The only thing left to do is add the jQuery. I do this in an external js file in my theme but the main idea is to add some function calls to accomplish our minimize/maximize of the content as well as switching out our buttons when appropriate. At first I did all of this will a simple a few simple calls to the .toggle function of jQuery. Then while testing on different versions of IE (I use and develop in Firefox) I found many cases where the behavior had bugs. I also wanted to add some nice animations which broke in IE8. The functions I ended up using were the standard .hide, .show, .slideUp, and .slideDown. The code ended up as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

 $(document).ready(function() {  
     $(".minimize-widget").click(function () { 
        $(this).hide();       	
     	$(this).closest(".widget-container").children(".widget-content").slideUp();
        $(this).siblings(".maximize-widget").show()
    	});
 
    $(".maximize-widget").click(function () {  
    	$(this).hide();  	 	
     	$(this).closest(".widget-container").children(".widget-content").slideDown();
        $(this).siblings(".minimize-widget").show()
    	}); 
 });

Of Note

As long as all your files are uploaded and referenced properly this will give you fully functioning minimizable/maximizable window style widgets in WordPress. I tested this in Firefox, IE8, and IE7. There are some things we could do to expand this functionality such as adding cookies to maintain state, but that is beyond the scope of this tutorial. I hope you have enjoyed!

AJAX · jQuery · tutorial · Wordpress · wp

1 comment

<< jQuery WYSIWYG Editor Experience

Using jQuery Accordion to Alter Content Outside of the Accordion >>