Use our 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.
Table of Contents
How to make elements sticky
This manual will show you how to create sticky widgets in WordPress. This manual will show you how to create sticky widgets in WordPress.
The essential requirement for this highly effective conversion booster is the free plugin Fixed Widgets for WordPress. You can download and install it like any other WordPress plugin.
After activating the plugin:
- Navigate to Appearance > Widgets.
- Open the block you want to fix to the screen when someone scrolls your website.
- Enable the Fix widget checkbox to activate the sticky function for the block.
Tip: if you want to fix multiple consecutive widgets then wrap them using the Group block and apply the Fix Widget option to the group instead of each widget on its own.
Legacy widgets from before WordPress 5.8 show the Fixed widget option in a different position, right below the other options. A stop option is not available here.
Additional Options for Fixed Widgets
Find the general plugin options under Appearance > Fixed Widget Options.
They allow you to set minimum screen width or height before the sticky feature is enabled. You can also define a margin for sticky elements related to the top and bottom of your website.
Finally, you can make any element on your website sticky with the Custom Fixed Elements option as well as any element a stop element.
The Stop Elements option allows you to define an element that pushes fixed elements further up as soon as it reaches them. E.g., you could define that your website footer pushes and fixed elements up so that they don‘t overlap the footer.
The Stop Elements option accepts multiple selectors, though only one of them will work per page.
Custom Fixed Elements
The Custom Fixed Elements option allows you to fix any element on the page. Well, almost any. Fixed Widget can only stick elements to the screen that are not limited by the size of the parent element.
Let’s take a sticky widget as an example. A single widget can be made sticky, which would fix it within the sidebar. As soon as the sidebar ends, the fixed widget would scroll away with the end of the sidebar.
The same applies to sticky elements within other areas on your website. Let’s look at an example from the TwentySixteen WordPress theme.
In the screenshot below, I highlighted the
header element with the ID
#masthead. This element is a child of
div#page, which is stretching over the whole site. So
#masthead would be sticky within that larger element and work as expected.
#masthead has a child element,
div.site-header-main. If you would make this child element sticky, it would only be fixed within
#masthead and therefore scroll away quickly.
Changes in version 6.0.0
Version 6.0.0 of Fixed Widget is a full rewrite of the frontend script. It fixes many edge cases like jumping, reloading, or resizing widgets.
The rewrite also resolves bad Cumulative Layout Shifts.
Enable “Test new version” under Appearance > Fixed Widget Options.
- the frontend script does not need jQuery anymore
- removed unneeded options that previously helped resolving edge cases
- “Stop Elements” and “Custom Fixed Elements” now accept any selector, including IDs, Class, and Type selectors.
- works with the widget block editor introduced in WordPress 5.8
- added “stop” option to widget blocks
Please test and let us know if you discover any issues.
Before you troubleshoot, make sure to enable Test new version under Appearance > Fixed Widget Options to see if our in version 6.0.0 rewritten logic is already solving your issue.
There are several reasons why the Fixed Widget for WordPress plugin doesn’t work.
- The functions
wp_footer()are not present in the template. Check the
footer.phpfiles of your active theme.
- Incompatibilities with your theme’s CSS
- Another plugin, theme, or custom code introduces sticky behavior as well, which causes a conflict with Fixed Widget. Remove that other feature to solve it.