ThemeNcode Docs

Add Shelf Item

Estimated reading: 8 minutes

To show items on a bookshelf first you need to add shelf items and later while embedding you can use them with a bookshelf. Follow the process to add shelf items.

From the Bookshelf tab, go to Add New Item on your WordPress Dashboard.

Set Featured Image: This is the image that will be shown on the bookshelf.

Item Content

Content to display: In this field, select the type of item you want to share. The following options are available:

  • Single Image
  • Image Gallery
  • Add to Youtube Video
  • Add Vimeo Video
  • Add Maps or any other Embedded items
  • Shortcode
  • Custom title and text
  • Any post or page
  • WooCommerce Product
  • TNC FlipBook / PDF Viewer

-> Single Image: If you select the Single Image option then you will get another field to upload an image. This image will be opened as a popup or in a new tab when someone will click the feature image on the bookshelf.

-> Image Gallery: Selecting an image gallery will enable the option to add a gallery. If you already have galleries created you can select that or you can choose multiple images and create a new gallery to show.

-> Add to Youtube Video: Youtube video will ask for the youtube video link in the next field. So when someone clicks the feature image that is on the bookshelf as an item this video will be played.

-> Add Vimeo Video: Same as youtube video. It will ask for a Vimeo video link.

-> Add Maps or any other Embedded items:

  • Put the link of a map or any other embedded items on this field.
  • Select size: It can be set to either full screen or custom width and height.
    • Full Screen: If you choose full screen then the next field will be selected fullscreen. It can be either true or false. Select true to show as fullscreen and false otherwise.
    • Custom width and height: If you choose this option then two more fields of Iframe width and height will come up. Put a number according to your need.

->Shortcode: The shortcode is usually provided by the plugin developer, and it’s a specific identifier for a particular functionality or feature of the plugin. For example, a plugin that adds a contact form to your site might provide a shortcode. When you place shortcodes in a post or page and view it on the front-end of your website.

Here is our list of shortcodes:

  • Bookshelf Shortcode [bstnc-book-shelf]
  • List / Grid Shortcode [bstnc-list-grid]
  • Popup [bstnc-popup]
  • Bookshelf Posts [bstnc-posts]

Bookshelf Shortcode [bstnc-book-shelf]

This shortcode allows you to display selected shelf items using a BookShelf Style. It comes with a few parameters.

  • viewer_id: This is the list of comma-separated id’s of the viewer you want to embed. Use maximum 5 id’s or each shelf
  • open_type: This parameter defines how the viewers should appear, you can choose between link & popup.
  • shelf_type: Style of Shelf, currently applicable values are style-1, style-2, style-3, style-4
  • css_class: You can use any css class if you want to apply custom styles to the shelf.

An example of this shortcode:

[bstnc-book-shelf shelf_id=”4571,4570,4565,4584″ open_type=”popup” shelf_type=”style-1″ css_class=”my_custom_book_shelf”]

Use this on any page or post.

List/Grid [bstnc-list-grid]

This shortcode allows you to display selected shelf items in a Grid or List Style. It comes with a few parameters.

For Grid View:
  • Source by: Where to pull the PDF viewers From, You can choose from all (Uses all PDF viewers), category (Select Categories in next parameter) or select-viewer (Select Viewers in next parameter)
  • display_type: Select grid here.
  • open_type: This parameter defines how the viewers should appear, you can choose between a link & popup.
  • column: Select the number of columns to show the maximum. usable values are col-2, col-3, col-4. Applicable for Grid style only
  • filter: Use 0 to disable, 1 to enable the filter. Applicable for Grid style only
  • sort: Use 0 to disable or 1 to enable sort. Applicable for Grid style only
  • search: use 0 to disable or 1 to enable search. Applicable for Grid style only
  • css_class: You can use any CSS class if you want to apply custom styles to the container.

An example of using this shortcode:

[bstnc-list-grid source=”all” display_type=”grid” open_type=”popup” filter=”1″ sort=”1″ search=”1″ css_class=”my_custom_shelf_1″]

Use this shortcode on any page or post.

For List View:
  • Source by: Where to pull the PDF viewers From, You can choose from all (Uses all PDF viewers), category (Select Categories in next parameter) or select-viewer (Select Viewers in next parameter)
  • display_type: Select list here
  • open_type: This parameter defines how the viewers should appear, you can choose between a link & popup.
  • css_class: You can use any CSS class if you want to apply custom styles to the container.

[bstnc-list-grid source=”all” display_type=”list” open_type=”popup” css_class=”my_custom_shelf”]

Popup [bstnc-popup]

This shortcode allows you to display selected Popup items. It comes with a few parameters.

  • Select_Popup_Item: This is the list of comma-separated id’s of the viewer you want to embed.
  • Popup_trigger_type: You can select here popup trigger type. You can select it either text or an image.
  • Text: From here you can enter your text that displays the popup name.
  • Css_Class: You can use any CSS class if you want to apply custom styles to the container.

[bstnc-popup trigger=”text” text=”Open” css_class=”tnc-popup”]

Bookshelf Posts [bstnc-posts]

This Shortcode allows you to post filtered content and Shelf settings. It comes with a few parameters.

  • Post_Types: In this case you can select your post type from here by searching at least 3 characters. This is the list of comma-separated id’s you want to embed.
  • Author: You can choose your author in this field.
  • Category: You can choose your category in this field.
  • Tag: You can choose and select tag in this field.
  • Taxonomy: You can attach taxonomy and terms to this field.
  • Status: Here you can set your post status like ( Publish, Pending, Draft, Auto draft, Future )
  • Sort By: You can sort by ID, Title, Date, None, Type, Rand, Comment Count, Menu Order, Modified, Name, Author, Relevance. And also select your order Ascending or Descending.
  • Custom_Field (post meta): This is a custom field where you can set your Meta Key, Meta Value and Meta Compare.
  • Pagination: Here you can On/Off your pagination, and you can indicate your posts per page.
  • Shelf_Settings: In this section you can select Open Type(Popup/Link), Select Shelf items, Shelf type(Wood Style 1,2 or Glass style 1,2) and CSS Class

[bstnc-posts pagination=”on” open_type=”popup” shelf-items=”4″ shelf_type=”style-1″]

-> Custom Title and Text: If you select this type there will be two more fields.

  • Title: Put the title which will be shown when someone clicks this item on the bookshelf.
  • Text: This is like the description under the heading

-> Any page or Post: Here you can show any page or type of post as an item on the bookshelf. These options will come up when you select this type of item:

  • Select content: Here you can select any page or post from your WordPress
  • Select size: It can be set to either full screen or custom width and height.
    • Full Screen: If you choose full screen then the next field will be selected fullscreen. Select true to show as fullscreen and false otherwise.
    • Custom width and height: If you choose this option then two more fields of Iframe width and height will come up. Put a number according to your need.

-> WooCommerce Product: You can display your WooCommerce product post if you select this field. For this first you need to select your content and after that you need to select your post size, full screen or you can select your custom screen size.

-> TNC FlipBook / PDF Viewer: For this case, first you need to install and activate the TNC FlipBook – PDF viewer for WordPress plugin and then you need to create the flipbook. So after installing TNC Flipbook, you need to create a flipbook first. To create a flipbook, go to your WordPress dashboard and you will see a tab called TNC FlipBook. Click Add New and set a title. Then upload the PDF of your choice and click select. Insert the PDF file into your TNC Flipbook and you’re done! Now you can use this PDF as a flipbook on your website. Now it can be displayed or embedded in a post or page. You can search for the name and embed it when you create your FlipBook.

List View Excerpt:

This is only applicable to the Bookshelf list view shortcodes. Put a summary or short description of that specific item. This text will come under the title if you show items with list view mode.

Leave a Comment