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:
Making WordPress Aware of the Custom Page
After creating a custom blog page, it’s time to let WordPress know about it.
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:
| 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 |
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:
| 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 |
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:
| 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 |
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:
| 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 |
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:
| 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 |
Configuring the Row
| Setting | Configuration |
|---|---|
| Full width row | Enabled |
| Full width content | Enabled |
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 |
| 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 |
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 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 |
