Adding text resizing with cookie (old, probably outdated)

Warning: This page is pretty old and was imported from another website. Take any content here with a grain of salt.

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 :-).

  1. Download the script

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

  1. 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:

<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”.

  1. 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:

var ts_styleElement="#wrapper"; // the ID of the content DIV that you want to resize

Change that line to match your main element, eg:

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.

  1. Upload the script to your server

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

  1. Update your theme files

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

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

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

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

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

  1. Optionally add more styling

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

#header #fontsizemenu
{
    padding-top: 2px;
}

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

  1. 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!

Warning: This page is pretty old and was imported from another website. Take any content here with a grain of salt.

Comments / questions

There's currently no commenting functionality here. If you'd like to comment, please use Twitter and @me there. Thanks!

Tweet about this - and/or - search for latest comments / top comments

Related pages