News Show Pro as a shortcode
Our News Show Pro widget for WordPress has long been an excellent way to create product and article showcases; its extensive options allow for link previews, images with article overlays, titles and news snippets, all pulled from the source of your choice, whether your latest posts, latest posts in a specific category, specific posts, or WooCommerce products and categories.
However, as it was a widget, it had to be manually placed and configured after theme installation, or you needed to use our quickstart package to create a new installation of WordPress with the widgets already configured.
Our new page-based frontpage, introduced with StoreFront, allows News Show Pro to be embedded on a page via a shortcode, with all the options and flexibility that you’ve come to expect. This means that the settings from our demo page can be imported or replicated in moments for quick, comfortable configuration. Every option usually found in the widget options may be defined in the shortcode; any options not directly specified will be left at their default values.
How do I display my WooCommerce products on the frontpage like in the demo for StoreFront?
Before proceeding you should ensure you are familiar with how to create the layout of the tabs on the demo frontpage; a guide to this may be found here.
Once you have created your tab pages, you need to add the shortcode that will display News Show Pro. The basic shortcode, that will display images of your most-recently added products with title, pricing and an ‘ADD TO CART’ button may be displayed using the following shortcode:
[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_latest" article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]The majority of the options in the shortcode do not need to be changed, so you can leave them as they are. However, you may wish to change the ‘data_source_type’ attribute to point to a specific category or SKUs (the basic configuration above will take all new products from all categories). To do so, follow the below instructions:
Displaying specific products only
To display only products that you specify, change the attribute from:
data_source_type=“wp_woocommerce-wooc_latest”to:
data_source_type=“wp_woocommerce-wooc_post”This tells NSP to take specific articles. Now, you’ll need to define the products you want to show. After the data_source_type attribute in the shortcode, add the following new attribute:
data_source=“sku-code1,sku-code2”Where the ’sku-code’ is the SKU code for the product(s) in WooCommerce. Our amended shortcode may look like this :
[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_post” data_source=“slim-shirt,bright-shirt” article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]Displaying latest products from a category
To display the latest products from a specific category only, which is very useful if you want to have multiple tabs each with a different selection of products, you should change the data_source_type attribute to:
data_source_type="wp_woocommerce-wooc_category"This will tell News Show Pro to take details from categories. To specify which categories, add the following attribute to the shortcode:
woocommerce_category_list=“X“Where ‘X’ is the category ID(s) (found in the category URL) from WooCommerce, separated by a comma if there is more than one. To find the category ID, in your WordPress backend click on Products>Categories on the menu on the left of the screen, and click on the category you wish to display. Once on the category page in your backend, check the URL; you should see something similar to:
http://www.yoursite.com/wp-admin/edit-tags.php?action=edit&taxonomy=product_cat&tag_ID=99&post_type=product
Notice that part of the URL is “ID=99”; the number that appears after the equals sign is the category ID. So in this example, the category would be “99”, and our amended code will look something like this:
[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_category” woocommerce_category_list=“99” article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]How do I display my latest articles in the ‘From Our Blog’ section of the StoreFront frontpage?
As with our WooCommerce product display, the blog section of the frontpage uses NSP as a shortcode to display the latest posts from your WordPress ‘Posts’ section. To achieve this layout, paste the following shortcode into the WYSIWYG editor for the page (or frontpage subpage, if you want the display to appear on your frontpage) you want display your blog posts on:
[gknsp widget_css_suffix="separator overlay" offset="4" article_cols="3" article_rows="1" article_image_w="380" article_image_h="204" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_state="off" article_block_padding="0 7px 64px 7px" image_block_padding="0 0 40px 0" article_text_len="6"]You may notice that unlike the NSP shortcode for WooCommerce, there is no data_source_type or data_source attribute. This is because the default setting of News Show Pro is to display your latest posts, so no changes are necessary. However, you may wish to specify particular posts to display, or display the latest posts from a particular category. To make these changes, follow the below instructions.
Displaying specific posts
To display only specific posts, you will need to add the data_source_type attribute to the base shortcode to specify where News Show Pro should look for posts to display. For specific posts, the attribute should look like this:
data_source_type="wp-post"Once done, you’ll also need to tell NSP specifically which posts to show; this can be done using the data_source attribute. Add the following attribute to the shortcode:
data_source=“x”Where x is the post slug(s) you wish to display, with each slug separated by a comma.
Displaying posts from a category
To display posts from a particular category, you would again need to add the data_source_type and data_source attributes to the base example shortcode. To specify that NSP should take posts from categories, use the following attribute:
data_source_type="wp-category"Then, to tell NSP exactly which category to take posts from, add this attribute:
wp_category_list="X"Where x is the category slug/category ID you wish to display, separated by a comma if you wish to display posts from multiple categories.
Want to go deeper?
The extensive options of our News Show Pro widget are all definable in the shortcode, which allows you to control the number of article showcases, choose whether an image, title, text snippet and read more are displayed and their respective sizes and lengths, and many more options. A full list of available attributes are available here.