This post is also available in: Deutsch
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.
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.
- jQuery 1.7 is required, jQuery 1.8.3 (or later) is recommended
- The header.php and the footer.php files need to contain the functions wp_head() and wp_footer()
- Widgets must have an ID attribute
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.
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.
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.
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.
There are several reasons why the Fixed Widget for WordPress Plugin doesn’t work.
- 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 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">', ... ) );
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!
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 container:
To fix this, please, try to enable/disable the “Use jQuery(window).load() hook” option.
Check your CSS files for these two CSS rules:
If you found them, disable them and check the result.