21
WP Plugin Development – Adding Persistence with jQuery
No comments · Posted by johng in Wordpress, Wordpress Plugin Development
In our previous post we added some very nice functionality to our plugin and for the first time in the tutorial actually saw jQuery being used to change the size of text within the body tag of our wordpress blog. We also noted that when the user changed pages, the text reverted to the original size. In this post we will be using a jQuery plugin to extend our plugin and make it much more useful.
An easy and effective way to maintain our text size changes from page to page of our website is through the use of cookies. A great little plugin for jQuery exists for managing cookies. This plugin and documentation can be found at jQuery.cookie. After downloading this plugin we will upload it to our js directory. Then we must make it available to our plugin. Once again we will be using the wp_enqueue_script function. We will place this call within our addJs function. I named the file jQuery.cookie.js so the code will look like this.
1 | wp_enqueue_script('jQuery.cookie', get_bloginfo('wpurl') . '/wp-content/plugins/elasticFonts/js/jQuery.cookie.js', array('jquery')); |
Of note
- Once again we use the get_bloginfo function of WordPress and the rest of our path to load the javascript file
- This script also requires jquery itself so we make sure to pass that in to the function
Now that we have the use of the jQuery cookie plugin, adding functionality is simple. The first thing we will do is to add a place where the cookie we will create will be added. The best place to do this is within our external javascript file (elasticFonts.js.php) within our setElasticFonts function. At the end of the function we will add the following two lines of code.
1 2 | var cookiePath = '/'; jQuery.cookie('currentFontSize', newSize, { path: cookiePath }); |
Of Note
- We set the path for our cookie to /. This ensures the cookie will work throughout our site. (line 1)
- We make a call to the jQuery.cookie function passing it a name for our cookie, the size we just set our fonts to, and the cookie path (line 2)
At this point we can upload our code and verify that a cookie named “currentFontSize” is being created if we view our cookies after changing our font size. However, our cookie isn’t affecting our page yet. We still need our page to read the cookie and make sure that the size of the font is correct. We will do this by adding two lines of code to our addPageScript function in the main plugin file. The code will be added before the closing CDATA tag and look like this.
1 2 | $eventCode .= 'var currentFontSize = jQuery.cookie("currentFontSize");'; $eventCode .= 'if(currentFontSize)jQuery("body").css("font-size", currentFontSize);'; |
Of Note
- First we get the currentFontSize from our cookie using the jQuery.cookie function with the name of our cookie as an argument (line 1)
- If the cookie value exists, we set the font-size of our body to the currentFontSize
If we upload our code, we will now find that our cookies are working. At this point we have accomplished what we set out to do and have a nicely working plugin. In the next post I will go over some closing thoughts and what needs to be done to finish the plugin.
development · jQuery · plugin · tutorial · Wordpress · wp
