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.


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


  • 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.

Sticky Widgets for WordPress
Use the options Disable Width/Height 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.

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 id="comments" class="comments-section"></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.

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.

Compatability with WordPress 5.8

WordPress 5.8 introduced a completely new widget editor. In this editor, the Fixed Widget option is only visible to widgets added before the update, but not new blocks added to the sidebar.

We are already working on the compatibility. There is already a solution for it, though.

First, get the ID of the widget from the source code of your website.

Use the Inspector in your browser to find the widget ID. Here “block-8”

Now, enter the widget ID with # before it, in the Custom ID option under Appearance > Fixed Widget Options.

Enter the block ID into the Custom IDs option.

Save the Fixed Widget option and test it in the frontend of your website.

Alternatively, you can go back to the old widget editor by installing the Classic Widgets plugin.


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 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’s container:

position: relative;

Replace it by using

position: static;

There are two possible reasons that can cause the widget size to change when it becomes sticky. Check them in the given order.

1. Please go to Appearance > Fixed Widget Options and disable “Inherit widget width from the parent container”

2. 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;

Please disable the “Refresh interval” option by setting the value to “0”.

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

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.