Fixed Widget for WordPress

This page is also available in German.

Use the Fixed Widget for WordPress plugin to create sticky widgets that stay in the visible screen area even when users scroll your website up or down. Sticky widgets are noticed by visitors and can get a significantly higher click-through rate. Therefore, this feature is especially useful for ads or other items that visitors should ideally interact with.

Please note that there are more positions and options to create fixed ads in the Sticky Ads add-on.

Usage

This manual will show you how to create sticky widgets in WordPress. The basic requirement for this extremely effective conversion booster is the free plugin Fixed Widgets for WordPress. You can download and install it like any other WordPress plugin.

Fixed Widget for WordPress Plugin

Requirements:

  • jQuery 1.7 is required, jQuery 1.8.3 (or later) is recommended
  • No JavaScript errors caused by other plugins and scripts
  • The header.php and the footer.php files need to contain the functions wp_head() and wp_footer()
  • Widgets must have an ID attribute
  • The page does not use AMP

After activating the plugin, navigate to Appearance > Widgets. Open the widget that you want to fix to the screen when someone scrolls your website. Enable the Fixed widget checkbox to active the sticky function for it.

Fixed Widget for WordPress plugin

Save the changed widget settings and reload your frontend to see the result.

Additional Options for Fixed Widgets

There are some additional options and advanced settings of Fixed Widgets for WordPress.

+–How to disable the Fixed Widget Plugin on mobile devices?

On the settings page, you can find two options to disable fixed widgets on mobile devices: “Disable Width” and “Disable Height”. Both work similarly. If the browser width or height is less then or equals a specified value, the sticky function will be disabled. In the same vein, you can also use the display and visitor conditions of Advanced Ads to target specific user groups with your fixed widget.

Sticky Widgets for WordPress
Use the options Disable Width/Height to disable the Fixed Widget Plugin on mobile devices
+–Is it possible to make a widget not sticky anymore before the comments section or any other element?

Yes, it is possible to stop the sticky behavior at a specific point. You have to know the ID of this HTML element. The fixed widget will stop being sticky at the beginning of this element. To learn how to get this ID, let’s take a look at a simple HTML page structure in WordPress:

<div class="content">
  <div class="article"></div>
  <div class="sidebar">
    <div class="q2w3-fixed-widget"></div>
  </div>
  <div id="comments" class="comments-section"></div>
</div>

If you want to unfix the widget when it reaches the comment section, you will need to identify the ID of the comments block. Take a look at the page structure above, it is “comments” (id=”comments”). Copy this ID and paste it into the “Stop ID” field in the plugin settings. You can use any existing HTML element for it or you create your own in your theme.

+–Is it possible to fix multiple widgets?
Yes, it is possible to fix more than one widget even if they are located in different sidebars. Just enable the Fixed Widget checkbox of additional widgets that should behave sticky.

Troubleshooting

There are several reasons why the Fixed Widget for WordPress Plugin doesn’t work.

  • Javascript errors on the website. Commonly they are caused by buggy plugins. To resolve this, check the console of your browser. If you find any errors, try to locate them and fix their source or contact the plugin or theme developers.
  • The functions wp_head() and wp_footer() are not present in the template. Check the header.php and footer.php files of your active theme.
  • Conflicts with other plugins and scripts
  • Incompatibilities with your CSS
+–The Fixed Widget plugin doesn’t work on my theme

The most common cause of the widget not being fixed is that the widgets are missing an ID attribute. If it doesn’t help to enable the “Auto fix widget ID” checkbox, that you can find in the plugin settings, you need to manually fix it or you ask your theme developer for help.

You can start here: Find the function “register_sidebar” (usually in the theme’s functions.php) and change the “before_widget” parameter.

Your original version may look like this:

register_sidebar( array(
	...
        'before_widget' => '<li class="widget widget-sidebar">',
	...
) );

It needs to get modified like this

register_sidebar( array(
        ...
	'before_widget' => '<li id="%1$s" class="widget widget-sidebar">',
	...
) );
+–How to prevent overlapping with the footer

Navigate to your WordPress dashboard and open the Fixed Widget options (Appearance > Fixed Widget Options). Here you can define the top and bottom margins. Set the bottom margin value greater or equal footer height.

If your footer height is changing from page to page it is better to use the “Stop ID” option and provide the HTML tag ID. The position of that HTML element will determine the margin-bottom value. For example, let’s take the Twenty Sixteen default theme. The theme’s footer container has an id=”colophon”. In the “Stop ID” option field, you just need to insert “colophon” without any other symbols!

+–The fixed widget jumps when scrolling down

When the plugin is already working and your widget is fixed, but you notice some glitches like jumping, overlapping, or misplacement, check your CSS files. The source of almost all jumping issues is the rule applied to the widget’s container:

position: relative;

Replace it by using

position: static;

+–The fixed widget content becomes smaller

When your CSS uses relative padding like padding: 2%; then it might increase as soon as the widget becomes fixed. The solution is to use absolute padding, e.g., padding: 10px;

+–Since the Fixed Widgets for WordPress plugin is activated, my search box and other forms stopped working
Try to disable the “Refresh interval” option. Set it to “0”, please.
+–The Fixed Widget Plugin causes my images to stop loading

To fix this, please, try to enable/disable the “Use jQuery(window).load() hook” option.

+–Why is the plugin not working in Chrome (and other Webkit-based browsers)?

Check your CSS files for these two CSS rules:

  • webkit-backface-visibility:hidden;
  • webkit-transform: translate3d(0,0,0);

If you found them, disable them and check the result.

Resources