Displaying Blog Posts

Updated on August 2, 2017

Jupiter has 7 main blog styles – modern, classic, newspaper, grid, spotlight, thumbnail and magazine. Every style differ in looks, layout and functionality. In this article we cover how to display blog posts using the blog shortcode and these 7 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 and blog shortcode articles.

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


Creating a Blog Page

By default, WordPress displays latest blog posts in your front page with default Jupiter 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 - Add new page

2Enter a title for your blog page.

Displaying blog posts - enter a title

3From Visual Composer screen, click + button.

Displaying blog posts - Visual Composer screen

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

Displaying blog posts - add element

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 - Blog settings

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 - Reading page

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.

Displaying blog posts - Reading settings

3Click on Save Changes button.

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 modern blog like shown in the demo:

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

Setting Configuration

Style Modern
Image size Resize & crop
Image height 550 px
How many posts? 6
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog setting

3Publish the page and check out the result.

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 classic 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 size Resize & crop
Image height 550 px
How many posts? 6
Comment count & social share Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.

Creating a Newspaper Blog

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

Configuring the Shortcode

To achieve the two column newspaper blog like shown in the demo:

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

Setting Configuration

Style Newspaper
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 12
Comments count & social share Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.

Creating a Grid Blog

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

Configuring the Shortcode

To achieve the two column grid blog like shown in the demo:

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

Setting Configuration

Style Grid
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 12
Transparent border Disabled
Show date? Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.

Creating a Spotlight Blog

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

Configuring the Shortcode

To achieve the two column spotlight blog like shown in the demo:

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

Setting Configuration

Style Spotlight
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 8
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

Configuring the Row

1In the row which contains the blog shortcode, click on Edit this row.

Displaying blog posts - edit row

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

Displaying blog posts - row settings

4Publish 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
Image size Resize & crop
Image height 350 px
Thumbnail align Left
How many posts? 9
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

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 size Resize & crop
Image height 350 px
Magazine style align Two columns (featured post on the left side)
How many posts? 5
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.
Did this answer your question?