Home-post page show more mansonry coloumns

Hey Boris,

You can use one of the WordPress template files available to you. In your case, you can add a home.php file to your child theme with the following code:

<?php

// Enqueue the UIkit assets specific to this view.
add_action( 'beans_uikit_enqueue_scripts', 'example_view_enqueue_uikit_assets' );

function example_view_enqueue_uikit_assets() {
  beans_uikit_enqueue_components( array( 'grid' ), 'add-ons' );
}

// Force no-sidebars.
add_filter( 'beans_layout', '__return_false' );

// Make it fullwidth but keep container padding.
beans_replace_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container-center', 'uk-width-1-1 uk-display-inline-block' );

// Add grid.
beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
  'data-uk-grid' => '{gutter: 20}',
) );
beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
 'class' => 'uk-width-large-1-6 uk-width-medium-1-3',
) );

// Move the posts pagination after the new grid markup.
beans_modify_action_hook( 'beans_posts_pagination', 'beans_child_posts_grid_after_markup' );

// Load document which is always needed at the bottom of template files.
beans_load_document();

These code will only apply to your blog home page 🙂

Have fun,

Thanks, I try code, but something is wrong. see picture down:

http://postimg.org/image/czc02xv6p/

I want that posts in Mansonry look like in this picture , full screen:

http://ce3wiki.theturninggate.net/lib/exe/fetch.php?media=wiki:ce3-masonry.jpg

I found solution

Now I make the working code, but is this the best way or is there a better way to do this?

I put this in function.php :

//=============================Display posts in a DYNAMIC grid (Mansonry)=======================================
// 
// Enqueue the UIkit dynamic grid component.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_grid_uikit_assets' );

function example_enqueue_grid_uikit_assets() {

 // Only apply to non singular view.
 if ( !is_singular() ) {
   beans_uikit_enqueue_components( array( 'grid' ), 'add-ons' );
 }

}

// Display posts in a responsive dynamic grid.
add_action( 'wp', 'example_posts_grid' );

function example_posts_grid() {

  // Only apply to non singular view.
 if ( !is_singular() ) {

   // Add grid.
    beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
     'data-uk-grid' => '{gutter: 20}'
    ) );

    if ( is_home() ) {
    beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
      'class' => 'uk-width-large-1-6 uk-width-medium-1-3'
   ) );
    } 

    elseif ( !is_home() ) {
   beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
      'class' => 'uk-width-large-1-3 uk-width-medium-1-2'
   ) );
    }

   // Move the posts pagination after the new grid markup.
   beans_modify_action_hook( 'beans_posts_pagination', 'beans_child_posts_grid_after_markup' );

  }

}

and this in home.php:

<?php

// Force no-sidebars.
add_filter( 'beans_layout', '__return_false' );

// Make it fullwidth but keep container padding.
beans_replace_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container-center', 'uk-width-1-1 uk-display-inline-block' );

// Load document which is always needed at the bottom of template files.
beans_load_document();

Hey Boris,

Yes this is a great solution. The only code improvement would be to replace example_posts_grid() with the following:

function example_posts_grid() {

    // Only apply to non singular view.
    if ( ! is_singular() ) {
    $large  = is_home() ? 6 : 3;
    $medium = is_home() ? 3 : 2;

        // Add grid.
        beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
            'data-uk-grid' => '{gutter: 20}'
        ) );
        beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
     'class' => "uk-width-large-1-{$large} uk-width-medium-1-{$medium}",
   ) );

        // Move the posts pagination after the new grid markup.
        beans_modify_action_hook( 'beans_posts_pagination', 'beans_child_posts_grid_after_markup' );

    }

}

Great work!

Thank you for smaller and faster code 🙂

I have another question, Is possible to use samehow variable for gutter?

$g = is_home() ? 40 : 20;

        // Add grid.
        beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
            'data-uk-grid' => '{gutter: $g}'

Yes, change '{gutter: $g}' to "{gutter: {$g}}".

Happy coding,

Could I show a blog page with post preview sections in a similar way? How would I go about doing so?

.blog .uk-article {
    border: 1px solid #ccc;
    background-color: #edebeb;
    box-shadow: 0px 1px 2px #444;
    width: 44%;
    float: left;
    margin: 0 10px 10px 0;
}

Got it right here: http://wpbeansframework.com/blog/

I got a kind of masonry thing going but it is not there yet.

Hi Paarl, I am not sure I understand your question, what you are trying to achieve?