In the last post of this tutorial I added a button via CSS and added in some Javascript includes. However, no functionality was added. In this post we will use jQuery to add our desired effect to our plugin.

The first thing we need to do to add some functionality is to bind an event to our button. I will be using the jQuery.bind function which essentially attaches an event listener to an object on our page. Full documentation on this function can be found at jQuery.bind. Our listener will be lookign for the click event and will call a function we will create in the next step. Our code will look like this.

1
2
3
4
5
6
7
8
9
10

function addPageScript()
{
	$eventCode = '<script type="text/javascript">';
	$eventCode .= '/* <![CDATA[ */';			
	$eventCode .= 'jQuery("#elasticFonts").bind("click", function(){setElasticFonts();});';					
	$eventCode .= '/* ]]> */';
	$eventCode .= '</script>';
 
	echo $eventCode;			
}

Of Note

As we have done for all of our functions previously, we must use the add_action function of WordPress to call this. The code for that will be added to the rest of our add_action calls and look like this.

1

add_action('wp_footer', array(&$elasticFonts, 'addPageScript'), 1);

Now we have an event that is calling a function we have not yet written. In our external javascript file (elasticFonts.js.php) we will now add some code. In order to access our WordPress admin values, we are going to first have to add some php. We simply add the wp_config file in to our script and then we can use the WordPress database and functions. This is done inside php tags and will look like the following.

1
2
3
4
5
6
7
8

$values = array();
 
if (!function_exists('add_action'))
{
    require_once("../../../../wp-config.php");	
 
    $values = get_option("elasticFontsAdminOptions");	
}

Of Note

Our next step is to write the javascript function that will handle resizing our text. We will be using the jQuery animate function to change the text size with a nice effect. Complete documentation on this function can be found at jQuery.animate(). Here are the things this function needs to do: determine what the current font size is, determine what the next size in the rotation is, and do the animation. The code I used to accomplish this is found below.

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

function setElasticFonts()
{
	var currentSize = jQuery('body').css('fontSize');
	var newSize = '<?php echo $values['minSize'] ?>';	
 
	switch(currentSize)
	{
		case '<?php echo $values['minSize'] ?>':
  			newSize = '<?php echo $values['midSize'] ?>';
  			break;
		case '<?php echo $values['midSize'] ?>':
  			newSize = '<?php echo $values['maxSize'] ?>';
  			break;
  		case '<?php echo $values['maxSize'] ?>':
  			newSize = '<?php echo $values['minSize'] ?>';
  			break;  		
	} 	
   	jQuery("body").animate({font-size: newSize}, 333).fadeIn("slow");   	   
}

Of Note

If we have done everything correctly and upload all of our file changes, our code should now execute when our button is clicked. The effect is nice and dramatic, but the plugin is not complete yet. For instance, notice how if we change pages our text returns to the old size. In the next part of this tutorial I will go over how to keep our user’s selection persistent throughout the WordPress site.

development, jQuery, plugin, tutorial, Wordpress, wp