Blog page layout part 1

Here are some of the various grid possibilites with the blog layout. There are many more. Please share so that I can add it to this tutorial.

The default blog grid layout shows the post title, meta information and then the featured image, and some text.

Beans-framework-default-blog-layout

Below is another option.

The following code is from the Beans code snippet libary and shows a responsive view.
At 960px and higher one will see 3 columns.
At 768px and higher 2 columns.
Below 768 it goes back to 1 column.

Add the code to your functions.php file.

// Display posts in a responsive 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(
     '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' );   
  }
}

The code adds the class uk-grid and uk-grid-match.
Notice the uk-width-large-1-3 and uk-width-medium-1-2. These signal how many columns are seen at the large and the medium view.

Here is my custom example using the above code as well as CSS to style how the grid boxes:

Beans-Blog-Grid-Layout

The CSS I used:

/* Blog grid layout */

.blog .uk-article, 
.archive .uk-article {
	border: 1px solid #ccc;
	border-radius: 9px;
	background: #ecebeb !important;
	padding: 0;
}

.blog .uk-article-title, 
.archive .uk-article-title {
	font-size: 24px;
	padding: 12px;
	border-bottom: 1px solid #ccc;
}

.blog .uk-article-meta,
.archive .uk-article-meta  {
	padding-left: 20px;
}

.blog .tm-article-image, 
.archive .tm-article-image {
	padding: 3px;
}

.blog .tm-article-content,
.archive .tm-article-content {
	padding: 14px;
}

 

Resources used:
getbeans.io/code-snippets/display-posts-in-a-responsive-grid/
getuikit.com/v2/docs/grid.html
getuikit.com/v2/docs/column.html

Also take a look at the Bench child theme made by KK Themes and the Banks theme made by Theme Butler.

 

Another option is to create a blog page layout.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website