Best font resizer to use in a wordpress site
I'm re-building a website using wordpress and the client has requested a font resizer in the top left hand side of the page; i.e. the three As where the user can click on each one to get larger/smaller text. Can anyone give advice on the best one to use with or without wordpress? I've tried a plugin for wordpress but it doesn't work with the theme I'm using. I've used other javascript ones but the screen readers seem to be reading some of the javascript code which is annoying for the user. Any advice much appreciated!
Share: 
Any ideas why the plugin you tried doesn't work with your theme? It may be worth persevering with that as I don't think there are that many alternatives out there at the moment. Is it maybe just a case of tweaking the templates?
I would personally prefer to link the user to advice on how to change their browser font sizes themselves - there's been plenty of discussion about the benefits of that approach elsewhere on this forum - but I appreciate that your client may have reasons for wanting that specific functionality.
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
Hi James
Thanks for that. I've contacted the developer re the plugin and they know it doesn't work with all the themes but not sure why and don't at the moment have time to work out the reason for it. I could change the whole theme to one that works but that's quite a lot of work just for that bit of functionality! Particularly as you say it would be good to steer people away from that and get people to change it themselves. I think a link to an accessbility page and how to change the sizes should work if all else fails!
Ali
Share:
What's the name of the plug-in? I may have some time to look at it and try to see what the problem is. Would be great if they could get it working.James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
it's called font-resizer. when i looked for it on the wp plugins i can't find it any more; maybe the developers have taken it off as they're working on it? the link to their site is:
http://www.cubetech.ch/page/font-resizer
i have the files though; i can email them to you if that's easier; although there's only one file really the rest are screenshots. the code is:
| Code: |
| <?php
/* Plugin Name: Font Resizer Plugin URI: http://www.cubetech.ch/products/font-resizer Description: Font Resizer with jQuery and Cookies Author: cubetech.ch Version: 1.1.7 Author URI: http://www.cubetech.ch/ */ # Add the options/actions to WordPress (if they doesn't exist) add_action('admin_menu', 'fontResizer_addAdminPage'); add_option('fontResizer', 'body', '', 'yes'); add_option('fontResizer_ownid', '', '', 'yes'); add_option('fontResizer_ownelement', '', '', 'yes'); add_option('fontResizer_resizeSteps', '1.6', '', 'no'); add_option('fontResizer_cookieTime', '31', '', 'no'); # Register an administration page function fontResizer_addAdminPage() { add_options_page('font-resizer Options', 'font-resizer', 8, 'font-resizer', 'fontResizer_aMenu'); } # Generates the administration menu function fontResizer_aMenu() { ?> <div class="wrap"> <h2>font-resizer</h2> <form method="post" action="options.php"> <?php wp_nonce_field('update-options'); ?> <table class="form-table"> <tr valign="top"> <th scope="row">Basic Settings</th> <td> <label for="fr_div"> <input type="radio" name="fontResizer" value="body" <?php if(get_option('fontResizer')=="body") echo "checked"; ?> /> Default setting, resize whole content in body tag (<body>All content of your site</body>) </label><br /> <label for="fr_div"> <input type="radio" name="fontResizer" value="innerbody" <?php if(get_option('fontResizer')=="innerbody") echo "checked"; ?> /> Use div with id innerbody (<div id="innerbody">Resizable text</div>) </label><br /> <label for="fr_div"> <input type="radio" name="fontResizer" value="ownid" <?php if(get_option('fontResizer')=="ownid") echo "checked"; ?> /> <input type="text" name="fontResizer_ownid" value="<?php echo get_option('fontResizer_ownid'); ?>" /><br /> Use your own div id (<div id="yourid">Resizable text</div>) </label><br /> <label for="fr_div"> <input type="radio" name="fontResizer" value="ownelement" <?php if(get_option('fontResizer')=="ownelement") echo "checked"; ?> /> <input type="text" name="fontResizer_ownelement" value="<?php echo get_option('fontResizer_ownelement'); ?>" /><br /> Use your own element (For example: for a span with class "bla" (<span class="bla">Resizable text</span>), enter the css definition, "span.bla" (without quotes)) </label><br /> </td> </tr> <tr valig="top"> <th scope="row">Resize Steps</th> <td> <label for="resizeSteps"> <input type="text" name="fontResizer_resizeSteps" value="<?php echo get_option('fontResizer_resizeSteps'); ?>" style="width: 3em"><b>px</b> <br />Set the resize steps in pixel (default: 1.6px) </label> </td> </tr> <tr valig="top"> <th scope="row">Cookie Settings</th> <td> <label for="cookieTime"> <input type="text" name="fontResizer_cookieTime" value="<?php echo get_option('fontResizer_cookieTime'); ?>" style="width: 3em"> <b>days</b> <br />Set the cookie store time (default: 31 days) </label> </td> </tr> </table> <input type="hidden" name="action" value="update" /> <input type="hidden" name="page_options" value="fontResizer,fontResizer_ownid,fontResizer_ownelement,fontResizer_resizeSteps,fontResizer_cookieTime" /> <p class="submit"> <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /> </p> </form> </div> <?php } # Sort the dependencies function fontResizer_sortDependencys(){ $font_resizer_path = WP_PLUGIN_URL.'/font-resizer/js/'; wp_register_script('fontResizer', $font_resizer_path.'jquery.fontsize.js'); wp_register_script('fontResizerCookie', $font_resizer_path.'jquery.cookie.js'); wp_register_script('fontResizerPlugin', $font_resizer_path.'main.js'); wp_enqueue_script('jquery'); wp_enqueue_script('fontResizerCookie'); wp_enqueue_script('fontResizer'); wp_enqueue_script('fontResizerPlugin'); } # Generate the font-resizer text function fontResizer_place(){ echo '<li class="fontResizer" style="text-align: center; font-weight: bold;">'; echo '<a class="fontResizer_minus" title="Decrease font size" style="font-size: 0.7em;">A</a> '; echo '<a class="fontResizer_reset" title="Reset font size">A</a> '; echo '<a class="fontResizer_add" title="Increase font size" style="font-size: 1.2em;">A</a> '; echo '<input type="hidden" id="fontResizer_value" value="'.get_option('fontResizer').'" />'; echo '<input type="hidden" id="fontResizer_ownid" value="'.get_option('fontResizer_ownid').'" />'; echo '<input type="hidden" id="fontResizer_ownelement" value="'.get_option('fontResizer_ownelement').'" />'; echo '<input type="hidden" id="fontResizer_resizeSteps" value="'.get_option('fontResizer_resizeSteps').'" />'; echo '<input type="hidden" id="fontResizer_cookieTime" value="'.get_option('fontResizer_cookieTime').'" />'; echo '</li>'; } # Creating the widget function fontresizer_widget($args) { extract($args); fontResizer_place(); } add_action('init', 'fontResizer_sortDependencys'); # Register sidebar function register_sidebar_widget('Font Resizer','fontresizer_widget'); # Register uninstall function register_uninstall_hook(__FILE__, 'fontResizer_uninstaller'); # This function deletes the options when you uninstall the plugin function fontResizer_uninstaller() { delete_option('fontResizer'); delete_option('fontResizer_ownid'); delete_option('fontResizer_ownelement'); delete_option('fontResizer_resizeSteps'); } ?> |
Share: