Displaying Blog Posts

Updated on January 11, 2018

The Ken has 9 main blog styles – classic, masonry, tile, list, thumbnail, scroller, slideshow, magazine and modern. Every style differs in looks, layout and functionality. In this article we will cover the necessary steps for displaying blog posts using the blog shortcode and these 9 styles.

It’s worth to mention that before displaying blog posts, blog post itself should be created and the shortcode configured. For more information, please read creating a blog post.

To see all of the blog styles, you may check out “blog” section on our Ken main demo.


Creating a Blog Page

By default, WordPress displays latest blog posts in your front page with default Ken layout. The default layout is very limited and you can not use the different blog layouts as shown in our demo pages.

To be able to use the flexibility of blog pages, you need to create and configure a custom page with Blog shortcode and make WordPress aware of the page.

Creating a Custom Page

To create a blog page:

1From WordPress left menu, go to Pages > Add New.

displaying blog posts

2Enter a title for your blog page.

3From the Visual Composer screen, click + button.

displaying blog posts

4In Add Element pop-up screen, search for Blog and click on it to be added to the page.

displaying blog posts

5When the shortcode is added, a new pop-up screen called Blog Settings opens. It allows you to configure the shortcode settings.

displaying blog posts

6Click on Publish button and check the result in front-end of your website.

Making WordPress Aware of the Custom Page

After creating a custom blog page, it’s time to let WordPress know about it.

1From WordPress left menu, go to Settings > Reading page.

displaying blog posts

2From Front page display, select A static page (select below) option then depending on your site, select the custom page you have created as a Front page or Posts page.
3Click on Save Changes button.

Creating a Classic Blog

Below, we are going to explain step by step how to create a full width classic blog. To see the end result, please check out modern blog demo.

Configuring the Shortcode

To achieve the full width classic blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Classic
Image Cropping On
Images height 350 px
How many posts in a page? 8
Content type Summary (excerpt)
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation
Post meta On

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Modern Blog

Below, we are going to explain step by step how to create a full width modern blog. To see the end result, please check out modern blog demo.

Configuring the Shortcode

To achieve the full width classic blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Modern
Image Cropping On
Image height 350 px
How many posts in a page? 8
Orderby Comment count
Post meta On
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Masonry Blog

Below, we are going to explain step by step how to create a three column masonry blog. To see the end result, please check out masonry blog demo.

Configuring the Shortcode

To achieve the three column masonry blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Masonry
Image cropping On
Images height 250 px
How many columns? 3
How many posts in a page? 15
Post meta On
Post excerpt length 80
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Tile Blog

Below, we are going to explain step by step how to create a four column tile blog. To see the end result, please check out tile blog demo.

Configuring the Shortcode

To achieve the four column tile blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Tile
Image cropping On
Images height 200 px
How many columns? 4
How many posts in a page? 20
Author Thumbnail  On
Offset 1
Orderby Menu order
Post excerpt length 50
Pagination? Disabled
Post meta On

2Click on Save Changes.

3Publish the page and check out the result.

Creating a List Blog

Below, we are going to explain step by step how to create a list blog. To see the end result, please check out list blog demo.

Configuring the Shortcode

To achieve the list blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style List
Post Excerpt Length 180
How many posts in a page? 3
Pagination? Disabled
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Thumbnail Blog

Below, we are going to explain step by step how to create a thumbnail blog. To see the end result, please check out thumbnail blog demo.

Configuring the Shortcode

To achieve the thumbnail blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Thumbnail
Thumbnail align Left
How many posts in a page? 4
Post excerpt length 200
Pagination? Disabled
Orderby Comment Count

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Magazine Blog

Below, we are going to explain step by step how to create a magazine blog. To see the end result, please check out magazine blog demo.

Configuring the Shortcode

To achieve the magazine blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Magazine
Image cropping On
Offset 2
Loop Structure Two columns (featured post on the left side)
How many posts in a page? 5
Post excerpt length 120
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Slideshow Blog

Below, we are going to explain step by step how to create a slideshow blog. To see the end result, please check out magazine blog demo.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Slideshow
Slideshow layout Default
Images Height 350 px
Post meta On
How many posts in a page? 10
Orderby Comment count

2Click on Save Changes.

3Publish the page and check out the result.

Creating a Scroller Blog

Below, we are going to explain step by step how to create a scroller blog. To see the end result, please check out scroller blog demo.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Scroller
Images Width 300 px
Images Height 300 px
Post meta Off
How many posts in a page? 12
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.

If you have any questions regarding these blog styles, please create a ticket to our helpdesk.

Did this answer your question?