Post Category Image With Grid And Slider Pro

Getting Started

Post Category Image With Grid and Slider Pro plugin allow users to upload category image and display in grid and slider.

Post Category Image with Grid and Slider Pro adds a menu tab in WP Admin side with the name “Category Image” where you can select categories option.

First you have to select category then go to default post category either or any custom plugin category. There you can see “UPLOAD IMAGE BUTTON” and upload image in category.

You can also add title and description of category for display.

How to Display and Shortcodes

Display a shortcode is very simple. Just go to Pages > Add New and add page title and add below shortcode as per your need.

Post Category Image with Grid and Slider Pro contains 3 shortcodes.

Category Post Grid

[pci-cat-grid]

Category Post Slider

[pci-cat-slider]

Category Post Image

[pci-cat-image]

You can also use template code to display blog in your theme template.
<?php echo do_shortcode('[pci-cat-grid]'); ?>
<?php echo do_shortcode('[pci-cat-slider]'); ?>
<?php echo do_shortcode('[pci-cat-image]'); ?>

Post Category Grid Shortcode Parameters

[pci-cat-grid]

  • Limit
    [pci-cat-grid limit="10"]
    Display number of posts. You can see all post by limit=”-1″.
  • Designs
    [pci-cat-grid design="design-1"]
    Select the design. You can use design-1 to design-10.
  • Grid / Column
    [pci-cat-grid columns="3"]
    Enter number of column for category grid. Values are 1 to 12.
  • Image Size
    [pci-cat-grid size="full"]
    Enter image size. Default is full. Options are “large, medium, thumbnail OR full”
  • Image Fit
    [pci-cat-grid image_fit="true"]
    Set image fit to box or not. Values are “false” OR “true”.
  • Image Wrap Height
    [pci-cat-grid img_wrap_height="300"]
    Set image wrapper height.
  • Show Title
    [pci-cat-grid show_title="true"]
    Display Category Post title or not. Values are “true OR false”.
  • Show Count
    [pci-cat-grid show_count="true"]
    Display post count in category. Values are “true OR false”.
  • Show Description
    [pci-cat-grid show_desc="true"]
    Display post content or not. Values are “true OR false”.
  • Link Target
    [pci-cat-grid link_target="self"]
    Open a link in new tab or not. Options are “self” OR “blank”.
  • Taxonomy
    [pci-cat-grid taxonomy="category"]
    You can display post by category of post.
  • Display by Category Id
    [pci-cat-grid term_id="null"]
    Display Specific Category id. You can pass multiple ids by Comma separated. By Default is all.
  • Parent Id
    [pci-cat-grid parent_id="all"]
    Display Specific Post id. You can pass multiple ids by Comma separated. By Default is all.
  • Display Child Category:
    [pci-cat-grid child_of="9"]
    Enter parent category ID. Display child category multiple level related to parent category. You can find id at relevant category listing page.
  • Exclude Category:
    [pci-cat-grid exclude_cat="1,5,6"]
    Exclude some blog category which you do not want to display. You can pass multiple post ids by comma separated.
  • Hide Post
    [pci-cat-grid hide_empty="true"]
    You can hide post or not. Values are “true OR false”.
  • Order
    [pci-cat-grid order="ASC"]
    Display by Order. Options are “ASC or DESC”.
  • Order by
    [pci-cat-grid orderby="name"]
    Accepts term fields. Values are ‘name’, ‘slug’, ‘term_group’, ‘term_id’, ‘id’, ‘description’.
  • Pagination
    [pci-cat-grid pagination="true"]
    Show/Hide pagination links. By default value is “true”. Values are “true” and “false”
  • Offset :
    [pci-cat-grid offset="5"]
    This will hide first five categories. e.g. I have set offset 5 then it will skip first five categories.
  • Extra Class:
    [pci-cat-grid extra_class=""]
    You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.

Post Category Slider Shortcode Parameters

[pci-cat-slider]

  • Limit
    [pci-cat-slider limit="10"]
    Display number of posts. You can see all post by limit=”-1″.
  • Rows
    [pci-cat-slider rows="2"]
    Enter number of rows for slider.
  • Designs
    [pci-cat-slider design="design-1"]
    Select the design. you can use design-1 to design-10.
  • Image Size
    [pci-cat-slider size="full"]
    Enter image size. Default is full. Options are “large, medium, thumbnail OR full”.
  • Image Fit
    [pci-cat-slider image_fit="true"]
    Set image fit to box or not. Values are “false” OR “true”.
  • Image Wrap Height
    [pci-cat-slider img_wrap_height="300"]
    Set image wraper height.
  • Link Target
    [pci-cat-slider link_target="self"]
    Open a link in new tab or not. Options are “self” OR “blank”.
  • Show Title
    [pci-cat-slider show_title="true"]
    Display Category Post title or not. Values are “true OR false”.
  • Show Count
    [pci-cat-slider show_count="true"]
    Display post count in category. Values are “true OR false”.
  • Show Description
    [pci-cat-slider show_desc="true"]
    Display post content or not. Values are “true OR false”.
  • Grid / Column
    [pci-cat-slider slidestoshow="3"]
    Controls number of categories display at a time.
  • Slide Scroll
    [pci-cat-slider slidestoscroll="1"]
    Controls number of categories rotate at a time.
  • Slide Dots
    [pci-cat-slider dots="false"]
    Display slider dots or not. Values are “true OR false”.
  • Slide Arrows
    [pci-cat-slider arrows="false"]
    Display slider arrows or not. Values are “true OR false”.
  • Autoplay
    [pci-cat-slider autoplay="true"]
    Enable slider automatically or not. Values are “true OR false”.
  • Autoplay Interval
    [pci-cat-slider autoplay_interval="1000"]
    Delay between two slides.
  • Slider Speed
    [pci-cat-slider speed="3000"]
    Control the speed of the slider.
  • Slider Loop
    [pci-cat-slider loop="true"]
    Create a Infinite loop sliding. Options are “true OR false”.
  • Center Mode
    [pci-cat-slider centermode="true"]
    You can set slider in center. By default value is “false”. Options are “true” OR “false”.
  • Hover Pause [pci-cat-slider hover_pause="true"]
    Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”.
  • Focus Pause [pci-cat-slider focus_pause="false"]
    Pause slider autoplay when slider element is focused. By default value is “false”. Options are “true” OR “false”.
  • Taxonomy
    [pci-cat-slider taxonomy="category"]
    You can display post by category of post.
  • Display by Category Id
    [pci-cat-slider term_id="null"]
    Display Specific Category id. You can pass multiple ids by Comma separated. By Default is all.
  • Display Child Category:
    [pci-cat-slider child_of="9"]
    Enter parent category ID. Display child category multiple level related to parent category. You can find id at relevant category listing page.
  • Parent Id
    [pci-cat-slider parent_id="all"]
    Display Specific Post id. You can pass multiple ids by Comma separated. By Default is all.
  • Hide Post
    [pci-cat-slider hide_empty="true"]
    You can hide post or not. Values are “true OR false”.
  • Exclude Category:
    [pci-cat-slider exclude_cat="1,5,6"]
    Exclude some blog category which you do not want to display. You can pass multiple post ids by comma separated.
  • Order
    [pci-cat-slider order="ASC"]
    Display by Order. Options are “ASC or DESC”.
  • Order by
    [pci-cat-slider orderby="name"]
    Accepts term fields. Values are ‘name’, ‘slug’, ‘term_group’, ‘term_id’, ‘id’, ‘description’.
  • Offset :
    [pci-cat-slider offset="5"]
    This will hide first five category. e.g. I have set offset 5 then it will skip first five category.
  • Slider Lazyload
    [pci-cat-slider lazyload=""]
    Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
  • Extra Class:
    [pci-cat-slider extra_class=""]
    You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.

Post Category Image Shortcode Parameters

[pci_cat_img]

This shortcode is used to display the taxonomy image. If you want to display the taxonomy image within category page or taxonomy page as a hero / banner image then you can use this shortocde. You can place this shortcode in any page or post with ID parameter also.

  • Category Id
    [pci_cat_img term_id="1"]
    Enter category id to display category image. Leave it empty to get current category id.
  • Default Image
    [pci_cat_img default_img="true"]
    Display default category image.
  • Link
    [pci_cat_img link="true"]
    Display category link.
  • Link Behaviour
    [pci_cat_img link_target="blank"]
    Choose link behaviour. Options are “self” OR “blank”.
  • Image Width
    [pci_cat_img img_width="100"]
    Control width of the category image. e.g 100. Leave empty for default width.
  • Image Height
    [pci_cat_img img_height="100"]
    Control height of the category image. e.g. 100. Leave empty for default height.
  • Image Size
    [pci_cat_img img_size="full"]
    Choose WordPress registered image size. e.g. thumbnail, medium, large, full.
  • Extra Class
    [pci_cat_img extra_class=""]
    Enter extra CSS class for design customization.
    Note: Extra class added as parent so using extra class you customize your design.

Shortcode Builder

Check the result of any shortcode with preview using “Shortcode Builder“
Please go to Admin Menu -> Post Category Designs Pro -> Shortcode Builder.

Gutenberg Blocks

Please go to page or post and add “Gutenberg Blocks“.

Setting Page

Template Structure + Overriding templates via a theme

The template files of Post Category Image With Grid And Slider Pro contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves.

This method protects even further against any upgrade issues as the template files can be left completely untouched.

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /post-category-image-with-grid-and-slider-pro, keeping the same file structure.

Example : To override the post category image with grid and slider pro design file simply copy file from /post-category-image-with-grid-and-slider-pro/templates/designs/design-1.php to yourtheme/post-category-image-with-grid-and-slider-pro/designs/design-1.php

The copied file will now override the post category image with grid and slider default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

The following template files can be found within the /post-category-image-with-grid-and-slider-pro/templates/ directory:

  1. Plugin Installation
  2. How to Activate License Key and Update
  3. Plugin not Updating – Getting an Error Unauthorized
View Demo
Buy Now