How to fix widget do not fixed ?

I recently installed the Q2W3 Fixed Widget plugin. To fixed some widget on my page. But I have encountered this plugin error does not work on the theme. Can anyone help me? Thank you!

Hello @vanthoi,

Good news : with Beans, you can, if you want, fix any element of a page without any additional plugin, by applying the sticky component from UiKit to the element (header, sidebar, widget, etc.) you want.

Doing so is quite easy. Let me show you how in three steps, which are :

1. load the appropriate component (in your case, the sticky component) ;
2. identify precisely to which element in your page you want to apply this component ;
3. add the sticky attribute to this element by pointing to the appropriate markup ID.

Please, be sure to enable the dev mode in your WP Dashboard. For this, go to "Appearance-> Settings -> Enable development mode"

• First, load the sticky component

First, you have to load the appropriate component : the sticky component. To do so, open your functions.php file and add this snippet.

add_action( 'beans_uikit_enqueue_scripts', 'mythemeprefix_enqueue_uikit_assets' );

function mythemeprefix_enqueue_uikit_assets() {

      beans_uikit_enqueue_components( array( 'sticky', 'add-ons' );

}

Note that a good practice is to add conditional tags here in order to load the component on pages where this component is used.

• Secondly, identify to which markup in your page you want to apply this sticky behavior

Let's find the element that you want to stick. In your case, it is "some widget", if I read you correctly.

Open Firebug or any Firefox or Chrome tools that let you vizualize the HTML markup of your page. In this screenshot, you'll see what I am talking about. Let say, for instance, that you want to stick the second widget panel in the sidebar. You can see in my screenshot that Beans has generated a markup ID for this widget :

beans_widget_panel[_sidebar_primary][_recent-posts][_recent-posts-7]

This is via this markup ID that you will be able to apply the Uikit component you want to use - the sticky component.

• Finally, add the sticky to the element you've identified/choosen

The Uikit documentation says that :

To create an element that remains at the top of the viewport when scrolling down the site, add the data-uk-sticky attribute to that element.

So, let's do that : let's add the data-uk-sticky attribute to the widget we have choosen in step 2. We can do this easily through the Beans markup ID that we have identified. Add this in your functions.php :

beans_add_attribute('beans_widget_panel[_sidebar_primary][_recent-posts][_recent-posts-7]','data-uk-sticky','top:100');

That's it ! Now you should have a fixed widget when you scroll down. I hope my explanations are clear enough. Do not hesitate to ask more questions if you want, I'll be happy to help you.

Mathieu

First I apologize for this late reply. I have tried adding the code you have posted into the functions.php of the thread. But it made my web site not work. I have enabled developer mode in theme settings. code added

add_action( 'beans_uikit_enqueue_scripts', 'mythemeprefix_enqueue_uikit_assets' );

function mythemeprefix_enqueue_uikit_assets() {

    beans_uikit_enqueue_components( array( 'sticky', 'add-ons' );

}

I was looking for a solution on your suggestion. And I found this article and replaced the code and it worked.

//Enqueue custom assets
add_action( 'beans_uikit_enqueue_scripts', 'introduce_uikit_library_sticky' );
function introduce_uikit_library_sticky() {
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
}

I thank you very much for your enthusiastic help!

Hello,

The error comes form the missing brackets...

beans_uikit_enqueue_components( array('sticky' ), 'add-ons' );

Sorry for the typo !

I'm happy to know that you found my little help useful. 🙂

Mat