How to change a markup with a specific class ?

Hi,

I would like to know how to modify a markup attribute for a specific class only, but apparently you can't do it with beans_replace_markup().

For instance, I don't like the UIKit dropdown behaviour (delays), so I need to add "{remaintime: 0, hoverDelayIdle: 0}" to the data-uk-dropdown attribute for parent menu items, and PARENT ONLY.

So, how could I change beans_menu_item markup ID with "uk-parent" class only ?

(I don't want to override start_el function in walker.php, it's too big)

Thx, Yan.

• Enable Dev Mode in Admin -> Themes -> Settings.
• Then, inspect with your Browser the data-markup-id to the element you want to replace the attribute.

Here's an example of usage, inspecting this markup:

<ul data-uk-dropdown="{remaintime: 0, hoverDelayIdle: 0}" data-markup-id="beans_example_markup_id">
  ...
</ul>

The markup ID is beans_example_markup_id. Let's modify it:

// add a value `red` to the attribute `class`. 
beans_add_attribute( 'beans_example_markup_id', 'class', 'red' );

// Replace any value that exist in the attribute `class` with value `blue green`. 
beans_replace_attribute( 'beans_example_markup_id', 'class', 'blue green' );

// add a value `yellow` to the attribute `class`. 
beans_add_attribute( 'beans_example_markup_id', 'class', 'yellow' );

// Replace any value that exist in the attribute `data-uk-dropdown` with value `doSomething`. 
beans_replace_attribute( 'beans_example_markup_id', 'data-uk-dropdown', 'doSomething' );

The output now will be:

// class `red` is missing because the attribute was replaced later with another value.
<ul class="blue green yellow" data-uk-dropdown="doSomething" data-markup-id="beans_example_markup_id">
  ...
</ul>

Hi Joseph,

Thanks for your reply, but the problem is that I target 'beans_menu_item' (markup ID for every menu item, parent or not), and when I use beans_replace_attribute(), it adds 'data-uk-dropdown' to non-parent items, which didn't have the attribute before.

I would like to change the attribute for parents only (existing attribute with value = '').

Hello again,

There is a hack for this. By default only parent items has that attribute. We can use a filter to change the data-uk-dropdown only on beans_menu_item elements that the attribute is declared and not on non-parent elements.

add_filter( 'beans_menu_item_attributes', 'example_replace_item_attribute' );
/**
 * This filter will replace `data-uk-dropdown` only on elements that currently exists. (parent items only)
 */
 function example_replace_item_attributes( $attributes ) {

    // This will run only if attribute is set.
    if ( beans_get( 'data-uk-dropdown', $attributes ) ) {
      $attributes['data-uk-dropdown'] = 'your value'; // this will replace the initial value.
    }

    return $attributes;

 }

Happy coding...

Hey,

Thanks, brilliant !

I just had to use a strict comparison because the 'data-uk-dropdown' is defined for parents, but the value is an empty string. Now it works perfectly 🙂

So the final code is :

add_filter( 'beans_menu_item_attributes', 'example_replace_item_attribute' );
/**
 * This filter will replace `data-uk-dropdown` only on elements that currently exists. (parent items only)
 */
 function example_replace_item_attributes( $attributes ) {

    // This will run only if attribute is set.
    if ( null !== beans_get( 'data-uk-dropdown', $attributes ) ) {
        $attributes['data-uk-dropdown'] = 'your value'; // this will replace the initial value.
    }

    return $attributes;

 }