Possible to disable all UIkit assets?

I was wondering if it was possible to disable all use of UIkit within beans in a simple manner other than creating a new framework and replacing uikit in its entirety?

I forgot to add i have already tried using

add_filter( 'beans_uikit_enqueue_scripts', '__return_false' );

but this doesnt seem to work.

Hey Gareth,

Of course it is possible, pretty much everything is possible with Beans 🙂 If you want to remove all UIkit components Beans load by default, you may add beans_remove_action( 'beans_enqueue_uikit_components' ); in your child theme functions.php.

Have fun,

Hi Thierry,

Thanks for that im sure i tried that before as well and it didnt work?? but its working now so perfect thank you.

Now this is maybe a more complicated question, i need to change the whole layout grid structure as i love beans but instead of uikit am using mdl and its flex grid structure is very different to uikits.

At the moment just to get things done i have made a copy of the api>layout>functions.php and have been modifying it to my needs. Is there a good way of doing this from a child theme?

Hi Gareth, do you need to change the html strucutre and attribute? If yes, could you post an example of the final HTML you are looking for?

Thanks,

Hi Thierry,

Im looking at overriding the function beans_get_layout_class( $id ) {}, Uikit uses a 10 column grid whereas MDL uses 12 columns.

A standard uikit layout might be

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

With MDL it is

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col">...</div>
    <div class="mdl-cell mdl-cell--6-col">...</div>
</div>

MDL also uses offset and order there are no push pull classes.

mdl-cell--N-offset - Adds N columns of whitespace before the cell

mdl-cell--order-N - Reorders cell to position N

is it possible to override this in a child theme?, its just that in normally as long as there is a check to see if the function exists then you can override that function in your child theme just by creating a duplicate of it in your child themes functions php but in this instance there isnt 🙁

Hey Gareth,

Just a few thoughts:

1. It is very easy to extend UIkit columns in your child theme style.less as Sascha explains here.
2. For more advance grid, UIkit Dynamic Grid is quite powerful and might help (you have to enqueue the grid add-on component to use it, see an example here).
3. If you want to overwrite beans_get_layout_class(), use the beans_layout_class_{$id} filter as per the example bellow.

// Replace UIkit grid class with mdl.
beans_replace_attribute( 'beans_main_grid', 'class', 'uk-grid', 'mdl-grid' );

// Modify the grid for content div.
add_filter( 'beans_layout_class_content', 'example_layout_class_content' );

function example_layout_class_content( ) {
  return 'mdl-cell mdl-cell--6-col';
}

// Modify the grid for sidebar primary aside.
add_filter( 'beans_layout_class_sidebar_primary', 'example_layout_class_sidebar_primary' );

function example_layout_class_sidebar_primary( ) {
 return 'mdl-cell mdl-cell--6-col';
}

// Modify the grid for sidebar secondary aside.
add_filter( 'beans_layout_class_sidebar_secondary', 'example_layout_class_sidebar_secondary' );

function example_layout_class_sidebar_secondary( ) {
 return 'mdl-cell mdl-cell--6-col';
}

The snippet above sets everything to mdl-cell mdl-cell--6-col but you can change it according to your needs.

Happy coding,

Hi Thierry,

Apologies for the late reply, thank you for your assistance with the grid have managed to put something together that seems to work but still got a number of other bits and pieces to sort out :).

One thing above all else that i seem to be having dificulty with is creating a cover background image using the featured image for posts on the blog page and single pages.

have attached a screenshot, of what i mean.

Imgur image link.

as you can see at the moment it repeats for all posts or not at all.

the below code doesnt seem to work

beans_remove_action( 'beans_post_image' );

beans_wrap_markup( 'beans_post_header', 'post_featured_image', 'div', array('class' => 'featured_image_container',) );

add_action( 'post_featured_image_append_markup', 'post_featured_image__item');

function post_featured_image__item() {

 if ( ! has_post_thumbnail() || ! current_theme_supports( 'post-thumbnails' ) ) {
    return false;
 }

 global $post;

 $edit = apply_filters( 'beans_post_image_edit', true );

 if ( $edit ) {

    $edit_args = apply_filters( 'beans_edit_post_image_args', array(
      'resize' => array( 800, false ),
    ) );

    if ( empty( $edit_args ) ) {
      $image = beans_get_post_attachment( $post->ID, 'large' );
   } else {
      $image = beans_edit_post_attachment( $post->ID, $edit_args );
   }

  }

 beans_add_attribute( 'post_featured_image', 'style', 'background: url(' .$image->src. ') center top no-repeat' );

}

but if i do

add_action( 'wp', 'setup_loop' );

function setup_loop() {

  beans_remove_action( 'beans_post_image' );

    beans_wrap_markup( 'beans_post_header', 'post_featured_image', 'div', array('class' => 'featured_image_container',) );

}

add_action( 'post_featured_image_append_markup', 'post_featured_image__item');

function post_featured_image__item() {

 if ( ! has_post_thumbnail() || ! current_theme_supports( 'post-thumbnails' ) ) {
    return false;
 }

 global $post;

 $edit = apply_filters( 'beans_post_image_edit', true );

 if ( $edit ) {

    $edit_args = apply_filters( 'beans_edit_post_image_args', array(
      'resize' => array( 800, false ),
    ) );

    if ( empty( $edit_args ) ) {
      $image = beans_get_post_attachment( $post->ID, 'large' );
   } else {
      $image = beans_edit_post_attachment( $post->ID, $edit_args );
   }

  }

 beans_add_attribute( 'post_featured_image', 'style', 'background: url(' .$image->src. ') center top no-repeat' );

}

it sort of works but i only get the one featured image repeated for all posts on the blog page and even then it doesnt always work.

Any help or advice is much appreciated.

Regards

Gareth