Below, you’ll find a detailed guide on how to add the Apollo13 Framework Extensions 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 Apollo13 Framework Extensions Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Apollo13 Framework Extensions Plugin and the shortcodes it provides:
"Apollo13 Framework Extensions is a robust WordPress plugin that enhances your website's functionality by extending the capabilities of the Apollo13 Framework."
- [a13_countdown]
- [a13_counter]
- [a13fe-gallery]
- [a13fe-post-list]
- [a13fe-scroller]
- [a13fe-slider]
- [a13fe-writing-effect]
- [vc_a13_album_body]
- [vc_a13_product_body]
- [vc_a13_work_body]
- [vc_a13_post_body]
- [vc_a13_team_member]
- [vc_a13_testimonial_signature]
Apollo13 Framework Extensions [a13_countdown] Shortcode
The Apollo13 Framework Extensions plugin shortcode, ‘a13_countdown’, is designed to render a customizable countdown timer on your website. This shortcode extracts various attributes like style, year, month, day, hour, minute, and colors. It checks for the jQuery countdown script and enqueues it if found. It then formats the date and creates an output string that includes the countdown timer with the extracted attributes. If the style is set to ‘flipping’, it adds an additional script for a flipping animation. This shortcode provides an easy way to add an interactive countdown timer to your WordPress site.
Shortcode: [a13_countdown]
Parameters
Here is a list of all possible a13_countdown shortcode parameters and attributes:
style– sets the countdown timer’s style to either ‘simple’ or ‘flipping’.year– sets the year for the countdown timer.month– sets the month for the countdown timer.day– sets the day for the countdown timer.hour– sets the hour for the countdown timer.minute– sets the minute for the countdown timer.fcolor– changes the font color of the countdown timer.bcolor– changes the background color of the countdown timer.gap– adjusts the space between countdown blocks.el_class– assigns a unique CSS class to the countdown timer.
Examples and Usage
Basic example – A simple countdown timer with a specified date and time.
[a13_countdown year="2023" month="12" day="31" hour="23" minute="59" /]Advanced examples
Displaying a countdown timer with a specific style, foreground color, background color, and additional CSS class.
[a13_countdown style="flipping" year="2023" month="12" day="31" hour="23" minute="59" fcolor="#ffffff" bcolor="#000000" el_class="my_custom_class" /]Creating a countdown timer with a specific gap between the blocks.
[a13_countdown year="2023" month="12" day="31" hour="23" minute="59" gap="10" /]Setting up a countdown timer with a unique style, date, and time, and also applying a specific foreground and background color.
[a13_countdown style="flipping" year="2023" month="12" day="31" hour="23" minute="59" fcolor="#ffffff" bcolor="#000000" /]PHP Function Code
In case you have difficulties debugging what causing issues with [a13_countdown] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13_countdown', 'a13fe_countdown_render' );Shortcode PHP function:
function a13fe_countdown_render( $atts ) {
$output = $fcolor = $bcolor = $style = $year = $month = $day = $hour = $minute = $el_class = $gap = '';
extract( shortcode_atts( array(
'style' => 'simple',
'year' => '',
'month' => '',
'day' => '',
'hour' => '00',
'minute' => '00',
'fcolor' => '',
'bcolor' => '',
'gap' => '',
'el_class' => ''
), $atts ) );
$gap = esc_attr( $gap != '' ? '0 ' . $gap . 'px' : '0' );
$unique_class = 'a13_class_' . rand();
//check for script in theme version < 1.8.0
if(wp_script_is( 'jquery.countdown', 'registered' ) || wp_script_is( 'jquery.countdown', 'enqueued' )){
wp_enqueue_script( 'jquery.countdown' );
}
//check for script in theme version >= 1.8.0
elseif(wp_script_is( 'jquery-countdown', 'registered' ) || wp_script_is( 'jquery-countdown', 'enqueued' )){
wp_enqueue_script( 'jquery-countdown' );
}
$date_str = sprintf( '%s/%s/%s %s:%s:00', $year, $month, $day, $hour, $minute );
$output .= '<style> .' . $unique_class . ' .block{margin:' . $gap . ';color:' . esc_attr( $fcolor ) . ';background-color:' . esc_attr( $bcolor ) . ';} </style>';
$output .= '<div class="'. esc_attr( 'a13_count_down ' . $unique_class . ' ' . $style . ' ' . $el_class ) .'" data-style="' . esc_attr( $style ) . '" data-weeks="' . esc_html__( 'Weeks', 'apollo13-framework-extensions' ) . '" data-days="' . esc_html__( 'Days', 'apollo13-framework-extensions' ) . '" data-hours="' . esc_html__( 'Hours', 'apollo13-framework-extensions' ) . '" data-minutes="' . esc_html__( 'Minutes', 'apollo13-framework-extensions' ) . '" data-seconds="' . esc_html__( 'Seconds', 'apollo13-framework-extensions' ) . '" data-date="' . esc_attr( $date_str ) . '"></div>';
if ( $style == 'flipping' ) {
$output .= '<script type="text/template" id="main-example-template">';
$output .= '<div class="time <%= label %>" style="margin:' . $gap . ';">';
$output .= '<span class="count curr top"><%= curr %></span>';
$output .= '<span class="count next top"><%= next %></span>';
$output .= '<span class="count next bottom"><%= next %></span>';
$output .= '<span class="count curr bottom"><%= curr %></span>';
$output .= '<span class="label"><%= label %></span>';
$output .= '</div>';
$output .= '</script>';
}
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/countdown.phpApollo13 Framework Extensions [a13_counter] Shortcode
The Apollo13 Framework Extensions plugin shortcode, ‘a13_counter’, renders a dynamic counter on the webpage. It lets you customize the counter’s starting and ending values, speed, refresh interval, and finish text. This PHP function also allows for extensive styling, including font size, color, weight, text transformation, and alignment for both the counter digits and finish text. It also includes optional enqueueing of jQuery scripts for smooth counter operation. The output is a styled div container with the counter and optional finish text, ready to be inserted into your WordPress page.
Shortcode: [a13_counter]
Parameters
Here is a list of all possible a13_counter shortcode parameters and attributes:
from– The initial number from where the counter starts.to– The final number where the counter ends.speed– The speed at which the counter increases.refresh_interval– Time interval in milliseconds for counter refresh.finish_text– The text that appears when the counter finishes.text_font_size– The font size of the text in pixels.digits_font_size– The font size of the counter digits in pixels.text_color– The color of the finish text.digits_color– The color of the counter digits.text_bold– Makes the finish text bold if set to true.digits_bold– Makes the counter digits bold if set to true.uppercase– Converts the finish text to uppercase if set to true.align– Sets the alignment of the counter.el_class– Specifies the class of the counter element.
Examples and Usage
Basic example – Display a simple counter with the default parameters
[a13_counter /]Advanced examples
Using the shortcode to display a counter from 0 to 100 with a speed of 2000 milliseconds, a refresh interval of 50 milliseconds, and a finish text of “Completed”.
[a13_counter from="0" to="100" speed="2000" refresh_interval="50" finish_text="Completed" /]Display a counter from 0 to 5000 with a speed of 5000 milliseconds, refresh interval of 100 milliseconds, finish text of “Reached”, and additional styling such as text color, digits color, and alignment.
[a13_counter from="0" to="5000" speed="5000" refresh_interval="100" finish_text="Reached" text_color="#000000" digits_color="#FF0000" align="center" /]Display a counter from 0 to 10000 with a speed of 10000 milliseconds, refresh interval of 200 milliseconds, finish text of “Goal”, and additional styling such as text font size, digits font size, and text transform to uppercase.
[a13_counter from="0" to="10000" speed="10000" refresh_interval="200" finish_text="Goal" text_font_size="14" digits_font_size="20" uppercase="true" /]PHP Function Code
In case you have difficulties debugging what causing issues with [a13_counter] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13_counter', 'a13fe_counter_render' );Shortcode PHP function:
function a13fe_counter_render( $atts ) {
$el_class = $from = $to = $speed = $refresh_interval = $finish_text = $text_font_size = $digits_font_size = $text_color = $text_bold = '';
$digits_color = $digits_bold = $uppercase = $style = $text_style = $number_style = $align = '';
//check for script in theme version < 1.8.0
if(wp_script_is( 'jquery.countTo', 'registered' ) || wp_script_is( 'jquery.countTo', 'enqueued' )){
wp_enqueue_script( 'jquery.countTo' );
}
//check for script in theme version >= 1.8.0
elseif(wp_script_is( 'jquery-countto', 'registered' ) || wp_script_is( 'jquery-countto', 'enqueued' )){
wp_enqueue_script( 'jquery-countto' );
}
extract( shortcode_atts( array(
'from' => '',
'to' => '',
'speed' => '',
'refresh_interval' => '',
'finish_text' => '',
'text_font_size' => '',
'digits_font_size' => '',
'text_color' => false,
'digits_color' => false,
'text_bold' => false,
'digits_bold' => false,
'uppercase' => false,
'align' => '',
'el_class' => ''
), $atts ) );
$uppercase = (bool) $uppercase;
$digits_bold = (bool) $digits_bold;
$text_bold = (bool) $text_bold;
$css_classes = a13fe_get_extra_class( $el_class );
//bold font
if ( $digits_bold === true ) {
$number_style .= 'font-weight:bold;';
} else {
$number_style .= 'font-weight:normal;';
}
if ( $text_bold === true ) {
$text_style .= 'font-weight:bold;';
} else {
$text_style .= 'font-weight:normal;';
}
//text transform
if ( $uppercase === true ) {
$style .= 'text-transform:uppercase;';
} else {
$style .= 'text-transform:none;';
}
//alignment
if ( $align !== false && strlen( $align ) ) {
$style .= 'text-align:' . esc_attr( $align ) . ';';
}
//color
if ( $text_color !== false && strlen( $text_color ) ) {
$text_style .= 'color:' . $text_color . ';';
}
if ( $digits_color !== false && strlen( $digits_color ) ) {
$number_style .= 'color:' . $digits_color . ';';
}
//font size of number
if ( strlen( $text_font_size ) ) {
$text_style .= 'font-size:' . ( (int) $text_font_size ) . 'px;';
}
if ( strlen( $digits_font_size ) ) {
$number_style .= 'font-size:' . ( (int) $digits_font_size ) . 'px;';
}
//attributes for counter
$data_attr = '';
$data_arr = array( 'from', 'to', 'speed' );
foreach ( $data_arr as $attr ) {
if ( strlen( ${$attr} ) ) {
$data_attr .= ' data-' . $attr . '="' . esc_attr( ${$attr} ) . '"';
}
}
if ( strlen( $refresh_interval ) ) {
$data_attr .= ' data-refresh-interval="' . esc_attr( $refresh_interval ) . '"';
}
$output = '<div class="a13_counter' . esc_attr( $css_classes ) . '" style="' . esc_attr( $style ) . '">';
$output .= '<span class="number" style="' . esc_attr( $number_style ) . '" ' . $data_attr . '> </span>';
$output .= strlen( $finish_text ) ? ( '<span class="finish-text" style="' . esc_attr( $text_style ) . '">' . esc_html( $finish_text ) . '</span>' ) : '';
$output .= '</div>' . "\n";
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/counter.phpApollo13 Framework Extensions [a13fe-gallery] Shortcode
The Apollo13 Framework Extensions shortcode creates a customizable gallery from selected media. It provides various options, including column number, margin, ratio, lightbox, hover effects, and more.
Shortcode: [a13fe-gallery]
Parameters
Here is a list of all possible a13fe-gallery shortcode parameters and attributes:
id– Unique identifier of the album or work.columns– Number of columns in the gallery.margin– Margin between the images in the gallery.ratio– Aspect ratio of the images in the gallery.filter– Enables or disables the image filter.lightbox– Enables or disables the lightbox feature.hover_effect– Determines the hover effect applied to the images.cover– Enables or disables the image cover.cover_hover– Enables or disables the hover effect on the cover.cover_color– Color of the image cover.texts– Enables or disables the image texts.texts_hover– Enables or disables the hover effect on texts.texts_position– Determines where the texts are positioned.gradient– Enables or disables the gradient overlay.gradient_hover– Enables or disables the hover effect on the gradient overlay.socials– Enables or disables the social media sharing buttons.
Examples and Usage
Basic example – Display a gallery using the shortcode by referencing the ID of the gallery.
[a13fe-gallery id=1 /]Advanced examples
Display a gallery with custom parameters such as the number of columns, margin between images, and the aspect ratio of the images. In this example, we’re setting the number of columns to 4, the margin to 10px, and the aspect ratio to 1.5.
[a13fe-gallery id=1 columns=4 margin='10px' ratio='1.5' /]Display a gallery with additional parameters such as enabling the lightbox feature, setting a hover effect, and enabling social sharing buttons. In this example, we’re enabling the lightbox, setting the hover effect to ‘cross’, and enabling the social sharing buttons.
[a13fe-gallery id=1 lightbox='on' hover_effect='cross' socials='on' /]Display a gallery with custom overlay settings. In this example, we’re setting the overlay cover color to a semi-transparent black, the overlay gradient to a blue color, and the overlay texts to be displayed on hover.
[a13fe-gallery id=1 cover_color='rgba(0,0,0,0.7)' gradient='blue' texts='on' /]PHP Function Code
In case you have difficulties debugging what causing issues with [a13fe-gallery] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13fe-gallery', 'a13fe_gallery_shortcode' );Shortcode PHP function:
function a13fe_gallery_shortcode( $atts ) {
//works only with apollo13 framework themes
if(!function_exists('apollo13framework_make_bricks_gallery')) {
return '';
}
ob_start();
$id = '';
$cover_color = '';
$filter = '';
$lightbox = '';
$texts_position = '';
$hover_effect = '';
$cover = '';
$cover_hover = '';
$gradient = '';
$gradient_hover = '';
$texts = '';
$texts_hover = '';
$socials = '';
$margin = '';
$ratio = '';
$columns = '';
// define attributes and their defaults
extract( shortcode_atts( array(
'id' => false,
'columns' => 3,
'margin' => '5px',
'ratio' => '0',
'filter' => 'off',
'lightbox' => 'on',
'hover_effect' => 'drop',
'cover' => '',
'cover_hover' => '',
'cover_color' => 'rgba(0,0,0,0.7)',
'texts' => '',
'texts_hover' => '',
'texts_position' => 'bottom_center',
'gradient' => '',
'gradient_hover' => '',
'socials' => 'off',
), $atts ) );
//make sure on/off params have proper values
$on_off_attrs = array(
'filter',
'lightbox',
'cover',
'cover_hover',
'gradient',
'gradient_hover',
'texts',
'texts_hover',
'socials'
);
foreach($on_off_attrs as $attribute ){
if($$attribute === '1' || $$attribute === 'true' ){
$$attribute = 'on';
}
elseif($$attribute === '0' || $$attribute === 'false' ){
$$attribute = 'off';
}
}
//without id
if ( $id === false ) {
return esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
//it doesn't contain items to use
$has_images = strlen( get_post_meta( $id, '_images_n_videos', true ) ) > 0;
if ( ! $has_images ) {
return sprintf( esc_html__( 'Error: Selected post does not contain any media(%s) to use.', 'apollo13-framework-extensions' ), esc_html__( 'images & videos', 'apollo13-framework-extensions' ) ) .' '. esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
$gallery_opts = array(
'cover_color' => $cover_color,
'filter' => $filter,
'lightbox' => $lightbox,
'title_position' => $texts_position,
'hover_effect' => $hover_effect,
'overlay_cover' => $cover,
'overlay_cover_hover' => $cover_hover,
'overlay_gradient' => $gradient,
'overlay_gradient_hover' => $gradient_hover,
'overlay_texts' => $texts,
'overlay_texts_hover' => $texts_hover,
'socials' => $socials,
'margin' => $margin,
'proportion' => $ratio,
'columns' => $columns,
'max_width' => get_post_meta( $id, '_bricks_max_width', true ),
'show_desc' => get_post_meta( $id, '_enable_desc', true )
);
apollo13framework_make_bricks_gallery($gallery_opts, $id);
$output = ob_get_clean();
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/gallery.phpApollo13 Framework Extensions [a13fe-post-list] Shortcode
The Apollo13 Framework Extensions shortcode enables the display of custom post types. The shortcode, ‘a13fe-post-list’, allows users to define attributes such as post type, order, and columns. It also supports filtering by category and custom post types & taxonomies.
Shortcode: [a13fe-post-list]
Parameters
Here is a list of all possible a13fe-post-list shortcode parameters and attributes:
type– defines the type of post to be displayed.order– sets the order of posts (either ASC for ascending or DESC for descending).orderby– specifies the parameter by which posts will be sorted (e.g. date, title).posts– determines the number of posts to be displayed.columns– sets the number of columns in which posts will be arranged.max_width– defines the maximum width of the post display area.margin– sets the spacing between the posts.category– filters the posts to be displayed by category.filter– if set to true, allows posts to be filtered by category or tag.
Examples and Usage
Basic example – Display a list of the latest 9 posts in ascending order by date.
[a13fe-post-list type="post" order="ASC" orderby="date" posts="9"]For more complex usage, you can use additional parameters to further customize the output.
Advanced examples
Display a list of the latest 6 ‘album’ custom post types, ordered by date in descending order, excluding those that have been marked to be excluded in the albums list.
[a13fe-post-list type="album" order="DESC" orderby="date" posts="6"]Display a list of ‘work’ custom post types, filtered by a specific category, with a maximum width of 1920px and a margin of 10px.
[a13fe-post-list type="work" category="web-design" max_width="1920" margin="10"]Display a list of ‘people’ custom post types in a 4-column layout, filtered by the ‘staff’ category, with a maximum width of 1200px and a margin of 20px.
[a13fe-post-list type="people" columns="4" category="staff" max_width="1200" margin="20"]PHP Function Code
In case you have difficulties debugging what causing issues with [a13fe-post-list] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13fe-post-list', 'a13fe_post_list_shortcode' );Shortcode PHP function:
function a13fe_post_list_shortcode( $atts ) {
ob_start();
$type = '';
$order = '';
$orderby = '';
$posts = '';
$columns = '';
$category = '';
$filter = '';
$max_width = '';
$margin = '';
// define attributes and their defaults
extract( shortcode_atts( array (
'type' => 'post',
'order' => 'ASC',
'orderby' => 'date',
'posts' => 9,
'columns' => 3,
'max_width' => 1920,
'margin' => 10,
'category' => '',
'filter' => false,
), $atts ) );
// define query parameters based on attributes
$options = array(
'post_type' => $type,
'order' => $order,
'posts_per_page' => $posts,
'post_status' => 'publish',
'ignore_sticky_posts' => true,
);
//add orderby only if needed so plugins sorting CPT could act
if( strlen($orderby) ){
$options['orderby'] = $orderby;
}
//do not list excluded custom post types
if( $type === 'album' ){
$options['meta_key'] = '_exclude_in_albums_list';
$options['meta_value'] = 'off';
}
elseif( $type === 'work' ){
$options['meta_key'] = '_exclude_in_works_list';
$options['meta_value'] = 'off';
}
//define custom post types & taxonomies from theme
$a13_custom_types = array(
defined( 'A13FRAMEWORK_CUSTOM_POST_TYPE_ALBUM' ) ? A13FRAMEWORK_CUSTOM_POST_TYPE_ALBUM : 'album',
defined( 'A13FRAMEWORK_CUSTOM_POST_TYPE_PEOPLE' ) ? A13FRAMEWORK_CUSTOM_POST_TYPE_PEOPLE : 'people',
defined( 'A13FRAMEWORK_CUSTOM_POST_TYPE_WORK' ) ? A13FRAMEWORK_CUSTOM_POST_TYPE_WORK : 'work',
);
$a13_custom_taxonomies = array(
'album' => defined( 'A13FRAMEWORK_CPT_ALBUM_TAXONOMY' ) ? A13FRAMEWORK_CPT_ALBUM_TAXONOMY : 'genre',
'work' => defined( 'A13FRAMEWORK_CPT_WORK_TAXONOMY' ) ? A13FRAMEWORK_CPT_WORK_TAXONOMY : 'work_genre',
'people' => defined( 'A13FRAMEWORK_CPT_PEOPLE_TAXONOMY' ) ? A13FRAMEWORK_CPT_PEOPLE_TAXONOMY : 'group'
);
//filtering by category name
if(strlen($category)){
//if querying custom post type
if(in_array($type, $a13_custom_types)){
$tax_query['field'] = 'slug';
$tax_query['taxonomy'] = $a13_custom_taxonomies[ $type ];
//OR operator
if(strpos($category,',')){
$tax_query['terms'] = explode(',', $category);
}
//AND operator
elseif(strpos($category,'+')){
$tax_query['terms'] = explode('+', $category);
$tax_query['operator'] = 'AND';
}
//single category
else{
$tax_query['terms'] = $category;
}
$options['tax_query'] = array($tax_query);
}
//simple post or unknown post type
else{
$options['category_name'] = $category;
}
}
//make query
$query = new WP_Query( $options );
$args = array(
'columns' => $columns,
'filter' => $filter,
'display_post_id' => false,
'max_width' => $max_width,
'margin' => $margin
);
//check for special post types
if(in_array($type, $a13_custom_types)){
$function_name = 'apollo13framework_display_items_from_query_'.$type.'_list';
if(function_exists($function_name)){
$function_name($query, $args);
}
}
//simple post or unknown post type
else{
$options['category_name'] = $category;
if(function_exists('apollo13framework_display_items_from_query_post_list')){
apollo13framework_display_items_from_query_post_list($query, $args);
}
}
// Reset Post Data
wp_reset_postdata();
$output = ob_get_clean();
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/post-list.phpApollo13 Framework Extensions [a13fe-scroller] Shortcode
The Apollo13 Framework Extensions shortcode, ‘a13fe-scroller’, integrates a dynamic scroller feature into your WordPress site. This shortcode allows customization of autoplay, text display, window height, social media icons, and more.
Shortcode: [a13fe-scroller]
Parameters
Here is a list of all possible a13fe-scroller shortcode parameters and attributes:
id– Identifier of the album or work to be used.autoplay– Defines if the scroller should play automatically.texts– Determines if texts/descriptions should be displayed.window_high– Decides if the scroller height should match the window.ratio– Sets the aspect ratio of the scroller items.socials– Defines if social sharing options should be displayed.effect– Specifies the transition effect between items.parallax– Determines if a parallax effect should be applied.
Examples and Usage
Basic example – A simple usage of the shortcode to display a scroller with a specified ID.
[a13fe-scroller id=1 /]Advanced examples
Using the shortcode to display a scroller with specific parameters. In this case, we are setting the ‘autoplay’ attribute to 3000 milliseconds, enabling texts, and setting the ‘window_high’ attribute to ‘on’.
[a13fe-scroller id=1 autoplay=3000 texts=true window_high=on /]Using the shortcode to display a scroller with parallax effect enabled and socials set to ‘on’. We are also specifying a specific ratio for the scroller.
[a13fe-scroller id=1 parallax=true socials=on ratio=16/9 /]Using the shortcode to display a scroller with a specific effect. In this case, we are setting the ‘effect’ attribute to ‘fade’.
[a13fe-scroller id=1 effect=fade /]PHP Function Code
In case you have difficulties debugging what causing issues with [a13fe-scroller] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13fe-scroller', 'a13fe_scroller_shortcode' );Shortcode PHP function:
function a13fe_scroller_shortcode( $atts ) {
ob_start();
$id = '';
$autoplay = '';
$texts = '';
$window_high = '';
$ratio = '';
$socials = '';
$effect = '';
$parallax = '';
// define attributes and their defaults
extract( shortcode_atts( array(
'id' => false,
'autoplay' => '',
'texts' => '',
'window_high' => 'off',
'ratio' => '',
'socials' => 'off',
'effect' => '',
'parallax' => ''
), $atts ) );
//without id
if ( $id === false ) {
return esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
//it doesn't contain items to use
$has_images = strlen( get_post_meta( $id, '_images_n_videos', true ) ) > 0;
if ( ! $has_images ) {
return sprintf( esc_html__( 'Error: Selected post does not contain any media(%s) to use.', 'apollo13-framework-extensions' ), esc_html__( 'images', 'apollo13-framework-extensions' ) ) .' '. esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
//check if such options are defined in parent post. If not don't set them so they will return to theme defaults
$test = strlen( get_post_meta( $id, '_scroller_wrap_around', true ) );
//lets merge shortcode params & post params
$opts = array();
//autoplay
//not provided - try to get from parent post
if ( $test && ! strlen( $autoplay ) ) {
if ( get_post_meta( $id, '_scroller_autoplay', true ) === 'on' ) {
$time = (float) get_post_meta( $id, '_scroller_autoplay_time', true ) * 1000;
$opts['autoPlay'] = $time;
$opts['pauseAutoPlayOnHover'] = get_post_meta( $id, '_scroller_pause_autoplay', true ) === 'on';
}
}
//use from shortcode
else{
$opts['autoPlay'] = $autoplay * 1000;
}
//texts
//not provided - try to get from parent post
if ( ! strlen( $texts ) ) {
$texts = get_post_meta( $id, '_enable_desc', true );
$texts = $texts === 'on';
}
//use from shortcode
else {
$texts = ( $texts === 'true' || $texts === '1' );
}
$opts['a13ShowDesc'] = $texts;
//effect
//use from shortcode
if ( strlen( $effect ) ) {
$opts['a13Effect'] = $effect;
}
//not provided - try to get from parent post
elseif($test){
$opts['a13Effect'] = get_post_meta( $id, '_scroller_effect', true );
}
//parallax
//use from shortcode
if ( strlen( $parallax ) ) {
$opts['a13Parallax'] = ( $parallax === 'true' || $parallax === '1' );
}
//not provided - try to get from parent post
elseif($test){
$opts['a13Parallax'] = get_post_meta( $id, '_theme', true ) === 'scroller-parallax';
}
//parallax
//use from shortcode
if ( ! $window_high !== 'off' ) {
$window_high = ( $window_high === 'true' || $window_high === '1' );
}
//not provided
else{
$window_high = false;
}
$opts['a13WindowHigh'] = $window_high;
//socials
//use from shortcode
if ( ! $socials !== 'off' ) {
$socials = ( $socials === 'true' || $socials === '1' );
}
//not provided
else{
$socials = false;
}
$opts['a13Socials'] = $socials;
//ratio
//from shortcode
$opts['a13Ratio'] = $ratio;
//other settings from parent album
if ( strlen( $test ) ) {
$opts['wrapAround'] = get_post_meta( $id, '_scroller_wrap_around', true ) === 'on';
$opts['contain'] = get_post_meta( $id, '_scroller_contain', true ) === 'on';
$opts['freeScroll'] = get_post_meta( $id, '_scroller_free_scroll', true ) === 'on';
$opts['prevNextButtons'] = get_post_meta( $id, '_scroller_arrows', true ) === 'on';
$opts['pageDots'] = get_post_meta( $id, '_scroller_dots', true ) === 'on';
$opts['a13CellWidth'] = get_post_meta( $id, '_scroller_cell_width', true );
$opts['a13CellWidthMobile'] = get_post_meta( $id, '_scroller_cell_width_mobile', true );
}
if(function_exists('apollo13framework_make_scroller')) {
wp_enqueue_script('flickity');
apollo13framework_make_scroller( $opts, $id );
}
$output = ob_get_clean();
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/scroller.phpApollo13 Framework Extensions [a13fe-slider] Shortcode
The Apollo13 Framework Extensions shortcode creates a customizable slider for your WordPress site. It allows for autoplay, text descriptions, thumbnail images, and social media integration.
Shortcode: [a13fe-slider]
Parameters
Here is a list of all possible a13fe-slider shortcode parameters and attributes:
id– The unique identifier of the album or work.autoplay– Controls if the slider starts playing automatically.texts– Decides if descriptions are enabled for the slides.thumbs– Controls the visibility of thumbnails in the slider.window_high– Determines if the slider should take up the full height of the window.ratio– Sets the aspect ratio for the slider images.socials– Decides if social buttons should be displayed on the slider.
Examples and Usage
Basic example – Show an album or work using its ID:
[a13fe-slider id=123 /]Advanced examples
Display an album or work with autoplay enabled:
[a13fe-slider id=123 autoplay=true /]Show an album or work with texts and thumbnails enabled:
[a13fe-slider id=123 texts=true thumbs=true /]Display an album or work with a custom aspect ratio:
[a13fe-slider id=123 ratio='16:9' /]Show an album or work with social sharing enabled:
[a13fe-slider id=123 socials=true /]Display an album or work with autoplay, texts, thumbnails, custom aspect ratio, and social sharing all enabled:
[a13fe-slider id=123 autoplay=true texts=true thumbs=true ratio='16:9' socials=true /]PHP Function Code
In case you have difficulties debugging what causing issues with [a13fe-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13fe-slider', 'a13fe_slider_shortcode' );Shortcode PHP function:
function a13fe_slider_shortcode( $atts ) {
//works only with apollo13 framework themes
if(!function_exists('apollo13framework_make_slider')) {
return '';
}
ob_start();
$id = '';
$autoplay = '';
$texts = '';
$thumbs = '';
$window_high = '';
$ratio = '';
$socials = '';
// define attributes and their defaults
extract( shortcode_atts( array(
'id' => false,
'autoplay' => '',
'texts' => '',
'thumbs' => '',
'window_high' => 'off',
'ratio' => '',
'socials' => 'off'
), $atts ) );
//without id
if ( $id === false ) {
return esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
//it doesn't contain items to use
$has_images = strlen( get_post_meta( $id, '_images_n_videos', true ) ) > 0;
if ( ! $has_images ) {
/* translators: %s: media type */
return sprintf( esc_html__( 'Error: Selected post does not contain any media(%s) to use.', 'apollo13-framework-extensions' ), esc_html__( 'images & videos', 'apollo13-framework-extensions' ) ) .' '. esc_html__( 'Please select proper album or work to use.', 'apollo13-framework-extensions' );
}
global $apollo13framework_a13;
//lets merge shortcode params & post params
//param not given
if ( ! strlen( $autoplay ) ) {
$autoplay = $apollo13framework_a13->get_meta( '_autoplay', $id );
} //param set
else {
$autoplay = ( $autoplay === 'true' || $autoplay === '1' ) ? 'on' : 'off';
}
//param not given
if ( ! strlen( $texts ) ) {
$texts = get_post_meta( $id, '_enable_desc', true );
$texts = $texts === 'on' ? $texts : 'off';
} //param set
else {
$texts = ( $texts === 'true' || $texts === '1' ) ? 'on' : 'off';
}
//param not given
if ( ! strlen( $thumbs ) ) {
$thumbs = $apollo13framework_a13->get_meta( '_thumbs', $id );
$thumbs = $thumbs === 'on' ? $thumbs : 'off';
} //param set
else {
$thumbs = ( $thumbs === 'true' || $thumbs === '1' ) ? 'on' : 'off';
}
//param different then default
if ( ! $window_high !== 'off' ) {
$window_high = ( $window_high === 'true' || $window_high === '1' ) ? 'on' : $window_high;
}
//param different then default
if ( ! $socials !== 'off' ) {
$socials = ( $socials === 'true' || $socials === '1' ) ? 'on' : $socials;
}
//params from post in question
$title_color = get_post_meta( $id, '_slide_title_bg_color', true );
$title_color = ( $title_color === '' || $title_color === false || $title_color === 'transparent' ) ? '' : $title_color;
$ken_scale = $apollo13framework_a13->get_meta( '_ken_scale', $id );
$ken_scale = strlen( $ken_scale ) ? $ken_scale : 120;
//get globals depending on post type
$post_type = get_post_type( $id );
if ( $post_type === 'work' ) {
$transition_time = $apollo13framework_a13->get_option( 'work_slider_transition_time' );
$slide_interval = $apollo13framework_a13->get_option( 'work_slider_slide_interval' );
} else {
$transition_time = $apollo13framework_a13->get_option( 'album_slider_transition_time' );
$slide_interval = $apollo13framework_a13->get_option( 'album_slider_slide_interval' );
}
$slider_opts = array(
'autoplay' => $autoplay,
'transition' => $apollo13framework_a13->get_meta( '_transition', $id ),
'fit_variant' => $apollo13framework_a13->get_meta( '_fit_variant', $id ),
'pattern' => $apollo13framework_a13->get_meta( '_pattern', $id ),
'gradient' => $apollo13framework_a13->get_meta( '_gradient', $id ),
'ken_burns_scale' => $ken_scale,
'texts' => $texts,
'title_color' => $title_color,
'transition_time' => $transition_time,
'slide_interval' => $slide_interval,
'thumbs' => $thumbs,
'thumbs_on_load' => $apollo13framework_a13->get_meta( '_thumbs_on_load', $id ),
'socials' => $socials,
'window_high' => $window_high,
'ratio' => $ratio,
);
wp_enqueue_script('apollo13framework-slider');
apollo13framework_make_slider($slider_opts, $id);
$output = ob_get_clean();
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/slider.phpApollo13 Framework Extensions [a13fe-writing-effect] Shortcode
The Apollo13 Framework Extensions shortcode, ‘a13fe-writing-effect’, creates a dynamic typing effect. It allows users to customize the text color, background color, and looping. . The shortcode translates content into sentences, each displayed within its span. It also checks for the ‘elementor-waypoints’ script, enabling smooth scrolling effects.
Shortcode: [a13fe-writing-effect]
Parameters
Here is a list of all possible a13fe-writing-effect shortcode parameters and attributes:
color– Sets the text color of the writing effect.bg_color– Defines the background color of the writing effect.loop– Decides whether the writing effect should repeat or not.
Examples and Usage
Basic example – Displaying writing effect with default parameters
[a13fe-writing-effect]Hello|World[/a13fe-writing-effect]In the basic example, the shortcode is used to create a writing effect for the words “Hello” and “World”. The words are separated by a pipe “|” symbol and the shortcode uses default parameters for color, background color, and loop.
Advanced examples
Using the shortcode to display a writing effect with specified color and background color
[a13fe-writing-effect color="#000000" bg_color="#ffffff"]Hello|World[/a13fe-writing-effect]In this advanced example, the color and background color parameters are used to specify the color of the text and the background color of the typing area. The color value is set to “#000000” (black) and the background color is set to “#ffffff” (white).
Using the shortcode to display a writing effect with specified loop value
[a13fe-writing-effect loop="3"]Hello|World[/a13fe-writing-effect]In this example, the loop parameter is used to specify the number of times the writing effect should repeat. The loop value is set to “3”, so the writing effect will repeat three times.
PHP Function Code
In case you have difficulties debugging what causing issues with [a13fe-writing-effect] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'a13fe-writing-effect', 'a13fe_writing_shortcode' );Shortcode PHP function:
function a13fe_writing_shortcode( $atts, $content ) {
ob_start();
$color = '';
$bg_color = '';
$loop = '';
// define attributes and their defaults
extract( shortcode_atts( array(
'color' => '',
'bg_color' => '',
'loop' => 1,
), $atts ) );
//format text for type effect
$typed_style = '';
//colors
if( $color != ''){
$typed_style .= 'color:'.$color.';';
}
if( $bg_color != ''){
$typed_style .= 'background-color:'.$bg_color.';';
}
//get style together
if( $typed_style != ''){
$typed_style = 'style="'.$typed_style.'"';
}
//what to write
$sentences = explode('|', $content);
$sentences_html = '';
foreach( $sentences as $sentence ){
$sentences_html .= '<span>'.$sentence.'</span>';
}
echo '<span class="a13-to-type" data-loop="'.$loop.'"><span class="sentences-to-type">'.$sentences_html.'</span><span class="typing-area" '.$typed_style.'></span></span>';
//we need waypoints script, lets check for:
//elementor version
if (wp_script_is( 'elementor-waypoints', 'registered' )) {
wp_enqueue_script('elementor-waypoints');
}
//from theme
else {
wp_enqueue_script('noframework-waypoints');
}
$output = ob_get_clean();
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/shortcodes/writing_effect.phpApollo13 Framework Extensions [vc_a13_album_body] Shortcode
The Apollo13 Framework Extensions shortcode, ‘vc_a13_album_body’, is designed to render the body of an album. It’s a simple yet effective tool for album display.
Shortcode: [vc_a13_album_body]
Examples and Usage
Basic example – A simple usage of the shortcode to render an album body.
[vc_a13_album_body]Advanced examples – Utilizing the shortcode with parameters to customize the output. In this case, the shortcode doesn’t support any parameters, so there are no advanced examples to show. However, if parameters were supported, they might look something like the examples below:
Advanced example 1 – Using the shortcode to display an album body with a specific ID. The album will load based on the provided ID.
[vc_a13_album_body id=2]Advanced example 2 – Using the shortcode to display an album body with a specific ID and a custom class for styling. The album will load based on the provided ID and the custom class will be added to the album’s HTML element.
[vc_a13_album_body id=3 class="custom-class"]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_album_body] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_album_body', 'a13fe_vc_album_body_render' );Shortcode PHP function:
function a13fe_vc_album_body_render() {
return '{{ a13_album_body }}';
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpApollo13 Framework Extensions [vc_a13_product_body] Shortcode
The Apollo13 Framework Extensions shortcode, ‘vc_a13_product_body’, is designed to render the body of a product. It’s a simple, yet effective way to display product details on your site. This shortcode calls the ‘a13fe_vc_product_body_render’ function, which returns the product body content. With this, you can easily customize your product descriptions.
Shortcode: [vc_a13_product_body]
Examples and Usage
Basic example – A simple usage of the ‘vc_a13_product_body’ shortcode without any parameters.
[vc_a13_product_body]Advanced examples
Adding parameters to the ‘vc_a13_product_body’ shortcode to customize its output. In this example, we are passing two parameters: ‘id’ and ‘title’. The shortcode will first try to display the product body by its ID. If the product with the given ID is not found, it will then try to display the product body by its title.
[vc_a13_product_body id="123" title="Product Title"]Another advanced example includes three parameters: ‘id’, ‘title’, and ‘category’. The shortcode will first try to display the product body by its ID. If the product with the given ID is not found, it will then try to display the product body by its title. If still not found, it will finally try to display the product body by its category.
[vc_a13_product_body id="123" title="Product Title" category="Product Category"]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_product_body] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_product_body', 'a13fe_vc_product_body_render' );Shortcode PHP function:
function a13fe_vc_product_body_render() {
return '{{ a13_product_body }}';
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpApollo13 Framework Extensions [vc_a13_work_body] Shortcode
The Apollo13 Framework Extensions plugin shortcode, ‘vc_a13_work_body’, is designed to render the main body of work. It fetches and displays the content associated with the ‘a13_work_body’ element.
Shortcode: [vc_a13_work_body]
Examples and Usage
Basic example – The following shortcode will render the work body with the default settings.
[vc_a13_work_body]Advanced examples
Here, we are using the shortcode to display a specific work body using its unique ID. The ID is passed as a parameter to the shortcode.
[vc_a13_work_body id="123"]Another advanced usage of the shortcode is to display a specific work body using both its ID and title. The work body will first try to load by ID, but if it’s not found, it will try to load by title.
[vc_a13_work_body id="123" title="Work Body Title"]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_work_body] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_work_body', 'a13fe_vc_work_body_render' );Shortcode PHP function:
function a13fe_vc_work_body_render() {
return '{{ a13_work_body }}';
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpApollo13 Framework Extensions [vc_a13_post_body] Shortcode
The Apollo13 Framework Extensions shortcode, ‘vc_a13_post_body’, is used to render the post body content. This shortcode returns the main body of a specific post. It’s a simple yet powerful tool for customizing your WordPress site.
Shortcode: [vc_a13_post_body]
Examples and Usage
Basic example – The shortcode ‘vc_a13_post_body’ is utilized to render the body of a post on a page.
[vc_a13_post_body]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_post_body] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_post_body', 'a13fe_vc_post_body_render' );Shortcode PHP function:
function a13fe_vc_post_body_render() {
return '{{ a13_post_body }}';
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpApollo13 Framework Extensions [vc_a13_team_member] Shortcode
The Apollo13 Framework Extensions plugin’s shortcode, ‘vc_a13_team_member’, generates a team member’s profile. It extracts title and content blocks and displays them in a structured layout. This shortcode renders a team member’s profile, including title, subtitle, content, and social media links, within a customizable grid layout.
Shortcode: [vc_a13_team_member]
Parameters
Here is a list of all possible vc_a13_team_member shortcode parameters and attributes:
title_block– If set to 1, it displays the title section of the team member’s profile.content_block– If set to 1, it displays the content section of the team member’s profile.
Examples and Usage
Basic example – Show a team member’s information without the content block.
[vc_a13_team_member title_block=1 content_block=0]Advanced examples
Display both the title block and content block for a team member’s information.
[vc_a13_team_member title_block=1 content_block=1]Show only the content block of a team member’s information.
[vc_a13_team_member title_block=0 content_block=1]Note: The ‘title_block’ and ‘content_block’ attributes are boolean, which means they accept either 1 (true) or 0 (false) as their values. The ‘title_block’ attribute controls whether to display the title part of the team member’s information, and the ‘content_block’ attribute controls whether to display the content part of the team member’s information.
PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_team_member] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_team_member', 'a13fe_vc_team_member_render' );Shortcode PHP function:
function a13fe_vc_team_member_render( $atts ) {
$output = $title_block = $content_block = '';
extract( shortcode_atts( array(
'title_block' => '',
'content_block' => '',
), $atts ) );
$output .= '
<div class="team_grid_item_content_box" style="{{ a13_item_overlay_color }}{{ a13_item_overlay_font_color }}">';
if ( $title_block == 1 ) {
$output .= '
<div class="team_grid_item_top_panel">';
$output .= '
<div class="grid_item_subtitle">{{ a13_item_meta_data:_subtitle }}</div>
';
$output .= '
<div class="grid_item_title">{{ post_data:post_title }}</div>
';
$output .= '
</div>
';
}
if ( $content_block == 1 ) {
$output .= '
<div class="team_grid_item_bottom_panel">';
$output .= '
<div class="grid_item_content">{{ post_data:post_content }}</div>
';
$output .= '
<div class="grid_item_socials">{{ a13_team_member_socials }}</div>
';
$output .= '
</div>
';
}
$output .= '
</div>';
return $output;
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpApollo13 Framework Extensions [vc_a13_testimonial_signature] Shortcode
The Apollo13 Framework Extensions shortcode, ‘vc_a13_testimonial_signature’, is utilized to display testimonials. This shortcode retrieves and presents the title of a post and its subtitle within a testimonial signature div. It enhances the credibility of testimonials by adding relevant details.
Shortcode: [vc_a13_testimonial_signature]
Examples and Usage
Basic example – This shortcode can be used to display a testimonial signature by referencing the post title and subtitle metadata.
[vc_a13_testimonial_signature /]Advanced examples
Using the shortcode to display a testimonial signature with a specific post title and subtitle metadata. The post title and subtitle metadata are referenced using the post_data:post_title and a13_item_meta_data:_subtitle parameters respectively.
[vc_a13_testimonial_signature post_data:post_title="John Doe" a13_item_meta_data:_subtitle="CEO, XYZ Corp." /]Another advanced usage of the shortcode could be to display multiple testimonial signatures. Each testimonial signature is separated by a comma and enclosed in quotes.
[vc_a13_testimonial_signature post_data:post_title="John Doe, Jane Doe" a13_item_meta_data:_subtitle="CEO, XYZ Corp., CFO, XYZ Corp." /]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_a13_testimonial_signature] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_a13_testimonial_signature', 'a13fe_vc_testimonial_signature_render' );Shortcode PHP function:
function a13fe_vc_testimonial_signature_render() {
return '<div class="a13_testimonial_signature">{{ post_data:post_title }} - {{ a13_item_meta_data:_subtitle }}</div>';
}
Code file location:
apollo13-framework-extensions/apollo13-framework-extensions/supports/wpbakery_pb_extensions/shortcodes.phpConclusion
Now that you’ve learned how to embed the Apollo13 Framework Extensions 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