Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Theme Development

Creating a WordPress Post Text Size Changer Using jQuery


We already know that WordPress is considered the most popular CMS in the world and when it combines with jQuery, it can create wonders. In this tutorial we shall be discussing one example of the usefulness of jQuery in WordPress, by creating a front-end post text size changer. This tutorial is aimed at beginners who are learning to introduce the magic of jQuery in WordPress.

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.

Here we have placed the div class resize in such a way that it considers only the body of a single post.

For any element in WordPress for which you want the resizeble text, just wrap it within proper div classes to be used with jQuery.

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.

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.

If you like to learn more about jQuery please check out the Learn jQuery in 30 Days tutorial series by Jeffrey Way.

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.

That's it. Now if you are viewing a post, you can increment or decrement the font size of the post using the A+ 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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.