News Shortcode

Updated on January 30, 2018

News shortcode is one of the Jupiter shortcodes that provides a list of news in a grid style from News post type. There are some options to fine tune the news loop.

In this article, we’ll explain about configuring News shortcode.

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

News shortcode - demo


Creating News Posts

Before displaying the news, some posts should be created to be used in the news shortcode.

To create a news post:

1From the WordPress left menu, go to News > Add New.
2Enter a title, fill out the necessary information and pick a post style.
3Click on Publish.

Displaying News Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From Visual Composer screen, click + button.

News shortcode - visual composer screen

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

News shortcode - add element

4When the shortcode is added, a new pop-up screen called News Settings opens. It gives you the ability to configure the shortcode settings.

News shortcode - News settings

5Click Save Changes and publish or update the page to check the result.

Configuring News Settings

After you added the News shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for News shortcode.

Showing Specific Posts

There are 3 settings in Portfolio Carousel 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.

SettingDescription

Select Specific CategoriesDetermines categories of news posts. Posts from the selected categories will be only displayed.
Select Specific PostsDetermines specific news posts. The selected posts will be only displayed.
Select Specific AuthorsDetermines authors of news posts. Posts from the selected authors will be only displayed.

Configuring Posts Number

Setting Description

How Many Posts? Sets the limit for the News Posts you want to have in the front end of the website. If this option is set to -1 it means you do not want to have any limitation regarding the news posts count.
Offset Sets the number of post to displace or pass over, it means based on your order of the loop, this number will define how many posts to pass over and start from the nth number of the offset.

Configuring News Styling

Only one option here that allows to style new shortcode. You can set image height value.

SettingDescription

Image HeightSets the Image Height which will be suitable for your design.

Setting Pagination

Two options are available for pagination settings:

Setting Description

Show Pagination?Enables/disables the pagination functionality for News loop.
Pagination StyleSelect which pagination style you would like to use on this loop. Available options are: Classic Pagination Navigation, Load More Button, Load More on Page Scroll.

Altering the Images Sorting

There are 2 settings in News 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.

SettingDescription

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

 Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?