Adding text resizing with cookie

Posted on 16 July 2007 at 11:19 UTC, filed under Javascript, Tricks, Usability, Wordpress, disclaimer

In the top right corner of this blog I have placed a small set of links that let you resize the text as it is displayed. It’s easy to use this script on your blog and it lets your visitors resize the text on the blog however they want it. The resizing setting is stored in a cookie, valid for one year, so when the visitor returns, they will see the site as they resized it last.

To add the script you only have to copy one file into your theme folder and add a line of javascript into your theme in an appropriate location. It might look like a lot of steps here, but you’ll see that it’s fairly simple.

  1. Make a backup

    Before you change anything, always make a backup of your theme files and perhaps even of your full WordPress installation. It never hurts to have too many backups :-).

  2. Download the script

    Download the file textresize.js from here. Put it on your desktop or someplace where you can find it.

  3. Check your WordPress theme

    You might be able to skip this step, depending on how your WordPress theme is made. Open your blog in your browser, use “View Source” and take a quick look at the source code (not too long, it could make your head spin). You should find a section pretty much on top which “wraps” your whole site in a “DIV” element. Often it will be called “wrapper”, “content” or “container”. It will look something like this:

    1. <div id="wrapper">

    If you find multiple names that you believe could be the main elements, you might want to try them separately to see which one works best. The default in the code is “wrapper”.

  4. Update the script to match your theme

    If your theme does not use “wrapper” as the ID of the main element, you will need to adjust the javascript file. Don’t worry, it’s not painful :-). Open your copy of “textresize.js” in a text editor like Notepad. You will find the following line near the top:

    javascript
    < view plain text >
    1. var ts_styleElement="#wrapper"; // the ID of the content DIV that you want to resize

    Change that line to match your main element, eg:

    javascript
    < view plain text >
    1. var ts_styleElement="#content"; // the ID of the content DIV that you want to resize

    Save the file before a cat walks across your keyboard.

  5. Upload the script to your server

    Copy the modified file onto your server into the current theme folder.

  6. Update your theme files

    Add the following to your header.php in the bottom of the “head” section:

    1. <script
    2.   src="<?php bloginfo('stylesheet_directory'); ?>/textresize.js"
    3.    type="text/javascript"></script>

    Now add the following wherever you wish to see the resize links:

    1. <script type="text/javascript"><!--
    2.    showReadabilityMenu('Resize text:');
    3.    //--></script>

    I have placed this in my header.php, right after the “searchform” include.

  7. Optionally add more styling

    You can style the line with changes to your CSS file, eg:

    1. #header #fontsizemenu
    2. {
    3.     padding-top: 2px;
    4. }

    This will depend on your theme and on what you want to do to integrate the links.

  8. Test, test, test :-)

    Be sure to test the new functionality in the major browsers. I have tested the code in IE 6.5, IE 7.0, Firefox 2.0 and Opera 9.0. The code depends on javascript. With javascript turned off, the user will not see anything.

Have fun!

There are 2 comments to this post.
  1. colin stone (9 June 2010 at 10:25 pm):

    Hi John. Brilliant script for resizing text. Have you got a script available for the little search box on the top right too?

  2. Is it possible to add more classes to get the text resized?

Feel free to leave a reply to this posting.

Warning! Your comment will be lost if you mistype the spam-test or forget to enter your name or e-mail-address. Copy your comment to the clipboard to be sure.

You may use these tags within your reply: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>