Home 6. Theme Shortcodes

INTRODUCTIONTheme Shortcodes

List of all theme shortcodes:

Section

The post categories that will display on the page should be defined in Edit Section panel, tab Posts.

The Categories field should contain the slug of the categories that you want displayed in that section, separated by comma. If you want posts from all categories to be listed in the section, leave this field empty.

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/bold-news-section.jpg

Please note that if the section contains another element that lists posts (for example “Articles Container” element), and you define post categories in that element, they will overrun the ones from the Section panel.

E.g. On the following screenshot, section will inherit Furniture category:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/main-category.jpg

SECTION 01Accordion

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/accordion.jpg

Once you add Accordion element, make sure to add Accordion Item:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/accordion-item.jpg

Below is the list of elements that can be added to Accordion Item:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/accordion-elements.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/accordion-f.jpg

SECTION 02Advanced Progress bar

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/advanced-progress-bar.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/advanced-progress-bar-f.jpg

SECTION 03Article Teaser Template

Article Teaser Template element provides several options:

General Tab:
  1. Columns – enter number (eg. 3),
  2. Rows – enter number (eg. 4),
  3. Gap – gap between posts (0px, 5px, 10px, 15px1 20px, 25px, 30px, 35px, 40px, 45px, 50px),
  4. Custom image height (eg. 500px) – Post Featured image size can be fixed entering image height in px,
  5. Single box design – Light background + Gray border, Dark background + Gray border, Gray bottom border, Light background, Dark background,
  6. Title size – Extra Small, Small, Medium, Normal, Large, Extra large, Huge, Extra Huge,
  7. Heading font weight – Inherit/default, Bolder, Bold, Normal, Lighter, Light,
  8. H tag – H1, H2, H3, H4,
  9. Image position – No Image, Background, Top, Side,
  10. Image format – Square, Horizontal 16×9, Horizontal 3×2, Vertical 16×9, Vertical 3×2, Horizontal 16×9 with poster, Horizontal 3×2 with poster, Use poster image,
  11. Image base size – Large, Medium, Small,
  12. Image lazy load – effect visible on page load view,
  13. Image hover effect – No effect, Zoom, Zoom Out, To Grayscale, From Grayscale.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/article-teaser.jpg
Display Tab:
  1. Show categories – No, Supertitle, Supertitle highlighted, Subtitle, Bottom left, Bottom right,
  2. Show author – No, Supertitle, Subtitle, Bottom left, Bottom right,
  3. Show date – No, Supertitle, Subtitle, Bottom left, Bottom right,
  4. Show excerpt – Post excerpt text can be visible below post title,
  5. Show comments – No, Supertitle, Subtitle, Bottom left, Bottom right,
  6. Show reading time – No, Supertitle, Subtitle, Bottom left, Bottom right,
  7. Show view count – No, Supertitle, Subtitle, Bottom left, Bottom right,
  8. Show rating – No, Supertitle, Subtitle, Bottom left, Bottom right,
  9. Show post format – Hide, Show on image, in top left corner, Show on image, in top left corner, only media (video, audio, gallery), Show next to title, Show next to title, only media (video, audio, gallery),
  10. Read more text – Type any text.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/display-tab.jpg

Here’s the example:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/article-template-f.jpg

SECTION 04Articles Container

As mentioned in the Section description, if Section contains Articles Container element and you define for example different Post Categories than noted in the Section (Post tab) all post settings will be overrun.

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/article-container-element.jpg

Article Container element provides several options:

  1. Post category filter – type Post Category slugs separated by comma (eg sport, business),
  2. Post format filter – type Post Filter Format separated by comma (eg. post-format-video, post-format-audio),
  3. Taxonomy filter – type Taxonomy slugs (tags etc.) separated by comma (eg. tag:highlight, michael-jackson),
  4. Post author username – type Author username (eg: martin),
  5. Date filter – type strtotime()-compatible string (eg, 7 days ago, 1 month ago),
  6. Show sticky posts – Hide, Show in list, Show on top,
  7. Show posts already displayed on this page -Show/Hide,
  8. Show posts in next post containers – Default (use other container’s settings) or Force Show,
  9. Order by – Default (ordered based on the publish date), Comment count descending, Post views descending, Review rate descending.

Here’s the example:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/container-example.jpg

In the following screenshot, Section has defined Lifestyle category in Post Tab. Right column contains Article Container (with Article Teaser element) which has Post Category – Money.

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/container-view.jpg

SECTION 06Button

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/button.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/button-f.jpg

SECTION 07Category Title

Category Title element provides several options:

  1. Title – enter category title, any text,
  2. Category Slug – enter slug of the category,
  3. H tag – select H tag title,
  4. Orientation – select horizontal or vertical display,
  5. Display style – select highlighted or default title style,
  6. Show subcategories – select whether subcategories of the selected main category will display.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/category-title.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/category-title-f.jpg

SECTION 08Cost Calculator

Documentation on Cost Calculator plugin can be found on the following link.
Although documentation uses WPBakery Page Builder (formerly Visual Composer) as an example page builder, the same elements and functionalities are included in Bold Builder.

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/CC-general.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/CC-form.jpg

Cost Calculator can include:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/CC-items.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/cc-f-1.jpg

SECTION 09Countdown

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/04/countdown.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/countdown-f.jpg

SECTION 10Counter

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/counter.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/counter-f.jpg

SECTION 11Custom Menu

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/custom-menu.jpg

SECTION 12Financial Data

Financial Data element provides several options:

  1. Icon – select from the list of available icons,
  2. Title – enter title,
  3. Type – select type of currency (physical / digital),
  4. Financial Data to Use – enter required data,
  5. API Key – enter API key. API Key can be acquired on the following link,
  6. Show Time – select whether to display time or not,
  7. Stock Data Change – select whether it will display daily, weekly, or monthly data change,
  8. Cache – enter cache time (in minutes).
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/financial-data.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/financial-data-f.jpg

SECTION 13Google Maps

Google maps require an API key for site domains. Follow the next steps:

  • First step is to make sure to update the theme to the newest version.
  • When the theme is updated, please Get your API key.
  • Then locate the Google Map element in Bold Builder and enter your API key.

On Snazzy Maps are available all kinds of Google Map styles. The required map code is possible to add to the Custom map style array field.

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/google-maps.jpg

Once you add Google Maps element, make sure to add Google Maps Location (multiple locations available):

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/google-maps-location.jpg

Below is the list of elements that can be added to Google Maps element:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/google-maps-elements.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/google-map.jpg

SECTION 14Headline

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/headline.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/headline-f.jpg

SECTION 15Icon

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/icon.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/icon-f-1.jpg

SECTION 16Image

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/image.jpg

Image element can include:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/image-elements.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/image-f.jpg

SECTION 17Image Slider

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/image-slider.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/image-slider-f.jpg

SECTION 18Inner Row

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/inner-row.jpg

Once you add Inner Row element, make sure to define layout and add Inner Column:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/inner-row-layout.jpg

SECTION 19Instagram

In order to get Client ID, Access Token, and User ID, please follow the steps from our article: How to set up your Instagram widget?

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/04/instagram.jpg

SECTION 20Masonry Image Grid

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/masonry-image-grid.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/masonry-image-grid-f.jpg

SECTION 21Masonry Post Grid

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/masonry-post-grid.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/masonry-post-grid-f.jpg

SECTION 22Price List

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/price-list.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/price-list-example.jpg

SECTION 23Progress bar

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/progress-bar.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/progress-bar-f.jpg

SECTION 24Raw Content

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/raw-content.jpg

SECTION 25Separator

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/04/separator.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/separator-f.jpg

SECTION 26Service

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/service.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/service-f.jpg

SECTION 27Simple Cost Calculator

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/simple-cost-calculator.jpg

Once you add Simple Cost Calculator, make sure to add Simple Cost Calculator Item:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/simple-cost-calculator-item.jpg

SECTION 28Slider

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/slider-1.jpg

Once you add Slider element, make sure to add single Slider Item or Slider Article Teaser Template:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/slider-elements-1.jpg

Slider Item:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/slider-item.jpg

Slider Item can include:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/accordion-elements.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/slider-f-1.jpg

SECTION 29Slider Article Teaser Template

Slider Article Teaser element provides several options:

General Tab:
  1. Number of slides – enter number (eg. 4),
  2. Background overlay – No overlay / default, Light stripes, Dark stripes, Light solid, Dark solid, Light gradient, Dark gradient, Dark gradient from bottom, Dark gradient from top, Dark gradient from left,
  3. Title size – Extra Small, Small, Medium, Normal, Large, Extra large, Huge, Extra Huge,
  4. H tag – H1, H2, H3, H4,
  5. Heading font weight – Inherit/default, Bolder, Bold, Normal, Lighter, Light,
  6. Image position – Background, Background center, No Image,
  7. Image base size – Full, Large, Medium, Small,
  8. Image hover effect – No effect, Zoom In, Zoom Out, To Grayscale, From Grayscale,
  9. Show poster – Hide / Show,
  10. Top spacing – No spacing, Extra small, Small, Normal, Medium, Large, Larger, Extra large,
  11. Bottom spacing – No spacing, Extra small, Small, Normal, Medium, Large, Larger, Extra large.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/slider-general-tab-new.jpg
Display Tab:
  1. Show categories – No, Supertitle, Supertitle highlighted, Subtitle, Bottom left, Bottom right,
  2. Show author – No, Supertitle, Subtitle, Bottom left, Bottom right,
  3. Show date – No, Supertitle, Subtitle, Bottom left, Bottom right,
  4. Show excerpt – Post excerpt text can be visible below post title,
  5. Show comments – No, Supertitle, Subtitle, Bottom left, Bottom right,
  6. Show reading time – No, Supertitle, Subtitle, Bottom left, Bottom right,
  7. Show view count – No, Supertitle, Subtitle, Bottom left, Bottom right,
  8. Show rating – No, Supertitle, Subtitle, Bottom left, Bottom right,
  9. Show post format – Hide, Show on image, in top left corner, Show on image, in top left corner, only media (video, audio, gallery), Show next to title, Show next to title, only media (video, audio, gallery),
  10. Read more text – Type any text,
  11. Read more button style – Light Outline / Accent Filled.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/slider-display-tab.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/slider-item-article-f.jpg

SECTION 30Tabs

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/tab.jpg

Once you add Tabs element, make sure to add single Tab Title:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/tab-item.jpg

Tabs Item can include:

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/accordion-elements.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/tab-f.jpg

SECTION 31Text

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/12/text.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/12/text-f.jpg

SECTION 32Twitter

As with Instagram element, you’ll need to register an application here to be able to use the element. Please follow the steps from our article: How to set up your Twitter widget?

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/twitter.jpg

SECTION 33Video

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2017/11/video.jpg

SECTION 34Weather

Weather element provides several options:

  1. Latitude – enter number,
  2. Longitude – enter number,
  3. Temperature unit – Celsius / Fahrenheit,
  4. Type – Now / Today / Tomorrow.
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/03/weather.jpg
http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/weather-example.jpg