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:

   Select code
   HTML:

   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:

   Select code
   JAVASCRIPT:

   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:

   Select code
   JAVASCRIPT:

   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:

   Select code
   HTML:

   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:

   Select code
   HTML:

   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:

   Select code
   CSS:

   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!