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:
Making WordPress Aware of the Custom Page
After creating a custom blog page, it’s time to let WordPress know about it.
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:
| 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 |
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:
| 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 |
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:
| 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 |
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:
| 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 |
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:
| Setting | Configuration |
|---|---|
| Style | List |
| Post Excerpt Length | 180 |
| How many posts in a page? | 3 |
| Pagination? | Disabled |
| Orderby | Date |
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:
| Setting | Configuration |
|---|---|
| Style | Thumbnail |
| Thumbnail align | Left |
| How many posts in a page? | 4 |
| Post excerpt length | 200 |
| Pagination? | Disabled |
| Orderby | Comment Count |
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:
| 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 |
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:
| Setting | Configuration |
|---|---|
| Style | Slideshow |
| Slideshow layout | Default |
| Images Height | 350 px |
| Post meta | On |
| How many posts in a page? | 10 |
| Orderby | Comment count |
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:
| Setting | Configuration |
|---|---|
| Style | Scroller |
| Images Width | 300 px |
| Images Height | 300 px |
| Post meta | Off |
| How many posts in a page? | 12 |
| Orderby | Date |
If you have any questions regarding these blog styles, please create a ticket to our helpdesk.
