Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Change Font Size onClick in WordPress with JavaScript

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Change Font Size onClick in WordPress with JavaScript

Have you ever come across a site or blog that lets their visitors change the font size from some +/- button in the sidebar? Normally, you should never have to add this feature because all major browsers have the zoom in/zoom out buttons, but there are still a good number of users who are not familiar with that zoom feature. Well in this article, we will show you how to give your users the ability change the font size in WordPress using a simple JavaScript function and some HTML.

First lets add this script in your header or footer:

<script type="text/javascript">function resizeText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}</script>

Then simply add this code anywhere in your theme (most people put it in the sidebar)

<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">Make text bigger</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">Make text smaller</a>

You can also use images like +/- icons or others if you want. For all of this to be possible, you would need to specify the font-size for your html element.

Alternatively, if you want to limit the area of where the font-size would be included (for example: just your content area), then change the original javascript to be something like this:

<script type="text/javascript"> var c = document.getElementById("content"); function resizeText(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; } </script>

This means that you only the font size change in the element that has the id=”content”.

Looking for a live example? Check out Eric Wendelin’s Blog.

Source: David Walsh


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Suzon Khan says:

    Can anyone help me out in setting a maximum and minimum text size for this script?

  2. JMunce says:

    Can this be made to remember settings? Because if I go to the next page, the text size is 100% again.

  3. Vitor Gil says:

    I’m getting an error in the script. The getElementById returns me null and the style can’t read it. How can I fix it?

  4. Alex says:

    Hello, I have a game site, and would like to have zoom in for my games (swf), how can I use this to zoom the game? Thank you

  5. Dominick Peluso says:

    Any tips for storing the font size selection in a cookie so the user doesn’t have to set their preference every time?

  6. rams says:

    awesome

  7. John Paul says:

    Nice tip.

    Thanks for sharing.

  8. Nevis1 says:

    Saw this tip pop up on Facebook. Thanks for sharing this, many of my customers are getting along in years, and this is a feature I will be sure to use on some of my sites.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.