Below, you’ll find a detailed guide on how to add the Post Category Image With Grid and Slider 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 Post Category Image With Grid and Slider Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Post Category Image With Grid and Slider Plugin and the shortcodes it provides:
"Post Category Image With Grid and Slider is a WordPress plugin that enhances your blog's visual appeal. It allows you to add images to your post categories and display them in a grid or slider format."
- [pci-cat-grid]
- [pci-cat-slider]
Post Category Image With Grid and Slider [pci-cat-grid] Shortcode
The ‘pci-cat-grid’ shortcode from the Post Category Image with Grid and Slider plugin allows users to display a grid of post categories with images. It supports various parameters for customization, such as grid size, taxonomy, and order. It’s compatible with SiteOrigin, Divi, and Fusion page builders. It also provides options to show or hide category title, count, and description.
Shortcode: [pci-cat-grid]
Parameters
Here is a list of all possible pci-cat-grid shortcode parameters and attributes:
size– Determines the size of the category image.term_id– Specifies the ID of the category.taxonomy– Defines the taxonomy for the categories.orderby– Sets the order of categories by name or ID.order– Orders categories in ascending or descending order.columns– Sets the number of columns for the category grid.show_title– Controls whether to display the category title.show_count– Decides if the number of posts in the category is shown.show_desc– Controls whether to display the category description.hide_empty– Hides categories without any posts.exclude_cat– Excludes specific categories from the grid.extra_class– Adds an extra CSS class to the grid.className– Defines the CSS class of the grid.align– Sets the alignment of the grid.
Examples and Usage
Basic example – Display a grid of post categories using the ‘pci-cat-grid’ shortcode.
[pci-cat-grid]Advanced examples
Display a grid of post categories with specific size, term id, taxonomy, order, columns, and show title parameters.
[pci-cat-grid size='medium' term_id='5,6,7' taxonomy='category' orderby='name' order='ASC' columns='3' show_title='true']Display a grid of post categories with all possible parameters including size, term id, taxonomy, order, columns, show title, show count, show description, hide empty categories, exclude certain categories, and add extra classes.
[pci-cat-grid size='large' term_id='1,2,3' taxonomy='post' orderby='date' order='DESC' columns='4' show_title='true' show_count='true' show_desc='true' hide_empty='true' exclude_cat='4,5,6' extra_class='my-custom-class']Note: The term_id and exclude_cat parameters accept comma-separated values to include or exclude multiple categories.
PHP Function Code
In case you have difficulties debugging what causing issues with [pci-cat-grid] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'pci-cat-grid', 'pciwgas_grid_shortcode' );Shortcode PHP function:
function pciwgas_grid_shortcode( $atts, $content ) {
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return '[pci-cat-grid]';
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="pciwgas-builder-shrt-prev">
<div class="pciwgas-builder-shrt-title"><span>'.esc_html__('Post Category Image Grid - Shortcode', 'post-category-image-with-grid-and-slider').'</span></div>
pci-cat-grid
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="pciwgas-builder-shrt-prev">
<div class="pciwgas-builder-shrt-title"><span>'.esc_html__('Post Category Image Grid - Shortcode', 'post-category-image-with-grid-and-slider').'</span></div>
pci-cat-grid
</div>';
}
// Shortcode Parameter
$atts = extract( shortcode_atts(array(
'size' => 'full',
'term_id' => null,
'taxonomy' => 'category',
'orderby' => 'name',
'order' => 'ASC',
'columns' => 3,
'show_title' => 'true',
'show_count' => 'true',
'show_desc' => 'true',
'hide_empty' => 'true',
'exclude_cat' => array(),
'extra_class' => '',
'className' => '',
'align' => '',
), $atts,'pci-cat-grid') );
$size = ! empty( $size ) ? $size : 'full';
$term_id = ! empty( $term_id ) ? explode( ',', $term_id ) : '';
$taxonomy = ! empty( $taxonomy ) ? $taxonomy : 'category';
$show_title = ( $show_title == 'true' ) ? true : false;
$show_count = ( $show_count == 'true' ) ? true : false;
$show_desc = ( $show_desc == 'true' ) ? true : false;
$hide_empty = ( $hide_empty == 'false' ) ? false : true;
$exclude_cat = ! empty( $exclude_cat ) ? explode( ',', $exclude_cat ) : array();
$columns = ( ! empty( $columns ) && $columns <= 4 ) ? $columns : 3;
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = pciwgas_sanitize_html_classes( $extra_class );
$column_grid = pciwgas_column( $columns );
$count = 0;
// get terms and workaround WP bug with parents/pad counts
$args = array(
'orderby' => $orderby,
'order' => $order,
'include' => $term_id,
'hide_empty' => $hide_empty,
'exclude' => $exclude_cat,
);
$post_categories = get_terms( $taxonomy, $args );
ob_start();
if ( $post_categories ) { ?>
<div class="pciwgas-cat-wrap pciwgas-clearfix pciwgas-design-1 <?php echo esc_attr( $extra_class ); ?>">
<?php
foreach ( $post_categories as $category ) {
$category_image = pciwgas_term_image( $category->term_id, $size );
$term_link = get_term_link( $category, $taxonomy );
$wrapper_cls = "pciwgas-pdt-cat-grid pciwgas-medium-{$column_grid} pciwgas-columns";
$wrapper_cls .= ( $count%$columns == 0 ) ? ' pciwgas-first' : '';
?>
<div class="<?php echo esc_attr( $wrapper_cls ); ?>">
<div class="pciwgas-post-cat-inner">
<div class="pciwgas-img-wrapper">
<?php if( ! empty( $category_image ) ) { ?>
<a href="<?php echo esc_url( $term_link ); ?>"><img src="<?php echo esc_url( $category_image ); ?>" class="pciwgas-cat-img" alt="<?php echo esc_attr( $category->name ); ?>" /></a>
<?php } ?>
</div>
<div class="pciwgas-title">
<?php if( $show_title && $category->name ) { ?>
<a href="<?php echo esc_url( $term_link ); ?>"><?php echo wp_kses_post( $category->name ); ?> </a>
<?php }
if( $show_count ) { ?>
<span class="pciwgas-cat-count"><?php echo esc_attr( $category->count ); ?></span>
<?php } ?>
</div>
<?php if( $show_desc && $category->description ) { ?>
<div class="pciwgas-description">
<div class="pciwgas-cat-desc"><?php echo wp_kses_post( wpautop( wptexturize( $category->description ) ) ); ?></div>
</div>
<?php } ?>
</div>
</div>
<?php $count++; } ?>
</div>
<?php
}
$content .= ob_get_clean();
return $content;
}
Code file location:
post-category-image-with-grid-and-slider/post-category-image-with-grid-and-slider/includes/shortcode/pciwgas-grid.phpPost Category Image With Grid and Slider [pci-cat-slider] Shortcode
The Post Category Image with Grid and Slider plugin shortcode enables the display of post category images in a grid or slider format. It allows customization of parameters such as image size, taxonomy, order, and slider settings. The shortcode also ensures compatibility with page builders like SiteOrigin, Divi, and Fusion by preventing shortcode previews.
Shortcode: [pci-cat-slider]
Parameters
Here is a list of all possible pci-cat-slider shortcode parameters and attributes:
size– Defines the size of the image to be displayed.term_id– Identifies which term to display from the taxonomy.taxonomy– Specifies the type of taxonomy to use.orderby– Determines the order in which terms are displayed.order– Specifies the sort order, either ascending or descending.show_title– Decides whether to display the title or not.show_count– Decides whether to display the count or not.show_desc– Decides whether to display the description or not.hide_empty– Decides whether to hide empty categories or not.slidestoshow– Specifies the number of slides to show at once.slidestoscroll– Specifies the number of slides to scroll at once.loop– Determines whether the slides will loop or not.dots– Decides whether to show navigation dots or not.arrows– Decides whether to show navigation arrows or not.autoplay– Determines whether the slides will play automatically or not.autoplay_interval– Sets the time interval for autoplay in milliseconds.speed– Sets the speed of the slide transition in milliseconds.rtl– Sets the direction of the slide, either right-to-left or not.exclude_cat– Specifies the categories to be excluded.extra_class– Allows adding extra classes for additional customization.className– Allows adding a class name for styling purposes.align– Sets the alignment of the slider.
Examples and Usage
Basic example – Display a slider with post category images using the default settings.
[pci-cat-slider]Advanced examples
Customize the slider by specifying the image size, taxonomy, order of categories, and whether to show the title, count, and description of each category.
[pci-cat-slider size="medium" taxonomy="category" orderby="name" order="ASC" show_title="true" show_count="true" show_desc="true"]Further customize the slider by setting the number of slides to show and scroll, the autoplay interval, speed, and whether to exclude certain categories.
[pci-cat-slider slidestoshow="3" slidestoscroll="1" autoplay_interval="3000" speed="300" exclude_cat="1,2,3"]Display a slider with post category images in a specific term and customize the alignment and extra class.
[pci-cat-slider term_id="10" align="center" extra_class="my-slider"]PHP Function Code
In case you have difficulties debugging what causing issues with [pci-cat-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'pci-cat-slider', 'pciwgas_slider_shortcode' );Shortcode PHP function:
function pciwgas_slider_shortcode( $atts, $content ) {
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return '[pci-cat-slider]';
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="pciwgas-builder-shrt-prev">
<div class="pciwgas-builder-shrt-title"><span>'.esc_html__( 'Post Category Image Slider - Shortcode', 'post-category-image-with-grid-and-slider' ).'</span></div>
pci-cat-slider
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="pciwgas-builder-shrt-prev">
<div class="pciwgas-builder-shrt-title"><span>'.esc_html__( 'Post Category Image Slider - Shortcode', 'post-category-image-with-grid-and-slider' ).'</span></div>
pci-cat-slider
</div>';
}
// Shortcode Parameter
$atts = extract( shortcode_atts(array(
'size' => 'full',
'term_id' => null,
'taxonomy' => 'category',
'orderby' => 'name',
'order' => 'ASC',
'show_title' => 'true',
'show_count' => 'true',
'show_desc' => 'true',
'hide_empty' => 'true',
'slidestoshow' => 3,
'slidestoscroll' => 1,
'loop' => 'true',
'dots' => 'true',
'arrows' => 'true',
'autoplay' => 'false',
'autoplay_interval' => 3000,
'speed' => 300,
'rtl' => '',
'exclude_cat' => array(),
'extra_class' => '',
'className' => '',
'align' => '',
), $atts,'pci-cat-slider') );
$unique = pciwgas_get_unique();
$size = ! empty( $size ) ? $size : 'full';
$term_id = ! empty( $term_id ) ? explode( ',', $term_id ) : '';
$taxonomy = ! empty( $taxonomy ) ? $taxonomy : 'category';
$slidestoshow = ! empty( $slidestoshow ) ? $slidestoshow : 3;
$slidestoscroll = ! empty( $slidestoscroll ) ? $slidestoscroll : 1;
$autoplay_interval = ! empty( $autoplay_interval ) ? $autoplay_interval : 3000;
$speed = ! empty( $speed ) ? $speed : 300;
$exclude_cat = ! empty( $exclude_cat ) ? explode( ',', $exclude_cat ) : array();
$show_title = ( $show_title == 'true' ) ? true : false;
$show_count = ( $show_count == 'true' ) ? true : false;
$show_desc = ( $show_desc == 'true' ) ? true : false;
$hide_empty = ( $hide_empty == 'false' ) ? false : true;
$loop = ( $loop == 'false' ) ? 'false' : 'true';
$dots = ( $dots == 'false' ) ? 'false' : 'true';
$arrows = ( $arrows == 'false' ) ? 'false' : 'true';
$autoplay = ( $autoplay == 'false' ) ? 'false' : 'true';
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = pciwgas_sanitize_html_classes( $extra_class );
// For RTL
if( empty( $rtl ) && is_rtl() ) {
$rtl = 'true';
} elseif ( $rtl == 'true' ) {
$rtl = 'true';
} else {
$rtl = 'false';
}
// Enqueue required script
wp_enqueue_script( 'wpos-slick-jquery' );
wp_enqueue_script( 'pciwgas-public-script' );
// get terms and workaround WP bug with parents/pad counts
$args = array(
'orderby' => $orderby,
'order' => $order,
'include' => $term_id,
'hide_empty' => $hide_empty,
'exclude' => $exclude_cat,
);
$post_categories = get_terms( $taxonomy, $args );
// Slider configuration
$slider_conf = compact( 'slidestoshow', 'slidestoscroll', 'loop', 'dots', 'arrows', 'autoplay', 'autoplay_interval', 'speed', 'rtl' );
ob_start();
if ( $post_categories ) { ?>
<div class="pciwgas-cat-wrap pciwgas-cat-wrap-slider pciwgas-clearfix pciwgas-design-1 <?php echo esc_attr( $extra_class ); ?>">
<div id="pciwgas-<?php echo esc_attr( $unique ); ?>" class="pciwgas-cat-slider-main" data-conf="<?php echo htmlspecialchars( json_encode( $slider_conf )); ?>">
<?php
foreach ( $post_categories as $category ) {
$category_image = pciwgas_term_image( $category->term_id, $size );
$term_link = get_term_link( $category, $taxonomy );
?>
<div class="pciwgas-pdt-cat-slider">
<div class="pciwgas-post-cat-inner">
<div class="pciwgas-img-wrapper">
<?php if( ! empty( $category_image ) ) { ?>
<a href="<?php echo esc_url( $term_link ); ?>"><img src="<?php echo esc_url( $category_image ); ?>" class="pciwgas-cat-img" alt="<?php echo esc_attr( $category->name ); ?>" /></a>
<?php } ?>
</div>
<div class="pciwgas-title">
<?php if( $show_title && $category->name ) { ?>
<a href="<?php echo esc_url( $term_link ); ?>"><?php echo wp_kses_post( $category->name ); ?> </a>
<?php }
if( $show_count ) { ?>
<span class="pciwgas-cat-count"><?php echo esc_attr( $category->count ); ?></span>
<?php } ?>
</div>
<?php if( $show_desc && $category->description ) { ?>
<div class="pciwgas-description">
<div class="pciwgas-cat-desc"><?php echo wp_kses_post( wpautop( wptexturize( $category->description ) ) ); ?></div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</div>
<?php
}
$content .= ob_get_clean();
return $content;
}
Code file location:
post-category-image-with-grid-and-slider/post-category-image-with-grid-and-slider/includes/shortcode/pciwgas-slider.phpConclusion
Now that you’ve learned how to embed the Post Category Image With Grid and Slider 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