Displaying Blog Posts

Last Updated on

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.

In this article


Creating a Blog Page

x
Note: If you set one of your pages to be the default blog page from Settings > Reading, none of the styles and options related to the blog archive page will be applied to that page. In order to have a customized blog page, please only use the blog shortcode in a page and consider it as your 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.

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 - Add new page

2
Enter a title for your blog page.

Displaying blog posts - enter a title

3
From Visual Composer screen, click + button.

Displaying blog posts - Visual Composer screen

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

Displaying blog posts - add element

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

6
Click on Publish button and check the result in front-end of your website.
x
Note: To learn more about the blog shortcode settings, read blog shortcode article.

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

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.

Displaying blog posts - Reading settings

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

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

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

2
Click on Save Changes.

Displaying blog posts - Blog setting

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

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

2
Click on Save Changes.

Displaying blog posts - Blog settings

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

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 two column newspaper blog like shown in the demo:

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

2
Click on Save Changes.

Displaying blog posts - Blog settings

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

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 two column grid blog like shown in the demo:

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

2
Click on Save Changes.

Displaying blog posts - Blog settings

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

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 two column spotlight blog like shown in the demo:

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

2
Click on Save Changes.

Displaying blog posts - Blog settings

Configuring the Row

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

Displaying blog posts - edit row

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

Setting Configuration
Full width row Enabled
Full width content Enabled

3
Click on Save Changes.

Displaying blog posts - row settings

4
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
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

2
Click on Save Changes.

Displaying blog posts - Blog settings

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

2
Click on Save Changes.

Displaying blog posts - Blog settings

3
Publish the page and check out the result.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket