![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/2fb12d0889a58edd62d6d5391a2a0635-87a1c39.jpg)
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.
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/2fb12d0889a58edd62d6d5391a2a0635-87a1c39.jpg)
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?
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/2fb12d0889a58edd62d6d5391a2a0635-87a1c39.jpg)
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 π
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
Hey Gareth,
Just a few thoughts:
- It is very easy to extend UIkit columns in your child theme
style.less
as Sascha explains here. - 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).
- If you want to overwrite
beans_get_layout_class()
, use thebeans_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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/2fb12d0889a58edd62d6d5391a2a0635-87a1c39.jpg)
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