Sticky / fixed Widget with WordPress

On some websites it makes sense to keep a certain area visible at all times. How to realise this in WordPress with a plugin is explained in this article.

What is a sticky or fixed widget?

This term sticky or fixed means that a certain element (usually a widget or content block) is always visible to the website visitor in order to attract attention.

This is often seen in advertising or advertising banners. They are of course intended to increase visibility and click-through rates. Such a position can also make sense for newsletter sign-ups or the buy button for a product.

How do I create a sticky Widget with WordPress?

In most cases, there is a plugin for everything in WordPress. This also applies to a fixed widget plugin. Of course, you can also programme the code for this yourself and embed it in the theme. However, this is too difficult for most users and would have to be adapted again for small changes. A plugin is much more flexible.

During my research I came across 3 plugins.

1. Widget Options

This plugin combines many options for influencing widgets:

Specify exactly where and on which pages your widgets should be displayed
Define the visibility on different output devices (desktop, mobile phone, tablet)
Widget displays depending on user status (logged in/logged out, administrator, editor, etc.)
Align the widgets according to your wishes (centered, right- or left-aligned)
Assign CSS or ID classes to the individual widgets in order to address them later via programming
Sticky/fixed widget function (unfortunately only in the Pro version)
Many other options
Here the link to their website

As the “sticky” function is only offered in the paid Pro version, this plugin is out of question for me.

2. Fixed Widget and Sticky Elements for WordPress

This plugin was actually mainly developed for displaying adverts. It is easy to use with virtually no options. Simply tick the box in the widgets and the widget is fixed. There are minor customization options in the settings, all of which are self-explanatory.

For my purposes, the plugin was sufficient at first, but later I realized that when scrolling, the box defined as fixed had no background or was transparent. This naturally resulted in a strange overlay effect.

Sticky area is marked red — Sticky widget marked red

Sticky widget overlay effect — Overlay effect from sticky widget

When I tried to give the box a white background using CSS programming, I failed.

So I looked for another plugin.

3. Sticky Menu (or Anything!) on Scroll

In the end, I found this plugin and stuck with it. It is just as simple as the second one, but you need to have a little knowledge of source code to assign this effect to an element.

In my example, the steps were as follows:

After installing and activating the plugin, I called up the plugin’s settings. The sticky element is defined there under “Basic settings”.

Now I opened my page and clicked with the right mouse button in the area that is to be fixed later.

From the context menu, I selected ” Inspect” (as it is called in Google Chrome).

The source code of the website now appears in a sidebar of the browser.

Find ID of an element in a website — Inspect an element and find the related code in the elements register of Google Chrome

To make sure that I have clicked on the right area, I move the mouse over the lines until the area of the widget is highlighted in color.

In my case, the code <aside … is responsible for this box. Google also shows me the associated style instructions (for ID and class) directly above the element.

Now I look for the abbreviation “ID” and copy the text that is listed in quotation marks. Here it is #custom_html_3.