loading
please wait

WpStream Blocks, Widgets, and Shortcodes

October 23, 2017

Blocks Widgets and Shortcodes – Last Modified: June 15th, 2021

If you ever worked with WordPress and different page builders such as WpBakery, you know that most professional themes and plugins offer the use of different Blocks, Widgets, and Shortcodes. A shortcode is  basically a small piece of code which can be added onto a WordPress page or post to offer different functionality.

WpStream Plugin Blocks, Widgets, and Shortcodes

The WpStream Plugin uses the following Blocks, Widgets, and Shortcodes:

  1. Player
  2. Products List
  3. List of Live Events
    -Elementor
    -WPBakery
  4. List of VODs
    -Elementor
    -WPBakery

1. WpStream Player Blocks, Widgets, and Shortcodes

To add the Player shortcode to any page, you have two main options – You can edit your page with WpBakery and then search for the shortcode. Or you can add the text code manually into a page or post. Here is the code you need to add for reference:

[wpstream_player id="1234" ][/wpstream_player]

Once you add this code to your page, you will have to replace 1234 with the ID of your channel or video product.

To add this shortcode with WpBakery, simply search for the shortcode in the library:

After adding the shortcode, you will have to add your live stream or video ID, and then save changes:

Finding the ID of a VOD or Live Channel 

Live Channel

You can get your Live Channel ID by going to your WordPress dashboard, clicking on the WpStream Plugin options and then WpStream Channels. Each Live Channel you create has a separate ID:

Video On Demand

You can find the ID of a VOD by simply checking the URL of your product, as shown below:

To find the ID quickly, we need to look in our URL for the number after post=. In our example, the ID of our free video is 262.

2. Products List

Adding the Products List shortcode can be done in two different ways; You can add the shortcode by looking it up in the library after editing the page with WpBakery or you can add the code manually into a post or page. Here is the code you need to add to the text version of your page:

[wpstream_list_products media_number="No of media" product_type="Free Live Channel or Free Video"][/wpstream_list_products]

You will have to replace No of media with the number of media cards you want to display in total. Keep in mind that there are 4 media cards per row. For the product type you will have to pick one option between Free Video and Free Live Channel.

Adding the Products List shortcode from WpBakery is quite simple – edit your page with WpBakery and then click the + icon to add a new shortcode before searching for the Products List.

After adding the shortcode, you will have to select how many media boxes you want to display and if these should be Free Channels or Free Videos. After making your options, click Save changes.

3. List of Live Events (Blocks, Widgets, and Shortcodes)

Elementor

Before you get started, you will need to have a few channels, either active or inactive. Make sure you check out how you can create free channels or pay-per-view channels.

You may also check out the video tutorial at the end of this section.

Once you have your channels set up, go to the page you wish to add the list of live events and click on ‘edit with Elementor’ at the top of the page. Next, look up ‘WpStream Channel List’ and drag the widget to the ‘+’ (where you want the list to be).

All your channels will be displayed and you can edit this section to:

  • Show free or pay-per-view channels
  • Only show live channels (Active channels ready to go live)
  • Number of items (channels) per page
  • Edit the text under the channel
  • Order by (recent, ASC, DESC)

To add a list of free channels, click on ‘free’, adjust the rest of the settings as you see fit, and save changes.

You can also add a separate section for the paid channels if you want both free and PPV channels displayed on one page

And that is how you add a list of live events using Elementor.

WPBakery

Before you get started, you will need to have a few channels, either active or inactive. Make sure you check out how you can create free channels or pay-per-view channels.

You may also check out the video tutorial at the end of this section.

Once you have your channels set up, go to the page you wish to add the list of live events and click on ‘edit with WPBakery page builder’ at the top of the page. Next, look up ‘WpStream Channel List’ and click on the block.

The following block will show up with different options to edit your channel list:

  • Show free or pay-per-view channels
  • Only show live channels (Active channels ready to go live)
  • Number of items (channels) per page
  • Edit the text under the channel
  • Order by (recent, ASC, DESC)

To add a list of free channels, click on ‘free’, adjust the rest of the settings as you see fit, and save changes.

You can follow the same steps above and add another section of ‘paid’ channels (PPV)

And that is how you add a list of live events using WPBakery page builder.

4. WpStream List of VODs Blocks, Widgets, and Shortcodes

Elementor

Before you get started, you will need to have a few On-Demand videos. Make sure you check out how you can create a VOD product.

You may also check out the video tutorial at the end of this section.

Once you have your products set up, go to the page you wish to add the list of VODs and click on ‘edit with Elementor’ at the top of the page. Next, look up ‘WpStream Video on Demand List’ and drag the widget to the desired section.

The widget will show up with different options to edit your VOD list:

  • Show free or pay-per-view VODs
  • Number of items (channels) per page
  • Edit the text under the video
  • Order by (recent, ASC, DESC)

To add a free video, click on ‘free’, adjust the rest of the settings as you see fit, and save changes.

You can also add a list of paid VODs to another section by following the same steps.

And that is how you add a list of VODs using Elementor.

WPBakery

Before you get started, you will need to have a few On-Demand videos. Make sure you check out how you can create a VOD product.

You may also check out the video tutorial at the end of this section.

Once you have your products set up, go to the page you wish to add the list of VODs and click on ‘edit with WPBakery page builder’ at the top of the page. Next, look up ‘WpStream Video on Demand List’ and click on the block.

The following block will show up with different options to edit your VOD list:

  • Show free or pay-per-view VODs
  • Number of items (channels) per page
  • Edit the text under the video
  • Order by (recent, ASC, DESC)

To add a free video, click on ‘free’, adjust the rest of the settings as you see fit, and save changes.

To add a list of paid VODs, follow the same steps but choose ‘paid’ instead of free

And that is how you add a list of live events using WPBakery.

Video Tutorial on how to add a list of Live Events and VODs using Elementor Page Builder

Video Tutorial on how to add a list of Live Events and VODs using WPBakery Page Builder

WpStream Theme Shortcodes

The WpStream Theme comes with a multitude of Blocks, Widgets, and Shortcodes which allow website owners to build stunning pages for their streams or video products. Let’s create a new page and edit it with WpBakery. Here is the first thing you will see, the WpStream Theme shortcodes:

  1. Recent Items Slider
  2. Recent Items
  3. Featured Product
  4. Featured Article
  5. List Items by ID
  6. Category Slider
  7. Display Categories
  8. Login Form
  9. Register Form

Recent Items Slider

To add the Recent Items Slider, click on the + Icon and then search for recent items.

You have the option of adding a title for your recent items slider, as well as the option to select which types of items to display – products, free products or articles. Once you have made your selection, click save changes.

Recent Items

The Recent Items shortcode is similar to the slider and adding one to your page is done much in the same way. Search for recent items in your element library and you will find the shortcode:

You also have the option of adding a title for your recent items shortcode, as well as other details such as what types of items to display. You will have to choose between articles, free products and products. Once you have made your selection, click on save changes and the shortcode will be displayed on the page you just edited.

Featured Product 

Adding the Featured Product shortcode can be done by clicking on the + icon. You can search for the shortcode to make it easier.

Customize this shortcode further by adding a product ID, selecting the design type that you want and adding a featured image for the product. You can also modify the total pixel height of your featured products section, when using design type 1.

Featured Article

The Featured Article shortcode is somewhat similar to the Featured Product shortcode, and adding one to your page is done similarly. Let’s look up this shortcode in our library.

After adding the Featured Article shortcode you will have to type the name of the article you want to display and pick between two distinct design types – 1 and 2.

List Items by ID

The List Items by ID shortcode can be used to feature paid products, free products as well as articles. Look up the shortcode’s name and add it to your page.

After adding the shortcode to your page, there are a couple of settings that you need to make. For example, you can add a title for this section of the page. You can also choose between displaying free products, paid products or articles. You are also able to display certain products or articles by adding their IDs, separated by commas.

The shortcode also allows you to set the number of items you want displayed in the section, as well as the number of items per row. Linking to global listing is also an option.

Category Slider

The Category Slider is a simple shortcode used to feature different types of videos or products. Search for the shortcode name in the library and add it to any page.

After adding the shortcode to your page, you can type the categories you want to display, as well as the number of items you want to display. After making your selection, click Save Changes.

Display Categories

The Display Categories shortcode is similar to Category Slider, but the overall design is somewhat different. Search for the shortcode in your library and add it to your page.

After adding the shortcode to your page, you have to type the category which you want to feature. You can also add a status text label to further promote your videos.

There are two design types available, by selecting the Display Category Type (1 or 2). The height of this page segment can also be set in pixels.

Once you are satisfied with your options, click Save Changes.

Login Form

To add a Login Form to your page, look up the login form shortcode in the shortcode library.

Adding details to this shortcode is not necessary, and you can leave it as is. You only need to click on save changes and the page will display a login form.

Register Form

To add a Register Form to any of your pages, click on the “+ icon and look up the Register Form shortcode.

This shortcode does not require any additional options or settings, all you need to do is click on save changes and the page will display a register form.

Conclusion

With the WpStream Theme and the WpStream Plugin you can build an effective and professional looking streaming website, even without prior technical experience. The use of Blocks, Widgets, and Shortcodes makes it easier than ever to build landing pages, homepages as well as product pages for your online business.

Recent posts