Although users can change the font size of a web page through standard browser settings, few people knows or remembers how to do it.

WP-chgFontSize is a WordPress plugin that allows users to change dynamically the font size by adding a text or image selection on your blog. It also stores the user selection on their user’s browser cookies.

It can be used as a widget or directly as a PHP call in the theme.

See an example of how it works at the upper right side (header) of this blog.

Installation

  1. Download WP-chgFontSize.
  2. Decompress and upload the contents of the archive into /wp-content/plugins/.
  3. Activate the plugin on your WP Admin » Plugins page by clicking ‘Activate’ at the end of the ‘WP-chgFontSize’ row.
  4. Configure the plugin on your WP Admin » Options » Font Size page.

Usage

To use it, there are two possibilities:

  • If your theme supports widgets, and you have installed the widget plugin or you are using WordPress 2.2 or higher, add the ‘WP-chgFontSize’ widget on your WP Admin > Presentation > Widgets page.
  • Add this code to the theme’s file where you want the font size selection appear, for example, on the sidebar.php file:
<?php chgfontsize_display_options(); ?>

License

This plugin is released under the GPL.

This plugin is provided with absolutely no support or warranty.

Version History

  • March 8 2007 – v1.0
    • Initial release to the public.
  • August 1 2007 – v1.1
    • Bug: use get_bloginfo(’wpurl’) instead of get_bloginfo(’url’).
    • New feature: option to restore default font size.
    • New feature: be able to specify min, max and interval values for the font size.
    • New feature: be able to use pixels, ems and percentages units for the font size.
  • September 6 2007 – v1.2
    • Bug: first click on + size, it jump to GIANT font size.
  • October 21 2007 – v1.3
    • New feature: widgetized version.
  • October 26 2007 – v1.4
    • Bug: change js function names to avoid name duplications.
  • February 5 2008 – v1.5
    • Bug: allow class type div elements.
  • April 23 2008 – v1.6
    • Bug: fix IE issues with class type elements.
  • June 10 2009 – v1.7
    • Bug: Determine the correct wp-content directory.
  • May 4 2010 – v1.8
    • New feature: add ‘Steps’ mode (Thanks to Leo Brown!).

To Do

Updated 11 Sep 2008

  • Bug: use get_bloginfo(’wpurl’) instead of get_bloginfo(’url’)
  • New feature: option to restore default display
  • New feature: be able to use ems or percentages instead of pixels for the font-sizes
  • New feature: widgetized version
  • Bug: fix IE issues with class type elements
  • New feature: add non-constant intervals
  • New feature: add a <noscript> section for non-ActionScript-enabled browsers

Comments

Comment by macewan on 2007-03-20 19:26:26 +0000

Thank you.

Comment by Kristin on 2007-03-22 11:39:38 +0000

I tested this plugin on one of my sites which has wp installed in a subdirectory, and it didn’t work at first. But then I changed line 142 ( function add_chgfontsize_js() ) to be get_bloginfo(‘wpurl’) instead of get_bloginfo(‘url’) and then it worked like it should.

– so you might consider changing that to add support for people who has their wp blog/ site set up just like me.

And thank you for making this plugin, it was just what I needed.

Comment by Eddie on 2007-04-02 02:45:06 +0000

Good plugin, except that it only works with my posts, it does not work with my pages. Any ideas on how to fix that?

The theme I am using, should it matter, is – Andreas01-12.

Thanks in advance, hope you can shed some light on yhis problem

Comment by Dave on 2007-04-03 00:57:06 +0000

I have my WP blog set up in a subdirectory like Kristin, and tried installing the plugin both before I saw her tip, and after making her suggested adjustment, and neither time it has worked.

This is a plugin I *really* want for my readers. Any help would be appreciated!

Comment by Ferdy on 2007-04-04 00:28:49 +0000

Eddie (19), the problem is within Andreas theme, it uses different DIV containers. Try using “post” DIV instead of “content”, although it will only change post’s font size.

Comment by Ferdy on 2007-04-04 00:32:11 +0000

Dave (20), check the contents of the /wp-content/plugins/wp-chgfontsize/ directory. You must see 6 files. And remember that the subdirectory name (/plugins/wp-chgfontsize) is case sensitive.

Comment by Ralev on 2007-04-07 18:27:17 +0000

I’ve just installed the plugin and it works fine, thank you Rodenas 🙂

have a nice Easter!

Comment by Able-Mart.com on 2007-04-22 10:00:26 +0000

Unlike your blog, it only changes the size of the posts on mine. The sidebar remains the same size?

Comment by Ferdy on 2007-04-22 12:18:58 +0000

Able-Mart, try using “wrap” instead of “content” as the DIV Base element.

Comment by UrbanMonk on 2007-05-29 12:07:44 +0000

Hi, for some reason its not showing up on my list of plugins, even though I’m pretty sure I uploaded it correctly. Any ideas? Thanks!

Comment by UrbanMonk on 2007-05-29 12:09:39 +0000

Oops! Sorry I’m a retard! It works now!

Comment by Mosey on 2007-06-13 14:50:00 +0000

I love the idea of this plugin! 😀 I’ve been using another javascript to achieve the same effect but a plugin is of course a much better option! Is there any potential release date for the widgetised version of the plugin please? Thanks!

Comment by Ferdy on 2007-06-14 00:52:21 +0000

Mosey, my hope is to start working on the widgetised version in July.

Comment by Dave on 2007-07-11 01:17:38 +0000

This is an update to comment #20 which I left in early April. After upgrading to WP versions 2.2.1, I tried this plugin again, and it installed perfectly.

Comment by Daniel (Aypeus) on 2007-07-20 21:05:54 +0000

Hi. A question and a sugestion. Making this a widget would make this plug-in one of the best ones. I wonder can the “code” be pasted in a text widegt and still function?

If anyone knows anything feel free to contact me, msn or email; aypeus@aypeus.org

Thx for creating this, your time reading this 🙂

Regards, Aypeus (Daniel)

Comment by Ferdy on 2007-07-22 22:52:17 +0000

Daniel, I don’t know if pasting the code in a text widget will work. I suggest you to wait 2-3 weeks more, as actually I’m working in the widgetized version.

Comment by bev on 2007-08-19 04:05:57 +0000

It seems to be with just my installation, but I keep getting unsightly link borders around the images when I put it on my blog. Other blogs I’ve looked at who have this plugin installed DON’T have this problem, so I am not sure why this is happening. Does anyone by any chance has any suggestions? (I have removed the code from my sidebar in the meantime due to this issue. Not really sure if I can add a border=0 anywhere to fix it…

Comment by Ferdy on 2007-08-21 23:41:02 +0000

bev, just modify your css file and add something like this:

#chgfontsizeoptions a, #chgfontsizeoptions a:visited, #chgfontsizeoptions img {

border: none;

}

Comment by bev on 2007-08-22 03:40:35 +0000

Thank you, Ferdy! I’ll go and add that to my CSS stylesheet now. Thanks for helping out 🙂

Comment by Steve on 2007-08-27 21:46:24 +0000

Hi Ferdy- Terrific plugin… installed fine and works effectively, but one question: The first time someone clicks the + size to enlarge, the font jumps to GIANT size, 24 point or something. Works normally after the first time. I’ve limited it to 14 pixels, but it still does the same. Any ideas? Thank you for your time, and a great plugin.

Comment by Ferdy on 2007-08-28 01:25:36 +0000

Steve, I’m not able to reproduce the problem. Which OS + browser + version are you using?

In the meantime, I’ll do some tests with several configurations trying to reproduce it.

Comment by Steve on 2007-08-28 02:52:09 +0000

Hi Ferdy- It happens with both IE6 and Firefox for me, which is strange. I’ll try it on some other computers and browsers. If you haven’t reproduced it, that’s good news. I’m using the Cutline theme and WP 2.1. Thanks for the reply and great plugin!

Comment by ppip on 2007-09-04 06:22:42 +0000

Hi, I came with the same problem: with first click on A+ image, it jump to GIANT font size. but after the first click, it works fine. (I test it on FF2 and IE7，IE6 on Windows XP)

MY SITE: http://www.happysky.org

(It’s in Chinese but you can see the plugin on the top)

Comment by ppip on 2007-09-04 07:21:09 +0000

OK, this is the solution:

Change the line 256 in wp-chgfontsize.php form

echo " chgfontsize_font_size = getCookie('wp-chgfontsize');\n";

into

echo " chgfontsize_font_size = Number(getCookie('wp-chgfontsize'));\n";

Comment by Ferdy on 2007-09-06 02:52:44 +0000

Steve, the new version 1.2 solves your problem.

ppip, thanks for the solution. I just updated the pluggin to version 1.2 with the corrected code.

Comment by bluedogranch on 2007-09-21 18:36:50 +0000

I’d like to get to be able to use the font size changer at the end of each wordpress post, (in addition to in my sidebar), and while I have php code execution enabled and working for each post, the images for the font size don’t display. Would this seem to be an issue with images inside posts rather than an issue with the font size php code? Thanks for any ideas?

Comment by canarkadaş on 2007-09-23 19:06:08 +0000

Thanks..

[…] Açıklamalı 232 WordPress eklentisi (Agu. 15, 2007 !!) (WordPress plugin list),[…]

Comment by koz on 2007-10-02 11:52:05 +0000

Hi !

I’d love to use your plugin, as some people complain aout the font size of my blog but I don’t even manage to have the function appear…

I tried to put it in a text thing in a widget and it did not work. I later saw you mention that you are working on a widgetized version.

I tried to put it directly in posts but, again, it does not show up.

Where do I screw up ? Do I mention a wrong “div” ?

Comment by koz on 2007-10-02 11:56:34 +0000

Seems I did not filled in all information (intervall, in particular). Now, it’s not showing in the sidebar, ok in the post, but not working yet. Probably my fault. I’ll work on it.

Comment by Erin on 2007-10-23 07:34:04 +0000

Whenever I click the image to change the font size, nothing happens.

Comment by Ferdy on 2007-10-23 18:41:04 +0000

Erin, which is the URL of your site? Have you configured the plug-in at the Admin -> Options page? Be sure to specify the DIV container.

Comment by Erin on 2007-10-25 22:42:29 +0000

Yes I’ve done all that. It’s still not working. I included my url, just click my name.

Comment by Ferdy on 2007-10-26 00:27:09 +0000

Erin, there was a conflict between two javascript function names. I’ve modified the chgfontsize plugin to avoid name duplications with other plugins. Download the new version 1.4 and don’t hesitate to contact me if you still have problems.

Comment by Erin on 2007-10-26 06:48:57 +0000

It still isn’t working for me. I don’t know if it’s something I’m doing or what.

Comment by June on 2007-10-27 11:14:50 +0000

I installed the plugin but obviously am missing font size background. My style sheet has defined as 62.5% so I put that as the default size – then picked 40 as min and 150 as max with 6 intervals. The pages showed up in tiny type and clicking on the display showing in the sidebar did nothing. I had to disable the plugin so the pages would be readable again. Please point me somewhere so I can learn how to set this up. Thanks.

Comment by Ferdy on 2007-10-28 23:36:01 +0000

Erin, sorry to say this, but I believe the plugin is not compatible with the theme you’re using. I have found lots of “content” DIVs on your main page, so the javascript function doesn’t know which one must change.

Comment by Ferdy on 2007-10-28 23:41:39 +0000

June, I have tested on my local machine the same configuration you pointed on your comment and it has worked for me. So I don’t know where is the problem. If you try it again, just drop me a line via the comment page and I’ll watch your site to figure out what is happening.

Comment by Jérôme on 2007-11-02 13:38:22 +0000

hi, good plugin for the accessibility.

but the plugin doesn’t work in my website. how to configure it?

I have wordpress 2.3 and many themes widget ready

thanks for your help. i need your plugin for my readers

Comment by Ferdy on 2007-11-02 14:04:13 +0000

Jéròme, at the wp-chgfontsize options page, change the DIV element value to “wrapper” or “content”. Hope this helps.

Comment by Jérôme on 2007-11-02 14:36:02 +0000

Very thanks for you help. The problem is resolved.

Thanks for your speed answer. My frend who write with me on the blog have a low vision. your plugin give the blog easy readable for him.

thanks again.

Comment by Jérôme on 2007-11-06 01:18:39 +0000

Hi Ferdy,

i have a new problem on my new blog: your plugin doesn’t appear, i have tried to slide the wpchgtfontsize widget in my widget leftbar but your widget is invisible! i have tried to delete and reinstall him but the problem is the same.

Comment by Ferdy on 2007-11-07 00:49:42 +0000

Jérôme,

Check the contents of the /wp-content/plugins/wp-chgfontsize/ directory. You must see 6 files. And remember that the subdirectory name (/plugins/wp-chgfontsize) is case sensitive.

Comment by Dario on 2007-12-09 20:24:54 +0000

I keep getting the following error:

chgFontSize_getCookie is not defined

I’ve changed a couple of thing but I haven’t been able to fix it.

Comment by Dario on 2007-12-09 20:25:12 +0000

Oh.. I’m using the latest version. 1.4

Comment by Ferdy on 2007-12-09 22:36:46 +0000

Dario, which is the url for your site? I’ll check what’s happening.

Comment by Dario on 2007-12-10 14:25:46 +0000

http://www.natoura.com

Comment by Ferdy on 2007-12-10 22:41:05 +0000

Dario,

The problem resides in your wordpress header file, because the main javascript file is not loaded.

Check you header.php file to see if there is an statement that contains . If you don’t find this statement, add it at the end of the file.

Another option could be adding manually the next statement:

http://www.natoura.com/natouraW/wp-content/plugins/wp-chgfontsize/wp-chgfontsize.js

Hope this helps!

Comment by Dario on 2007-12-11 01:33:27 +0000

Thanks a lot, I was able to figure it out, thanks to your help.

Comment by http-jkwasn01.myid.net- on 2007-12-17 19:41:50 +0000

Hi Ferdy,

When you increase or decrease the text size it only seems to affect the ‘Posted in’ and not the actual post.

http://blog.yantotc.com/

Any ideas?

Thanks

Josh

Comment by Ferdy on 2007-12-17 20:07:22 +0000

Josh, at the Font size options page, change the DIV Base Element from “content” to “container” or “wrapper”.

Comment by http-jkwasn01.myid.net- on 2007-12-17 20:59:43 +0000

Both container and wrapper still work like content (just resizes the ‘Posted in’… I viewed the source, and the text is within the wrapper, container and content tags…

Anymore ideas?

Thanks

Josh

Comment by Ferdy on 2007-12-18 02:15:46 +0000

Josh, the problem is that the .entry and .post h2 classes, among others, specifies the font size in pixels, so they override the font size of the content, container and wrapper classes.

The only solution I see is not specifying the font size in pixels in these “low level” CSS classes. I suggest you to use percentages instead. If not, I’m sorry, but this pluggin will not work for you.

Comment by http-jkwasn01.myid.net- on 2007-12-20 16:32:29 +0000

I removed the font size tags from those classes and it works!

Thanks for your help Ferdy!

Comment by Caroline on 2007-12-22 00:23:22 +0000

Hi, I hate to be a bother…I seem to have the same question as a lot of others, but I’ve not been able to make their solutions work. Clicking on the icons (I’m not using the text) just doesn’t do anything. I’ve tested with Firefox and IE7. I believe “content” is the correct DIV tag to use, and it doesn’t appear multiple times on the site. I’ve removed any references in my CSS to font sizes according to pixels or em. In the config panel, I’ve tested it in ems, pixels, and percentage with no effect, small intervals, huge intervals, etc. I know that the plugin, consisting of 4 gif files, 1 javascript, and 1 php file, are in the right directory (all lowercase: …/wp-content/plugins/wp-chgfontize). I’m really at a loss, and hope that it’s something small I’m missing, as opposed to something wrong with my theme.

Comment by Eme Navarro on 2008-01-06 20:01:01 +0000

Hello: great pugin and very thanks for do it. I tried to install on a wordpress theme in a Intranet. This plugin it’s very important for my readers. I have been many troubles trying the installation

(only works on the side bar), but finally I find the DIV tag : “main” in more themes works very well

Very thanks Ferdy

(I beg your pardon for my english)

Comment by Katie Cummings on 2008-01-10 20:29:03 +0000

Where in my single post php file do I add the code for this plugin if I want it to appear in the upper right hand corner of each post? I’ve tried it in several places, but it ends up right next to the author name… I wouldn’t mind if it was on the same line, just aligned right. Please help.

Katie

Comment by Ferdy on 2008-01-12 23:43:48 +0000

Caroline, at the wp-chgfontsize options page, change the DIV element value to “center”, the min font size to 80, the max font size to 120, and the default font size to 100. Hope this helps.

Comment by Ferdy on 2008-01-12 23:44:40 +0000

Katie, I need to check the single php file. Please, send me this file.

Comment by Morgan on 2008-01-31 21:36:00 +0000

I’m using the same theme as used on this weblog, or so it appears. Latest version of WP running, but however I do have some other plugins up. I deactivated them all, but still wp-chgfontsize is not working. I’m using the widgetized version. Subfolder has correct name, 6 files. What is the div you are using because I cannot seem to figure out which one i need (currently I have entered page, but I already tried sidebar and content). The plugin just does not show up (the widget). What am I doing wrong? Thx!

Comment by Ferdy on 2008-02-01 00:43:15 +0000

Morgan, your div is correct, but seems that you didn’t specify the min, max, interval and the default font size at the pluggin options panels. Check the values and try again.

Comment by Sally on 2008-02-02 01:06:26 +0000

All I see in my widget box is “?a-??A+?

Comment by Ferdy on 2008-02-02 11:20:16 +0000

Sally, change the DIV element from “left” to “page” or “center-widget”.

Also, there is a bug in this version of the plugin and it only works with DIVs that are ID elements. So, in order to work properly with your theme, change your DIV element (instead of using div class=”page”, you must use div id=”page”). Or wait until I release a new version of the plugin (hope it will be next week).

Comment by Promecius on 2008-02-13 05:29:54 +0000

This doesn’t work on my IE7, but it does work in Firefox and Opera. Have you any idea what can cause this and if there is a solution?

Comment by cartmanxxl on 2008-02-17 10:19:38 +0000

first I’m impressed with the effort you put in this awesome plugin… thanks

I hope you can help me sort out my problem; the plugin used to work like a charm on many themes which I used but on this one http://www.fulham.pl it distorts the layout (sidebar); I wonder why is this happening and how can I correct this; div is content (tried wrap, wrapper and nothing happens); ty in advance

Comment by Jonathon on 2008-02-20 21:49:39 +0000

Non-Constant Intervals:

Instead of setting min, max and interval, can I list my desired font sizes: 11, 12, 13, 15, 19, 23?

Comment by kimsch on 2008-03-14 17:23:24 +0000

I can’t seem to get this to work in ie7 either, it works fine in Firefox 2. The drop down box works, the default button works, but no changes to the font size in the posts work in IE.

Comment by songdogtech on 2008-04-01 21:14:52 +0000

Hello, This plugin works great for WordPress 2.5. I’m wondering if you want to release the the bare bones code (with comments to be able to select the default font size and other options) for use on a site that is not based on WordPress? I’d like to use it on other sites, and have found that other font resizers just don’t work that well )and don’t have a default size control, either.) – Thanks, Mark

Comment by Rajesh on 2008-04-16 06:52:59 +0000

Thanks a ton. I was looking for this for quite sometime!

Comment by PNOOZ on 2008-04-16 23:44:12 +0000

I too am experiencing functionality issues with IE.

Tested with (Windows XP OS):

Opera 8.5x and 9.2x – both work great.

Firefox 1.5 and 2.x – both work great.

Safari 3.x – works great.

IE 5.5, 6.x and 7.x – none work at all.

I’ve tried all variations of available options (div element, units, display, etc.) with no success.

I love the idea behind this plugin and appreciate the efforts of the author and would love to be able to offer to my visitors, but am afraid that it will cause too much confusion amongst the users of the most popular browsers (IE).

Thanks, I would greatly appreciate any feedback as to a workaround or fix.

Comment by Ferdy on 2008-04-17 00:25:40 +0000

PNOOZ, I’ve tested the plugin with IE (all versions) and works well in some sites (for example, in this blog) and doesn’t do anything in others. Actually, I don’t have a fix for this issue, I need to investigate what’s wrong.

Comment by Ferdy on 2008-04-17 00:40:29 +0000

songdogtech, the code is released under the GPL. So you can modify it if you want. But if you just need to use it without any modification, you can download the code, and upload the wp-chgfontsize directory to your site. Then add the following code to your pages:

`