How to add Font Resizer buttons in Genesis

In my Facebook group a user asked:

Hi Sridhar -

I need to find a light-weight plugin or other method to add a font-resizer to genesis child themes. The child theme in particular that brought this up is the Agency Pro theme you can see my implementation of that theme at https://eldersell.com A client of mine has asked us to create a site for their home care agency (that's the market we servce) with the Agency Pro child theme but with a font resizer added.

I found one article on your site that adds a font resizer and a number of other things to a theme, but it's more than I need (I only need the font-resizer) and the article is pretty old now.

Can you help?

Thanks!

In this article we shall create a custom [font-resizer] shortcode which adds buttons for increasing, decreasing and resetting font size of text on the webpage in your Genesis site. Thanks to Gary Jones for the JS code.

Live Demo

Note: Since most elements' font sizes are not set to be relative in Genesis child themes, not every text element will get resized. When you go to an inner content page like this, the resizing effect can be seen better. This issue will also be present with any font resizer plugin in the wordpress.org repo. Example.

Step 1

Create a file named say, gamajo-font-sizer.js in your child theme's js directory (create if not existing) having the following code: