Blog Shortcode

Last Updated on

Express yourself to the world, share your thoughts and your passions using the blog shortcode. Blog is the most common and most popular section on websites.

In this article, we explain about displaying blog posts via Blog shortcode and configuring the shortcode settings.

To see the Blog shortcode in action, you may check the demo page.

Blog shortcode - demo page

In this article


Creating Blog Posts

Before adding blog shortcode and displaying the posts, blog posts itself should be created. To learn about creating different kind of blog posts, read Creating a blog post article then continue to the next section.


Displaying Blog Posts

After creating blog posts, it’s time to display them in a page. For this purpose, we need to add Blog shortcode in a page.

Adding Blog Shortcode

To add the shortcode:

1
Add a new page or edit an existing 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.
2
From Visual Composer screen, click + button.

Blog shortcode - Visual Composer screen

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

Blog shortcode - Add element

4
When the shortcode is added, a new pop-up screen called Blog Settings opens. You can configure different aspects of blog from the pop-up.

Blog shortcode - Blog settings

5
Click Save Changes and publish or update the page to check the result. It shows all the available blog posts.

Configuring Image Dimensions

There are 2 settings in Blog settings pop-up to configure the image dimensions.

Setting Description
Image size Choose an image size which will be shown on the blog loop.
Image height Sets a custom image height (only available when using ‘Resize & Crop’ option from above).

Blog Loop Content

There are 2 settings in Blog settings pop-up to configure the content shown in the blog loop.

Setting Description
Full content in blog loop Toggles between showing the excerpt or full content.
Post excerpt length Sets the custom lenght of excerpt shown in blog loop.

Excluding Blog Post Formats

In Blog settings pop-up, you can exclude a specific blog post format from showing on the page.

Setting Description
Blog post formats to exclude Excludes a specific blog post format from the blog loop.

x
Note: To learn more about blog post formats and how to create one, read Creating a blog post article.

Showing Specific Posts

There are 3 settings in Blog Settings pop-up which allow you to show the posts based on specific categories, IDs or authors. Type the name of category, post or author to add them in the fields.

Setting Description
Select Specific Categories Determines categories of blog posts. Posts from the selected categories will be only displayed.
Select Specific Posts Determines specific blog posts. The selected posts will be only displayed.
Select Specific Authors Determines authors of blog posts. Posts from the selected authors will be only displayed.

x
Note: To learn more about these settings, read Configuring specific posts in a shortcode article.

Configuring Pagination

In Blog settings pop-up, there are two settings for pagination.

Setting Description
Show Pagination? Enables or disables the pagination.
Pagination Style Defines the pagination style. There are 3 available styles.

Altering the Posts Sorting

There are 2 settings in Blog Settings pop-up which allow you to alter the posts sorting. By default, Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of newer posts.

Setting Description
Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the posts based on the selected parameter (date, menu order, title, …).

x
Note: To learn more about these settings, read Configuring shortcode’s sorting settings article.


Configuring the Layout

There are 7 types of layouts for the blog shortcode; modern, classic, newspaper, grid, spotlight, thumbnail and magazine.

You can check out all the blog layouts on Jupiter main demo website, by going to Blog section.

x
Note: To learn how to configure and display blog posts using these layouts, read Displaying blog posts aricle.

Removing Meta Section

One of the common requests in our Helpdesk is about removing the meta section from blog loop. There is no setting to disable this and we need to use custom CSS.

Blog shortcode - meta section

To remove the meta section:

1
From WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.
2
Paste the codes below into the input field.

.mk-blog-meta-wrapper{
display: none;
}

3
Save the settings and check the blog for changes.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket