In our last post we added functionality to our admin section that allowed us to save and retrieve values. In this post we will begin adding functionality for the user. We will create a simple button via CSS on our site. We will also begin to add in javascript to handle when the button is clicked. This javascript will use the jQuery toolkit, which is already included with WordPress at this time.

The first thing we will do is add a link within a div to our site. This will serve as a button to activate our jQuery resizing. This is accomplished in two parts. First we create a function that will output the HTML. Secondly we will call our function by adding another add_action to our code. For this I will be using the wp_footer hook, although others could also server the purpose. Our function will look something like the following.

1
2
3
4

function addElasticFontsControl()
{
	echo '<div class="elasticFontsControlContainer"><a href="javascript:void(0);" class="elasticFonts" id="elasticFonts"></a></div>';
}

Of Note

The add_action is simple and we just add it to the block of add actions we already have in our plugin. It will look something like this.

1

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

Of Note

In order to make this useful, we are going to use an image for the anchor. We will also position the div where we want it via CSS. In my particular theme, I have chosen to make this an image that is in the right hand side of my page and moves with the user scrolling. You can edit your CSS to display however you would like. To reference an external CSS file, we will create a function to output the HTML to the browser and add another add_action to fire the function. This is very similar to the last step we did. My function looks like the following.

1
2
3
4

function addCss()
{
	echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/elasticFonts/css/elasticFonts.css" />' . "\n";
}

Of Note

Adding the action is simple. This time I will use the wp_head hook as I want this to be printed in the head of the document. The call looks like this.

1

add_action('wp_head', array(&$elasticFonts, 'addCss'), 1);

Of Note

For reference, here is the CSS file.

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

.elasticFontsControlContainer
{
	position: absolute;
  	top: 122px;
  	right: 70px;
  	display: block;
  	width: 52px;
  	height: 52px;
  	z-index: 1000;
}
 
.elasticFontsControlContainer a
{
	display: block;
  	width: 52px;
  	height: 52px;
	background: url(../images/elasticFonts.png) no-repeat;
}

If we upload our code at this point we will see our button image in the upper right hand side. Now it is time to add some functionality. We will be placing most of our javascript in an external file. In order to use that file we must create a function to load our javascript file and call it via an add_action. We will use the WordPress function wp_enqueue_script to load our script. Complete information on this function can be found at wp_enqueue_script. We will be passing this script 3 arguments. First we will pass the funtion a handle (name) for our script. The second argument we will pass is the path to the file. The third argument will be an array of dependencies this file has. In this case the only dependency is jQuery. The final thing of note is that we want to be able to access WordPress functions in our javascript file. An easy way to do this is to save the javascript file with a .php added to the file and extension. For example file.js.php; this will allow us to use the PHP based wordpress functions easily. Code for the function will look like this.

1
2
3
4
5
6
7

function addJs()
{
	if (function_exists('wp_enqueue_script')) 
	{
		wp_enqueue_script('elasticFonts', get_bloginfo('wpurl') . '/wp-content/plugins/elasticFonts/js/elasticFonts.js.php', array('jquery'));
	}
}

Of Note

Our add action will look like this.

1

add_action('wp_head', array(&$elasticFonts, 'addJs'), 1);

Of Note

At this point our code loads in our CSS file and JS file but does not have any functionality. If you view the source of the site after uploading the updated code you will see the calls to our scripts and code. You should also see the button added. In the next post we will add code to change our font sizes via jQuery.

AJAX · css · development · jQuery · plugin · tutorial · Wordpress · wp

No comments yet.

<< WP Plugin Development – Adding More jQuery

WP Plugin Development – Adding Admin Functionality >>