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

StyleClassic
Image CroppingOn
Images height350 px
How many posts in a page?8
Content typeSummary (excerpt)
Post excerpt length200
Pagination?Enabled
Pagination styleClassic pagination navigation
Post metaOn

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

StyleModern
Image CroppingOn
Image height350 px
How many posts in a page?8
OrderbyComment count
Post metaOn
Pagination?Enabled
Pagination styleLoad 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

StyleMasonry
Image croppingOn
Images height250 px
How many columns?3
How many posts in a page?15
Post metaOn
Post excerpt length80
Pagination?Enabled
Pagination styleLoad 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

StyleTile
Image croppingOn
Images height200 px
How many columns?4
How many posts in a page?20
Author Thumbnail On
Offset1
OrderbyMenu order
Post excerpt length50
Pagination?Disabled
Post metaOn

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

StyleList
Post Excerpt Length180
How many posts in a page?3
Pagination?Disabled
OrderbyDate

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

StyleThumbnail
Thumbnail alignLeft
How many posts in a page?4
Post excerpt length200
Pagination?Disabled
OrderbyComment 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

StyleMagazine
Image croppingOn
Offset2
Loop StructureTwo columns (featured post on the left side)
How many posts in a page?5
Post excerpt length120
OrderbyDate

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

StyleSlideshow
Slideshow layoutDefault
Images Height350 px
Post metaOn
How many posts in a page?10
OrderbyComment 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

StyleScroller
Images Width300 px
Images Height300 px
Post metaOff
How many posts in a page?12
OrderbyDate

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?