• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

text re-sizer

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.

header and footer scripts

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.

fontminus

fontplus

Reader Interactions

Comments

  1. gaston says

    March 15, 2014 at 6:09 pm

    Gracias!

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.