Below, you’ll find a detailed guide on how to add the Theme Blvd Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Theme Blvd Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Theme Blvd Plugin and the shortcodes it provides:
Theme Blvd [column] Shortcode
The Theme Blvd Shortcode plugin’s ‘column’ shortcode is a versatile tool. It helps create a column layout in your posts or pages, enhancing the visual structure of your content. This shortcode, when added, calls the ‘themeblvd_shortcode_column’ function. This function retrieves the column instance from the Theme Blvd Column Shortcode class and returns it. This allows you to customize your content layout with various column structures.
Shortcode: [column]
Examples and Usage
Basic example – A simple column shortcode usage that creates a single column with content.
[column]Your content here[/column]Advanced examples
Creating a column with specific attributes. This example creates a column with a specific width and aligns the content to the center.
[column width="50%" align="center"]Your content here[/column]Creating multiple columns. This example creates two columns side by side, each with different content.
[column width="50%"]Your first column content here[/column]
[column width="50%"]Your second column content here[/column]Creating nested columns. This example creates a column within a column, useful for complex layouts.
[column width="75%"]Your outer column content here
[column width="50%"]Your inner column content here[/column]
[/column]PHP Function Code
In case you have difficulties debugging what causing issues with [column] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'column', 'themeblvd_shortcode_column' ); // All columns.Shortcode PHP function:
function themeblvd_shortcode_column( $atts, $content = null, $tag = '' ) {
$column = Theme_Blvd_Column_Shortcode::get_instance();
return $column->get( $atts, $content, $tag );
}
Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [clear] Shortcode
The Theme Blvd plugin includes a ‘clear’ shortcode. This shortcode is used to clear a row, essentially creating a break or space in your content layout. This shortcode returns a div with the class ‘clear’, which is typically styled with CSS to provide a visual separation or gap.
Shortcode: [clear]
Examples and Usage
Basic example – The shortcode ‘clear’ is used to insert a clear div, which is often used in web design to clear the float property of elements before it.
[clear /]Advanced examples
Even though the ‘clear’ shortcode doesn’t take any parameters, it can be used strategically within your content to ensure proper layout and design. For example, if you have two sections of content that you want to keep separate, you can use the ‘clear’ shortcode in between them to prevent any overlapping or irregular positioning.
[section id="section1"]...[/section]
[clear /]
[section id="section2"]...[/section]Another advanced usage of the ‘clear’ shortcode could be to use it in combination with other shortcodes, such as a ‘column’ shortcode, to ensure that content inside each column doesn’t overlap with the content in the next column.
[column id="column1"]...[/column]
[clear /]
[column id="column2"]...[/column]PHP Function Code
In case you have difficulties debugging what causing issues with [clear] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'clear', 'themeblvd_shortcode_clear' ); // Clear row @deprecated 1.4.2Shortcode PHP function:
function themeblvd_shortcode_clear() {
return '<div class="clear"></div>';
}
Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [icon_list] Shortcode
The Theme Blvd plugin’s ‘icon_list’ shortcode allows users to insert a custom-styled list with icons. The ‘icon_list’ shortcode accepts parameters like ‘style’, ‘icon’, and ‘color’. It uses these to create a list where each item is prefixed with a chosen FontAwesome icon. The ‘style’ parameter is deprecated. Instead, users can directly specify the FontAwesome icon and its color. The shortcode replaces ‘
- ‘ with a styled list and ‘
- ‘ with a list item prefixed with an icon. The icon’s color can be customized using the ‘color’ parameter.
The shortcode returns the HTML content with the styled list, which can be inserted anywhere on the website using the shortcode [icon_list].
Shortcode:
[icon_list]Parameters
Here is a list of all possible icon_list shortcode parameters and attributes:
style– defines the type of icon used in the listicon– specifies the FontAwesome icon to be usedcolor– sets the color of the icon using hex color codes
Examples and Usage
Basic Example – Display a list with default icon and color
[icon_list]- Item 1
- Item 2
- Item 3
Advanced Examples
Display a list with custom icon and color
[icon_list icon="star" color="#eec627"]- Item 1
- Item 2
- Item 3
Display a list with old style method
[icon_list style="check"]- Item 1
- Item 2
- Item 3
These examples demonstrate how the ‘icon_list’ shortcode can be customized with different parameters to display lists with different icons and colors. The shortcode is highly versatile and can be adapted to suit a variety of contexts and themes.
PHP Function Code
In case you have difficulties debugging what causing issues with
[icon_list]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'icon_list', 'themeblvd_shortcode_icon_list' );Shortcode PHP function:
function themeblvd_shortcode_icon_list( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => '', // @deprecated check, crank, delete, doc, plus, star, star2, warning, write 'icon' => 'caret-right', // Any fontawesome icon. 'color' => '', // Optional color hex for icon - ex: #000000 ), $atts ); /** * For those using old "style" method, this will * match the old style choices to a fontawesome icon * and add in a relevant color. */ if ( $atts['style'] ) { switch ( $atts['style'] ) { case 'check' : $atts['icon'] = 'ok-sign'; $atts['color'] = '#59f059'; break; case 'crank' : $atts['icon'] = 'cog'; $atts['color'] = '#d7d7d7'; break; case 'delete' : $atts['icon'] = 'remove-sign'; $atts['color'] = '#ff7352'; break; case 'doc' : $atts['icon'] = 'file'; $atts['color'] = '#b8b8b8'; break; case 'plus' : $atts['icon'] = 'plus-sign'; $atts['color'] = '#59f059'; break; case 'star' : $atts['icon'] = 'star'; $atts['color'] = '#eec627'; break; case 'star2' : $atts['icon'] = 'star'; $atts['color'] = '#a7a7a7'; break; case 'warning' : $atts['icon'] = 'warning-sign'; $atts['color'] = '#ffd014'; break; case 'write' : $atts['icon'] = 'pencil'; $atts['color'] = '#ffd014'; break; } } // Setup color. $color_css = ''; if ( $atts['color'] ) { $color_css = ' style="color:' . esc_attr( $atts['color'] ) . ';"'; } $content = str_replace( '<ul>', '<ul class="tb-icon-list fa-ul">', $content ); if ( function_exists( 'themeblvd_get_icon_class' ) ) { // Framework 2.7+ $content = str_replace( '<li>', '<li><span class="fa-li" ' . $color_css . '><i class="' . esc_attr( themeblvd_get_icon_class( $atts['icon'] ) ) . '"></i></span> ', $content ); } elseif ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $content = str_replace( '<li>', '<li><i class="fa-li fa fa-' . esc_attr( $atts['icon'] ) . '"' . $color_css . '></i> ', $content ); } else { $content = str_replace( '<li>', '<li><i class="icon-' . esc_attr( $atts['icon'] ) . '"' . $color_css . '></i> ', $content ); } return do_shortcode( $content ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [button] Shortcode
The Theme Blvd plugin’s ‘button’ shortcode is used to create customizable buttons. It allows you to specify attributes like link, color, target, size, class, title, icons, and more. The shortcode also includes options for customizing the background, border, and text colors, as well as the hover effects. This shortcode makes it easy to add stylish, functional buttons to your WordPress site.
Shortcode:
[button]Parameters
Here is a list of all possible button shortcode parameters and attributes:
link– the URL the button will redirect to when clicked.color– defines the color of the button.target– determines where the link will open, in the same or a new tab.size– specifies the size of the button.class– additional CSS classes to customize the button’s design.title– text that will display on mouse hover over the button.icon_before– an icon to be displayed before the button text.icon_after– an icon to be displayed after the button text.block– indicates if the button should occupy the full container width.bg– sets the background color of the button.bg_hover– sets the button’s background color on mouse hover.border– sets the border color of the button.text– defines the text color of the button.text_hover– sets the button’s text color on mouse hover.include_bg– indicates if the button should have a background color.include_border– indicates if the button should have a border.
Examples and Usage
Basic example – Displaying a simple button with a link
[button link="http://example.com"]Click Me[/button]Advanced examples
Creating a custom colored button with a target attribute to open the link in a new tab, an icon before the text, and a specific CSS class.
[button link="http://example.com" color="custom" target="_blank" icon_before="star" class="my-button"]Click Me[/button]Creating a button with custom background, border, and text colors. The button will not include a background or border by default, and will change color when hovered over.
[button link="http://example.com" color="custom" bg="#ff0000" bg_hover="#00ff00" border="#0000ff" text="#ffffff" text_hover="#000000" include_bg="false" include_border="false"]Click Me[/button]Creating a block-level button that spans the full width of its parent container.
[button link="http://example.com" block="true"]Click Me[/button]PHP Function Code
In case you have difficulties debugging what causing issues with
[button]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'button', 'themeblvd_shortcode_button' );Shortcode PHP function:
function themeblvd_shortcode_button( $atts, $content = null ) { $output = ''; $atts = shortcode_atts( array( 'link' => '', 'color' => 'default', 'target' => '_self', 'size' => '', 'class' => '', 'title' => '', 'icon_before' => '', 'icon_after' => '', 'block' => 'false', 'bg' => '#ffffff', 'bg_hover' => '#ebebeb', 'border' => '#cccccc', 'text' => '#333333', 'text_hover' => '#333333', 'include_bg' => 'true', 'include_border' => 'true', ), $atts ); $class = 'btn-shortcode'; if ( $atts['class'] ) { $class .= ' ' . $atts['class']; } if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $addon = ''; if ( 'custom' === $atts['color'] && version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { if ( 'true' !== $atts['include_bg'] ) { $atts['bg'] = 'transparent'; } if ( 'true' !== $atts['include_border'] ) { $atts['border'] = 'transparent'; } $addon = sprintf( 'style="background-color: %1$s; border-color: %2$s; color: %3$s;" data-bg="%1$s" data-bg-hover="%4$s" data-text="%3$s" data-text-hover="%5$s"', $atts['bg'], $atts['border'], $atts['text'], $atts['bg_hover'], $atts['text_hover'] ); } if ( 'true' === $atts['block'] ) { $block = true; } else { $block = false; } $output = themeblvd_button( $content, $atts['link'], $atts['color'], $atts['target'], $atts['size'], $class, $atts['title'], $atts['icon_before'], $atts['icon_after'], $addon, $block ); } else { $output = themeblvd_button( $content, $atts['link'], $atts['color'], $atts['target'], $atts['size'], $class, $atts['title'], $atts['icon_before'], $atts['icon_after'] ); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [box] Shortcode
The Theme Blvd plugin’s ‘box’ shortcode is used to create a stylized information box. It allows customization of the box’s style and icon. The ‘box’ shortcode accepts two parameters: ‘style’ and ‘icon’. The ‘style’ parameter changes the box’s color, with options including blue, green, grey, orange, purple, red, teal, and yellow. The ‘icon’ parameter adds an icon to the box. If an icon is added, the box will have an additional class ‘info-box-has-icon’. The icon’s design depends on the Theme Blvd Framework version used. The ‘box’ shortcode returns a div with the class ‘info-box’ and the style class specified. If an icon is added, it will be included in the div. The content of the div is filtered through ‘themeblvd_the_content’ for sanitization.
Shortcode:
[box]Parameters
Here is a list of all possible box shortcode parameters and attributes:
style– defines the color of the box (blue, green, grey, orange, purple, red, teal, yellow)icon– specifies the icon to be used in the box
Examples and Usage
Basic example – Display a blue information box with no icon.
[box style='blue' /]Advanced examples
Display a red information box with a ‘check’ icon. The box will first try to load with the icon, but if not found, it will display without the icon.
[box style='red' icon='check' /]Display a green information box with a ‘user’ icon. The box will first try to load with the icon, but if not found, it will display without the icon.
[box style='green' icon='user' /]Display a yellow information box with a ‘home’ icon. The box will first try to load with the icon, but if not found, it will display without the icon.
[box style='yellow' icon='home' /]PHP Function Code
In case you have difficulties debugging what causing issues with
[box]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'box', 'themeblvd_shortcode_box' ); // @deprecated 1.4.0Shortcode PHP function:
function themeblvd_shortcode_box( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => 'blue', // Possible Values: blue, green, grey, orange, purple, red, teal, yellow. 'icon' => '', ), $atts ); $class = sprintf( 'info-box info-box-%s', $atts['style'] ); if ( $atts['icon'] ) { $class .= ' info-box-has-icon'; if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $content = sprintf( '<i class="icon fa fa-%s"></i>%s', $atts['icon'], $content ); } else { $content = sprintf( '<i class="icon-%s"></i>%s', $atts['icon'], $content ); } } return sprintf( '<div class="%s">%s</div>', $class, /** * Standard filter in Theme Blvd Framework, where * sanitization is applied. * * @since 1.1.0 * * @var string */ apply_filters( 'themeblvd_the_content', $content ) ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [alert] Shortcode
The Theme Blvd plugin’s ‘alert’ shortcode is used to display alert messages on your WordPress site. This shortcode allows you to customize the alert style (info, success, danger, warning), and whether it can be closed. The alert message is enclosed within a div class, and if the ‘close’ attribute is set to ‘true’, a close button is included.
Shortcode:
[alert]Parameters
Here is a list of all possible alert shortcode parameters and attributes:
style– determines the alert type: info, success, danger, warningclose– decides if the alert can be closed: true, false
Examples and Usage
Basic Example – Displaying an alert message with default settings.
[alert]This is a basic alert![/alert]Advanced Examples
Displaying a success alert message with a close button.
[alert style="success" close="true"]Operation was successful![/alert]Displaying a danger alert message without a close button.
[alert style="danger" close="false"]This is a critical warning![/alert]Displaying a warning alert message with a close button.
[alert style="warning" close="true"]This is a warning message![/alert]Displaying an info alert message without a close button.
[alert style="info" close="false"]This is an informational message![/alert]PHP Function Code
In case you have difficulties debugging what causing issues with
[alert]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'alert', 'themeblvd_shortcode_alert' );Shortcode PHP function:
function themeblvd_shortcode_alert( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => 'info', // Possible Values: info, success, danger, warning. 'close' => 'false', // Possible Values: true, false. ), $atts ); // In Bootstrap 3, 'message' was changed to 'warning'. if ( 'message' === $atts['style'] ) { $atts['style'] = 'warning'; } $class = 'alert'; if ( in_array( $atts['style'], array( 'info', 'success', 'danger', 'warning' ), true ) ) { // Twitter Bootstrap options. $class .= sprintf( ' alert-%s', $atts['style'] ); } if ( 'true' === $atts['close'] ) { $class .= ' fade in'; } $output = sprintf( '<div class="%s">', $class ); if ( 'true' === $atts['close'] ) { $output .= '<button type="button" class="close" data-dismiss="alert">×</button>'; } $output .= $content . '</div><!-- .alert (end) -->'; return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [divider] Shortcode
The Theme Blvd plugin’s ‘divider’ shortcode is a versatile tool for customizing content separation. This shortcode creates a customizable divider line. It allows you to set the style, color, opacity, icon, icon color, icon size, width, and placement of the divider. It also supports the use of FontAwesome icons. This shortcode provides an easy way to visually separate sections of content, enhancing readability and aesthetics.
Shortcode:
[divider]Parameters
Here is a list of all possible divider shortcode parameters and attributes:
style– Defines the style of divider like solid, dashed, etc.color– Sets the color of the divider in hex format.opacity– Determines the opacity level of the divider.icon– Inserts an icon in the middle of the divider.icon_color– Defines the color of the inserted icon.icon_size– Sets the font size of the icon.width– Specifies the width of the divider in pixels.placement– Determines the placement of the divider in relation to the content.
Examples and Usage
Basic example – A simple divider with default values
[divider /]Advanced examples
Creating a dashed divider with a custom color and opacity
[divider style="dashed" color="#ff0000" opacity="0.5" /]Adding a FontAwesome icon to the divider, with custom icon color and size
[divider icon="fa-heart" icon_color="#00ff00" icon_size="20" /]Adjusting the width and placement of the divider
[divider width="200" placement="above" /]Combining multiple parameters to create a unique divider
[divider style="double-dashed" color="#0000ff" opacity="0.8" icon="fa-star" icon_color="#ffff00" icon_size="25" width="300" placement="below" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[divider]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'divider', 'themeblvd_shortcode_divider' );Shortcode PHP function:
function themeblvd_shortcode_divider( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => 'solid', // Style of divider - shadow, solid, dashed, thick-solid, thick-dashed, double-solid, double-dashed. 'color' => '#cccccc', // Hex color of divider (not for shadow style). 'opacity' => '1', // Opacity of divider (not for shadow style). 'icon' => '', // Icon placed in middle of devider, FontAwesome ID (not for shadow style). 'icon_color' => '#666666', // Color of icon (not for shadow style). 'icon_size' => '15', // Font size of icon (not for shadow style). 'width' => '', // A width for the divider in pixels. 'placement' => 'equal', // Where the divider sits between the content - equal, above (closer to content above), below (closer to content below). ), $atts ); if ( function_exists( 'themeblvd_get_divider' ) ) { // Framework 2.5+. $atts['type'] = $atts['style']; if ( $atts['icon'] ) { $atts['insert'] = 'icon'; $atts['text_color'] = $atts['icon_color']; $atts['text_size'] = $atts['icon_size']; } $output = themeblvd_get_divider( $atts ); } else { $output = themeblvd_divider( $atts['style'] ); // @deprecated } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [popup] Shortcode
The Theme Blvd Popup Shortcode enables the creation of a customizable popup. It allows you to define the text, title, color, size, and icons of the button or link that triggers the popup. Additionally, you can set the header text and choose whether the popup animation slides in or not.
Shortcode:
[popup]Parameters
Here is a list of all possible popup shortcode parameters and attributes:
text– Specifies the link or button text leading to popup.title– Defines the title for the anchor, defaults to “text” option.color– Sets the color of button, applies only if button style is selected.size– Determines the size of the button.icon_before– Chooses an icon before button or link’s text.icon_after– Chooses an icon after button or link’s text.header– Sets the header text for the popup.animate– Controls if the popup slides in or not – true, false.id– Generates a unique identifier for the popup.content– Contains the content of the popup.
Examples and Usage
Basic example – The following shortcode uses the ‘popup’ shortcode to create a button that triggers a popup. The ‘text’ attribute defines the button’s text, and the ‘content’ attribute defines the content of the popup.
[popup text="Click Me" color="default"]Hello, this is a popup content![/popup]Advanced examples
Adding more features to the popup, such as a title, an icon before the button text, and an animated entrance. The ‘title’ attribute gives the button a title, ‘icon_before’ adds an icon before the button text, and ‘animate’ makes the popup slide in when triggered.
[popup text="Click Me" title="Popup Title" color="default" icon_before="yes" animate="true"]Hello, this is a popup content with more features![/popup]Creating a larger button with an icon after the text, and a header for the popup. The ‘size’ attribute changes the size of the button, ‘icon_after’ adds an icon after the button text, and ‘header’ adds a header to the popup.
[popup text="Click Me" color="default" size="large" icon_after="yes" header="Popup Header"]Hello, this is a larger popup content with header and icon![/popup]PHP Function Code
In case you have difficulties debugging what causing issues with
[popup]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'popup', 'themeblvd_shortcode_popup' );Shortcode PHP function:
function themeblvd_shortcode_popup( $atts, $content = null ) { $atts = shortcode_atts( array( 'text' => 'Link Text', // Text for link or button leading to popup. 'title' => '', // Title for anchor, will default to "text" option. 'color' => 'default', // Color of button, only applies if button style is selected. 'size' => '', // Size of button. 'icon_before' => '', // Icon before button or link's text. 'icon_after' => '', // Icon after button or link's text. 'header' => '', // Header text for popup. 'animate' => 'false', // Whether popup slides in or not - true, false. ), $atts ); $atts['id'] = uniqid( 'popup_' . rand() ); $atts['content'] = $content; $popups = Theme_Blvd_Popup_Shortcode::get_instance(); $popups->add( $atts ); /** * Standard filter in Theme Blvd Framework, where * sanitization is applied. * * @since 1.0.0 * * @var string */ return apply_filters( 'themeblvd_the_content', themeblvd_button( $atts['text'], '#' . $atts['id'], $atts['color'], null, $atts['size'], null, $atts['text'], $atts['icon_before'], $atts['icon_after'], 'data-toggle="modal"' )); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [lightbox] Shortcode
The Theme Blvd Lightbox shortcode is a versatile tool for creating engaging lightbox effects. It allows users to define attributes such as the link to be displayed in the lightbox, the thumbnail image or text, the caption, width, alignment, and title. Other customizable features include the option to display a frame around the thumbnail, the maximum width of the frame, and the icon for the thumbnail. This shortcode is compatible with Theme Blvd framework v2.3+ and provides an alert message if the required framework is not available. It also supports custom CSS classes for further personalization. The output of the shortcode is a lightbox link wrapped around a thumbnail image or text, which can be further customized with a caption and alignment options. In summary, the Theme Blvd Lightbox shortcode provides a flexible and customizable solution for adding lightbox effects to your WordPress site.
Shortcode:
[lightbox]Parameters
Here is a list of all possible lightbox shortcode parameters and attributes:
link– URL that will be displayed in the lightbox popup.thumb– Text or Image URL used for the lightbox link.caption– Text displayed below the thumbnail image.width– Determines the width of the thumbnail image.align– Sets the alignment of the thumbnail image.title– Text displayed in the lightbox link.frame– Decides if a frame is displayed around the thumbnail.frame_max– Determines if the frame’s width is maxed to the image’s width.icon– Icon for the thumbnail when framed – can be video or image.class– CSS class to append to the link or frame if enabled.
Examples and Usage
Basic example – Display a lightbox with an image thumbnail.
[lightbox link="https://example.com/image.jpg" thumb="https://example.com/thumbnail.jpg" /]Advanced examples
Display a lightbox with an image thumbnail, custom width, alignment, and title.
[lightbox link="https://example.com/image.jpg" thumb="https://example.com/thumbnail.jpg" width="200" align="left" title="My Image" /]Display a lightbox with an image thumbnail, custom width, alignment, title, and a caption.
[lightbox link="https://example.com/image.jpg" thumb="https://example.com/thumbnail.jpg" width="200" align="left" title="My Image" caption="This is my image" /]Display a lightbox with an image thumbnail, custom width, alignment, title, a caption, and a custom class.
[lightbox link="https://example.com/image.jpg" thumb="https://example.com/thumbnail.jpg" width="200" align="left" title="My Image" caption="This is my image" class="my-custom-class" /]Display a lightbox with an image thumbnail, custom width, alignment, title, a caption, a custom class, and without a frame.
[lightbox link="https://example.com/image.jpg" thumb="https://example.com/thumbnail.jpg" width="200" align="left" title="My Image" caption="This is my image" class="my-custom-class" frame="false" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[lightbox]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'lightbox', 'themeblvd_shortcode_lightbox' );Shortcode PHP function:
function themeblvd_shortcode_lightbox( $atts, $content = null ) { // Shortcode requires framework 2.3+. if ( ! function_exists( 'themeblvd_is_lightbox_url' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'You must be using a theme with Theme Blvd framework v2.3+ to use the [lightbox] shortcode.', 'theme-blvd-shortcodes' ) ); } $atts = shortcode_atts( array( 'link' => '', // URL being linked to in the lightbox popup. 'thumb' => '', // Text or Image URL being used for link to lightbox. 'caption' => '', // Caption below thumbnail. 'width' => '', // Width of tumbnail image linking to lighbox. 'align' => 'none', // Alignment of thumbnail image. 'title' => '', // Title displayed in lightbox link. 'frame' => 'true', // Whether or not to display frame around thumbnail. 'frame_max' => 'true', // Whether or not the frame takes on the image's width as a max-width (super-secret and not in generator). 'icon' => 'image', // Icon for thumbnail if in frame - video or image. 'class' => '', // Class to append to <a>, or frame if enabled. ), $atts ); $output = ''; $thumb = $atts['thumb']; $has_thumb_img = false; $thumb_type = wp_check_filetype( $thumb ); if ( 'image' === substr( $thumb_type['type'], 0, 5 ) ) { $has_thumb_img = true; $thumb = sprintf( '<img src="%s" alt="%s"', $thumb, $atts['title'] ); if ( $atts['width'] ) { $thumb .= sprintf( ' width="%s"', $atts['width'] ); } if ( 'false' === $atts['frame'] && 'none' !== $atts['align'] ) { // If image is framed, the alignment will be on the frame. $thumb .= sprintf( ' class="align%s"', $atts['align'] ); } $thumb .= ' />'; if ( function_exists( 'themeblvd_get_thumbnail_link_icon' ) ) { $thumb .= themeblvd_get_thumbnail_link_icon( $atts['icon'] ); } } $anchor_classes = 'tb-thumb-link ' . $atts['icon']; if ( 'true' === $atts['frame'] ) { $anchor_classes .= ' thumbnail'; } if ( 'false' === $atts['frame'] && $atts['class'] ) { $anchor_classes .= ' ' . $atts['class']; } if ( $atts['caption'] ) { $anchor_classes .= ' has-caption'; } /** * Filter arguments used to wrap thumbnail image/text * in a link to a lightbox, which are passed to * themeblvd_get_link_to_lightbox(). * * @since 1.1.0 * * @var array * @param array $atts All attributes for shortcode. */ $args = apply_filters( 'themeblvd_lightbox_shortcode_args', array( 'item' => $thumb, 'link' => $atts['link'], 'title' => $atts['title'], 'class' => $anchor_classes, ), $atts ); $output .= themeblvd_get_link_to_lightbox( $args ); // Wrap link and thumbnail image in frame. if ( 'true' === $atts['frame'] && $has_thumb_img ) { $wrap_classes = 'tb-lightbox-shortcode'; if ( 'none' !== $atts['align'] ) { $wrap_classes .= ' align' . $atts['align']; } if ( $atts['class'] ) { $wrap_classes .= ' ' . $atts['class']; } // Force inline styling. $style = ''; if ( $atts['width'] && 'true' === $atts['frame_max'] ) { $style = sprintf( 'max-width: %spx', $atts['width'] ); } $wrap = '<div class="' . $wrap_classes . '" style="' . $style . '">'; $wrap .= '%s'; if ( $atts['caption'] ) { $wrap .= sprintf( '<p class="wp-caption-text">%s</p>', $atts['caption'] ); } $wrap .= '</div>'; /** * Filter the wrapping thumbnail template * used with sprintf(). * * @since 1.1.0 * * @var string * @param string $wrap_classes CSS classes incorporated into wrapping HTML. * @param string $style Inline styles incorporated into wrapping HTML. */ $wrap = apply_filters( 'themeblvd_lightbox_shortcode_thumbnail_wrap', $wrap, $wrap_classes, $style ); $output = sprintf( $wrap, $output ); } elseif ( $atts['caption'] ) { $output .= sprintf( '<p class="wp-caption-text">%s</p>', $atts['caption'] ); } /** * Filter the wrapping thumbnail template * used with sprintf(). * * @since 1.1.0 * * @var string * @param array $atts All attributes for shortcode. * @param string $thumb HTML for thumbnail image only. */ return apply_filters( 'themeblvd_shortcode_lightbox', $output, $atts, $thumb ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [lightbox_gallery] Shortcode
The Theme Blvd plugin’s ‘lightbox_gallery’ shortcode is designed to create a lightbox gallery within a theme. It requires the Theme Blvd framework v2.3+ to function. This shortcode checks if the ‘themeblvd_is_lightbox_url’ function exists. If not, it returns an error message. If it does, it processes the content within a ‘themeblvd-gallery’ div.
Shortcode:
[lightbox_gallery]Examples and Usage
Basic example – A simple usage of the lightbox gallery shortcode to display a gallery of images.
[lightbox_gallery] [/lightbox_gallery]Advanced examples
Injecting images into the lightbox gallery shortcode. The images will be displayed in a lightbox gallery format on the website.
[lightbox_gallery]
[/lightbox_gallery]Using the lightbox gallery shortcode with additional CSS classes. The CSS classes will be applied to the lightbox gallery, allowing for additional styling options.
[lightbox_gallery class="my-custom-class"]
[/lightbox_gallery]PHP Function Code
In case you have difficulties debugging what causing issues with
[lightbox_gallery]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'lightbox_gallery', 'themeblvd_shortcode_lightbox_gallery' );Shortcode PHP function:
function themeblvd_shortcode_lightbox_gallery( $atts, $content = null ) { // Shortcode requires framework 2.3+. if ( ! function_exists( 'themeblvd_is_lightbox_url' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'You must be using a theme with Theme Blvd framework v2.3+ to use the [lightbox] shortcode.', 'theme-blvd-shortcodes' ) ); } return sprintf( '<div class="themeblvd-gallery">%s</div>', do_shortcode( $content ) ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [blockquote] Shortcode
The Theme Blvd plugin’s ‘blockquote’ shortcode is designed to insert a stylized blockquote into your content. The shortcode takes attributes for the quote text, source, source link, alignment, maximum width, and additional CSS classes. If your theme supports the [blockquote] shortcode, it will display the quote with the specified attributes. If not, it will display a message indicating that your theme does not support the shortcode.
Shortcode:
[blockquote]Parameters
Here is a list of all possible blockquote shortcode parameters and attributes:
quote– The text of the quote you want to displaysource– The origin or author of the quotesource_link– The URL where you can find the original quotealign– Sets the alignment of the blockquote (left, right)max_width– Sets the maximum width for the blockquote (e.g., 300px, 50%)class– Any extra CSS classes you want to add to the blockquote
Examples and Usage
Basic example – A simple usage of the ‘blockquote’ shortcode to display a quote with a specified source.
[blockquote quote="The only way to do great work is to love what you do." source="Steve Jobs" /]Advanced examples
Using the shortcode to display a blockquote with additional parameters such as alignment, maximum width, and additional CSS classes.
[blockquote quote="The only way to do great work is to love what you do." source="Steve Jobs" align="right" max_width="50%" class="highlight" /]Using the shortcode to display a blockquote with a linked source. The source name will be hyperlinked to the specified URL.
[blockquote quote="The only way to do great work is to love what you do." source="Steve Jobs" source_link="https://www.apple.com/stevejobs/" /]Using the shortcode to display a blockquote with a linked source and additional CSS classes. The source name will be hyperlinked to the specified URL, and the blockquote will have the additional CSS classes applied.
[blockquote quote="The only way to do great work is to love what you do." source="Steve Jobs" source_link="https://www.apple.com/stevejobs/" class="highlight blue" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[blockquote]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'blockquote', 'themeblvd_shortcode_blockquote' );Shortcode PHP function:
function themeblvd_shortcode_blockquote( $atts ) { $atts = shortcode_atts( array( 'quote' => '', 'source' => '', // Source of quote. 'source_link' => '', // URL to link source to. 'align' => '', // How to align blockquote - left, right. 'max_width' => '', // Meant to be used with align left/right - 300px, 50%, etc. 'class' => '', // Any additional CSS classes. ), $atts ); $output = __( 'Your theme does not support the [blockquote] shortcode.', 'theme-blvd-shortcodes' ); if ( function_exists( 'themeblvd_get_blockquote' ) ) { // Framework 2.4+. $output = themeblvd_get_blockquote( $atts ); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [jumbotron] Shortcode
The Theme Blvd plugin’s ‘jumbotron’ shortcode is designed to enhance the visual appeal of a webpage. It provides a customizable section with flexible design options. This shortcode enables users to add a jumbotron unit with a title, background color, text size, text color, and alignment options. The ‘jumbotron’ shortcode can be used to highlight important content and offers a variety of customization options to suit different design needs. It checks for theme support and provides an error message if unsupported.
Shortcode:
[jumbotron]Parameters
Here is a list of all possible jumbotron shortcode parameters and attributes:
title– Specifies the title of the jumbotron unit.bg_color– Sets the background color using hex color value.title_size– Determines the size of the title text.title_color– Sets the color of the title text using hex color value.text_size– Determines the size of the content text.text_color– Sets the color of the content text using hex color value.text_align– Defines the alignment of the text (left, right, center).align– Defines the alignment of the jumbotron (left, right, center).max_width– Sets the maximum width of the jumbotron.class– Adds any additional CSS classes.wpautop– Decides whether to apply wpautop on content.
Examples and Usage
Basic example – Displaying a simple jumbotron with a title and content.
[jumbotron title="Welcome to Our Website" text_size="18px"]This is a simple jumbotron example.[/jumbotron]Advanced examples
Displaying a jumbotron with a title, content, and custom background color, text color, and alignment.
[jumbotron title="Welcome to Our Website" bg_color="#ff0000" title_color="#ffffff" text_color="#ffffff" text_align="center"]This is an advanced jumbotron example with custom colors and alignment.[/jumbotron]Using the shortcode to display a jumbotron with a title, content, custom background color, text color, alignment and maximum width. The jumbotron is also aligned to the right.
[jumbotron title="Welcome to Our Website" bg_color="#ff0000" title_color="#ffffff" text_color="#ffffff" text_align="center" align="right" max_width="50%"]This is another advanced jumbotron example with custom colors, alignment and maximum width.[/jumbotron]Please note that these examples assume that your theme supports the [jumbotron] shortcode. If your theme does not support this shortcode, you may receive a message that says “Your theme does not support the [jumbotron] shortcode.”
PHP Function Code
In case you have difficulties debugging what causing issues with
[jumbotron]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'jumbotron', 'themeblvd_shortcode_jumbotron' );Shortcode PHP function:
function themeblvd_shortcode_jumbotron( $atts, $content = null ) { $atts = shortcode_atts( array( 'title' => '', // Title of unit. 'bg_color' => '', // Background hex color value (framework 2.5+). 'title_size' => '30px', // Title text size (framework 2.5+). 'title_color' => '', // Title text hex color value (framework 2.5+). 'text_size' => '18px', // Content text size (framework 2.5+). 'text_color' => '', // Content text hex color value (framework 2.5+). 'text_align' => 'left', // How to align text - left, right, center. 'align' => '', // How to align jumbotron - left, right, center. 'max_width' => '', // Meant to be used with align left/right - 300px, 50%, etc. 'class' => '', // Any additional CSS classes. 'wpautop' => 'true', // Whether to apply wpautop on content. ), $atts ); $output = __( 'Your theme does not support the [jumbotron] shortcode.', 'theme-blvd-shortcodes' ); if ( function_exists( 'themeblvd_get_jumbotron' ) ) { // Framework 2.4.2. // Format content for framework 2.5+. if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { $atts['blocks'] = array(); if ( $atts['title'] ) { $atts['blocks']['block_1'] = array( 'text' => $atts['title'], 'size' => $atts['title_size'], 'color' => $atts['title_color'], 'apply_bg_color' => '0', 'bg_color' => '#f2f2f2', 'bg_opacity' => '1', 'bold' => '1', 'italic' => '0', 'caps' => '0', 'wpautop' => '1', ); } $atts['blocks']['block_2'] = array( 'text' => $content, 'size' => $atts['text_size'], 'color' => $atts['text_color'], 'apply_bg_color' => '0', 'bg_color' => '#f2f2f2', 'bg_opacity' => '1', 'bold' => '0', 'italic' => '0', 'caps' => '0', 'wpautop' => '1', ); $content = null; // Content blocks above replace $content in framework 2.5+. } if ( $atts['bg_color'] ) { $atts['apply_bg_color'] = '1'; $atts['apply_content_bg'] = '1'; // Framework 2.5+. $atts['content_bg_color'] = $atts['bg_color']; // Framework 2.5+. } $atts['max'] = $atts['max_width']; if ( 'false' === $atts['wpautop'] ) { $atts['wpautop'] = false; } else { $atts['wpautop'] = true; } $output = themeblvd_get_jumbotron( $atts, $content ); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [panel] Shortcode
The Theme Blvd plugin’s ‘panel’ shortcode is used to create a stylized panel on your WordPress site. This panel can have a title, a footer, and its text alignment can be adjusted. The ‘panel’ shortcode allows customization through various attributes. These include ‘style’, ‘title’, ‘footer’, ‘text_align’, ‘align’, ‘max_width’, ‘class’, and ‘wpautop’. These attributes give you control over the appearance and alignment of the panel, the application of wpautop on content, and additional CSS classes. The shortcode function checks if the ‘themeblvd_get_panel’ function exists, and uses it if available. If not, it creates a panel with the given attributes and content. The output is a panel that fits your specifications, enhancing the aesthetic and functionality of your WordPress site.
Shortcode:
[panel]Parameters
Here is a list of all possible panel shortcode parameters and attributes:
style– Specifies the panel style – primary, success, info, warning, danger.title– Sets the header for the panel.footer– Sets the footer for the panel.text_align– Determines the text alignment – left, right, center.align– Sets the alignment of the panel – left, right.max_width– Used with left/right alignment – values like 300px, 50%.class– Adds any additional CSS classes.wpautop– Determines whether to apply wpautop on content.
Examples and Usage
Basic example – Displaying a simple panel with default style and text alignment.
[panel]Your content goes here[/panel]Advanced examples
Creating a panel with a title and footer, using the ‘success’ style, and aligning the text to the center.
[panel style="success" title="Panel Title" footer="Panel Footer" text_align="center"]Your content goes here[/panel]Displaying a panel with additional CSS classes, aligned to the right, with a maximum width of 50%.
[panel align="right" max_width="50%" class="my-custom-class"]Your content goes here[/panel]Creating a ‘warning’ style panel with a title and footer, aligning the panel to the left, and disabling the wpautop function.
[panel style="warning" title="Panel Title" footer="Panel Footer" align="left" wpautop="false"]Your content goes here[/panel]PHP Function Code
In case you have difficulties debugging what causing issues with
[panel]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'panel', 'themeblvd_shortcode_panel' );Shortcode PHP function:
function themeblvd_shortcode_panel( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => 'default', // Style of panel - primary, success, info, warning, danger. 'title' => '', // Header for panel. 'footer' => '', // Footer for panel. 'text_align' => 'left', // How to align text - left, right, center. 'align' => '', // How to align panel - left, right. 'max_width' => '', // Meant to be used with align left/right - 300px, 50%, etc. 'class' => '', // Any additional CSS classes. 'wpautop' => 'true', // Whether to apply wpautop on content. ), $atts ); if ( 'true' === $atts['wpautop'] ) { $content = wpautop( $content ); } if ( function_exists( 'themeblvd_get_panel' ) ) { // Framework 2.5+. $output = themeblvd_get_panel( $atts, $content ); } else { $class = sprintf( 'panel panel-%s text-%s', $atts['style'], $atts['text_align'] ); if ( $atts['class'] ) { $class .= ' ' . $atts['class']; } $output = sprintf( '<div class="%s">', $class ); if ( $atts['title'] ) { $output .= sprintf( '<div class="panel-heading"><h3 class="panel-title">%s</h3></div>', $atts['title'] ); } $output .= sprintf( '<div class="panel-body">%s</div>', do_shortcode( $content ) ); if ( $atts['footer'] ) { $output .= sprintf( '<div class="panel-footer">%s</div>', $atts['footer'] ); } $output .= '</div><!-- .panel (end) -->'; } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [testimonial] Shortcode
The Theme Blvd plugin’s ‘testimonial’ shortcode is designed to display testimonials on your WordPress site. It requires Theme Blvd Framework 2.5+ to function. The shortcode allows you to customize the testimonial text, name, tagline, and company of the person giving the testimonial. It also supports the addition of an image.
Shortcode:
[testimonial]Parameters
Here is a list of all possible testimonial shortcode parameters and attributes:
text– The testimonial text that will be displayed.name– The name of the person who gave the testimonial.tagline– The tagline or position of the testimonial giver.company– The company name of the testimonial giver.company_url– The website link of the testimonial giver’s company.image– The picture of the person who gave the testimonial.
Examples and Usage
Basic example – A simple testimonial shortcode usage, which only includes the testimonial text and the name of the person giving the testimonial.
[testimonial text="This is a great product!" name="John Doe" /]Advanced example – A more detailed testimonial shortcode usage, including the testimonial text, the name of the person, their tagline or position, the company they work for, the company URL, and an image.
[testimonial text="This service is amazing!" name="Jane Smith" tagline="CEO" company="Acme Corp" company_url="http://www.acme-corp.com" image="http://www.example.com/path/to/image.jpg" /]Here, the shortcode is being used to display a detailed testimonial. It includes the testimonial text, the name of the person giving the testimonial, their tagline or position, the company they work for, the URL of the company’s website, and an image of the person. The image URL must be a direct link to the image file.
PHP Function Code
In case you have difficulties debugging what causing issues with
[testimonial]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'testimonial', 'themeblvd_shortcode_testimonial' );Shortcode PHP function:
function themeblvd_shortcode_testimonial( $atts, $content = null ) { // This shortcode requires Theme Blvd Framework 2.5+. if ( ! function_exists( 'themeblvd_get_team_member' ) ) { return __( 'Your theme does not support the [testimonial] shortcode. You must be using a theme with Theme Blvd Framework 2.5+', 'theme-blvd-shortcodes' ); } $atts = shortcode_atts( array( 'text' => '', // Text for testimonial. 'name' => '', // Name of person giving testimonial. 'tagline' => '', // Tagline or position of person giving testimonial. 'company' => '', // Company of person giving testimonial. 'company_url' => '', // Company URL of person giving testimonial. 'image' => array(), // Image of person giving testimonial. ), $atts ); $image = $atts['image']; $atts['image'] = array(); if ( $image ) { $atts['image']['src'] = $image; $atts['image']['title'] = $atts['name']; } if ( $content ) { $atts['text'] = $content; } return themeblvd_get_testimonial( $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [pricing_table] Shortcode
The Theme Blvd plugin’s shortcode, ‘pricing_table’, is designed to generate a customizable pricing table. It’s a powerful tool for displaying various pricing options on your WordPress site. The ‘pricing_table’ shortcode allows you to set the currency symbol and its placement. It also enables the addition of features to each pricing column and the inclusion of a button. Please note, this shortcode requires Theme Blvd Framework 2.5+.
Shortcode:
[pricing_table]Parameters
Here is a list of all possible pricing_table shortcode parameters and attributes:
currency– Symbol used to represent the currency in the pricing table.currency_placement– Determines the placement of the currency symbol, either before or after the prices.
Examples and Usage
Basic example – A simple pricing table shortcode with default parameters.
[pricing_table][/pricing_table]Advanced examples
Creating a pricing table shortcode with a currency symbol as Euro (€) and its placement before the price.
[pricing_table currency="€" currency_placement="before"][/pricing_table]Using the shortcode to display a pricing table with multiple columns, each with its own set of features and button text.
[pricing_table currency="$" currency_placement="before"] [pricing_column title="Basic Plan" price="19" button_text="Buy Now"]Feature 1, Feature 2, Feature 3[/pricing_column] [pricing_column title="Premium Plan" price="29" button_text="Buy Now"]Feature 1, Feature 2, Feature 3, Feature 4[/pricing_column] [pricing_column title="Ultimate Plan" price="39" button_text="Buy Now"]Feature 1, Feature 2, Feature 3, Feature 4, Feature 5[/pricing_column] [/pricing_table]Note: In the above example, each pricing_column shortcode represents a column in the pricing table. You can add as many columns as you want by adding more pricing_column shortcodes. Also, the features of each column are represented as a comma-separated list within the pricing_column shortcode.
PHP Function Code
In case you have difficulties debugging what causing issues with
[pricing_table]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'pricing_table', 'themeblvd_shortcode_pricing_table' );Shortcode PHP function:
function themeblvd_shortcode_pricing_table( $atts, $content = null ) { // This shortcode requires Theme Blvd Framework 2.5+. if ( ! function_exists( 'themeblvd_get_pricing_table' ) ) { return __( 'Your theme does not support the [pricing_table] shortcode. You must be using a theme with Theme Blvd Framework 2.5+', 'theme-blvd-shortcodes' ); } $atts = shortcode_atts( array( 'currency' => '$', // Symbol to represent currency. 'currency_placement' => 'before', // Whether to place the currency symbol before or after prices. ), $atts ); $cols = array(); $pattern = str_replace( 'pricing_table', 'pricing_table|pricing_column', get_shortcode_regex() ); if ( preg_match_all( '/' . $pattern . '/s', $content, $m ) ) { if ( ! empty( $m[0] ) ) { foreach ( $m[0] as $key => $val ) { $cols[ $key ] = shortcode_parse_atts( $m[3][ $key ] ); $cols[ $key ]['features'] = trim( $m[5][ $key ] ); if ( ! empty( $cols[ $key ]['button_text'] ) ) { $cols[ $key ]['button'] = true; } } } } return themeblvd_get_pricing_table( $cols, $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [icon_link] Shortcode
The Theme Blvd plugin’s ‘icon_link’ shortcode is designed to create a clickable icon that links to a specified URL. The shortcode allows customization of the icon’s appearance and behavior. It includes options for icon type, text color, link target, CSS class, and title. The ‘icon_link’ shortcode also supports backward compatibility, converting older framework icons to FontAwesome.
Shortcode:
[icon_link]Parameters
Here is a list of all possible icon_link shortcode parameters and attributes:
icon– defines the type of icon to displaycolor– sets the text color of the iconlink– the URL where the icon link directstarget– determines how the link will openclass– allows additional CSS stylingtitle– sets the title attribute for the link
Examples and Usage
Basic example – Displaying an icon link with default parameters.
[icon_link icon="cart" link="https://yourwebsite.com/shop" /]Advanced examples
Displaying an icon link with custom color, target, class, and title. The link will open in a new tab due to “_blank” target parameter, and the text color of the icon will be red (#FF0000).
[icon_link icon="download" color="#FF0000" link="https://yourwebsite.com/download" target="_blank" class="custom-class" title="Download Page" /]Displaying a notice icon link with custom color and a custom title. The text color of the icon will be green (#008000).
[icon_link icon="notice" color="#008000" link="https://yourwebsite.com/notice" title="Important Notice" /]Displaying a warning icon link with custom class. The class “custom-warning” can be styled separately in the website’s CSS.
[icon_link icon="warning" link="https://yourwebsite.com/warning" class="custom-warning" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[icon_link]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'icon_link', 'themeblvd_shortcode_icon_link' );Shortcode PHP function:
function themeblvd_shortcode_icon_link( $atts, $content = null ) { $atts = shortcode_atts( array( 'icon' => '', // Possible Values: alert, approved, camera, cart, doc, download, media, note, notice, quote, warning. 'color' => '', // Text color of icon - Ex: #666. 'link' => '', 'target' => '_self', 'class' => '', 'title' => '', ), $atts ); // Convert icons used with older framework versions to fontawesome // alert, approved, camera, cart, doc, download, media, note, notice, quote, warning // Note: "camera" and "download" work so can be excluded below. switch ( $atts['icon'] ) { case 'alert' : $atts['icon'] = 'exclamation-sign'; break; case 'approved' : $atts['icon'] = 'check'; break; case 'cart' : $atts['icon'] = 'shopping-cart'; break; case 'doc' : $atts['icon'] = 'file'; break; case 'media' : $atts['icon'] = 'hdd'; // Kind of ironic... The CD icon gets replaced with the harddrive icon in the update for the "media" icon. break; case 'note' : $atts['icon'] = 'pencil'; break; case 'notice' : $atts['icon'] = 'exclamation-sign'; // Was always the same as "alert". break; case 'quote' : $atts['icon'] = 'comment'; break; case 'warning' : $atts['icon'] = 'warning-sign'; } if ( ! $atts['title'] ) { $atts['title'] = $content; } $style = ''; if ( $atts['color'] ) { $style = sprintf( 'color: %s', $atts['color'] ); } $output = sprintf( '<span class="tb-icon-link %s">', esc_attr( $atts['class'] ) ); if ( function_exists( 'themeblvd_get_icon_class' ) ) { // Framework 2.7+ $output .= sprintf( '<i class="icon %s" style="%s"></i>', esc_attr( themeblvd_get_icon_class( $atts['icon'], array( 'fa-fw' ) ) ), esc_attr( $style ) ); } elseif ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $output .= sprintf( '<i class="icon fa fa-%s" style="%s"></i>', esc_attr( $atts['icon'] ), esc_attr( $style ) ); } else { $output .= sprintf( '<i class="icon-%s" style="%s"></i>', esc_attr( $atts['icon'] ), esc_attr( $style ) ); } $output .= sprintf( '<a href="%s" title="%s" class="icon-link-%s" target="%s">%s</a>', esc_url( $atts['link'] ), esc_attr( $atts['title'] ), esc_attr( $atts['icon'] ), esc_attr( $atts['target'] ), $content ); $output .= '</span>'; return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [highlight] Shortcode
The Theme Blvd plugin’s ‘highlight’ shortcode is used to emphasize specific text within the content. This shortcode wraps the selected text with a ‘span’ HTML tag, applying a CSS class ‘text-highlight’. This class can be customized to style the highlighted text.
Shortcode:
[highlight]Examples and Usage
Basic example – The highlight shortcode is used to highlight a specific text. This shortcode wraps the text in a span element with a class of “text-highlight”, which can then be styled with CSS to create the desired highlighting effect.
[highlight]Your Text Here[/highlight]Advanced examples
Although the highlight shortcode does not accept any parameters, you can still use it together with other shortcodes to create more advanced effects. In the example below, we use the highlight shortcode together with the WordPress built-in shortcode for embedding YouTube videos. This will highlight the video’s title, which is also a clickable link to the video.
[highlight]https://www.youtube.com/watch?v=xyz[/highlight]Another advanced usage of the highlight shortcode could be in conjunction with the WordPress gallery shortcode. By wrapping the gallery shortcode with the highlight shortcode, you can highlight the entire gallery. This could be useful if you want to draw the reader’s attention to a specific gallery on your page.
[highlight][/highlight]PHP Function Code
In case you have difficulties debugging what causing issues with
[highlight]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'highlight', 'themeblvd_shortcode_highlight' );Shortcode PHP function:
function themeblvd_shortcode_highlight( $atts, $content = null ) { return '<span class="text-highlight">' . do_shortcode( $content ) . '</span><!-- .text-highlight (end) -->'; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [dropcap] Shortcode
The Theme Blvd plugin’s ‘dropcap’ shortcode is used to create a drop capital letter at the beginning of a text block. This shortcode wraps the content within a ‘span’ element with a class of ‘dropcap’, which can be styled for a unique look.
Shortcode:
[dropcap]Examples and Usage
Basic example – The following shortcode is used to display a single letter or character in a larger and different style, which is often used at the beginning of a paragraph or a section for a stylized effect.
[dropcap]A[/dropcap]Advanced examples
Using the shortcode to display a word or a sentence in a drop cap style. The entire content within the shortcode will be displayed in a larger and different style, which can be used to highlight a specific part of the text.
[dropcap]Hello World![/dropcap]Combining the dropcap shortcode with other shortcodes. In the following example, the dropcap shortcode is combined with the bold shortcode to display a drop cap letter in bold style.
[dropcap][b]A[/b][/dropcap]Please note that the ‘dropcap’ shortcode does not accept any parameters/atts, it only styles the content within the shortcode. For more advanced usage, it can be combined with other shortcodes as shown in the third example.
PHP Function Code
In case you have difficulties debugging what causing issues with
[dropcap]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'dropcap', 'themeblvd_shortcode_dropcap' );Shortcode PHP function:
function themeblvd_shortcode_dropcap( $atts, $content = null ) { return '<span class="dropcap">' . do_shortcode( $content ) . '</span><!-- .dropcap (end) -->'; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [label] Shortcode
The Theme Blvd plugin’s ‘label’ shortcode is designed to add labels with different styles to your WordPress content. This shortcode allows you to customize the style of your label, with options including ‘default’, ‘success’, ‘warning’, ‘danger’, and ‘info’. An additional feature is the ability to add icons to your labels. The shortcode uses Bootstrap 3 styles and is compatible with Theme Blvd Framework 2.7+. In conclusion, the ‘label’ shortcode is a versatile tool for enhancing your WordPress content with styled labels and icons.
Shortcode:
[label]Parameters
Here is a list of all possible label shortcode parameters and attributes:
style– sets the style of the label (default, success, warning, danger, info)icon– allows to add an icon to the label
Examples and Usage
Basic example – A simple usage of the ‘label’ shortcode with default style.
[label]Hello, World![/label]Advanced examples
Using the ‘label’ shortcode with a specific style. In this case, we’re using the ‘success’ style.
[label style="success"]Operation Successful[/label]Using the ‘label’ shortcode with a specific style and an icon. Here, we’re using the ‘danger’ style with a ‘warning’ icon.
[label style="danger" icon="warning"]Warning! High Voltage[/label]Using the ‘label’ shortcode without any style (default will be used) but with an icon. In this example, the ‘info’ icon is used.
[label icon="info"]This is an informational label[/label]PHP Function Code
In case you have difficulties debugging what causing issues with
[label]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'label', 'themeblvd_shortcode_label' );Shortcode PHP function:
function themeblvd_shortcode_label( $atts, $content = null ) { $atts = shortcode_atts( array( 'style' => 'default', // Possible Values: default, success, warning, danger, info. 'icon' => '', ), $atts ); $class = 'label'; // Convert styles from Bootstrap 1 & 2 to Bootstrap 3. if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { if ( 'important' === $atts['style'] ) { $atts['style'] = 'danger'; } } if ( ! $atts['style'] ) { $atts['style'] = 'default'; } $class .= ' label-' . $atts['style']; if ( $atts['icon'] ) { if ( function_exists( 'themeblvd_get_icon_class' ) ) { // Framework 2.7+ $content = '<i class="' . esc_attr( themeblvd_get_icon_class( $atts['icon'] ) ) . '"></i> ' . $content; } else if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $content = '<i class="fa fa-' . esc_attr( $atts['icon'] ) . '"></i> ' . $content; } else { $content = '<i class="icon-' . esc_attr( $atts['icon'] ) . '"></i> ' . $content; } } return sprintf( '<span class="%s">%s</span><!-- .label (end) -->', $class, do_shortcode( $content ) ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [lead] Shortcode
The Theme Blvd plugin’s ‘lead’ shortcode is used to style text. It adds a ‘lead’ CSS class and allows for optional font-size customization. The PHP function ‘themeblvd_shortcode_lead’ takes two parameters: attributes and content. It creates a paragraph with the ‘lead’ class and the text within the shortcode. If a ‘size’ attribute is given, it also adds a font-size style.
Shortcode:
[lead]Parameters
Here is a list of all possible lead shortcode parameters and attributes:
size– determines the font size of the text.
Examples and Usage
Basic example – A simple usage of the ‘lead’ shortcode without specifying any parameters. By default, the ‘lead’ class will be applied to the content wrapped within the shortcode.
[lead]Your content goes here[/lead]Advanced examples
Specifying the font size for the lead content. This example demonstrates how to use the ‘size’ attribute to set a custom font size for the content. The size can be specified in any valid CSS unit such as px, em, etc.
[lead size="20px"]Your content goes here[/lead]Using the lead shortcode within a paragraph. This example shows how to use the ‘lead’ shortcode within a paragraph to apply the lead styling to only a portion of the paragraph’s content.
Some content here [lead size="1.5em"]and your lead content here[/lead] and more content here.
PHP Function Code
In case you have difficulties debugging what causing issues with
[lead]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'lead', 'themeblvd_shortcode_lead' );Shortcode PHP function:
function themeblvd_shortcode_lead( $atts, $content = null ) { $atts = shortcode_atts( array( 'size' => 0, // Optional font size, 20px, 1.5em, etc. ), $atts ); $output = '<p class="lead"'; if ( $atts['size'] ) { $output .= sprintf( ' style="font-size: %s"', $atts['size'] ); } $output .= '>' . $content . '</p>'; return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [vector_icon] Shortcode
The Theme Blvd plugin’s ‘vector_icon’ shortcode allows users to insert customizable vector icons into their WordPress site. The shortcode generates a vector icon based on the attributes provided, such as icon type, color, size, rotation, flip, and CSS class. It also supports different versions of FontAwesome. The user can further style these icons by specifying CSS classes.
Shortcode:
[vector_icon]Parameters
Here is a list of all possible vector_icon shortcode parameters and attributes:
icon– Name of the FontAwesome icon to be displayedcolor– Specifies the text color of the iconsize– Defines the font size for the iconrotate– Allows optional rotation of the iconflip– Enables optional flipping of the iconclass– Assigns a CSS class to the icon
Examples and Usage
Basic example – Display a pencil icon with the default settings
[vector_icon icon="pencil" /]Advanced examples
Display a pencil icon with a custom color and size
[vector_icon icon="pencil" color="#ff0000" size="2em" /]Rotate the pencil icon by 90 degrees and flip it horizontally
[vector_icon icon="pencil" rotate="90" flip="horizontal" /]Add a custom CSS class to the pencil icon
[vector_icon icon="pencil" class="my-custom-class" /]Use all available parameters to customize the pencil icon
[vector_icon icon="pencil" color="#ff0000" size="2em" rotate="90" flip="horizontal" class="my-custom-class" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[vector_icon]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'vector_icon', 'themeblvd_shortcode_vector_icon' );Shortcode PHP function:
function themeblvd_shortcode_vector_icon( $atts ) { $atts = shortcode_atts( array( 'icon' => 'pencil', // FontAwesome icon id. 'color' => '', // Text color of icon - Ex: #666. 'size' => '', // Font size for icon - Ex: 1.5em, 20px, etc. 'rotate' => '', // Optional rotation of the icon - 90, 180, 270. 'flip' => '', // Optional flip of the icon - horizontal, vertical. 'class' => '', // CSS class. ), $atts ); // Remove "fa-" if the user added it to the icon ID. $icon = str_replace( 'fa-', '', $atts['icon'] ); $style = ''; if ( $atts['size'] ) { $style .= sprintf( 'font-size: %s;', $atts['size'] ); } if ( $atts['color'] ) { $style .= sprintf( 'color: %s;', $atts['color'] ); } $class = sprintf( 'fa fa-%s', $icon ); // FontAwesome 4. if ( function_exists( 'themeblvd_get_icon_class' ) ) { // Framework 2.7+ $class = themeblvd_get_icon_class( $icon ); // FontAwesome 5. } else if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '<' ) ) { $class = sprintf( 'icon-%s', $icon ); // FontAwesome 1-3. } if ( $atts['rotate'] ) { $class .= sprintf( ' fa-rotate-%s', $atts['rotate'] ); } if ( $atts['flip'] ) { $class .= sprintf( ' fa-flip-%s', $atts['flip'] ); } if ( $atts['class'] ) { $class .= sprintf( ' %s', $atts['class'] ); } return sprintf( '<i class="%s" style="%s"></i>', $class, $style ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [themeblvd_shortcode_icon] Shortcode
The Theme Blvd Shortcode Icon plugin is used to add icons to your WordPress site. It allows customization of the icon’s image, alignment, and width. The shortcode accepts three parameters: ‘image’, ‘align’, and ‘width’. The ‘image’ parameter specifies the icon’s image, which should be a .png file located in the stylesheet directory. The ‘align’ parameter adjusts the icon’s alignment on the page, and the ‘width’ parameter determines the icon’s width. The shortcode returns an HTML img tag with the specified image, alignment, and width. It also includes classes for further CSS customization.
Shortcode:
[themeblvd_shortcode_icon]Parameters
Here is a list of all possible themeblvd_shortcode_icon shortcode parameters and attributes:
image– name of the icon image file to displayalign– positioning of the icon (left, right, center, none)width– width of the icon in pixels
Examples and Usage
Basic example – Displaying an icon with default parameters.
[icon /]In the basic example above, the shortcode will display an icon with the default image ‘accepted’, aligned to the left and with a width of 45px. The image file should be located in the ‘icons’ directory of the current theme.
Advanced examples
Displaying a custom icon, aligned to the right, with a width of 60px.
[icon image="custom-icon" align="right" width="60" /]In this advanced example, the shortcode will display an icon named ‘custom-icon.png’ from the ‘icons’ directory of the current theme. The icon will be aligned to the right and will have a width of 60px.
Displaying an icon without any alignment.
[icon image="no-align-icon" align="none" /]In this example, the shortcode will display an icon named ‘no-align-icon.png’ from the ‘icons’ directory of the current theme. The icon will have no alignment.
PHP Function Code
In case you have difficulties debugging what causing issues with
[themeblvd_shortcode_icon]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'icon', 'themeblvd_shortcode_icon' ); // @deprecatedShortcode PHP function:
function themeblvd_shortcode_icon( $atts, $content = null ) { $atts = shortcode_atts( array( 'image' => 'accepted', 'align' => 'left', // left, right, center, none. 'width' => '45', ), $atts ); if ( file_exists( get_stylesheet_directory() . 'icons' . $atts['image'] . '.png' ) ) { $image_url = get_stylesheet_directory_uri() . 'icons' . $atts['image'] . '.png'; } elseif ( version_compare( TB_FRAMEWORK_VERSION, '2.3.0', '<' ) ) { $image_url = get_template_directory_uri() . '/framework/frontend/assets/images/shortcodes/icons/' . $atts['image'] . '.png'; } else { $image_url = get_template_directory_uri() . '/framework/assets/images/shortcodes/icons/' . $atts['image'] . '.png'; } $align = 'none' !== $atts['align'] ? ' align' . $atts['align'] : null; return '<img src="' . $image_url . '" class="tb-image-icon ' . $atts['image'] . $align . '" width="' . $atts['width'] . '" />'; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [tabs] Shortcode
The Theme Blvd plugin’s ‘tabs’ shortcode allows users to create tabbed content in their WordPress posts or pages. It offers customizable features such as style (framed or open), navigation type (tabs or pills), and an optional fixed height.
Shortcode:
[tabs]Parameters
Here is a list of all possible tabs shortcode parameters and attributes:
style– Sets the style of the tabs. Can be ‘framed’ or ‘open’nav– Determines the navigation type. Can be ‘tabs’ or ‘pills’height– If set to ‘true’, sets a fixed height for tabs
Examples and Usage
Basic example – A simple usage of the tabs shortcode with default parameters.
[tabs style="framed" nav="tabs" height="true" tab1="Tab 1" tab2="Tab 2"][/tabs]Advanced examples
Using the tabs shortcode with different styles and navigation types. The first tab has a framed style and uses tabs for navigation, while the second tab has an open style and uses pills for navigation.
[tabs style="framed" nav="tabs" height="true" tab1="Tab 1" tab2="Tab 2"][/tabs] [tabs style="open" nav="pills" height="false" tab1="Tab 3" tab2="Tab 4"][/tabs]Using the tabs shortcode to create a complex set of tabs. The shortcode creates four tabs with different styles, navigation types, and heights. The tabs are filled with content using the tab1, tab2, tab3, and tab4 attributes.
[tabs style="framed" nav="tabs" height="true" tab1="Tab 1 Content" tab2="Tab 2 Content"] [tabs style="open" nav="pills" height="false" tab1="Tab 3 Content" tab2="Tab 4 Content"] [tabs style="framed" nav="tabs" height="true" tab1="Tab 5 Content" tab2="Tab 6 Content"] [tabs style="open" nav="pills" height="false" tab1="Tab 7 Content" tab2="Tab 8 Content"][/tabs]PHP Function Code
In case you have difficulties debugging what causing issues with
[tabs]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'tabs', 'themeblvd_shortcode_tabs' );Shortcode PHP function:
function themeblvd_shortcode_tabs( $atts, $content = null ) { $default = array( 'style' => 'framed', // Possible Values: framed, open. 'nav' => 'tabs', // Possible Values: tabs, pills. 'height' => '', // Fixed height for tabs - true or false. ); extract( shortcode_atts( $default, $atts ) ); // Need to use extract() here. $output = ''; // Since we use the $atts to loop through and // display the tabs, we need to remove the other // data, now that we've extracted it to other // variables. if ( isset( $atts['style'] ) ) { unset( $atts['style'] ); } if ( isset( $atts['nav'] ) ) { unset( $atts['nav'] ); } if ( isset( $atts['height'] ) ) { unset( $atts['height'] ); } if ( 'framed' !== $style && 'open' !== $style ) { $style = 'framed'; } // For those using old method for tabs. if ( in_array( $nav, array( 'tabs_above', 'tabs_above', 'tabs_right', 'tabs_left' ), true ) ) { $nav = 'tabs'; } elseif ( in_array( $nav, array( 'pills_above', 'pills_above' ), true ) ) { $nav = 'pills'; } if ( 'tabs' !== $nav && 'pills' !== $nav ) { $nav = 'tabs'; } if ( 'true' === $height ) { $height = 1; } else { $height = 0; } $id = uniqid( 'tabs_' . rand() ); $num = count( $atts ) - 1; $i = 1; $tabs = array(); $names = array(); if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { $options = array( 'nav' => $nav, 'style' => $style, 'height' => $height, 'tabs' => array(), ); } else { $options = array( 'setup' => array( 'num' => $num, 'style' => $style, 'nav' => $nav, 'names' => array(), ), 'height' => $height, ); } if ( is_array( $atts ) && count( $atts ) > 0 ) { foreach ( $atts as $key => $tab ) { $names[ 'tab_' . $i ] = $tab; // For theme framework prior to v2.5. $tab_content = explode( '[/' . $key . ']', $content ); $tab_content = explode( '[' . $key . ']', $tab_content[0] ); $tabs[ 'tab_' . $i ] = array( 'title' => $tab, 'type' => 'raw', // for theme framework prior to v2.5. 'raw' => $tab_content[1], // For theme framework prior to v2.5. 'content' => array( 'type' => 'raw', 'raw' => $tab_content[1], 'raw_format' => 1, ), ); $i++; } } else { $output .= '<p class="tb-warning">' . __( 'No tabs found', 'theme-blvd-shortcodes' ) . '</p>'; } if ( ! $output ) { if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { $options['tabs'] = $tabs; $output .= themeblvd_get_tabs( $id, $options ); } else { $options['setup']['names'] = $names; foreach ( $tabs as $tab_id => $tab ) { $options[ $tab_id ] = $tab; } $output .= '<div class="element element-tabs' . themeblvd_get_classes( 'element_tabs', true ) . '">'; $output .= themeblvd_tabs( $id, $options ); $output .= '</div><!-- .element (end) -->'; } } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [accordion] Shortcode
The Theme Blvd plugin’s ‘accordion’ shortcode helps create a collapsible accordion structure on your webpage. This shortcode generates a unique ID for each accordion, ensuring no conflicts. Depending on your Bootstrap version, it adjusts the output for compatibility. The ‘do_shortcode($content)’ part allows nested shortcodes within the accordion.
Shortcode:
[accordion]Examples and Usage
Basic example – The basic use of the ‘accordion’ shortcode is to create an accordion section on your page. This is done by specifying the ‘accordion’ shortcode and passing the content within the shortcode tags.
[accordion]Your content goes here[/accordion]Advanced examples
Adding multiple accordion sections – You can create multiple accordion sections by adding more ‘accordion’ shortcodes. Each shortcode will create a new accordion section. The content for each section is placed within the shortcode tags.
[accordion]Your first content goes here[/accordion] [accordion]Your second content goes here[/accordion]Adding nested accordion sections – You can also create nested accordion sections by placing ‘accordion’ shortcodes within an ‘accordion’ shortcode. This can be useful for creating complex layouts. The content for each section is placed within the shortcode tags.
[accordion]Your first content goes here [accordion]Your nested content goes here[/accordion] [/accordion]Please note that the ‘accordion’ shortcode does not accept any parameters or attributes. All customization and styling must be done within the content that is passed to the shortcode.
PHP Function Code
In case you have difficulties debugging what causing issues with
[accordion]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'accordion', 'themeblvd_shortcode_accordion' );Shortcode PHP function:
function themeblvd_shortcode_accordion( $atts, $content = null ) { $accordion_id = uniqid( 'accordion_' . rand() ); if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { // Bootstrap 3. return sprintf( '<div id="%s" class="tb-accordion panel-group">%s</div>', $accordion_id, do_shortcode( $content ) ); } else { // Bootstrap 1-2. return sprintf( '<div id="%s" class="tb-accordion">%s</div>', $accordion_id, do_shortcode( $content ) ); } }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [toggle] Shortcode
The Theme Blvd Shortcode plugin’s ‘toggle’ shortcode allows users to create interactive content sections that can be expanded and collapsed. The shortcode uses the ‘themeblvd_shortcode_toggle’ function to generate unique IDs for each toggle section. It accepts two attributes – ‘title’ and ‘open’. The ‘title’ attribute specifies the title of the toggle section, while ‘open’ determines whether the section is expanded or collapsed by default. The ‘toggle’ shortcode is compatible with different versions of the Theme Blvd Framework and Bootstrap, adjusting its output accordingly. It also applies filters to customize the display color and content sanitization.
Shortcode:
[toggle]Parameters
Here is a list of all possible toggle shortcode parameters and attributes:
title– specifies the title of the toggle sectionopen– determines if the toggle section is open or closed by default
Examples and Usage
Basic example – Creating a simple toggle with a title and default closed state
[toggle title="My Toggle" /]Advanced examples
Creating a toggle that is open by default
[toggle title="My Toggle" open="true" /]Adding content to the toggle. The content will be displayed when the toggle is open.
[toggle title="My Toggle" open="true"]This is the content of the toggle[/toggle]Creating multiple toggles. Each toggle needs to be defined separately. The last toggle should include an additional parameter to indicate it’s the last one.
[toggle title="My First Toggle"]This is the content of the first toggle[/toggle] [toggle title="My Second Toggle"]This is the content of the second toggle[/toggle] [toggle title="My Last Toggle" 0="true"]This is the content of the last toggle[/toggle]PHP Function Code
In case you have difficulties debugging what causing issues with
[toggle]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'toggle', 'themeblvd_shortcode_toggle' );Shortcode PHP function:
function themeblvd_shortcode_toggle( $atts, $content = null ) { $atts = shortcode_atts( array( 'title' => '', 'open' => 'false', ), $atts ); // Individual toggle ID (NOT the Accordion ID). $toggle_id = uniqid( 'toggle_' . rand() ); if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { // Output handled in theme. $output = themeblvd_get_toggle( array( 'title' => $atts['title'], 'open' => $atts['open'], 'content' => $content, 'last' => isset( $atts[0] ) ? true : false, )); } elseif ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { // Bootstrap 3. // Last toggle? $last = isset( $atts[0] ) ? $last = ' panel-last' : null; // Is toggle open? $class = 'panel-collapse collapse'; $icon = 'plus-circle'; if ( 'true' === $atts['open'] ) { $class .= ' in'; $icon = 'minus-circle'; } /** * Filter the Bootstrap color class used in * displaying the toggle. * * @since 1.0.0 * * @var string */ $color = apply_filters( 'themeblvd_toggle_shortcode_color', 'default' ); $output = ' <div class="tb-panel panel panel-' . $color . $last . '"> <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="" href="#' . $toggle_id . '"> <i class="fa fa-' . $icon . ' switch-me"></i> ' . $atts['title'] . ' </a> </div><!-- .panel-heading (end) --> <div id="' . $toggle_id . '" class="' . $class . '"> <div class="panel-body"> ' . apply_filters( 'themeblvd_the_content', $content ) . ' </div><!-- .panel-body (end) --> </div><!-- .panel-collapse (end) --> </div><!-- .panel (end) -->'; } else { // Bootstrap 1 & 2 output. // Last toggle? $last = isset( $atts[0] ) ? $last = ' accordion-group-last' : null; // Is toggle open? $class = 'accordion-body collapse'; $icon = 'sign'; if ( 'true' === $atts['open'] ) { $class .= ' in'; $icon = 'minus-sign'; } $output = '<div class="accordion-group' . $last . '">'; $output .= '<div class="accordion-heading">'; $output .= '<a class="accordion-toggle" data-toggle="collapse" href="#' . $toggle_id . '"><i class="icon-' . $icon . ' switch-me"></i> ' . $atts['title'] . '</a>'; $output .= '</div><!-- .accordion-heading (end) -->'; $output .= '<div id="' . $toggle_id . '" class="' . $class . '">'; $output .= '<div class="accordion-inner">'; /** * Standard filter in Theme Blvd Framework, where * sanitization is applied. * * @since 1.0.0 * * @var string */ $output .= apply_filters( 'themeblvd_the_content', $content ); $output .= '</div><!-- .accordion-inner (end) -->'; $output .= '</div><!-- .accordion-body (end) -->'; $output .= '</div><!-- .accordion-group (end) -->'; } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [post_grid_slider] Shortcode
The ‘post_grid_slider’ shortcode from the theme-blvd-shortcodes plugin generates a customizable post grid slider. It allows users to display posts in a dynamic, sliding grid format. This shortcode offers numerous customization options including category selection, ordering, navigation, and display settings. Users can define the number of posts, slides, and rows per slide. They can also control the transition effects, navigation elements, and post metadata visibility. Moreover, it supports custom queries and integration with the Portfolios plugin. This makes it a versatile tool for showcasing blog posts, portfolio items, or any custom post types in an engaging, interactive grid slider.
Shortcode:
[post_grid_slider]Parameters
Here is a list of all possible post_grid_slider shortcode parameters and attributes:
cat– specifies the ID(s) of categories to include/exclude.category_name– specifies the slug(s) of categories to include/exclude.tag– specifies the tag(s) to include/exclude.portfolio– specifies the portfolio(s) slugs to include, requires Portfolios plugin.portfolio_tag– specifies the Portfolio Tag(s) to include, requires Portfolios plugin.columns– sets the number of posts per row.orderby– orders posts by date, title, comment_count, or rand.order– sets the order of posts to DESC or ASC.offset– offsets the number of posts to start from.query– allows for a custom query string.slides– sets the number of slides.timeout– sets the seconds between transitions, 0 for no auto-advancing.nav– controls whether to show navigation.thumbs– controls whether to show or hide thumbnails.meta– controls whether to show or hide post meta.excerpt– controls whether to show or hide post excerpt.more– controls visibility and style of the “more” button.crop– sets a custom size for the featured image crop.fx– sets the transition of the slider – fade or slide.nav_standard– controls if standard navigation dots are shown.nav_arrows– controls if directional arrows are shown.pause_play– controls if pause/play button is shown.categories– specifies the category slug(s) to include/exclude.rows– sets the number of rows per slide.numberposts– sets the total number of posts, -1 for all posts.
Examples and Usage
Basic example: – Display a post grid slider with default settings.
[post_grid_slider /]Advanced examples:
Display a post grid slider with posts from a specific category and ordered by title in ascending order.
[post_grid_slider category_name='news' orderby='title' order='ASC' /]Display a post grid slider with posts from multiple categories, with 4 columns and 3 slides, showing navigation and post metadata.
[post_grid_slider category_name='news,events' columns='4' slides='3' nav='true' meta='show' /]Display a post grid slider with posts from a specific portfolio, excluding certain tags, and showing excerpts but not thumbnails.
[post_grid_slider portfolio='my-portfolio' portfolio_tag='-tag1,-tag2' excerpt='show' thumbs='hide' /]Display a post grid slider with a custom query, 2 rows per slide, and a total of 10 posts.
[post_grid_slider query='post_type=post&post_status=publish' rows='2' numberposts='10' /]PHP Function Code
In case you have difficulties debugging what causing issues with
[post_grid_slider]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'post_grid_slider', 'themeblvd_shortcode_post_grid_slider' );Shortcode PHP function:
function themeblvd_shortcode_post_grid_slider( $atts ) { $atts = shortcode_atts( array( // query params 'cat' => '', // cat: Category ID(s) to include/exclude. 'category_name' => '', // category_name: Category slug(s) to include/exclude. 'tag' => '', // tag: Tag(s) to include/exclude. 'portfolio' => '', // portfolio: Portfolio(s) slugs to include, requires Portfolios plugin. 'portfolio_tag' => '', // portfolio_tag: Portfolio Tag(s) to include, requires Portfolios plugin. 'columns' => '3', // columns: Number of posts per row. 'orderby' => 'date', // orderby: date, title, comment_count, rand. 'order' => 'DESC', // order: DESC, ASC. 'offset' => 0, // offset: Number of posts to offset off the start, defaults to 0. 'query' => '', // query: custom query string. // slider stuff 'slides' => '3', // slides: number of slides. 'timeout' => 0, // timeout: Seconds in between transitions, 0 for no auto-advancing. 'nav' => 'true', // Whether to show nav. // post grid display 'thumbs' => '', // thumbs: show, hide. 'meta' => '', // meta: show, hide. 'excerpt' => '', // excerpt: show, hide. 'more' => '', // more: hide, text, button. 'crop' => 'tb_grid', // crop: Can manually enter a featured image crop size. // @deprecated 'fx' => 'slide', // fx: Transition of slider - fade, slide. 'nav_standard' => 1, // nav_standard: Show standard nav dots to control slider - true or false. 'nav_arrows' => 1, // nav_arrows: Show directional arrows to control slider - true or false. 'pause_play' => 1, // pause_play: Show pause/play button - true or false. 'categories' => '', // @deprecated -- Category slug(s) to include/exclude. 'rows' => 3, // rows: Number of rows per slide. 'numberposts' => '12', // numberposts: Total number of posts, -1 for all posts. ), $atts ); $id = uniqid( 'grid_' . rand() ); // Extra attributes for post grid slider display. $atts['display'] = 'slider'; $atts['context'] = 'grid'; $atts['shortcode'] = true; if ( 'true' === $atts['nav'] ) { $atts['nav'] = 1; } else { $atts['nav'] = 0; } if ( function_exists( 'themeblvd_loop' ) ) { ob_start(); themeblvd_loop( $atts ); $output = ob_get_clean(); } else { if ( 'true' === $atts['nav_standard'] ) { $atts['nav_standard'] = 1; } elseif ( 'false' === $atts['nav_standard'] ) { $atts['nav_standard'] = 0; } if ( 'true' === $atts['nav_arrows'] ) { $atts['nav_arrows'] = 1; } elseif ( 'false' === $atts['nav_arrows'] ) { $atts['nav_arrows'] = 0; } if ( 'true' === $atts['pause_play'] ) { $atts['pause_play'] = 1; } elseif ( 'false' === $atts['pause_play'] ) { $atts['pause_play'] = 0; } ob_start(); echo '<div class="element element-post_grid_slider' . esc_attr( themeblvd_get_classes( 'element_post_grid_slider', true ) ) . '">'; echo '<div class="element-inner">'; echo '<div class="element-inner-wrap">'; echo '<div class="grid-protection">'; themeblvd_post_slider( $id, $atts, 'grid', 'primary' ); echo '</div><!-- .grid-protection (end) -->'; echo '</div><!-- .element-inner-wrap (end) -->'; echo '</div><!-- .element-inner (end) -->'; echo '</div><!-- .element (end) -->'; $output = ob_get_clean(); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [post_list_slider] Shortcode
The Theme Blvd plugin’s ‘post_list_slider’ shortcode allows for the display of posts in a sliding format. It offers multiple customization options such as transition effects, navigation controls, and content display. The shortcode takes in various attributes to customize the slider. This includes the transition effect, auto-advancing time, navigation controls, thumbnail size, content display, number of posts per slide, and more. It also supports filtering posts by categories, tags, or portfolios. The ‘post_list_slider’ shortcode has been deprecated in newer versions of the theme, recommending the use of ‘post_slider’ or ‘post_grid_slider’ instead.
Shortcode:
[post_list_slider]Parameters
Here is a list of all possible post_list_slider shortcode parameters and attributes:
fx– Defines the transition type of the slider, either fade or slide.timeout– Sets the delay between transitions in seconds.nav_standard– Toggles the display of navigation dots control.nav_arrows– Toggles the display of navigation arrows control.pause_play– Toggles the display of pause/play button.categories– Specifies the categories to include/exclude by slug.cat– Specifies the categories to include/exclude by ID.category_name– Specifies the categories to include/exclude by name.tag– Specifies the tags to include/exclude.portfolio– Specifies the portfolios to include by slug.portfolio_tag– Specifies the portfolio tags to include.thumbs– Sets the size of post thumbnails, options include default, small, full, hide.post_content– Determines if excerpts or full content is displayed.posts_per_slide– Sets the number of posts displayed per slide.numberposts– Determines the total number of posts to show.orderby– Sets the parameter to order posts by.order– Sets the order of posts, either DESC or ASC.offset– Number of posts to skip from the start.query– Allows for custom query strings.
Examples and Usage
Basic example – Displaying a post list slider with default settings
[post_list_slider /]Advanced examples
Displaying a post list slider with specific transition effect, navigation options, and post content settings
[post_list_slider fx="fade" nav_standard="true" nav_arrows="false" pause_play="true" post_content="content" /]Using the shortcode to display a post list slider from a specific category, with a specific number of posts per slide and total number of posts
[post_list_slider category_name="news" posts_per_slide="2" numberposts="10" /]Displaying a post list slider with posts from a specific portfolio, ordered by title in ascending order, and with a specific thumbnail size
[post_list_slider portfolio="my-portfolio" orderby="title" order="ASC" thumbs="small" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[post_list_slider]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'post_list_slider', 'themeblvd_shortcode_post_list_slider' );Shortcode PHP function:
function themeblvd_shortcode_post_list_slider( $atts ) { if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'The [<span>post_list_slider</span>] shortcode is no longer supported in your theme. Use [<span>post_slider</span>] or [<span>post_grid_slider</span>] instead.', 'theme-blvd-shortcodes' ) ); } $atts = shortcode_atts( array( 'fx' => 'slide', // fx: Transition of slider - fade, slide. 'timeout' => 0, // timeout: Seconds in between transitions, 0 for no auto-advancing. 'nav_standard' => 1, // nav_standard: Show standard nav dots to control slider - true or false. 'nav_arrows' => 1, // nav_arrows: Show directional arrows to control slider - true or false. 'pause_play' => 1, // pause_play: Show pause/play button - true or false. 'categories' => '', // @deprecated -- Category slug(s) to include/exclude. 'cat' => '', // cat: Category ID(s) to include/exclude. 'category_name' => '', // category_name: Category slug(s) to include/exclude. 'tag' => '', // tag: Tag(s) to include/exclude. 'portfolio' => '', // portfolio: Portfolio(s) slugs to include, requires Portfolios plugin. 'portfolio_tag' => '', // portfolio_tag: Portfolio Tag(s) to include, requires Portfolios plugin. 'thumbs' => 'default', // thumbs: Size of post thumbnails - default, small, full, hide. 'post_content' => 'default', // content: Show excerpts or full content - default, content, excerpt. 'posts_per_slide' => 3, // posts_per_slide: Number of posts per slide. 'numberposts' => 10, // numberposts: Total number of posts, -1 for all posts. 'orderby' => 'date', // orderby: date, title, comment_count, rand. 'order' => 'DESC', // order: DESC, ASC. 'offset' => 0, // offset: Number of posts to offset off the start, defaults to 0. 'query' => '', // query: custom query string. ), $atts ); $id = uniqid( 'list_' . rand() ); $options = array( 'fx' => $atts['fx'], 'timeout' => $atts['timeout'], 'thumbs' => $atts['thumbs'], 'content' => $atts['post_content'], 'posts_per_slide' => $atts['posts_per_slide'], 'numberposts' => $atts['numberposts'], 'orderby' => $atts['orderby'], 'order' => $atts['order'], 'offset' => $atts['offset'], 'query' => $atts['query'], ); if ( 'true' === $atts['nav_standard'] ) { $options['nav_standard'] = 1; } elseif ( 'false' === $atts['nav_standard'] ) { $options['nav_standard'] = 0; } else { $options['nav_standard'] = $atts['nav_standard']; } if ( 'true' === $atts['nav_arrows'] ) { $options['nav_arrows'] = 1; } elseif ( 'false' === $atts['nav_arrows'] ) { $options['nav_arrows'] = 0; } else { $options['nav_arrows'] = $atts['nav_arrows']; } if ( 'true' === $atts['pause_play'] ) { $options['pause_play'] = 1; } elseif ( 'false' === $atts['pause_play'] ) { $options['pause_play'] = 0; } else { $options['pause_play'] = $atts['pause_play']; } if ( $atts['cat'] ) { $options['cat'] = $atts['cat']; } elseif ( $atts['category_name'] ) { $options['category_name'] = $atts['category_name']; } elseif ( $atts['categories'] ) { // @deprecated $options['category_name'] = $atts['categories']; } if ( $atts['tag'] ) { $options['tag'] = $atts['tag']; } if ( $atts['portfolio'] ) { $options['portfolio'] = $atts['portfolio']; } if ( $atts['portfolio_tag'] ) { $options['portfolio_tag'] = $atts['portfolio_tag']; } ob_start(); echo '<div class="element element-post_list_slider' . esc_attr( themeblvd_get_classes( 'element_post_list_slider', true ) ) . '">'; echo '<div class="element-inner">'; echo '<div class="element-inner-wrap">'; echo '<div class="grid-protection">'; themeblvd_post_slider( $id, $options, 'list', 'primary' ); echo '</div><!-- .grid-protection (end) -->'; echo '</div><!-- .element-inner-wrap (end) -->'; echo '</div><!-- .element-inner (end) -->'; echo '</div><!-- .element (end) -->'; return ob_get_clean(); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [null] Shortcode
The Theme Blvd plugin’s ‘gallery_slider’ shortcode creates a customizable image gallery slider. The shortcode: [gallery_slider] allows users to specify image IDs, carousel usage, title visibility, caption visibility, image size, transition intervals, hover behavior, and navigation options. It also provides a backup for old square crop sizes and allows for variable-width owl carousels.
Shortcode:
[null]Parameters
Here is a list of all possible null shortcode parameters and attributes:
ids– Comma separated list of attachment IDs for images.carousel– Determines if variable width owl carousel is used.title– Controls visibility of image titles.caption– Controls visibility of image captions.size– Determines the crop size for images.interval– Sets time in milliseconds between transitions.pause– Determines if the carousel should pause on hover.wrap– Determines if carousel should auto rotate after first pass.nav_standard– Controls visibility of standard navigation dots.nav_arrows– Controls visibility of navigation arrows.nav_thumbs– Controls visibility of navigation thumbnails.thumb_size– Determines the size of navigation thumbnail images.dark_text– Controls whether to use dark text for titles/descriptions/navigation.frame– Determines if the gallery slider is wrapped in a frame.
Examples and Usage
Basic example – Display a gallery slider using attachment IDs.
[gallery_slider ids="1,2,3,4,5"]Advanced examples
Display a gallery slider with specific attributes like size, interval, and navigation arrows.
[gallery_slider ids="1,2,3,4,5" size="medium" interval="3000" nav_arrows="true"]Display a gallery slider with thumbnails navigation, dark text for title/descriptions/standard nav, and wrapped in a frame.
[gallery_slider ids="1,2,3,4,5" nav_thumbs="true" dark_text="true" frame="true"]Display a gallery slider with carousel enabled and custom thumbnail size.
[gallery_slider ids="1,2,3,4,5" carousel="true" thumb_size="smaller"]Display a gallery slider with titles and captions enabled.
[gallery_slider ids="1,2,3,4,5" title="true" caption="true"]Display a gallery slider with pause on hover and wrap settings enabled.
[gallery_slider ids="1,2,3,4,5" pause="true" wrap="true"]These examples show how you can use the ‘gallery_slider’ shortcode with different parameters to customize the display of your gallery slider.
PHP Function Code
In case you have difficulties debugging what causing issues with
[null]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'gallery_slider', 'themeblvd_shortcode_gallery_slider' );Shortcode PHP function:
function themeblvd_shortcode_gallery_slider( $atts ) { // This shortcode requires Theme Blvd Framework 2.4.2+. if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.2', '<' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'Your theme does not support the [gallery_slider] shortcode. You must be using a theme with Theme Blvd Framework 2.4.2+', 'theme-blvd-shortcodes' ) ); } $atts = shortcode_atts( array( 'ids' => '', // Comma separated attachments ID's. 'carousel' => '', // Whether to use variable width owl carousel or not. 'title' => 'false', // Whether to show titles. 'caption' => 'false', // Whether to show captions. 'size' => '', // Crop size for images. 'interval' => '5000', // Milliseconds between transitions. 'pause' => 'true', // Whether to pause on hover. 'wrap' => 'true', // Whether sliders continues auto rotate after first pass. 'nav_standard' => 'false', // Whether to show standard nav indicator dots. 'nav_arrows' => 'true', // Whether to show standard nav arrows. 'nav_thumbs' => 'true', // Whether to show nav thumbnails (added by Theme Blvd framework). 'thumb_size' => 'smallest', // Size of nav thumbnail images - small, smaller, smallest or custom integer. 'dark_text' => 'false', // Whether to use dark text for title/descriptions/standard nav, use when images are light. 'frame' => 'false', // Whether to wrap gallery slider in frame. ), $atts ); $gallery = sprintf( '[gallery ids="%s"]', $atts['ids'] ); unset( $atts['ids'] ); // Backup for those using old square_* crop sizes. if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { $atts['thumb_size'] = str_replace( 'square_', '', $atts['thumb_size'] ); } // Are we using variable-with owl carousel? if ( empty( $atts['carousel'] ) ) { if ( themeblvd_get_option( 'gallery_carousel' ) ) { $atts['carousel'] = 'true'; } else { $atts['carousel'] = 'false'; } } foreach ( $atts as $key => $val ) { if ( 'true' === $val ) { $atts[ $key ] = true; } elseif ( 'false' === $val ) { $atts[ $key ] = false; } } return themeblvd_get_gallery_slider( $gallery, $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [post_slider] Shortcode
The Theme Blvd plugin’s ‘post_slider’ shortcode is designed to create a customizable post slider on your webpage. This shortcode allows you to define the display style, transition intervals, navigation options, image cropping, and more. It offers the flexibility to include or exclude specific tags or categories, set the number of posts/slides, and order them based on your preference. Additionally, it provides compatibility with older options and allows boolean conversions for true or false values. This shortcode is a powerful tool for enhancing your website’s visual appeal and navigation functionality.
Shortcode:
[post_slider]Parameters
Here is a list of all possible post_slider shortcode parameters and attributes:
style– defines the display style of the slider (1, 2, 3).interval– sets the time between automatic transitions in seconds.nav_standard– if set to true, standard navigation will be shown.nav_arrows– if set to true, navigation arrows will be displayed.nav_thumbs– if set to true, navigation thumbnails will be shown.pause– if set to true, the slider will pause on hover.crop– sets the crop size for full-size images.slide_link– determines where the image link goes.button_text– sets the text for the button.button_size– determines the size of the button.tag– includes or excludes specific tags.category– includes posts from specific category slugs.cat– includes or excludes posts from specific category IDs.portfolio– includes posts from specific portfolio slugs.portfolio_tag– includes posts from specific portfolio tags.numberposts– sets the number of posts or slides.orderby– sets the parameter for post query order.order– sets the order parameter for post query.query– sets a custom query string.thumb_link– if set to true, linked images will have animation.dark_text– if set to true, dark text will be used.title– if set to true, titles will be shown.meta– if set to true, meta data will be shown.excerpts– if set to true, post excerpts will be shown.
Examples and Usage
Basic example – A simple usage of the post_slider shortcode, displaying posts in a slider with the default settings.
[post_slider /]Advanced examples
Display a post slider with a specific style, interval between transitions, and the navigation arrows disabled.
[post_slider style=2 interval=5 nav_arrows=false /]Display a post slider with a specific crop size for images, a custom button text, and the thumbnails navigation enabled.
[post_slider crop=slider-medium button_text="Read More" nav_thumbs=true /]Display a post slider that includes posts from a specific category and portfolio, with a custom number of posts and order.
[post_slider category=tech portfolio=design numberposts=10 orderby=title order=ASC /]Display a post slider that includes posts with a specific tag, with the pause on hover feature enabled, and with dark text.
[post_slider tag=news pause=true dark_text=true /]PHP Function Code
In case you have difficulties debugging what causing issues with
[post_slider]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'post_slider', 'themeblvd_shortcode_post_slider' );Shortcode PHP function:
function themeblvd_shortcode_post_slider( $atts ) { $atts = shortcode_atts( array( 'style' => '1', // The display style - 1, 2, 3. 'interval' => '0', // Time between auto trasitions in seconds. 'nav_standard' => 'true', // Show standard nav - true, false. 'nav_arrows' => 'true', // Show nav arrows - true, false. 'nav_thumbs' => 'false', // Show nav thumbnails - true, false. 'pause' => 'false', // Pause on hover - true, false. 'crop' => 'slider-large', // Crop size for full-size images. 'slide_link' => 'button', // Where image link goes - none, image_post, image_link, button. 'button_text' => 'View Post', // Text for button (if button). 'button_size' => 'default', // Size of button (if button) - mini, small, default, large, x-large. 'tag' => '', // Tag(s) to include/exclude. 'category' => '', // Category slug(s) to include. 'cat' => '', // Category ID(s) to include/exclude. 'portfolio' => '', // Portfolio(s) slugs to include, requires Portfolios plugin. 'portfolio_tag' => '', // Portfolio Tag(s) to include, requires Portfolios plugin. 'numberposts' => '5', // Number of posts/slides. 'orderby' => 'date', // Orderby param for posts query. 'order' => 'DESC', // Order param for posts query. 'query' => '', // Custom query string. 'thumb_link' => 'true', // Whether linked images have animation. 'dark_text' => 'false', // Whether to use dark text. 'title' => 'true', // Whether to show titles. 'meta' => 'true', // Whether to shoe meta. 'excerpts' => 'false', // Whether to show excerpts. ), $atts ); if ( intval( $atts['style'] ) ) { $atts['style'] = 'style-' . $atts['style']; } // Provide compat with some older options. if ( ! empty( $atts['timeout'] ) ) { $atts['interval'] = $atts['timeout']; } if ( ! empty( $atts['pause_on_hover'] ) ) { if ( 'pause_on' === $atts['pause_on_hover'] || 'pause_on_off' === $atts['pause_on_hover'] ) { $atts['pause'] = 'true'; } } if ( ! empty( $atts['image_size'] ) ) { $atts['crop'] = $atts['image_size']; } if ( ! empty( $atts['button'] ) ) { $atts['button_text'] = $atts['button']; } // Convert booleans. foreach ( $atts as $key => $value ) { if ( 'true' === $value ) { $atts[ $key ] = true; } elseif ( 'false' === $value ) { $atts[ $key ] = false; } } if ( $atts['category'] ) { $atts['category_name'] = $atts['category']; } $atts['posts_per_page'] = $atts['numberposts']; return themeblvd_get_post_slider( $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [post_grid] Shortcode
The Theme Blvd plugin’s ‘post_grid’ shortcode allows users to generate a grid layout for posts. It offers various customization options, including the number of columns and rows, order of posts, and whether to include excerpts or thumbnails.
Shortcode:
[post_grid]Parameters
Here is a list of all possible post_grid shortcode parameters and attributes:
categories– Category slug(s) to include/exclude.cat– Category ID(s) to include/exclude.category_name– Category slug(s) to include/exclude.tag– Tag(s) to include/exclude.portfolio– Portfolio(s) slugs to include, requires Portfolios plugin.portfolio_tag– Portfolio Tag(s) to include, requires Portfolios plugin.columns– Number of posts per row.rows– Number of rows per slide.orderby– Order posts by date, title, comment_count, rand.order– Order posts in DESC, ASC.offset– Number of posts to offset from the start.query– Custom query string.filter– Use filtering – false or taxonomy name to filter by.filter_max– Maximum posts to pull when using filtering.masonry– Use masonry layout or not.masonry_max– Number of posts if using masonry.excerpt– Show or hide post excerpt.crop– Manually enter a featured image crop size.thumbs– Show or hide post thumbnails.meta– Show or hide post meta.more– Hide, text, button for more option.more_text– Text for more button.titles– Show post titles when items are hovered on.gutters– Have spacing between posts or not.
Examples and Usage
Basic example – Display a grid of posts from a specific category.
[post_grid cat="5" /]Advanced examples
Display a grid of posts, ordered by title in ascending order, with post excerpts and thumbnails.
[post_grid orderby="title" order="ASC" excerpt="show" thumbs="show" /]Display a grid of posts with a custom query, using masonry layout, and filtering by post tags.
[post_grid query="posts_per_page=10&post_type=post" masonry="true" filter="post_tag" /]Display a grid of posts from a specific portfolio, with a maximum of 12 posts, using masonry layout and showing post meta.
[post_grid portfolio="my-portfolio" masonry_max="12" masonry="true" meta="show" /]Display a filtered grid of posts from a specific category and tag, ordered by comment count in descending order, with hidden post excerpts and thumbnails.
[post_grid cat="5" tag="my-tag" orderby="comment_count" order="DESC" excerpt="hide" thumbs="hide" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[post_grid]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'post_grid', 'themeblvd_shortcode_post_grid' );Shortcode PHP function:
function themeblvd_shortcode_post_grid( $atts, $content = null, $tag = '' ) { $atts = shortcode_atts( array( // The following are shared between both [post_grid] and [post_shwocase]. 'categories' => '', // @deprecated -- Category slug(s) to include/exclude. 'cat' => '', // cat: Category ID(s) to include/exclude. 'category_name' => '', // category_name: Category slug(s) to include/exclude. 'tag' => '', // tag: Tag(s) to include/exclude. 'portfolio' => '', // portfolio: Portfolio(s) slugs to include, requires Portfolios plugin. 'portfolio_tag' => '', // portfolio_tag: Portfolio Tag(s) to include, requires Portfolios plugin. 'columns' => '3', // columns: Number of posts per row. 'rows' => '3', // rows: Number of rows per slide. 'orderby' => 'date', // orderby: date, title, comment_count, rand. 'order' => 'DESC', // order: DESC, ASC. 'offset' => '0', // offset: Number of posts to offset off the start, defaults to 0. 'query' => '', // query: custom query string. 'filter' => 'false', // filter: Whether to use filtering - false or taxonomy name to filter by. 'filter_max' => '-1', // filter_max: Maximum posts to pull when using filtering. 'masonry' => 'false', // masonry: Whether to use masonry or not. 'masonry_max' => '12', // masonry_max: Number of posts if using masonry. 'excerpt' => '', // excerpt: show, hide. 'crop' => '', // crop: Can manually enter a featured image crop size. // [post_grid] only. 'thumbs' => '', // thumbs: show, hide. 'meta' => '', // meta: show, hide. 'more' => '', // more: hide, text, button. 'more_text' => '', // more_text: Text for more button (not in generator). // [post_showcase] only. 'titles' => '', // titles: Whether to show post titles when items are hovered on. 'gutters' => '', // gutters: Whether to have spacing between posts. ), $atts ); foreach ( $atts as $key => $val ) { if ( 'true' === $val ) { $atts[ $key ] = true; } elseif ( 'false' === $val ) { $atts[ $key ] = false; } } if ( 'post_showcase' === $tag ) { $display = $context = 'showcase'; } else { $display = $context = 'grid'; } if ( $atts['filter'] ) { if ( $atts['masonry'] ) { $display = 'masonry_filter'; } else { $display = 'filter'; } if ( ! $atts['filter_max'] ) { $atts['filter_max'] = '-1'; // Just to be safe. } } elseif ( $atts['masonry'] ) { $display = 'masonry'; } if ( 'tag' === $atts['filter'] ) { // Simply allows user to input "tag" instead of "post_tag" for taxonomy. $atts['filter'] = 'post_tag'; } $options = array( 'display' => $display, 'columns' => $atts['columns'], 'rows' => $atts['rows'], 'tag' => $atts['tag'], 'portfolio' => $atts['portfolio'], 'portfolio_tag' => $atts['portfolio_tag'], 'orderby' => $atts['orderby'], 'order' => $atts['order'], 'offset' => $atts['offset'], 'crop' => $atts['crop'], 'query' => $atts['query'], 'filter' => $atts['filter'], 'filter_max' => $atts['filter_max'], 'posts_per_page' => $atts['masonry_max'], 'thumbs' => $atts['thumbs'], 'meta' => $atts['meta'], 'excerpt' => $atts['excerpt'], 'titles' => $atts['titles'], 'more' => $atts['more'], 'more_text' => $atts['more_text'], 'context' => $context, 'shortcode' => true, 'class' => "shortcode-{$context}-wrap", ); if ( $atts['cat'] ) { $options['cat'] = $atts['cat'] ; } elseif ( $atts['category_name'] ) { $options['category_name'] = $atts['category_name'] ; } elseif ( $atts['categories'] ) { $options['category_name'] = $atts['categories']; // @deprecated } if ( 'show' === $options['thumbs'] ) { $options['thumbs'] = 'full'; } if ( function_exists( 'themeblvd_loop' ) ) { ob_start(); themeblvd_loop( $options ); $output = ob_get_clean(); } else { ob_start(); echo '<div class="element element-post_grid' . esc_attr( themeblvd_get_classes( 'element_post_grid', true ) ) . '">'; echo '<div class="element-inner">'; echo '<div class="element-inner-wrap">'; echo '<div class="grid-protection">'; themeblvd_posts( $options, 'grid', 'primary' ); echo '</div><!-- .grid-protection (end) -->'; echo '</div><!-- .element-inner-wrap (end) -->'; echo '</div><!-- .element-inner (end) -->'; echo '</div><!-- .element (end) -->'; $output = ob_get_clean(); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [blog] Shortcode
The Theme Blvd plugin’s ‘blog’ shortcode is designed to generate a post list from your blog. It allows customization of the post list based on categories, tags, portfolios, number of posts, order, offset, and more. This shortcode provides a flexible way to display your blog posts. It can include or exclude posts based on category ID or slug, tag, or portfolio. The number of posts, order, and offset can also be customized. The shortcode also supports advanced features like custom query strings, filtering, thumbnail display options, and more. It’s a powerful tool for customizing how your blog posts are presented on your site.
Shortcode:
[blog]Parameters
Here is a list of all possible blog shortcode parameters and attributes:
categories– Category slug(s) to include/exclude in the post list.cat– Category ID(s) to include/exclude in the post list.category_name– Category slug(s) to include/exclude in the post list.tag– Tag(s) to include/exclude in the post list.portfolio– Portfolio slug(s) to include, requires Portfolios plugin.portfolio_tag– Portfolio Tag(s) to include, requires Portfolios plugin.numberposts– Total number of posts to display, -1 for all posts.orderby– Order posts by date, title, comment_count, or rand.order– Order direction, can be DESC or ASC.offset– Number of posts to skip from the start.query– Custom query string to fetch posts.filter– Filter posts by taxonomy name or set to false to disable.thumbs– Show, hide, or date to manage thumbnails.meta– Show or hide post meta data.more– Hide, text, or button to manage ‘more’ link.more_text– Text for ‘more’ button.
Examples and Usage
Basic example – Displaying a list of blog posts using the ‘blog’ shortcode. This example will display the latest 3 blog posts in descending order by date.
[blog numberposts='3' orderby='date' order='DESC']Advanced examples
Using the ‘blog’ shortcode to display posts from a specific category. This example will display the latest 5 posts from the ‘news’ category, ordered by post title in ascending order.
[blog category_name='news' numberposts='5' orderby='title' order='ASC']Using the ‘blog’ shortcode to display posts with a specific tag and a custom ‘Read More’ button text. This example will display all posts tagged ‘featured’, with the ‘Read More’ button text set to ‘Continue Reading’.
[blog tag='featured' more='button' more_text='Continue Reading']Using the ‘blog’ shortcode to display posts from a specific portfolio and hide the post meta. This example will display all posts from the ‘projects’ portfolio and hide the post meta.
[blog portfolio='projects' meta='hide']Using the ‘blog’ shortcode to display posts with a custom query. This example will display posts that match the custom query ‘author=1&year=2021’.
[blog query='author=1&year=2021']PHP Function Code
In case you have difficulties debugging what causing issues with
[blog]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'blog', 'themeblvd_shortcode_post_list' );Shortcode PHP function:
function themeblvd_shortcode_post_list( $atts, $content = '', $tag = '' ) { $atts = shortcode_atts( array( 'categories' => '', // @deprecated -- Category slug(s) to include/exclude. 'cat' => '', // cat: Category ID(s) to include/exclude. 'category_name' => '', // category_name: Category slug(s) to include/exclude. 'tag' => '', // tag: Tag(s) to include/exclude. 'portfolio' => '', // portfolio: Portfolio(s) slugs to include, requires Portfolios plugin. 'portfolio_tag' => '', // portfolio_tag: Portfolio Tag(s) to include, requires Portfolios plugin. 'numberposts' => '3', // numberposts: Total number of posts, -1 for all posts. 'orderby' => 'date', // orderby: date, title, comment_count, rand. 'order' => 'DESC', // order: DESC, ASC. 'offset' => '0', // offset: Number of posts to offset off the start, defaults to 0. 'query' => '', // custom query string. 'filter' => 'false', // filter: Whether to use filtering - false or taxonomy name to filter by. 'thumbs' => '', // thumbs: show, hide, or date. 'meta' => '', // meta: show, hide. 'more' => '', // more: hide, text, button. 'more_text' => '', // more_text: Text for more button (not in generator). ), $atts ); if ( 'blog' === $tag ) { $display = $context = 'blog'; } else { $display = $context = 'list'; } foreach ( $atts as $key => $val ) { if ( 'true' === $val ) { $atts[ $key ] = true; } elseif ( 'false' === $val ) { $atts[ $key ] = false; } } if ( 'tag' === $atts['filter'] ) { $atts['filter'] = 'post_tag'; // Simply allows user to input "tag" instead of "post_tag" for taxonomy. } $options = array( 'display' => $display, 'thumbs' => $atts['thumbs'], 'content' => 'excerpt', 'tag' => $atts['tag'], 'portfolio' => $atts['portfolio'], 'portfolio_tag' => $atts['portfolio_tag'], 'posts_per_page' => $atts['numberposts'], 'numberposts' => $atts['numberposts'], // @deprecated 'orderby' => $atts['orderby'], 'order' => $atts['order'], 'offset' => $atts['offset'], 'query' => $atts['query'], 'filter' => $atts['filter'], 'thumbs' => $atts['thumbs'], 'meta' => $atts['meta'], 'more' => $atts['more'], 'more_text' => $atts['more_text'], 'context' => $context, 'shortcode' => true, 'class' => "shortcode-{$context}-wrap", ); if ( $atts['cat'] ) { $options['cat'] = $atts['cat'] ; } elseif ( $atts['category_name'] ) { $options['category_name'] = $atts['category_name'] ; } elseif ( $atts['categories'] ) { $options['category_name'] = $atts['categories']; // @deprecated } if ( 'show' === $options['thumbs'] ) { $options['thumbs'] = 'full'; } if ( function_exists( 'themeblvd_loop' ) ) { ob_start(); themeblvd_loop( $options ); $output = ob_get_clean(); } else { // @deprecated ob_start(); echo '<div class="element element-post_list' . esc_attr( themeblvd_get_classes( 'element_post_list', true ) ) . '">'; echo '<div class="element-inner">'; echo '<div class="element-inner-wrap">'; echo '<div class="grid-protection">'; themeblvd_posts( $options, 'list', 'primary' ); echo '</div><!-- .grid-protection (end) -->'; echo '</div><!-- .element-inner-wrap (end) -->'; echo '</div><!-- .element-inner (end) -->'; echo '</div><!-- .element (end) -->'; $output = ob_get_clean(); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [mini_post_grid] Shortcode
The Theme Blvd plugin’s shortcode, ‘mini_post_grid’, is designed to display a grid of posts. This grid can be customized based on various parameters such as categories, tags, number of posts, order, and thumbnail size. The ‘mini_post_grid’ allows you to create a compact and neat display of your posts, making your site more organized and user-friendly. This is especially useful for blogs or websites with a large number of posts.
Shortcode:
[mini_post_grid]Parameters
Here is a list of all possible mini_post_grid shortcode parameters and attributes:
categories– Category slug(s) to include or exclude.cat– Category ID(s) to include or exclude.category_name– Category slug(s) to include or exclude.tag– Tag(s) to include or exclude.numberposts– Total number of posts, -1 for all posts.orderby– Sorts posts by date, title, comment_count, or rand.order– Specifies the order, DESC or ASC.offset– Number of posts to offset from the start.query– Custom query string.thumb– Thumbnail size – small, smaller, or smallest.align– Alignment of grid – left, right, or center.gallery– A comma-separated list of attachment IDs.
Examples and Usage
Basic example – Display a mini post grid with default settings
[mini_post_grid /]Advanced examples
Display a mini post grid of 6 posts from a specific category and ordered by title in ascending order
[mini_post_grid numberposts=6 category_name="your-category-slug" orderby="title" order="ASC" /]Display a mini post grid of posts with a specific tag, offset by 2 posts, and thumbnails aligned to the right
[mini_post_grid tag="your-tag-slug" offset=2 align="right" /]Display a mini post grid with a custom query string and a specific gallery of attachments
[mini_post_grid query="your-custom-query-string" gallery="1,2,3,4" /]Display a mini post grid of 4 posts with smallest thumbnails
[mini_post_grid numberposts=4 thumb="smallest" /]These are just a few examples of how you can use the ‘mini_post_grid’ shortcode to display posts in a grid format on your WordPress site. By adjusting the parameters/attributes, you can customize the output to fit your specific needs.
PHP Function Code
In case you have difficulties debugging what causing issues with
[mini_post_grid]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'mini_post_grid', 'themeblvd_shortcode_mini_post_grid' );Shortcode PHP function:
function themeblvd_shortcode_mini_post_grid( $atts ) { $atts = shortcode_atts( array( 'categories' => '', // @deprecated -- Category slug(s) to include/exclude. 'cat' => '', // cat: Category ID(s) to include/exclude. 'category_name' => '', // category_name: Category slug(s) to include/exclude. 'tag' => '', // tag: Tag(s) to include/exclude. 'numberposts' => 4, // numberposts: Total number of posts, -1 for all posts. 'orderby' => 'date', // orderby: date, title, comment_count, rand. 'order' => 'DESC', // order: DESC, ASC. 'offset' => 0, // offset: Number of posts to offset off the start, defaults to 0. 'query' => '', // custom query string. 'thumb' => 'smaller', // thumbnail size - small, smaller, or smallest. 'align' => 'left', // alignment of grid - left, right, or center. 'gallery' => '', // A comma separated list of attachmentn IDs - 1,2,3,4. ), $atts ); if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '<' ) ) { if ( ! $atts['query'] ) { $query = ''; // Categories if ( $atts['categories'] ) { // @deprecated. $query .= 'category_name=' . $atts['categories'] . '&'; } if ( $atts['cat'] ) { $query .= 'cat=' . $atts['cat'] . '&'; } if ( $atts['category_name'] ) { $query .= 'category_name=' . $atts['category_name'] . '&'; } if ( $atts['tag'] ) { $query .= 'tag=' . $atts['tag'] . '&'; } $query .= 'numberposts=' . $atts['numberposts'] . '&'; $query .= 'orderby=' . $atts['orderby'] . '&'; $query .= 'order=' . $atts['order'] . '&'; $query .= 'offset=' . $atts['offset'] . '&'; $query .= 'suppress_filters=false'; // Mainly for WPML compat. } else { $query = $atts['query']; } } if ( $atts['gallery'] ) { $atts['gallery'] = sprintf( '[gallery ids="%s" link="file"]', $atts['gallery'] ); } $atts['posts_per_page'] = $atts['numberposts']; $atts['shortcode'] = true; if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '<' ) ) { // @deprecated. return themeblvd_get_mini_post_grid( $query, $atts['align'], $atts['thumb'], $atts['gallery'] ); } else { return themeblvd_get_mini_post_grid( $atts, $atts['align'], $atts['thumb'], $atts['gallery'] ); } }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [mini_post_list] Shortcode
The Theme Blvd Shortcode plugin’s ‘mini_post_list’ shortcode is used to generate a compact list of posts. This shortcode allows users to specify various parameters such as categories, tags, number of posts, order, offset, and thumbnail size. Additionally, it gives the option to show or hide post metadata.
Shortcode:
[mini_post_list]Parameters
Here is a list of all possible mini_post_list shortcode parameters and attributes:
categories– Category slug(s) to include or exclude in the listcat– Category ID(s) to include or exclude in the listcategory_name– Category slug(s) to include or exclude in the listtag– Tag(s) to include or exclude in the listnumberposts– Total number of posts to display, -1 for all postsorderby– Defines how posts should be sorted: date, title, comment_count, randorder– Sorting order: DESC for descending, ASC for ascendingoffset– Number of posts to skip from the startquery– Custom query string for advanced usersthumb– Thumbnail size: small, smaller, smallest, date, or hidemeta– Whether to show metadata: show or hidecolumns– Optional number of columns to display posts among
Examples and Usage
Basic example – Display a list of 4 most recent posts from all categories, ordered by date in descending order.
[mini_post_list /]Advanced examples
Display a list of 6 most recent posts from a specific category (e.g., category ID 3), ordered by title in ascending order, with small thumbnails and meta information hidden.
[mini_post_list cat="3" numberposts="6" orderby="title" order="ASC" thumb="small" meta="hide" /]Display a list of all posts tagged ‘wordpress’ (e.g., tag slug ‘wordpress’), ordered randomly, without thumbnails and with meta information shown, spread among 3 columns.
[mini_post_list tag="wordpress" numberposts="-1" orderby="rand" thumb="hide" meta="show" columns="3" /]Display a list of 5 posts offset by 2 (i.e., starting from the third most recent post), from a specific category (e.g., category slug ‘news’), ordered by comment count in descending order, with smallest thumbnails and meta information shown.
[mini_post_list category_name="news" numberposts="5" offset="2" orderby="comment_count" thumb="smallest" meta="show" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[mini_post_list]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'mini_post_list', 'themeblvd_shortcode_mini_post_list' );Shortcode PHP function:
function themeblvd_shortcode_mini_post_list( $atts ) { $atts = shortcode_atts( array( 'categories' => '', // @deprecated -- Category slug(s) to include/exclude 'cat' => '', // cat: Category ID(s) to include/exclude 'category_name' => '', // category_name: Category slug(s) to include/exclude 'tag' => '', // tag: Tag(s) to include/exclude 'numberposts' => 4, // numberposts: Total number of posts, -1 for all posts 'orderby' => 'date', // orderby: date, title, comment_count, rand 'order' => 'DESC', // order: DESC, ASC 'offset' => 0, // offset: Number of posts to offset off the start, defaults to 0 'query' => '', // custom query string 'thumb' => 'smaller', // thumbnail size - small, smaller, smallest, date, or hide 'meta' => 'show', // show meta or not - show or hide 'columns' => '0', // Optional number of columns to spread posts among ), $atts ); if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '<' ) ) { if ( ! $atts['query'] ) { if ( $atts['categories'] ) { // @deprecated. $query .= 'category_name=' . $atts['categories'] . '&'; } if ( $atts['cat'] ) { $query .= 'cat=' . $atts['cat'] . '&'; } if ( $atts['category_name'] ) { $query .= 'category_name=' . $atts['category_name'] . '&'; } if ( $atts['tag'] ) { $query .= 'tag=' . $atts['tag'] . '&'; } $query .= 'numberposts=' . $atts['numberposts'] . '&'; $query .= 'orderby=' . $atts['orderby'] . '&'; $query .= 'order=' . $atts['order'] . '&'; $query .= 'offset=' . $atts['offset'] . '&'; $query .= 'suppress_filters=false'; // Mainly for WPML compat. } else { $query = $atts['query']; } } $thumb = $atts['thumb']; if ( ! $thumb || 'hide' === $thumb ) { $thumb = false; } if ( $thumb ) { $check = array( 'small', 'smaller', 'smallest' ); if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '>=' ) ) { $check[] = 'date'; } if ( ! in_array( $thumb, $check, true ) ) { $thumb = 'smaller'; } } $meta = false; if ( 'show' === $atts['meta'] ) { $meta = true; } $atts['posts_per_page'] = $atts['numberposts']; $atts['shortcode'] = true; if ( version_compare( TB_FRAMEWORK_VERSION, '2.5.0', '<' ) ) { // @deprecated. if ( ! $thumb ) { // A crazy asinine hack for older themes. add_filter( 'themeblvd_mini_post_list_thumb_size', 'themeblvd_shortcode_mini_post_list_hack' ); } $output = themeblvd_get_mini_post_list( $query, $thumb, $meta ); if ( ! $thumb ) { // Finish the crazy, asinine hack for older themes. remove_filter( 'themeblvd_mini_post_list_thumb_size', 'themeblvd_shortcode_mini_post_list_hack' ); } } else { $output = themeblvd_get_mini_post_list( $atts, $thumb, $meta ); } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [milestone] Shortcode
The Theme Blvd plugin’s ‘milestone’ shortcode is designed to display a milestone with customizable parameters. This shortcode allows you to set a numerical milestone, choose the color of the text, provide a brief description, and decide whether to frame the milestone in a bordered box.
Shortcode:
[milestone]Parameters
Here is a list of all possible milestone shortcode parameters and attributes:
milestone– The numerical value representing the milestonecolor– The color of the milestone number texttext– The short description about the milestoneboxed– Determines if milestone is wrapped in a bordered box
Examples and Usage
Basic example – Display a simple milestone with the number 100.
[milestone milestone="100" /]Advanced examples
Display a milestone with the number 100, a custom color for the text, and a brief description.
[milestone milestone="100" color="#ff0000" text="This is a milestone." /]Display a milestone with the number 500, a custom color for the text, a brief description, and wrapped in a bordered box.
[milestone milestone="500" color="#00ff00" text="This is another milestone." boxed="true" /]These examples illustrate how the ‘milestone’ shortcode can be used to display various types of milestones on a WordPress site. The shortcode is flexible and allows for customization of the milestone number, text color, description, and whether or not the milestone is displayed within a bordered box.
PHP Function Code
In case you have difficulties debugging what causing issues with
[milestone]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'milestone', 'themeblvd_shortcode_milestone' );Shortcode PHP function:
function themeblvd_shortcode_milestone( $atts ) { if ( ! function_exists( 'themeblvd_get_milestone' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'Your theme does not support the [milestone] shortcode.', 'theme-blvd-shortcodes' ) ); } $atts = shortcode_atts( array( 'milestone' => '100', // The number for the milestone. 'color' => '#0c9df0', // Color of text for milestone number. 'text' => '', // Brief text to describe milestone. 'boxed' => 'false', // Whether to wrap milestone in borered box. ), $atts ); if ( 'true' === $atts['boxed'] ) { $atts['boxed'] = '1'; } else { $atts['boxed'] = '0'; } return themeblvd_get_milestone( $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [milestone_ring] Shortcode
The Theme Blvd plugin’s ‘milestone_ring’ shortcode creates a customizable milestone ring. It displays a pie chart with a specified percentage, color, and track color. The shortcode allows text display in the pie chart’s center, with a title and description below. Text alignment and boxed presentation options are available.
Shortcode:
[milestone_ring]Parameters
Here is a list of all possible milestone_ring shortcode parameters and attributes:
percent– Defines the completion percentage of the milestone ring.color– Sets the color of the completed section of the milestone ring.track_color– Determines the color of the milestone ring’s track.display– Specifies the text displayed in the center of the milestone ring.title– Sets the title displayed below the milestone ring.text– Adds a description that appears below the title.text_align– Aligns the text to the left, right or center.boxed– Wraps the milestone ring in a bordered box when set to ‘true’.
Examples and Usage
Basic example – The following shortcode will display a milestone ring with default parameters. The default percentage is 75%, the color is #0c9df0, the track color is #eeeeee, and the text alignment is center.
[milestone_ring /]Advanced examples
Display a milestone ring with a custom percentage of 50%, a custom color of #ff0000 (red), and a custom track color of #000000 (black). The text in the middle of the pie chart is ‘50% Completed’, and the title below the pie chart is ‘Project Progress’. The description below the title is ‘We have completed half of the project’. The text alignment is left, and the milestone is wrapped in a bordered box.
[milestone_ring percent="50" color="#ff0000" track_color="#000000" display="50% Completed" title="Project Progress" text="We have completed half of the project" text_align="left" boxed="true" /]Display a milestone ring with a custom percentage of 80%, a custom color of #008000 (green), and a custom track color of #808080 (grey). The text in the middle of the pie chart is ‘80% Achieved’, and the title below the pie chart is ‘Fundraising Goal’. The description below the title is ‘We have achieved 80% of our fundraising goal’. The text alignment is right, and the milestone is not wrapped in a bordered box.
[milestone_ring percent="80" color="#008000" track_color="#808080" display="80% Achieved" title="Fundraising Goal" text="We have achieved 80% of our fundraising goal" text_align="right" boxed="false" /]PHP Function Code
In case you have difficulties debugging what causing issues with
[milestone_ring]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'milestone_ring', 'themeblvd_shortcode_milestone_ring' );Shortcode PHP function:
function themeblvd_shortcode_milestone_ring( $atts ) { if ( ! function_exists( 'themeblvd_get_milestone_ring' ) ) { return sprintf( '<div class="alert">%s</div>', __( 'Your theme does not support the [milestone_ring] shortcode.', 'theme-blvd-shortcodes' ) ); } $atts = shortcode_atts( array( 'percent' => '75', // Percentage for pie chart. 'color' => '#0c9df0', // Color of the milestone percentage. 'track_color' => '#eeeeee', // Color track containing milestone ring (currently no option in builder, may add in the future). 'display' => '', // Text in the middle of the pie chart. 'title' => '', // Title below pie chart. 'text' => '', // Description below title. 'text_align' => 'center', // Text alignment - left, right, or center. 'boxed' => 'false', // Whether to wrap milestone in borered box. ), $atts ); if ( 'true' === $atts['boxed'] ) { $atts['boxed'] = '1'; } else { $atts['boxed'] = '0'; } return themeblvd_get_milestone_ring( $atts ); }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpTheme Blvd [progress_bar] Shortcode
The Theme Blvd plugin’s ‘progress_bar’ shortcode displays a customizable progress bar on your WordPress site. This shortcode allows you to set the color, percentage, style (striped or not), and label. It’s compatible with both Bootstrap 3 and Theme Blvd framework 2.5+. The progress bar visually represents a certain percentage, ideal for showcasing skills or progress towards a goal.
Shortcode:
[progress_bar]Parameters
Here is a list of all possible progress_bar shortcode parameters and attributes:
color– Defines the color of the progress bar.percent– Sets the length of the bar as a percentage.striped– Determines if the progress bar has a striped pattern.label– Provides a description of what the progress bar represents.
Examples and Usage
Basic example – Displaying a progress bar with default settings
[progress_bar]The above shortcode will generate a progress bar with default settings. Since no parameters are specified, the progress bar will have a color of default, a percentage of 100%, and it will not be striped.
Advanced examples
Displaying a striped progress bar with a custom color and label
[progress_bar color="success" percent="75" striped="true" label="Project Completion"]In this example, the shortcode is used to generate a striped progress bar with a custom color and label. The color attribute is set to “success”, which will render the progress bar in green. The percent attribute is set to 75, indicating that the progress bar is 75% complete. The striped attribute is set to true, which will render the progress bar with a striped pattern. Finally, the label attribute is set to “Project Completion”, which will display this text as a label for the progress bar.
Displaying a danger progress bar at 40% completion
[progress_bar color="danger" percent="40"]This example demonstrates how to create a progress bar with a color of “danger” and a completion percentage of 40. The color “danger” typically renders the progress bar in red, and the percent attribute is set to 40, indicating that the progress bar is 40% complete.
PHP Function Code
In case you have difficulties debugging what causing issues with
[progress_bar]shortcode, check below the related PHP functions code.Shortcode line:
add_shortcode( 'progress_bar', 'themeblvd_shortcode_progress_bar' );Shortcode PHP function:
function themeblvd_shortcode_progress_bar( $atts ) { $atts = shortcode_atts( array( 'color' => '', // Possible Values: default, danger, success, info, warning, or custom hex. 'percent' => '100', // Percent of bar - 30, 60, 80, etc. 'striped' => 'false', // Possible Values: true, false. 'label' => '', // Label of what this bar represents, like "Graphic Design". ), $atts ); /** * Bootstrap 3 and Theme Blvd framework 2.5+. */ if ( function_exists( 'themeblvd_get_progress_bar' ) ) { $atts['value'] = $atts['percent']; unset( $atts['percent'] ); $atts['label_value'] = $atts['value'] . '%'; unset( $atts['striped'] ); // Removed from framework in 2.7.0. return themeblvd_get_progress_bar( $atts ); } /** * All of the following is the deprecated fallback * when using a theme prior to framework 2.5 and the * themeblvd_get_progress_bar() function doesn't exist. */ $wrap_class = ''; // Wrap classes for Bootstrap 3+. if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $wrap_class = 'progress'; } $class = ''; if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $class = 'progress-bar'; // For Bootstrap 3+. } else { $class = 'progress'; // For Bootstrap 1-2. } if ( $atts['color'] ) { if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $class .= ' progress-bar-' . $atts['color']; // For Bootstrap 3+. } else { $class .= ' progress-' . $atts['color']; // For Bootstrap 1 & 2. } } if ( 'true' === $atts['striped'] ) { if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { $wrap_class .= ' progress-striped'; // For Bootstrap 3+. } else { $class .= ' progress-striped'; // For Bootstrap 1 & 2. } } if ( version_compare( TB_FRAMEWORK_VERSION, '2.4.0', '>=' ) ) { // Bootstrap 3+. $output = '<div class="' . $wrap_class . '">'; $output .= ' <div class="' . $class . '" role="progressbar" aria-valuenow="' . $atts['percent'] . '" aria-valuemin="0" aria-valuemax="100" style="width: ' . $atts['percent'] . '%;">'; $output .= ' <span class="sr-only">' . $atts['percent'] . '%</span>'; $output .= ' </div>'; $output .= '</div>'; } else { // Bootstrap 1 & 2 (@deprecated). $output = '<div class="' . $classes . '">'; $output .= ' <div class="bar" style="width: ' . $atts['percent'] . '%;"></div>'; $output .= '</div>'; } return $output; }Code file location:
theme-blvd-shortcodes/theme-blvd-shortcodes/tb-shortcodes.phpConclusion
Now that you’ve learned how to embed the Theme Blvd Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply