Creating My Accessibility Button

If you’ve visited my site recently and wandered how I set up my new accessibility button this is the post to read!

Ultimate Floating Widgets

I found a plugin names “Ultimate Floating Widgets – Make popup sidebars” that does exactly what it sounds like.

After installing this plugin you’ll wind in your admin sidebar “Ultimate floating widgets” where you can begin setting up your new accessibility button.

Then click “Create a new widget box”.

Next you’ll want to choose the name and position of your new widget box.

And don’t forget to set the width and height of the box if you want a good looking menu.

And finally you can customise your button (I myself used “fas fa-wheelchair” as my open icon.

WP Dark Mode Ultimate

If you just want a dark mode button I recommend just getting “WP Dark Mode” but if you want the text size switch you’ll need their pro version “WP Dark Mode Ultimate”.

After installing it you don’t need to set up the floating button (and in fact should disable it in the plugins settings).

Instead you just add the “WP Dark Mode” widget (not “Dark Mode Switch”) to your new widget area.

Here you pick your new switch (the last two are both a text size and dark mode switch in one style).

Then simply choose your switches alignment and update your widgets.

GTranslate

Now to get the handy little translation flags you’ll need the plugin “Translate WordPress with GTranslate“.

After installing and activating the plugin you can find it under “Settings > GTranslate”.

Here you can style the translator in all sorts of ways.

Set the look to “Flags”, Flag size to “32px”, flag style to “2D (.svg)” and then choose the languages to those you want.

Then simply click “Save Changes”.

Now that’s set up you can simply add a “Shortcode” block to your widget area with this shortcode inside it:

[gtranslate]

Now you should have both the accessibility plugins sitting together behind a neat little button.

Styling

If you want to go a step further and copy the exact look of my accessibility box here’s a little bit of “Additional CSS” that I use to style it a bit:

/**
 * Font size toggle styling.
 */
.wp-dark-mode-ignore, .wp-dark-mode-include {
    fill: white !important;
}
div.wp-dark-mode-side-toggle.wp-dark-mode-font-size-toggle.wp-dark-mode-ignore {
    background-color: black!important;
}
/**
 * Centers text and flags
 * in the accessability box.
 */
.ufw_wb_inner {
	text-align:center!important;
}