Below, you’ll find a detailed guide on how to add the WordPress Filter Gallery 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 WordPress Filter Gallery Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the WordPress Filter Gallery Plugin and the shortcodes it provides:
"WordPress Filter Gallery Plugin is a highly customizable tool which helps to filter and categorize images, videos, and other multimedia content in your WordPress gallery."
- []
WordPress Filter Gallery [null] Shortcode
The Filter-Gallery plugin shortcode ‘ufg’ creates a dynamic gallery with filters. By using the shortcode [ufg], you can display a gallery with specific filters based on the gallery id. It includes the necessary CSS and JS resources, prints the filters, and displays the gallery. The gallery settings and filters can be customized according to needs.
Shortcode: [null]
Parameters
Here is a list of all possible null shortcode parameters and attributes:
id– Unique identifier for the specific gallery to be displayed.
Examples and Usage
Basic example – Display a specific gallery using the gallery’s unique ID.
[ufg id=1 /]Advanced examples
Display a specific gallery and apply custom CSS styles to the gallery’s filters and thumbnails. Note that the CSS code should be written in a separate CSS file and properly enqueued in your theme’s functions.php file.
[ufg id=1 css="custom-css-class" /]Display a specific gallery and apply multiple custom CSS styles to the gallery’s filters and thumbnails. Each CSS class should be separated by a space.
[ufg id=1 css="custom-css-class1 custom-css-class2" /]Display a specific gallery and specify the number of columns for the gallery layout. The number of columns can range from 1 to 12.
[ufg id=1 columns=3 /]Display a specific gallery and specify the layout type for the gallery. The layout type can be ‘grid’, ‘masonry’, or ‘carousel’.
[ufg id=1 layout="masonry" /]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( 'ufg', 'ufg_shortcode_callback' );Shortcode PHP function:
function ufg_shortcode_callback( $atts ) {
ob_start();
/* print filters */
include_once 'filters.php';
include_once 'gallery.php';
/* echo "<hr>";
defaults */
$ufg_filters = array();
$ufg_gallery = array();
/* get gallery id */
if ( isset( $atts['id'] ) ) {
$ufg_gallery_id = $atts['id'];
$ufg_filters = get_option( 'ufg_filters_' . $ufg_gallery_id );
$ufg_gallery = get_option( 'ufg_gallery_' . $ufg_gallery_id );
$ufg_setting = get_option( 'ufg_settings_' . $ufg_gallery_id );
/* loading saved settings and shortcode supported settings */
include 'setting.php';
/*
echo "<pre>";
print_r($ufg_filters);
echo "</pre>";
echo "<hr>"; */
/*
echo "<pre>";
print_r($ufg_gallery);
echo "</pre>";
echo "<hr>"; */
/*
echo "<pre>";
print_r($ufg_setting);
echo count($ufg_setting);
echo "</pre>";
echo "<hr>"; */
/* load required resource
CSS and JS */
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'ufg-bootstrap-frontend-css' );
wp_enqueue_style( 'ufg-fontawesome-css' );
/* lightbox JS and CSS */
wp_enqueue_style( 'ufg-lightbox-css' );
wp_enqueue_script( 'ufg-lightbox-js' );
?>
<!-- printing filters start-->
<?php if ( $ufg_show_filters ) { ?>
<div class="row">
<div class="my-1 ufg-filters">
<?php
$ufg_fitter_results = ufg_filters( $ufg_gallery_id, $ufg_filters, $ufg_gallery );
$ufg_filters_allowed = array(
'div' => array(
'class' => array(),
'id' => array(),
),
'button' => array(
'id' => array(),
'class' => array(),
'value' => array(),
'onclick' => array(),
),
);
echo wp_kses( $ufg_fitter_results, $ufg_filters_allowed );
?>
</div>
</div>
<?php } ?>
<!-- printing filters end-->
<input id="ufg_current_clicked_filter_id" name="ufg_current_clicked_filter_id" value="" class="d-none" placeholder="Current Filter">
<input id="ufg_current_clicked_filter_level" name="ufg_current_clicked_filter_level" value="" class="d-none" placeholder="Current Level">
<input id="ufg_last_clicked_filter_id" name="ufg_last_clicked_filter_id" value="" class="d-none" placeholder="Last Filter">
<input id="ufg_last_clicked_filter_level" name="ufg_last_clicked_filter_level" value="" class="d-none" placeholder="Last Level">
<input id="ufg_current_clicked_parent_filter_id" name="ufg_current_clicked_parent_filter_id" value="" class="d-none" placeholder="Current Parent Filter">
<input id="ufg_last_clicked_filter_parent_id" name="ufg_last_clicked_filter_parent_id" value="" class="d-none" placeholder="Last Parent Filter">
<!-- printing gallery start-->
<div class="row ufg-gallery">
<?php echo esc_html( ufg_gallery( $ufg_gallery_id, $ufg_gallery ) ); ?>
</div>
<!-- printing gallery end-->
<style>
.ufg-all-filter-button {
color: <?php echo esc_html( $ufg_all_button_color ); ?> !important;
background-color: <?php echo esc_html( $ufg_all_button_bg_color ); ?> !important;
border-color: <?php echo esc_html( $ufg_all_button_bg_color ); ?> !important;
}
.ufg-parent-filter-button {
color: <?php echo esc_html( $ufg_parent_button_color ); ?> !important;
background-color: <?php echo esc_html( $ufg_parent_button_bg_color ); ?> !important;
border-color: <?php echo esc_html( $ufg_parent_button_bg_color ); ?> !important;
}
.ufg-level-one-button {
color: <?php echo esc_html( $ufg_l1_button_color ); ?> !important;
background-color: <?php echo esc_html( $ufg_l1_button_bg_color ); ?> !important;
border-color: <?php echo esc_html( $ufg_l1_button_bg_color ); ?> !important;
}
.ufg-thumbnail-border {
<?php if ( $ufg_thumbnail_border ) { ?>
border: <?php echo esc_html( $ufg_thumbnail_border_thickness ); ?>px solid <?php echo esc_html( $ufg_thumbnail_border_color ); ?> !important;
<?php } ?>
border-radius: 0.25rem !important;
}
.ufg-image-title {
font-size: <?php echo esc_html( $ufg_image_title_font_size ); ?>px !important;
color: <?php echo esc_html( $ufg_image_title_color ); ?> !important;
background-color: <?php echo esc_html( $ufg_image_title_bg_color ); ?> !important;
}
</style>
<?php
} else {
echo esc_html( __( 'Error! invalid shortcode.', 'filter-gallery' ) );
}
return ob_get_clean();
}
Code file location:
filter-gallery/filter-gallery/shortcode.phpConclusion
Now that you’ve learned how to embed the WordPress Filter Gallery 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