Below, you’ll find a detailed guide on how to add the Giphypress 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 Giphypress Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Giphypress Plugin and the shortcodes it provides:
"Giphypress is a fun and interactive WordPress plugin that lets you easily insert and manage GIFs within your posts, enhancing the overall user experience."
- [iframe]
Giphypress [iframe] Shortcode
The Giphypress shortcode ‘iframe’ embeds an iframe into your WordPress site. It allows customization of the iframe’s source, dimensions, scrolling, class, and border. The shortcode also has special handling for Google Maps and can append additional parameters from the URL. It can adjust the iframe’s height to match a target element or the iframe’s content.
Shortcode: [iframe]
Parameters
Here is a list of all possible iframe shortcode parameters and attributes:
src– defines the source URL of the iframe contentwidth– sets the width of the iframeheight– sets the height of the iframescrolling– controls the scrollbars on the iframeclass– assigns a class to the iframe for stylingframeborder– sets the border around the iframeget_params_from_url– fetches parameters from the URL if set to truesame_height_as– sets the iframe height same as the specified element
Examples and Usage
Basic example – Embeds a Giphy iframe with default parameters.
[iframe /]Advanced examples
Embeds a Giphy iframe with a specific source URL, width, and height.
[iframe src="https://giphy.com/embed/igTITYMk5sE5W" width="600" height="300" /]Embeds a Giphy iframe with a specific source URL, width, height, and additional CSS class.
[iframe src="https://giphy.com/embed/igTITYMk5sE5W" width="600" height="300" class="custom-class" /]Embeds a Giphy iframe with a specific source URL, width, height, and disables scrolling.
[iframe src="https://giphy.com/embed/igTITYMk5sE5W" width="600" height="300" scrolling="yes" /]Embeds a Giphy iframe with a specific source URL, width, height, disables scrolling, and sets the iframe to have the same height as the window.
[iframe src="https://giphy.com/embed/igTITYMk5sE5W" width="600" height="300" scrolling="yes" same_height_as="window" /]PHP Function Code
In case you have difficulties debugging what causing issues with [iframe] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('iframe', 'iframe_unqprfx_embed_shortcode');Shortcode PHP function:
function iframe_unqprfx_embed_shortcode($atts, $content = null) {
$defaults = array(
'src' => 'https://giphy.com/embed/igTITYMk5sE5W',
'width' => '500',
'height' => '281',
'scrolling' => 'no',
'class' => 'iframe-class',
'frameborder' => '0'
);
foreach ($defaults as $default => $value) { // add defaults
if (!@array_key_exists($default, $atts)) { // hide warning with "@" when no params at all
$atts[$default] = $value;
}
}
$src_cut = substr($atts["src"], 0, 35); // special case for google maps
if (strpos($src_cut, 'maps.google')) {
$atts["src"] .= '&output=embed';
}
// get_params_from_url
if (isset($atts["get_params_from_url"]) && ( $atts["get_params_from_url"] == '1' || $atts["get_params_from_url"] == 1 || $atts["get_params_from_url"] == 'true' )) {
if ($_GET != NULL) {
if (strpos($atts["src"], '?')) { // if we already have '?' and GET params
$encode_string = '&';
} else {
$encode_string = '?';
}
foreach ($_GET as $key => $value) {
$encode_string .= $key . '=' . $value . '&';
}
}
$atts["src"] .= $encode_string;
}
$html = '';
if (isset($atts["same_height_as"])) {
$same_height_as = $atts["same_height_as"];
} else {
$same_height_as = '';
}
if ($same_height_as != '') {
$atts["same_height_as"] = '';
if ($same_height_as != 'content') { // we are setting the height of the iframe like as target element
if ($same_height_as == 'document' || $same_height_as == 'window') { // remove quotes for window or document selectors
$target_selector = $same_height_as;
} else {
$target_selector = '"' . $same_height_as . '"';
}
$html .= '<script>
jQuery(function($){
var target_height = $(' . $target_selector . ').height();
$("iframe.' . $atts["class"] . '").height(target_height);
//alert(target_height);
});
</script>';
} else { // set the actual height of the iframe (show all content of the iframe without scroll)
$html .= '
<script>
jQuery(function($){
$("iframe.' . $atts["class"] . '").bind("load", function() {
var embed_height = $(this).contents().find("body").height();
$(this).height(embed_height);
});
});
</script>';
}
}
$html .= '<iframe';
foreach ($atts as $attr => $value) {
if ($attr != 'same_height_as') { // remove some attributes
if ($value != '') { // adding all attributes
$html .= ' ' . $attr . '="' . $value . '"';
} else { // adding empty attributes
$html .= ' ' . $attr;
}
}
}
$html .= '></iframe>';
return $html;
}
Code file location:
giphypress/giphypress/iframe.phpConclusion
Now that you’ve learned how to embed the Giphypress 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