This article is taken from here: http://wp.tutsplus.com/tutorials/theme-development/creating-a-wordpress-post-text-size-changer-using-jquery/

What Are We Actually Going to Create

In this tutorial we are going to create a front-end text size changer that alters the font size of the posts as per the reader’s convenience. Suppose you are on a blog reading a post and you find it tough traversing through the lines of the post because of the text size. Here comes the need of the text size changer to increase/decrease the text size of the post accordingly. Increasing/Decreasing font size is generally considered due to a number of factors such as:

• To adjust the text as per your screen resolution
• To alter the default text size shown by the browser
• To increase clarity of words
• More convenient than the use of Ctrl+ or Ctrl- in your browser
• For visually impaired persons who are unable to read smaller fonts

In this tutorial we will be creating two links, A+ and A-, in the front-end which will increase or decrease the text size of the post accordingly with ease.

Step 1: Decide Which Part to Resize

This is the most important step in which you have to decide which element you want to associate with the text size changer. Though you can put the text size changer in the home page (index) itself, it is considered wise to put it in the single.php page to be utilized while viewing a single post.

In order to make an element resizable we have to wrap that part using a unique div class. Since we are using the Twenty Twelve theme, here is what our ‘single.php‘ file looks like after adding the code highlighted below to wrap the post within the ‘resize‘ class.

<code><?php</code></pre>
<div><code>/**</code></div>
<div><code> </code><code>* The Template for displaying all single posts.</code></div>
<div><code> </code><code>*</code></div>
<div><code> </code><code>* @package WordPress</code></div>
<div><code> </code><code>* @subpackage Twenty_Twelve</code></div>
<div><code> </code><code>* @since Twenty Twelve 1.0</code></div>
<div><code> </code><code>*/</code></div>
<div></div>
<div><code>get_header(); ?></code></div>
<div><code>    </code><code><div id=</code><code>"primary"</code> <code>class</code><code>=</code><code>"site-content"</code><code>></code></div>
<div><code>        </code><code><div id=</code><code>"content"</code> <code>role=</code><code>"main"</code><code>></code></div>
<div><code>            </code><code><div </code><code>class</code><code>=</code><code>"resize"</code><code>></code></div>
<div></div>
<div><code>            </code><code><?php </code><code>while</code> <code>( have_posts() ) : the_post(); ?></code></div>
<div></div>
<div><code>                </code><code><?php get_template_part( </code><code>'content'</code><code>, get_post_format() ); ?></code></div>
<div><code>                </code></div>
<div><code>            </code><code></div><!-- #resize --></code></div>
<div></div>
<div><code>                </code><code><nav </code><code>class</code><code>=</code><code>"nav-single"</code><code>></code></div>
<div><code>                    </code><code><h3 </code><code>class</code><code>=</code><code>"assistive-text"</code><code>><?php _e( </code><code>'Post navigation'</code><code>, </code><code>'twentytwelve'</code> <code>); ?></h3></code></div>
<div></div>
<div><code>                    </code><code><span </code><code>class</code><code>=</code><code>"nav-previous"</code><code>><?php previous_post_link( </code><code>'%link'</code><code>, </code><code>'<span>'</code> <code>. _x( </code><code>'&larr;'</code><code>, </code><code>'Previous post link'</code><code>, </code><code>'twentytwelve'</code> <code>) . </code><code>'</span> %title'</code> <code>); ?></span></code></div>
<div></div>
<div><code>                    </code><code><span </code><code>class</code><code>=</code><code>"nav-next"</code><code>><?php next_post_link( </code><code>'%link'</code><code>, </code><code>'%title <span>'</code> <code>. _x( </code><code>'&rarr;'</code><code>, </code><code>'Next post link'</code><code>, </code><code>'twentytwelve'</code> <code>) . </code><code>'</span>'</code> <code>); ?></span></code></div>
<div></div>
<div><code>                </code><code></nav><!-- .nav-single --></code></div>
<div></div>
<div><code>                </code><code><?php</code></div>
<div><code>                    </code><code>// If comments are open or we have at least one comment, load up the comment template</code></div>
<div><code>                    </code><code>if</code> <code>( comments_open() || </code><code>'0'</code> <code>!= get_comments_number() )</code></div>
<div><code>                        </code><code>comments_template( </code><code>''</code><code>, true );</code></div>
<div><code>                </code><code>?></code></div>
<div></div>
<div><code>            </code><code><?php </code><code>endwhile</code><code>; </code><code>// end of the loop. ?></code></div>
<div></div>
<div><code>        </code><code></div><!-- #content --></code></div>
<div><code>    </code><code></div><!-- #primary --></code></div>
<div></div>
<div><code><?php get_sidebar(); ?></code></div>
<div></div>
<div><code><?php get_footer(); ?></code></div>
<pre>

Step 2: Adding the Links to Resize Text

The next step is to add the two links in the page which will act as two buttons to resize the text. You can place them anywhere within your page but avoid placing them within the loop. Here we have placed them in our single.php file and have associated them with two unique IDs.

<code><?php</code></pre>
<div><code>/**</code></div>
<div><code> </code><code>* The Template for displaying all single posts.</code></div>
<div><code> </code><code>*</code></div>
<div><code> </code><code>* @package WordPress</code></div>
<div><code> </code><code>* @subpackage Twenty_Twelve</code></div>
<div><code> </code><code>* @since Twenty Twelve 1.0</code></div>
<div><code> </code><code>*/</code></div>
<div></div>
<div><code>get_header(); ?></code></div>
<div><code>    </code><code><div id=</code><code>"primary"</code> <code>class</code><code>=</code><code>"site-content"</code><code>></code></div>
<div><code>        </code><code><div id=</code><code>"content"</code> <code>role=</code><code>"main"</code><code>></code></div>
<div><code>             </code><code><div </code><code>class</code><code>=</code><code>"resize"</code><code>></code></div>
<div></div>
<div><code>            </code><code><?php </code><code>while</code> <code>( have_posts() ) : the_post(); ?></code></div>
<div></div>
<div><code>                </code><code><?php get_template_part( </code><code>'content'</code><code>, get_post_format() ); ?></code></div>
<div><code>                </code></div>
<div><code>              </code><code></div><!-- #resize --></code></div>
<div></div>
<div><code>                </code><code><nav </code><code>class</code><code>=</code><code>"nav-single"</code><code>></code></div>
<div><code>                    </code><code><h3 </code><code>class</code><code>=</code><code>"assistive-text"</code><code>><?php _e( </code><code>'Post navigation'</code><code>, </code><code>'twentytwelve'</code> <code>); ?></h3></code></div>
<div><code>                    </code><code><span </code><code>class</code><code>=</code><code>"nav-previous"</code><code>><?php previous_post_link( </code><code>'%link'</code><code>, </code><code>'<span>'</code> <code>. _x( </code><code>'&larr;'</code><code>, </code><code>'Previous post link'</code><code>, </code><code>'twentytwelve'</code> <code>) . </code><code>'</span> %title'</code> <code>); ?></span></code></div>
<div></div>
<div><code>                    </code><code><span </code><code>class</code><code>=</code><code>"nav-next"</code><code>><?php next_post_link( </code><code>'%link'</code><code>, </code><code>'%title <span>'</code> <code>. _x( </code><code>'&rarr;'</code><code>, </code><code>'Next post link'</code><code>, </code><code>'twentytwelve'</code> <code>) . </code><code>'</span>'</code> <code>); ?></span></code></div>
<div></div>
<div><code>                </code><code></nav><!-- .nav-single --></code></div>
<div></div>
<div><code>                </code><code><?php</code></div>
<div><code>                    </code><code>// If comments are open or we have at least one comment, load up the comment template</code></div>
<div><code>                    </code><code>if</code> <code>( comments_open() || </code><code>'0'</code> <code>!= get_comments_number() )</code></div>
<div><code>                        </code><code>comments_template( </code><code>''</code><code>, true );</code></div>
<div><code>                </code><code>?></code></div>
<div></div>
<div><code>            </code><code><?php </code><code>endwhile</code><code>; </code><code>// end of the loop. ?></code></div>
<div></div>
<div><code>        </code><code></div><!-- #content --></code></div>
<div><code>    </code><code></div><!-- #primary --></code></div>
<div><code><p><a id=</code><code>"increase-font"</code> <code>href=</code><code>"#"</code><code>>[ A+ ] </a>/<a id=</code><code>"decrease-font"</code> <code>href=</code><code>"#"</code><code>>[ A- ] </a> </p></code></div>
<div><code><?php get_sidebar(); ?></code></div>
<div></div>
<div><code><?php get_footer(); ?></code></div>
<pre>

Step 3: Adding the jQuery Magic

Now it’s time to add the jQuery magic to our theme in order to make the two increase/decrease links function. Under your theme’s js folder create a JavaScript file named resize.js. Now open the file and add the following piece of code. The code is clearly explained using the comments.

<code>// This prevents the execution of the code before the document is finished loading.</code></pre>
<div><code>jQuery(document).ready(</code><code>function</code><code>() {</code></div>
<div></div>
<div><code>    </code><code>// The 'A+' element  in the page is associated with the jQuery click() event.</code></div>
<div><code>    </code><code>jQuery(</code><code>'#increase-font'</code><code>).click(</code><code>function</code><code>(event) {</code></div>
<div></div>
<div><code>        </code><code>// This prevents the default action of the click() event from being triggered.</code></div>
<div><code>        </code><code>event.preventDefault();</code></div>
<div><code>        </code><code>// The jQuery each() event interates over each elements belonging to the 'resize' class</code></div>
<div><code>        </code><code>jQuery(</code><code>'.resize'</code><code>).each(</code><code>function</code><code>() {</code></div>
<div><code>            </code><code>// Call to a custom function to increase the text size</code></div>
<div><code>            </code><code>changeTextSize(</code><code>this</code><code>, change);</code></div>
<div><code>        </code><code>});</code></div>
<div><code>    </code><code>});</code></div>
<div></div>
<div><code>    </code><code>// The 'A-' element  in the page is associated with the jQuery click() event.</code></div>
<div><code>    </code><code>jQuery(</code><code>'#decrease-font'</code><code>).click(</code><code>function</code><code>(event) {</code></div>
<div></div>
<div><code>        </code><code>// This prevents the default action of the click() event from being triggered.</code></div>
<div><code>        </code><code>event.preventDefault();</code></div>
<div><code>        </code><code>// The jQuery each() event interates over each elements belonging to the 'resize' class</code></div>
<div><code>        </code><code>jQuery(</code><code>'.resize'</code><code>).each(</code><code>function</code><code>() {</code></div>
<div><code>            </code><code>// Call to a custom function to decrease the text size</code></div>
<div><code>            </code><code>changeTextSize(</code><code>this</code><code>, -change);</code></div>
<div><code>        </code><code>});</code></div>
<div><code>    </code><code>});</code></div>
<div><code>});</code></div>
<div></div>
<div><code>// Three variables have been used to define range of the text size and the increment/decrement value respectively.</code></div>
<div><code>var</code> <code>min = 8, max = 100, change = 2;</code></div>
<div></div>
<div><code>// Defines a custom function with two parameters determining the element to be resized and the size</code></div>
<div><code>function</code> <code>changeTextSize(element, value) {</code></div>
<div><code>    </code><code>var</code> <code>currentSize = parseFloat(jQuery(element).css(</code><code>'font-size'</code><code>));</code></div>
<div><code>    </code><code>var</code> <code>newSize = currentSize + value;</code></div>
<div><code>    </code><code>if</code> <code>(newSize <= max && newSize >= min) {</code></div>
<div><code>        </code><code>jQuery(element).css(</code><code>'font-size'</code><code>, newSize + </code><code>'px'</code><code>);</code></div>
<div><code>    </code><code>}</code></div>
<div><code>}</code></div>
<pre>

Step 4: Referencing the Script in WordPress

This is the final step in which we need to add a reference to the resize.js script in WordPress so that it executes the code. By default the WordPress installation already contains the jQuery library. We just need to reference the script within the theme. Open your functions.php file and add the following code snippet.

<code>function</code> <code>wptuts_resize_text () {</code></pre>
<div><code>    </code><code>// The array('jquery') is used to create dependency on the jQuery library in order to use it properly.</code></div>
<div><code>    </code><code>wp_enqueue_script( </code><code>'resize'</code><code>, get_template_directory_uri() . </code><code>'/js/resize.js'</code><code>, </code><code>array</code><code>( </code><code>'jquery'</code> <code>) );</code></div>
<div><code>}</code></div>
<div><code>add_action( </code><code>'wp_enqueue_scripts'</code><code>, </code><code>'wptuts_resize_text'</code> <code>);</code></div>
<pre>

That’s it. Now if you are viewing a post, you can increment or decrement the font size of the post using theA+ and A- links in the page. You can use your own CSS to properly style and place the two links in your website as you see fit.