A blog page layout added to the index.php file.
Thumbnail in the top. Post title below. Category and date. Then the text and a Continue reading link.
I added a CSS scale affect on hovering the images.
In the root of your child theme create a index.php and add the following code.
<?php // Only affects the blog page. Really no need for the if statement I think... // Setup theme beans_add_smart_action( 'beans_before_load_document', 'theme_index_setup_document' ); function theme_index_setup_document() { // Not used on single posts or pages. if ( !is_singular() && !is_page() ) { // Responsive posts grid. beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array( 'class' => 'uk-grid uk-grid-match', 'data-uk-grid-margin' => '' ) ); 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' ); // Post preview beans_add_attribute( 'beans_post', 'class', 'beans-post'); // Move the post image to the top of the post header beans_modify_action_hook( 'beans_post_image', 'beans_post_header_prepend_markup'); beans_add_attribute( 'beans_post_image', 'class', 'post-image'); // Moves categories to the post header beans_modify_action( 'beans_post_meta_categories', 'beans_post_title_after_markup'); //beans_remove_output( 'beans_post_meta_categories_prefix' ); beans_add_attribute( 'beans_post_meta_categories', 'class', 'tm-post-category'); // Date beans_modify_action( 'beans_post_meta_date', 'beans_post_title_after_markup'); beans_remove_output( 'beans_post_meta_date_prefix' ); beans_add_attribute( 'beans_post_meta_date', 'class', 'post-date'); // Post article beans_add_attribute( 'beans_post_title', 'class', 'post-title' ); // Post title beans_add_attribute( 'beans_post_title', 'class', 'uk-margin-small-top uk-h3' ); } } // Resize post image (filter) beans_add_smart_action( 'beans_edit_post_image_args', 'banks_index_post_image_args' ); function banks_index_post_image_args( $args ) { $args['resize'] = array( 430, 250, true ); return $args; } // Remove specific meta items from blog page. add_filter( 'beans_post_meta_items', 'beans_child_remove_post_meta_items' ); function beans_child_remove_post_meta_items( $items ) { // Remove unset( $items['author'] ); unset( $items['comments'] ); return $items; } // Adds excerpt add_filter( 'the_content', 'beans_child_modify_post_content' ); function beans_child_modify_post_content( $content ) { // Stop here if we are on a single view. if ( is_singular() ) return $content; // Return the excerpt() if it exists other truncate. if ( has_excerpt() ) $content = '<p>' . get_the_excerpt() . '</p>'; else $content = '<p>' . wp_trim_words( get_the_content(), 20, '...' ) . '</p>'; // Return content and readmore. return $content . '<p>' . beans_post_more_link() . '</p>'; } // See also this similar code: https://gist.github.com/ThierryA/9bd05dd7beb459828591 // Load beans document beans_load_document();
The CSS
.beans-post { padding: 10px; } .blog .beans-post:hover { background: #ebedeb; border-radius: 10px; } .post-image { overflow: hidden; border-radius: 10px; margin-bottom: 5px !important; } .post-image img{ padding: 1px; -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .post-image img:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog .post-title { text-align: center; }
I will add on here when I come across other blog page layouts that are nice to add.
No comment yet, add your voice below!