Add Text Re Sizer To WordPress

In this tutorial, i’ll provide all the code you need to add text re-sizer buttons to any WordPress theme.

These buttons enable your readers to easily change the font size for your site.

There’s 4 steps you need to follow:

1. Add Javascript file to child themes js folder
2. Add PHP code to your child themes functions file
3. Add CSS & Javascript to head section
4. Add HTML for re-sizer buttons

Add Javascript

Create a new folder named js in your child themes root directory if not already included.

Copy this code from the view raw link in the Gist and paste it into a new file (using a text editor like Notepad++) named ftr and save the file as a .js file extension in your js folder.

Add PHP To Functions File

Simply copy this PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file.

Add Code To Head Section

Paste this code in the head section of your website.

The easiest way to do this is to paste it into the header and footer scripts box if your theme includes one.

If your theme doesn’t include a box for head scripts, you can install a plugin like insert headers and footers.

Add HTML For Buttons

Simply paste this HTML code into a text widget or wherever you want to display the buttons for re-sizing your text.

You will also need to upload the buttons to your Media Library or images folder in your theme and change the path to the button images in the HTML.