Below, you’ll find a detailed guide on how to add the AMP for WP – Accelerated Mobile Pages 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 AMP for WP – Accelerated Mobile Pages Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the AMP for WP – Accelerated Mobile Pages Plugin and the shortcodes it provides:
"AMP for WP – Accelerated Mobile Pages is a powerful plugin designed to create mobile-optimized content that loads instantly on all devices, enhancing user experience and SEO."
- [Best_Wordpress_Gallery]
- [saswp_tiny_multiple_faq]
- [3d_viewer]
- [amp-gist]
- [gap]
- [ampforwp_current_year]
AMP for WP [Best_Wordpress_Gallery] Shortcode
The ‘Best_Wordpress_Gallery’ shortcode is utilized to create a dynamic gallery on your WordPress site. It takes parameters such as ‘gallery_type’, ‘gallery_id’, ‘tag’, ‘album_id’, ‘theme_id’ and ‘ajax’ to customize the gallery display. The shortcode fetches images and their details using DOMDocument. It then applies filters for ‘amp_photo_gallery_image_params’ to modify image attributes like ‘url’, ‘width’, and ‘height’. This shortcode is perfect for creating responsive and fast-loading galleries, enhancing the user experience on your site.
Shortcode: [Best_Wordpress_Gallery]
Parameters
Here is a list of all possible Best_Wordpress_Gallery shortcode parameters and attributes:
id– Identifier for the specific shortcode instancegallery_type– Determines the type of gallery displaygallery_id– Specifies the ID of the gallery to displaytag– Used for tag-based filtering of gallery itemsalbum_id– Identifies the album from which to display imagestheme_id– Determines the visual theme for the galleryajax– Enables or disables AJAX functionality for the gallery
Examples and Usage
Basic example – Show a gallery using its ID.
[Best_Wordpress_Gallery id=1 /]Advanced examples
Display a gallery with a specific theme by using the ‘theme_id’ parameter. This will override the default theme set in the plugin settings.
[Best_Wordpress_Gallery id=1 theme_id=2 /]Show a specific tag within a gallery. This can be useful for showing a subset of images within a larger gallery.
[Best_Wordpress_Gallery id=1 tag="summer" /]Display a specific album within a gallery. This can be useful for organizing your images into separate albums within a single gallery.
[Best_Wordpress_Gallery id=1 album_id=3 /]Show a gallery with a specific type. The ‘gallery_type’ parameter can be set to ‘thumbnails’, ‘slideshow’, ‘image_browser’, ‘masonry’, or ‘mosaic’.
[Best_Wordpress_Gallery id=1 gallery_type="masonry" /]PHP Function Code
In case you have difficulties debugging what causing issues with [Best_Wordpress_Gallery] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'Best_Wordpress_Gallery', array( $this, 'shortcode' ) );Shortcode PHP function:
function shortcode( $args ) {
$params = array();
$param_id = 0;
if(isset($args['id'])){
$param_id = $args['id'];
}
$params['id'] = WDWLibrary::get('shortcode_id', $param_id);
// Get values for elementor widget.
$params['gallery_type'] = WDWLibrary::get('gallery_type', 'thumbnails');
$params['gallery_id'] = WDWLibrary::get('gallery_id', 0);
$params['tag'] = WDWLibrary::get('tag', 0);
$params['album_id'] = WDWLibrary::get('album_id', 0);
$params['theme_id'] = WDWLibrary::get('theme_id', 0);
$params['ajax'] = TRUE;
if ( isset($params['id']) && $params['id'] ) {
global $wpdb;
$shortcode = $wpdb->get_var($wpdb->prepare("SELECT tagtext FROM " . $wpdb->prefix . "bwg_shortcode WHERE id='%d'", $params['id']));
if ($shortcode) {
$shortcode_params = explode('" ', $shortcode);
foreach ($shortcode_params as $shortcode_param) {
$shortcode_param = str_replace('"', '', $shortcode_param);
$shortcode_elem = explode('=', $shortcode_param);
$params[str_replace(' ', '', $shortcode_elem[0])] = $shortcode_elem[1];
}
}
else {
return;
}
}
// 'gallery_type' is the only parameter not being checked.
// Checking for incomplete shortcodes.
if ( isset($params['gallery_type']) ) {
$pairs = WDWLibrary::get_shortcode_option_params( $params );
if ( isset($params['ajax']) ) {
$pairs['ajax'] = $params['ajax'];
}
ob_start();
$this->front_end( $pairs );
$output = str_replace( array( "\r\n", "\n", "\r" ), '', ob_get_clean() );
$dom = '';
$nodes = '';
$num_nodes = '';
$urls = array();
if( !empty( $output ) ){
// Create a new document
$dom = new DOMDocument();
if( function_exists( 'mb_convert_encoding' ) ){
$output = mb_convert_encoding($output, 'HTML-ENTITIES', 'UTF-8');
}
else{
$output = preg_replace( '/&.*?;/', 'x', $output ); // multi-byte characters converted to X
}
// To Suppress Warnings
libxml_use_internal_errors(true);
$dom->loadHTML($output);
libxml_use_internal_errors(false);
// get all the img's
$nodes = $dom->getElementsByTagName( 'img' );
$num_nodes = $nodes->length;
for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
$url = $width = $height = '';
$node = $nodes->item( $i );
$urls[] = apply_filters('amp_photo_gallery_image_params', array(
'url' => $node->getAttribute( 'src' ),
'width' => 500,
'height' => 500,
));
}
}
}
return $this->render( array(
'images' => $urls,
) );
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/classes/class-ampforwp-photo-gallery-embed.phpAMP for WP [saswp_tiny_multiple_faq] Shortcode
The ‘saswp_tiny_multiple_faq’ shortcode is part of the Accelerated Mobile Pages plugin. It generates multiple FAQ sections dynamically on a webpage. This shortcode enables users to create FAQs with various elements like headlines, questions, answers, and images. It also allows customization of CSS classes and the number of FAQs to be displayed. The shortcode uses the ‘amp_saswp_tiny_multi_faq_render’ function to process the shortcode attributes and generate the HTML output. The function uses a loop to iterate through the attributes and create individual FAQ sections. If the ‘html’ attribute is set to true, the function generates detailed HTML code for each FAQ, including an optional image. The output is then returned and displayed on the webpage. The ‘saswp_tiny_multiple_faq’ shortcode is a powerful tool for enhancing your website’s user experience by providing clear, organized FAQs.
Shortcode: [saswp_tiny_multiple_faq]
Parameters
Here is a list of all possible saswp_tiny_multiple_faq shortcode parameters and attributes:
css_class– Optional styling class for the FAQ sectioncount– Number of FAQs to display, default is 1html– Determines if HTML output is enabled, default is trueelements– Array of FAQs with properties like headline, question, answer, and imageheadline– HTML tag for the FAQ question, part of ‘elements’question– The FAQ question text, part of ‘elements’answer– The FAQ answer text, part of ‘elements’image– Optional image ID to display with the FAQ, part of ‘elements’
Examples and Usage
Basic example – The shortcode allows you to add a Frequently Asked Questions (FAQ) section on your webpage with a single question and answer. The shortcode uses a CSS class for styling, the number of FAQs (count), an HTML boolean and an array of elements.
[saswp_tiny_multiple_faq css_class="my-faq" count="1" html="true" elements="{'headline-1':'h2', 'question-1':'What is SASWP?', 'answer-1':'It is a WordPress plugin.'}"]Advanced examples
Using the shortcode to display a FAQ section with multiple questions and answers. It also includes an image for each question. The shortcode uses a CSS class for styling, the number of FAQs (count), an HTML boolean and an array of elements.
[saswp_tiny_multiple_faq css_class="my-faq" count="2" html="true" elements="{'headline-1':'h2', 'question-1':'What is SASWP?', 'answer-1':'It is a WordPress plugin.', 'image-1':'10', 'headline-2':'h2', 'question-2':'How to use SASWP?', 'answer-2':'You can use it by installing and activating it in your WordPress dashboard.', 'image-2':'20'}"]Using the shortcode to display a FAQ section without HTML rendering. The shortcode uses a CSS class for styling, the number of FAQs (count), an HTML boolean and an array of elements.
[saswp_tiny_multiple_faq css_class="my-faq" count="1" html="false" elements="{'headline-1':'h2', 'question-1':'What is SASWP?', 'answer-1':'It is a WordPress plugin.'}"]PHP Function Code
In case you have difficulties debugging what causing issues with [saswp_tiny_multiple_faq] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'saswp_tiny_multiple_faq', 'amp_saswp_tiny_multi_faq_render' );Shortcode PHP function:
function amp_saswp_tiny_multi_faq_render( $atts, $content = null ){
global $saswp_tiny_multi_faq;
$output = '';
$saswp_tiny_multi_faq = shortcode_atts(
[
'css_class' => '',
'count' => '1',
'html' => true,
'elements' => [],
], $atts );
foreach ( $atts as $key => $merged_att ) {
if ( strpos( $key, 'headline' ) !== false || strpos( $key, 'question' ) !== false || strpos( $key,
'answer' ) !== false || strpos( $key, 'image' ) !== false ) {
$saswp_tiny_multi_faq['elements'][ explode( '-', $key )[1] ][ substr( $key, 0, strpos( $key, '-' ) ) ] = $merged_att;
}
}
if($saswp_tiny_multi_faq['html'] == 'true'){
if( !empty($saswp_tiny_multi_faq['elements']) ){
foreach ($saswp_tiny_multi_faq['elements'] as $value) {
$output .= '<details>';
$output .= '<summary>';
$output .= '<'.esc_attr($value['headline']).'>';
$output .= esc_html($value['question']);
$output .= '</'.esc_attr($value['headline']).'>';
$output .= '</summary>';
$output .= '<div>';
if ( ! empty( $value['image'] ) ) {
$image_id = intval( $value['image'] );
$image_thumburl = wp_get_attachment_image_url( $image_id, [ 150, 150 ] );
$output .= '<figure>';
$output .= '<a href="'.esc_url(esc_url($image_thumburl)).'"><img class="saswp_tiny_faq_image" src="'.esc_url($image_thumburl).'"></a>';
$output .= '</figure>';
}
$output .= '<div class="saswp_faq_tiny_content">'.esc_html($value['answer']).'</div>';
$output .= '</div>';
$output .= '</details>';
}
}
}
return $output;
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/includes/thirdparty-compatibility.phpAMP for WP [3d_viewer] Shortcode
The AMP 3D Viewer shortcode is used to embed 3D models into your WordPress posts. It utilizes the ‘amp-3d-gltf’ component to display 3D models with customizable attributes.
Shortcode: [3d_viewer]
Parameters
Here is a list of all possible 3d_viewer shortcode parameters and attributes:
id– Unique identifier used to fetch related 3D model data.src– Source URL of the 3D model file.alt– Alternative text description of the 3D model.width– Width of the 3D viewer, default is 100%.height– Height of the 3D viewer, expressed in percentage.auto_rotate– Enables automatic rotation of the 3D model.camera_controls– Enables camera control options for the 3D viewer.zooming_3d– Option to enable or disable zooming on the 3D model.loading– Controls the loading behavior of the 3D model.
Examples and Usage
Basic example – Display a 3D model using the shortcode by referencing its unique ID.
[3d_viewer id=123 /]Advanced examples
Display a 3D model using the shortcode by referencing its unique ID and setting the source, alternate text, width, and height parameters.
[3d_viewer id=123 src="https://example.com/model.glb" alt="3D Model" width="50%" height="300px" /]Display a 3D model using the shortcode by referencing its unique ID and setting the source, alternate text, width, height, and enabling auto-rotate and camera controls.
[3d_viewer id=123 src="https://example.com/model.glb" alt="3D Model" width="50%" height="300px" auto_rotate="auto-rotate" camera_controls="camera-controls" /]Display a 3D model using the shortcode by referencing its unique ID and setting the source, alternate text, width, height, enabling auto-rotate, camera controls, and disabling zooming.
[3d_viewer id=123 src="https://example.com/model.glb" alt="3D Model" width="50%" height="300px" auto_rotate="auto-rotate" camera_controls="camera-controls" zooming_3d="disable-zoom" /]PHP Function Code
In case you have difficulties debugging what causing issues with [3d_viewer] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( '3d_viewer', 'amp_3dviewer_content_func' );Shortcode PHP function:
function amp_3dviewer_content_func( $atts ){
extract( shortcode_atts( array(
'id' => '',
'src' => '',
'alt' => '',
'width' => '100%',
'height' => '%',
'auto_rotate' => 'auto-rotate',
'camera_controls' =>'camera-controls',
'zooming_3d' => '',
'loading' => '',
), $atts ) ); ob_start();
// Options Data
$modeview_3d = false;
if($id){
$modeview_3d = get_post_meta( $id, '_bp3dimages_', true );
}else {
$id = uniqid();
}
$attribute = [];
if( class_exists( 'BP3D' ) && $modeview_3d && is_array($modeview_3d) ) {
//https://playground.amp.dev/static/samples/glTF/DamagedHelmet.glb
$src = BP3D\Helper\Utils::isset2($modeview_3d, 'bp_3d_src', 'url', 'i-do-not-exist.glb');
$src = str_replace('http', 'https', $src);
$width = BP3D\Helper\Utils::isset2($modeview_3d, 'bp_3d_width', 'width', '100').BP3D\Helper\Utils::isset2($modeview_3d, 'bp_3d_width', 'unit', '%');
$height = BP3D\Helper\Utils::isset2($modeview_3d, 'bp_3d_height', 'height', '300').BP3D\Helper\Utils::isset2($modeview_3d, 'bp_3d_height', 'unit', 'px');
$camera_controls = $modeview_3d['bp_camera_control'] == 1 ? 'camera-controls' : '';
$alt = !empty($modeview_3d['bp_3d_src']['url']) ? $modeview_3d['bp_3d_src']['title'] : '';
$auto_rotate = $modeview_3d['bp_3d_rotate'] === '1' ? 'auto-rotate' : '';
$zooming_3d = $modeview_3d['bp_3d_zooming'] === '1' ? '' : 'disable-zoom';
// Preload
$loading = isset ($modeview_3d['bp_3d_loading']) ? $modeview_3d['bp_3d_loading'] : '';
$attribute = apply_filters('bp3d_model_attribute', [], $id, false);
}
if( !empty($src) ){ ?>
<!-- 3D Model html -->
<div class="bp_grand wrapper_<?php echo esc_attr($id) ?>">
<div class="bp_model_parent">
<amp-3d-gltf class="model" id="bp_model_id_<?php echo esc_attr($id); ?>" src="<?php echo esc_url($src); ?>" alt="<?php echo esc_attr($alt); ?>" layout="fixed" width="320" height="240"></amp-3d-gltf>
</div>
</div>
<?php }
$output = ob_get_clean(); return $output;
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/includes/thirdparty-compatibility.phpAMP for WP [amp-gist] Shortcode
The AMP for WP shortcode is designed to generate a Gist embed on your webpage. It allows customization of the layout and height parameters. The ‘amp-gist’ shortcode extracts attributes ‘id’, ‘layout’, and ‘height’. If ‘height’ is not defined, it defaults to ‘250’. The function returns an ‘amp-gist’ element with the specified ‘id’ and ‘height’.
Shortcode: [amp-gist]
Parameters
Here is a list of all possible amp-gist shortcode parameters and attributes:
id– It is the unique identifier of the Gist.layout– Defines the layout of the Gist, default is ‘fixed-height’.height– Sets the height of the Gist, default is 200. If left empty, it will be set to 250.
Examples and Usage
Basic example – The given shortcode is used to embed a Gist from GitHub by providing the Gist ID.
[amp-gist id="552e6f8f999b8e4e6fd9" /]Advanced examples
For a more advanced usage, you can also specify the layout and the height of the embedded Gist. By default, the layout is set to ‘fixed-height’ and the height is ‘200’. If the height is not specified, it will default to ‘250’.
[amp-gist id="552e6f8f999b8e4e6fd9" layout="responsive" height="300" /]Here, we are using the shortcode to display a Gist with a responsive layout and a height of 300 pixels. If the Gist cannot be found by the given ID, it will not display anything.
PHP Function Code
In case you have difficulties debugging what causing issues with [amp-gist] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('amp-gist', 'ampforwp_gist_shortcode_generator');Shortcode PHP function:
function ampforwp_gist_shortcode_generator($atts) {
extract(shortcode_atts(array(
'id' =>'' ,
'layout' => 'fixed-height',
'height' => 200,
), $atts));
if ( empty ( $height ) ) {
$height = '250';
}
return '<amp-gist data-gistid='. esc_attr($atts['id']) .'
layout="fixed-height"
height="'. esc_attr($height) .'">
</amp-gist>';
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/templates/features.phpAMP for WP [gap] Shortcode
The Accelerated Mobile Pages (AMP) plugin shortcode ‘gap’ is designed to return no gap. This is achieved by invoking the ‘ampforwp_return_no_gap’ function. The related PHP code ‘ampforwp_return_no_gap’ is a function that returns nothing, hence creating ‘no gap’.
Shortcode: [gap]
Examples and Usage
Basic example – The ‘gap’ shortcode is used to create a gap in the content. The shortcode doesn’t require any parameter.
[gap /]Advanced examples
Although the ‘gap’ shortcode doesn’t require any parameters, it’s possible to modify its behavior by adding custom parameters to the shortcode. These parameters should be added to the ‘ampforwp_return_no_gap’ function in the PHP code.
Let’s assume we’ve modified the function to accept two parameters: ‘size’ and ‘unit’. The ‘size’ parameter controls the size of the gap, and the ‘unit’ parameter determines the unit of measurement for the size (e.g., pixels, ems, etc.).
[gap size="10" unit="em" /]This will create a gap of 10em in the content.
Another example could be a ‘gap’ shortcode that accepts a ‘color’ parameter. This parameter would change the color of the gap.
[gap color="#ff0000" /]This will create a gap with a red color.
Remember, these parameters won’t work unless they’re added to the ‘ampforwp_return_no_gap’ function in the PHP code and the function is modified accordingly to handle these parameters.
PHP Function Code
In case you have difficulties debugging what causing issues with [gap] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'gap', 'ampforwp_return_no_gap' );Shortcode PHP function:
function ampforwp_return_no_gap(){
return;
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/templates/features.phpAMP for WP [ampforwp_current_year] Shortcode
The ‘ampforwp_current_year’ shortcode is a handy tool in WordPress. It fetches and displays the current year on your website. This is particularly useful for updating copyright information in the footer.
Shortcode: [ampforwp_current_year]
Examples and Usage
Basic Example – Showcases the usage of the shortcode to display the current year.
[ampforwp_current_year /]Advanced Examples
Although the given shortcode does not accept any parameters, we can modify it to accept a format parameter. This allows us to display the date in different formats. Here’s how you can modify the shortcode:
function ampforwp_year_shortcode($atts) {
extract(shortcode_atts(array(
'format' => 'Y'
), $atts));
$year = date($format);
return $year;
}
add_shortcode('ampforwp_current_year', 'ampforwp_year_shortcode');
Now, you can use the shortcode with a format parameter:
[ampforwp_current_year format="Y-m-d" /]This will display the current date in the format ‘Year-Month-Day’.
Another example could be:
[ampforwp_current_year format="F j, Y" /]This will display the current date in a more human-readable format, such as ‘December 31, 2021’.
PHP Function Code
In case you have difficulties debugging what causing issues with [ampforwp_current_year] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('ampforwp_current_year', 'ampforwp_year_shortcode');Shortcode PHP function:
function ampforwp_year_shortcode() {
$year = date('Y');
return $year;
}
Code file location:
accelerated-mobile-pages/accelerated-mobile-pages/templates/features.phpConclusion
Now that you’ve learned how to embed the AMP for WP – Accelerated Mobile Pages 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