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.
- 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 :-).
- Download the script
Download the file textresize.js from here. Put it on your desktop or someplace where you can find it.
- 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”.
- Update the script to match your theme
- var ts_styleElement="#wrapper"; // the ID of the content DIV that you want to resize
- 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.
- Upload the script to your server
Copy the modified file onto your server into the current theme folder.
- Update your theme files
Add the following to your header.php in the bottom of the “head” section:
- src="<?php bloginfo('stylesheet_directory'); ?>/textresize.js"
Now add the following wherever you wish to see the resize links:
- showReadabilityMenu('Resize text:');
I have placed this in my header.php, right after the “searchform” include.
- 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.
- Test, test, test :-)