Displaying Blog Posts

Last Updated on

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.

In this article


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.

x
Note: Before creating a blog page, some blog posts should be created. To learn more about it, read creating a blog post article.

Creating a Custom Page

To create a blog page:

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

displaying blog posts

2
Enter a title for your blog page.

3
From the Visual Composer screen, click + button.

displaying blog posts

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

displaying blog posts

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

displaying blog posts

6
Click 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.

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

displaying blog posts

2
From 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.
3
Click 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

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

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

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

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

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

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

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

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

To achieve the list blog like shown in the demo:

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

To achieve the thumbnail blog like shown in the demo:

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

To achieve the magazine blog like shown in the demo:

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1
In 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

2
Click on Save Changes.

3
Publish 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.

x
Note: To learn how to create a blog page and add a blog shortcode, please read Creating a blog page section above.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1
In 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

2
Click on Save Changes.

3
Publish the page and check out the result.

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket