Title: Accessibility – text resizer
Last modified: May 4, 2019
---
# Accessibility – text resizer
* Resolved [brontedave](https://wordpress.org/support/users/brontedave/)
* (@brontedave)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/)
* Hi
* I need some help including a text resizer into my WordPress site. Widget based
resizers wont work as I am not using traditional blog pages.
* I’m using the twenty seventeen theme (for now) and would like to include the
resizer alongside the main menu.
* Has anyone done this and can offer suggestions / code?
* Many thanks
Dave
Viewing 7 replies - 1 through 7 (of 7 total)
* [Amit](https://wordpress.org/support/users/amitmhr/)
* (@amitmhr)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11491494)
* Hi Dave,
* You can do any changes in your theme by using custom CSS. I will better help
you if i can see your website. Please share the link of your website.
* Thread Starter [brontedave](https://wordpress.org/support/users/brontedave/)
* (@brontedave)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11491528)
* Thats really generous of you [@amitmhr](https://wordpress.org/support/users/amitmhr/)–
thank you.
* My site isn’t live yet but its similar to the twenty seventeen theme demo here
[https://2017.wordpress.net/](https://2017.wordpress.net/)
* I want to add a text resizer on the main navigation line – on the same line as“
Home” “Blog” and “Contact” but on the right hand side (before the Content widget/
down arrow)
* Does that make any sense?
* Thanks again
Dave
* Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
* (@bcworkz)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11494226)
* It depends on what options you have for displaying the resizer without a widget.
I’m guessing either a shortcode or template function call. What’s crucial is
whether the content is echoed out or returned. With a shortcode or returned value,
hook the “wp_nav_menu” filter and inject the function’s returned value within`
` tags just before the closing `` of the passed menu HTML.
* If the template function only echoes, you must use it on the header.php template
right after the nav menu call. Adjust the menu and resizer CSS so they all appear
on one line and appear to be part of the same element group even though they
really are not.
* Thread Starter [brontedave](https://wordpress.org/support/users/brontedave/)
* (@brontedave)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11494814)
* Hi [@bcworkz](https://wordpress.org/support/users/bcworkz/) and thanks for taking
the time to reply :).
* The plugin I want to use does have a shortcode (although I’m not sure what that
is!). You can tell that I’m pretty new to WP and more so to CSS/PHP.
* If I have the shortcode, where do I “hook the “wp_nav_menu” filter and inject
the function’s returned value within `` tags just before the closing `` of the passed menu HTML”. Is that within the stylesheet or the php code?
* Sorry for being a bit dumb.
* Cheers
* Dave
* PS I’m using the Zeno Font Resizer
[https://wordpress.org/plugins/zeno-font-resizer/](https://wordpress.org/plugins/zeno-font-resizer/)
and the Twenty Seventeen Theme
- This reply was modified 7 years ago by [bcworkz](https://wordpress.org/support/users/bcworkz/).
Reason: coded HTML
* Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
* (@bcworkz)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11496318)
* No worries, we all had to start out the same way.
* First of all, you should create a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/)
to contain all of your custom work. It protects your work from theme updates.
You’re going to be adding PHP code to functions.php of your child theme. This
may seem like overkill just to stick a widget in the menu. It kinda is, but there
is not a good alternative. The good part is you can use your child theme to add
any other custom code you may find the need for in the future. IME, the more
you learn about this stuff, the more things there are on your site to customize.
* I hope you have some inkling of coding with PHP, or at least have an interest
in learning a little about it. “wp_nav_menu” is a filter hook. Filters and the
closely related “actions” are the principle ways we customize WP using PHP. It
can be a confusing concept, but it’s important to grasp what’s going on. More
on filter and action “hooks” in general: [https://developer.wordpress.org/plugins/hooks/](https://developer.wordpress.org/plugins/hooks/)
The page on filters has a couple examples you can refer to for the basic code
structure. Of course what your code does will be different
* With the “wp_nav_menu” filter, your callback function is passed the HTML for
the nav menu. Use `str_replace()` [PHP function](https://www.php.net/manual/en/function.str-replace.php)
to find `` and replace it with the shortcode output within `` tags,
plus the original `` because we are really inserting, not replacing. Return
the modified nav menu.
* The way to get shortcode output is with something like `do_shortcode('[shortcode]');`
where you place the actual shortcode from the plugin in place of “shortcode”.
In PHP, we use the dot `.` operator for string concatenation, for example
`$
replace = '' . do_shortcode('[shortcode]') . '';`
* BTW, when you post code in these forums, even basic HTML like ``, please
demarcate with backticks or use the code button. Failure to do so either corrupts
some of the code or corrupts the post layout in the forums. I fixed up the HTML
in your previous post to solve layout issues.
* Thread Starter [brontedave](https://wordpress.org/support/users/brontedave/)
* (@brontedave)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11498965)
* Thanks again [@bcworkz](https://wordpress.org/support/users/bcworkz/). I have
lots of homework to do! Really appreciate your guidance.
* Dave
* Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
* (@bcworkz)
* [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11501786)
* Homework indeed. A lot of it is good background information that will serve you
well in the future once you see other things you can improve with your new found
coding powers 🙂 In the end, you’ll find the code you need for this isn’t very
extensive. It’s typical that the final code is much simpler than what it takes
to describe the concept. But you need to grasp the concept to get to the code.
* You’re welcome.
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘Accessibility – text resizer’ is closed to new replies.
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 7 replies
* 3 participants
* Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
* Last activity: [7 years ago](https://wordpress.org/support/topic/accessibility-text-resizer/#post-11501786)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics