Home 6. Theme Shortcodes

INTRODUCTIONTheme Shortcodes

List of all theme shortcodes.

All the content is build using Bold Builder page editor. More about Bold Builders’ features, read here.

Before you start creating a page, make sure to check how our editor Bold Builder works – 4. Creating Pages and Posts. First you need to add a section, then a row, columns and finally elements (shortcodes) listed in the following sections.

Especially for Val theme is created a new tab in Section – Posts.

Section

Val theme includes section filtering.

Here is the list of available filters:

  • Category Filter – type Post Category slugs separated by comma and show only posts in the section from that category (e.g. sport, business),
  • Post Format Filter – type Post Filter Format separated by comma (e.g. post-format-video, post-format-audio),
  • Taxonomy Filter – type Taxonomy slugs (tags etc.) separated by comma (e.g. tag:highlight, michael-jackson),
  • Post Author Username – type Author username and show only his posts (e.g. martin),
  • Date Filter – type strtotime()-compatible string (e.g. 7 days ago, 1 month ago),
  • Order by  – order posts Default (by date), Comment count descending,  Post views, Review rate descending or Random,
  • Show Posts Already Displayed on This Page – choose to Show or Hide,
  • Show Posts in Next Post Containers – choose to show Default (use other container’s settings) or to Force Show and repeat posts on the page,
  • Show Sticky Posts  – choose to Hide, Show in list or Show sticky posts on top.

For example: The post categories that will display in the section should be defined in Category filter field. It should contain the slug of the categories, 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/val/wp-content/uploads/sites/36/2018/10/newstar-section.png

Note: If section contains Articles Container element which lists posts with defined post categories or other, it will overrun the ones defined in the Section panel.

For example: On the following screenshot, column in the middle will inherit Color tag defined in Articles Container. The settings in Section (filter by post tag: Gallery) will be overridden.

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/section-articles.jpg

Row

Val theme allows you to set negative margin between rows in the section.
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/row-margin.jpg

Here is the example:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/row-margin-f.jpg

SECTION 01Accordion

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion.jpg

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

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-item.jpg

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

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-elements.jpg

SECTION 02Advanced Progress Bar

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/advanced-progress-bar.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. Color scheme – select one of the color schemes from the dropdown.
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-template.jpg
Title Tab:
  1. Title size – Extra Small, Small, Medium, Normal, Large, Extra large, Huge, Extra Huge,
  2. H tag – H1, H2, H3, H4,
  3. Heading font weight – Inherit/default, Bolder, Bold, Normal, Lighter, Light,
  4. Dash – None, Top, Bottom, Top & Bottom,
  5. Content style – Clear, Solid Background, Border, Left Border, Angled Background, Raised Background, Raised Background with Border.
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-title-tab.jpg
Image Tab:
  1. Image position – No Image, No Image, keep proportion, Background / Bottom Text, Background / Middle Text, Background / Side Text, Top, Top / Overlapping Text, Side, 1/4 width, Side, 1/2 width, Side, 2/3 width,
  2. Image style – Clear, Border, Border & Shadow, Shadow, Left Border, Angled Background, Raised Background, Raised Background with Border,
  3. Image format – Square, Horizontal 16×9, Horizontal 3×2, Horizontal 2×1, Vertical 16×9, Vertical 3×2, Vertical 2×1,
  4. Image base size – Large, Medium, Small,
  5. Custom image height – Any height in pixels,
  6. Image lazy load – effect visible on page load view,
  7. Image hover effect – No effect, Zoom In, Zoom Out, To Grayscale, From Grayscale, To Dark, To Light, Zoom In & Blur.
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-image-tab.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 – Yes, No,
  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, Show on image, only media (video, audio, gallery), Show on image center, only media (video, audio, gallery), Show next to title, Show next to title, only media (video, audio, gallery),
  10. Show read more icon – Hide, Show on bottom, Show on left.
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-display-tab.jpg

Here is the example:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-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/val/wp-content/uploads/sites/36/2018/10/article-container.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/val/wp-content/uploads/sites/36/2018/10/article-container-1.jpg

In the screenshot, Section has defined Style tag in Post Tab. Middle column contains Articles Container (with Article Teaser element) which has Post Tag – Museum.

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-container-f.jpg

SECTION 06Button

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/button.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/button-f.jpg

SECTION 07Cost Calculator

Documentation on Cost Calculator plugin can be found on the following link.

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/CC.jpg

Cost Calculator can include:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/cc-elements.jpg

SECTION 08Countdown

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/countdown.jpg

SECTION 09Counter

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/counter.jpg

SECTION 10Custom Menu

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/custom-menu.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/custom-menu.jpg

SECTION 11Google 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 Rapid Composer 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/val/wp-content/uploads/sites/36/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/val/wp-content/uploads/sites/36/2018/10/google-maps-location.jpg

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

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/google-map-elements.jpg

SECTION 12Headline

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/headline.jpg

Val theme allows you to edit Headline and choose style: Italic and Outline.

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/11/Outline-font.png
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/headline-f.jpg

SECTION 13Icon

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/icon.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/icon-f.jpg

SECTION 14Image

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image.jpg

Image element can include:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-elements.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-f.jpg

SECTION 15Image Slider

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-slider.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-slider-f.jpg

SECTION 16Inner Row

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/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/val/wp-content/uploads/sites/36/2017/11/inner-row-layout.jpg

SECTION 17Instagram

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

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/11/instagram-element.jpg

Note that Cache unique ID is automatically generated when the element is selected. It is a random group of numbers that helps to identify cache, if there is more than one Instagram element on the page.

SECTION 18Masonry Image Grid

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/masonry-image-grid.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/masonry-image-grid-f.jpg

SECTION 19Masonry Post Grid

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/masonry-post-grid.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/masonry-post-grid-f.jpg

Please note that the page set as the main Blog page in Reading Settings lists posts by default. Masonry Post Grid element should not be added to that page.

In order to have blog posts listed as Grid, proceed to create new page and add Masonry Post Grid element to it. Set the main Blog page as its Parent page.

SECTION 20Price List

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/price-list.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/price-list-f.jpg

SECTION 21Progress bar

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/12/percentage-bar.jpg

SECTION 22Promo Title

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/promo-title.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/promo-title-f.jpg

SECTION 23Raw Content

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

SECTION 24Separator

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/12/separator.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/separator-f.jpg

SECTION 25Service

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/service.jpg

SECTION 26Simple Cost Calculator

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/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/val/wp-content/uploads/sites/36/2017/11/simple-cost-calculator-item.jpg

SECTION 27Slider

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider.jpg

Slider element can contain Slider Item and Slider Article Teaser Template elements.

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-elements.jpg

1. Slider Item:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-item.jpg

2. Slider Article Teaser Template:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-article-teaser.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-f.jpg

SECTION 28Tabs

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

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

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/tab-item.jpg

Tabs Item can include:

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-elements.jpg

SECTION 29Text

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/text.jpg
http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/text-f.jpg

SECTION 30Twitter

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/val/wp-content/uploads/sites/36/2017/11/twitter.jpg

SECTION 31Video

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