Below, you’ll find a detailed guide on how to add the Advanced WordPress Backgrounds Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Advanced WordPress Backgrounds Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Advanced WordPress Backgrounds Plugin and the shortcodes it provides:
"Advanced WordPress Backgrounds is a versatile plugin that allows users to add parallax, video, and image backgrounds to your WordPress site, enhancing its visual appeal."
- [nk_awb]
Advanced WordPress Backgrounds [nk_awb] Shortcode
The Advanced Backgrounds (nk_awb) shortcode is a powerful tool that allows extensive customization of the background elements in a WordPress site. This shortcode enables users to set the background type, color, image, video, and parallax effects. It also allows control over video playback settings and background stretching. Furthermore, it provides options for custom CSS classes and styles, enabling a high level of customization for developers.
Shortcode: [nk_awb]
Parameters
Here is a list of all possible nk_awb shortcode parameters and attributes:
awb_type– defines the type of background (color, image, video).awb_stretch– determines if the background should be stretched.awb_color– sets the color of the background.awb_image– sets the image of the background.awb_video– sets the video of the background.awb_image_size– determines the size of the background image.awb_image_background_size– sets the size of the background image.awb_image_background_position– sets the position of the background image.awb_video_mp4– sets the MP4 video for the background.awb_video_webm– sets the WebM video for the background.awb_video_ogv– sets the OGV video for the background.awb_video_start_time– sets the start time of the video.awb_video_end_time– sets the end time of the video.awb_video_volume– sets the volume of the video.awb_video_always_play– determines if the video should always play.awb_video_mobile– determines if the video should play on mobile devices.awb_parallax– sets the type of parallax effect (scroll, scale, opacity).awb_parallax_speed– sets the speed of the parallax effect.awb_parallax_mobile– determines if the parallax effect should be applied on mobile devices.awb_mouse_parallax– determines if the mouse parallax effect should be applied.awb_mouse_parallax_size– sets the size of the mouse parallax effect.awb_mouse_parallax_speed– sets the speed of the mouse parallax effect.awb_after_vc_row– determines if the background should be applied after a VC row.awb_after_vc_column– determines if the background should be applied after a VC column.awb_class– adds a custom class to the background wrapper.awb_styles– adds custom styles to the background wrapper.vc_css– applies custom CSS from the Visual Composer plugin.
Examples and Usage
Basic example – The shortcode is used to display a background with a specific color.
[nk_awb awb_type="color" awb_color="#ff0000"]Advanced examples
Using the shortcode to display a background image with specific size, position, and stretch settings. The image will be displayed in full size, cover the entire background, and positioned at the center.
[nk_awb awb_type="image" awb_image="image_url" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_stretch="true"]Using the shortcode to display a video background. The video will start at the 10th second and end at the 60th second. The volume is set to 50 and it will always play on both desktop and mobile devices.
[nk_awb awb_type="video" awb_video="video_url" awb_video_start_time="10" awb_video_end_time="60" awb_video_volume="50" awb_video_always_play="true" awb_video_mobile="true"]Using the shortcode to display a parallax background. The parallax effect will be scroll-opacity type with a speed of 0.5. It will also be displayed on mobile devices.
[nk_awb awb_type="image" awb_image="image_url" awb_parallax="scroll-opacity" awb_parallax_speed="0.5" awb_parallax_mobile="true"]Using the shortcode to display a background with mouse parallax effect. The size of the effect is set to 30 pixels and the speed is set to 10000 milliseconds.
[nk_awb awb_type="image" awb_image="image_url" awb_mouse_parallax="true" awb_mouse_parallax_size="30" awb_mouse_parallax_speed="10000"]PHP Function Code
In case you have difficulties debugging what causing issues with [nk_awb] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'nk_awb', array( $this, 'get_shortcode_out' ) );Shortcode PHP function:
function get_shortcode_out( $atts = array(), $content = null ) {
$atts = shortcode_atts(
array(
'awb_type' => '', // color, image, yt_vm_video, video.
'awb_stretch' => 'false',
'awb_color' => '',
'awb_image' => '',
'awb_video' => '',
'awb_image_size' => 'full',
'awb_image_background_size' => 'cover',
'awb_image_background_position' => '50% 50%',
'awb_video_mp4' => '',
'awb_video_webm' => '',
'awb_video_ogv' => '',
'awb_video_start_time' => 0,
'awb_video_end_time' => 0,
'awb_video_volume' => 0,
'awb_video_always_play' => 'false',
'awb_video_mobile' => 'false',
'awb_parallax' => 'false', // scroll, scale, opacity, scroll-opacity, scale-opacity.
'awb_parallax_speed' => 0.5,
'awb_parallax_mobile' => 'false',
'awb_mouse_parallax' => 'false',
'awb_mouse_parallax_size' => 30, // pixels.
'awb_mouse_parallax_speed' => 10000, // ms.
'awb_after_vc_row' => 'false',
'awb_after_vc_column' => 'false',
'awb_class' => '',
'awb_styles' => '',
'vc_css' => '',
),
$atts
);
// prevent if no valid type.
if ( 'color' !== $atts['awb_type'] && 'image' !== $atts['awb_type'] && 'yt_vm_video' !== $atts['awb_type'] && 'video' !== $atts['awb_type'] ) {
return '';
}
// enqueue styles and scripts.
self::enqueue_front_assets();
// prepare attributes and styles.
$atts['awb_class'] = 'nk-awb ' . $atts['awb_class'];
$awb_attributes = '';
$awb_wrap_attributes = 'data-awb-type="' . esc_attr( $atts['awb_type'] ) . '"';
$awb_inner_styles = '';
$awb_inner_attributes = '';
// stretch.
if ( filter_var( $atts['awb_stretch'], FILTER_VALIDATE_BOOLEAN ) ) {
$awb_wrap_attributes .= ' data-awb-stretch="true"';
}
// after vc_row.
if ( filter_var( $atts['awb_after_vc_row'], FILTER_VALIDATE_BOOLEAN ) ) {
$atts['awb_class'] .= ' nk-awb-after-vc_row';
}
// after vc_column.
if ( filter_var( $atts['awb_after_vc_column'], FILTER_VALIDATE_BOOLEAN ) ) {
$atts['awb_class'] .= ' nk-awb-after-vc_column';
}
// nk_awb shortcode with custom css from VC.
if ( function_exists( 'vc_shortcode_custom_css_class' ) && isset( $atts['vc_css'] ) ) {
$atts['awb_class'] .= ' ' . vc_shortcode_custom_css_class( $atts['vc_css'] );
}
// overlay color.
$awb_overlay_html = '';
if ( isset( $atts['awb_color'] ) && $atts['awb_color'] ) {
$awb_overlay_html .= '<div class="nk-awb-overlay" style="background-color: ' . esc_attr( $atts['awb_color'] ) . ';"></div>';
}
// types.
$awb_inner_html = '';
if ( isset( $atts['awb_image'] ) && $atts['awb_image'] && ( 'image' === $atts['awb_type'] || 'yt_vm_video' === $atts['awb_type'] || 'video' === $atts['awb_type'] ) ) {
if ( is_numeric( $atts['awb_image'] ) && 'pattern' !== $atts['awb_image_background_size'] ) {
$awb_inner_html .= wp_get_attachment_image(
$atts['awb_image'],
$atts['awb_image_size'],
false,
array(
'class' => 'jarallax-img',
'style' => 'object-position: ' . $atts['awb_image_background_position'] . ';',
)
);
} else {
if ( is_numeric( $atts['awb_image'] ) ) {
$atts['awb_image'] = wp_get_attachment_image_url( $atts['awb_image'], $atts['awb_image_size'] );
}
$awb_inner_styles .= 'background-image: url(\'' . esc_url( $atts['awb_image'] ) . '\');';
$awb_inner_styles .= 'background-position: ' . esc_attr( $atts['awb_image_background_position'] ) . ';';
}
}
// data image background attributes.
if ( $atts['awb_image_background_size'] ) {
$awb_wrap_attributes .= ' data-awb-image-background-size="' . esc_attr( $atts['awb_image_background_size'] ) . '"';
}
if ( $atts['awb_image_background_position'] ) {
$awb_wrap_attributes .= ' data-awb-image-background-position="' . esc_attr( $atts['awb_image_background_position'] ) . '"';
}
if ( 'yt_vm_video' === $atts['awb_type'] ) {
$awb_wrap_attributes .= ' data-awb-video="' . esc_attr( $atts['awb_video'] ) . '"';
$awb_wrap_attributes .= ' data-awb-video-start-time="' . esc_attr( $atts['awb_video_start_time'] ) . '"';
$awb_wrap_attributes .= ' data-awb-video-end-time="' . esc_attr( $atts['awb_video_end_time'] ) . '"';
$awb_wrap_attributes .= ' data-awb-video-volume="' . esc_attr( $atts['awb_video_volume'] ) . '"';
// video always play.
if ( filter_var( $atts['awb_video_always_play'], FILTER_VALIDATE_BOOLEAN ) ) {
$awb_wrap_attributes .= ' data-awb-video-always-play="true"';
}
}
if ( 'video' === $atts['awb_type'] ) {
$videos = '';
if ( isset( $atts['awb_video_mp4'] ) && $atts['awb_video_mp4'] ) {
if ( is_numeric( $atts['awb_video_mp4'] ) ) {
$atts['awb_video_mp4'] = wp_get_attachment_url( $atts['awb_video_mp4'] );
}
if ( $atts['awb_video_mp4'] ) {
$videos .= 'mp4:' . esc_url( $atts['awb_video_mp4'] );
}
}
if ( isset( $atts['awb_video_webm'] ) && $atts['awb_video_webm'] ) {
if ( is_numeric( $atts['awb_video_webm'] ) ) {
$atts['awb_video_webm'] = wp_get_attachment_url( $atts['awb_video_webm'] );
}
if ( $atts['awb_video_webm'] ) {
if ( $videos ) {
$videos .= ',';
}
$videos .= 'webm:' . esc_url( $atts['awb_video_webm'] );
}
}
if ( isset( $atts['awb_video_ogv'] ) && $atts['awb_video_ogv'] ) {
if ( is_numeric( $atts['awb_video_ogv'] ) ) {
$atts['awb_video_ogv'] = wp_get_attachment_url( $atts['awb_video_ogv'] );
}
if ( $atts['awb_video_ogv'] ) {
if ( $videos ) {
$videos .= ',';
}
$videos .= 'ogv:' . esc_url( $atts['awb_video_ogv'] );
}
}
$awb_wrap_attributes .= ' data-awb-video="' . esc_attr( $videos ) . '"';
$awb_wrap_attributes .= ' data-awb-video-start-time="' . esc_attr( $atts['awb_video_start_time'] ) . '"';
$awb_wrap_attributes .= ' data-awb-video-end-time="' . esc_attr( $atts['awb_video_end_time'] ) . '"';
$awb_wrap_attributes .= ' data-awb-video-volume="' . esc_attr( $atts['awb_video_volume'] ) . '"';
// video always play.
if ( filter_var( $atts['awb_video_always_play'], FILTER_VALIDATE_BOOLEAN ) ) {
$awb_wrap_attributes .= ' data-awb-video-always-play="true"';
}
}
// show video on mobile.
if ( 'video' === $atts['awb_type'] || 'yt_vm_video' === $atts['awb_type'] ) {
$awb_wrap_attributes .= ' data-awb-video-mobile="' . esc_attr( $atts['awb_video_mobile'] ) . '"';
}
// parallax.
if ( 'scroll' === $atts['awb_parallax'] || 'scale' === $atts['awb_parallax'] || 'opacity' === $atts['awb_parallax'] || 'scroll-opacity' === $atts['awb_parallax'] || 'scale-opacity' === $atts['awb_parallax'] ) {
$awb_wrap_attributes .= ' data-awb-parallax="' . esc_attr( $atts['awb_parallax'] ) . '"';
$awb_wrap_attributes .= ' data-awb-parallax-speed="' . esc_attr( $atts['awb_parallax_speed'] ) . '"';
$awb_wrap_attributes .= ' data-awb-parallax-mobile="' . esc_attr( $atts['awb_parallax_mobile'] ) . '"';
}
// mouse parallax.
if ( $atts['awb_mouse_parallax'] && 'false' !== $atts['awb_mouse_parallax'] ) {
$awb_wrap_attributes .= ' data-awb-mouse-parallax-size="' . esc_attr( $atts['awb_mouse_parallax_size'] ) . '"';
$awb_wrap_attributes .= ' data-awb-mouse-parallax-speed="' . esc_attr( $atts['awb_mouse_parallax_speed'] ) . '"';
}
// outer styles.
if ( $atts['awb_styles'] ) {
$awb_attributes .= ' style="' . esc_attr( $atts['awb_styles'] ) . '"';
}
// inner styles.
$awb_inner_attributes .= ' class="nk-awb-inner"';
if ( $awb_inner_styles ) {
$awb_inner_attributes .= ' style="' . $awb_inner_styles . '"';
}
// classes.
$awb_wrap_attributes = 'class="nk-awb-wrap" ' . $awb_wrap_attributes;
return '<div class="' . esc_attr( $atts['awb_class'] ) . '" ' . $awb_attributes . '>'
. do_shortcode( $content )
. '<div ' . $awb_wrap_attributes . '>'
. $awb_overlay_html
. '<div ' . $awb_inner_attributes . '>' . $awb_inner_html . '</div>'
. '</div>'
. '</div>';
}
Code file location:
advanced-backgrounds/advanced-backgrounds/classes/class-shortcode.phpConclusion
Now that you’ve learned how to embed the Advanced WordPress Backgrounds Plugin shortcode, 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