Post Grid and Filter with Pop-up Pro

How to Display and Shortcodes

Display post grid on your website with or without categoryies filter.Easy way to display WordPress post in grid view and post grid with filter. Display anywhere via shortcode. lots more shortcode parameters give you extend as your needs.

Post grid and filter ultimate helps you to display any WordPress posts on any page, in responsive grid and list easily, without coding.

Post grid and filter with popup Pro contain 2 shortcodes.

Post Grid

[pgaf_post_grid]

Post Filter

[pgaf_post_filter]

You can also use template code to display Blog in your theme template.
<?php echo do_shortcode('[pgaf_post_grid]'); ?>
<?php echo do_shortcode('[pgaf_post_filter]'); ?>

Shortcode Builder

Check the Result of any Shortcode with Preview using “Shortcode Builder
Please Go To Admin Menu -> Post Grid and Filter with Popup Pro -> Shortcode Builder.

Gutenberg Blocks

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

Shortcode Parameters for Grid

[pgaf_post_grid]

  • Post Type :
    [pgaf_post_grid post_type="post"]
    Enter registered post type name. You can find it on plugin setting page.
    Note: Be sure you have added valid post type name otherwise no result will be displayed.
  • Taxonomy :
    [pgaf_post_grid taxonomy="category"]
    Enter registered taxonomy name. You can find it on plugin setting page.
    Note: Be sure you have added valid taxonomy name otherwise no result will be displayed.
  • Limit
    [pgaf_post_grid limit="10"]
    Enter number of post to be displayed. Enter -1 to display all.
  • Display Specific Category
    [pgaf_post_grid cat_id="40,50,60"]
    Enter category id to display categories wise. You can pass multiple ids with comma seperated. You can find id at relevant category listing page.
  • Display Child Category
    [pgaf_post_grid include_cat_child="false"]
    If you are using parent category then whether to display child category or not. Values are “true” or “false”.
  • Design
    [pgaf_post_grid design="design-1"]
    Select the design to display. Designs are design-1 to design-10.
  • Number of Column / Grid
    [pgaf_post_grid grid="2"]
    Display Post in a column/grid on your website. You can display up to four column. Values are 1,2,3 and 4
  • Order
    [pgaf_post_grid order="DESC"]
    Display post by order. Values are “ASC” or “DESC”.
  • Order By
    [pgaf_post_grid orderby="date"]
    Set orderby for post. You can set “date” (Post Published Date), “Modified” (Post updated date), “Title” (Post title), “Rand” (Random), “ID” (Post ID).
  • Link Behavior
    [pgaf_post_grid link_target="false"]
    Choose link behavior.
  • Image Fit
    [pgaf_post_grid image_fit="true"]
    Image fit to box or not. Values are “true” OR “false”.
  • Media Size
    [pgaf_post_grid media_size="large"]
    Set the featured image size to display in post Values are “thumbnail”, “medium”, “large”, “full”.
  • Image Height
    [pgaf_post_grid image_height="300"]
    Set featured image height. You can enter numeric value.
  • Show Date
    [pgaf_post_grid show_date="false"]
    Display post date OR not. By default value is “true”. Options are “true” OR “false”.
  • Show Author
    [pgaf_post_grid show_author="true"]
    Display post Author. Values are “true” or “false”
  • Show Content
    [pgaf_post_grid show_content="true"]
    Display post Short content OR not. By default value is “true”. Options are “true” OR “false”.
  • Show Read More
    [pgaf_post_grid show_read_more="true"]
    Display Read more button or not. Options are “true” OR “false”
  • Read More Text
    [pgaf_post_grid read_more_text="Read More"]
    Change “Read More” text to your Desired text.
  • Show Category Name
    [pgaf_post_grid show_category_name="true"]
    Display post category name OR not. By default value is “true”. Options are “true” OR “false”.
  • Content Words Limit
    [pgaf_post_grid content_words_limit="20"]
    Control post short content Words limit. By default limit is 20 words.
  • Content Tail
    [pgaf_post_grid content_tail=".."]
    Dots after short content for continue reading.
  • Pagination
    [pgaf_post_grid pagination="true"]
    Display Pagination. Values are “true” OR “false”
  • Pagination Type
    [pgaf_post_grid pagination_type="numeric"]
    If pagination is true then you can set pagination type and Values are “prev-next” and “numeric”.
  • Show Comments
    [pgaf_post_grid show_comments="true"]
    Display comments. Options are “true” OR “false”.
  • Exclude Category
    [pgaf_post_grid exclude_cat="10,12"]
    Exclude category which you do not want to display. You can pass multiple category ids by comma separated.
  • Posts
    [pgaf_post_grid posts="10,12"]
    Display specific Posts. You can pass multiple ids by comma separated.
  • Exclude Post
    [pgaf_post_grid exclude_post="10,12"]
    Exclude some post which you do not want to display. You can enter multiple ids by comma separated.
  • Include Author
    [pgaf_post_grid include_author="author_id"]
    Display specific author Posts. You can pass multiple ids by comma separated.
  • Exclude author
    [pgaf_post_grid exclude_author="author_id"]
    Enter author id to hide post of particular author. Works only if `Include Author` field is empty.
  • Query Offset
    [pgaf_post_grid query_offset=""]
    This will hide first five post. E.g I have set offset 5 then it will skip first five post.
    Note: This will not work with limit=-1.
  • Extra Class
    [pgaf_post_grid extra_class=""]
    You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.
  • Single Post Popup
    [pgaf_post_grid single_post_popup="false"]
    Display popup in single post. Options are “true” OR “false”.
  • Popup Effects
    [pgaf_post_grid popup_effect="fadein"]
    Display effect for popup.
  • Popup Position-X
    [pgaf_post_grid popup_positionx="center"]
    Display position of popup. Values are “left”, “right” OR “center”.
  • Popup Position-Y
    [pgaf_post_grid popup_positiony="center"]
    Display position of popup. Values are “top”, “bottom” OR “center”.
  • Full Screen
    [pgaf_post_grid full_screen="false"]
    Display popup in full-screen. Values are “true” OR “false”.
  • Popup Width
    [pgaf_post_grid popup_width="80%"]
    Set popup width. e.g 80% OR 800px. Leave empty for default width.
  • Speed In
    [pgaf_post_grid speed_in="300"]
    Display popup speed for open. Leave empty for default. Value should be in milliseconds. e.g 300.
  • Speed Out
    [pgaf_post_grid speed_out="300"]
    Display popup speed for close. Leave empty for default. Value should be in milliseconds. e.g 300.
  • Delay Time
    [pgaf_post_grid delay="150"]
    Display popup delay time. Leave empty for default. Value should be in milliseconds. e.g 150.
  • Enable Loader
    [pgaf_post_grid enable_loader="true"]
    Display loader or not. Values are”true” OR “false”.
  • Loader Color
    [pgaf_post_grid loader_color="#000"]
    Enter Color Value ie #000000.
  • Loader Speed
    [pgaf_post_grid loader_speed="true"]
    Enter the popup loader speed. Leave empty for default. Value should be in milliseconds. e.g 1000.
  • Enable Overlay
    [pgaf_post_grid enable_overlay="true"]
    Display overlay or not. Values are”true” OR “false”.
  • Overlay Color
    [pgaf_post_grid overlay_color="#000"]
    Display overlay color.
  • Overlay Opacity
    [pgaf_post_grid overlay_opacity="0.5"]
    Display opacity of overlay.

Shortcode Parameters for Grid Filter

[pgaf_post_filter]

  • Post Type :
    [pgaf_post_filter post_type="post"]
    Enter registered post type name. You can find it on plugin setting page.
    Note: Be sure you have added valid post type name otherwise no result will be displayed.
  • Taxonomy :
    [pgaf_post_filter taxonomy="category"]
    Enter registered taxonomy name. You can find it on plugin setting page.
    Note: Be sure you have added valid taxonomy name otherwise no result will be displayed.
  • Design
    [pgaf_post_filter design="design-1"]
    Select the design to display. There are 2 designs ie design -1 and design -2 .
  • Number of Column / Grid
    [pgaf_post_filter grid="2"]
    Display Post in a column/grid on your website. You can display up to four column. Values are 1,2,3 and 4
  • Display Specific Category
    [pgaf_post_filter cat_id="40,50,60"]
    Enter category id to display categories wise. You can pass multiple ids with comma seperated. You can find id at relevant category listing page.
  • Display Child Category
    [pgaf_post_filter include_cat_child="false"]
    If you are using parent category then whether to display child category or not. Values are “true” or “false”.
  • Order
    [pgaf_post_filter order="DESC"]
    You can set post by order. Values are “ASC” or “DESC”.
  • Orderby
    [pgaf_post_filter orderby="date"]
    Order by post ie ID, author, title, date, name, rand etc.
  • Link Behavior
    [pgaf_post_filter link_target="false"]
    Choose link behavior.
  • Image Fit
    [pgaf_post_filter image_fit="true"]
    Image fit to box or not. Values are “true” or “false”.
  • Media Size
    [pgaf_post_filter media_size="large"]
    Set the featured image size to diplay in post Values are “thumbnail”, “medium”, “large”, “full”.
  • Image Height
    [pgaf_post_filter image_height="300"]
    Set featured image height.
  • Show Date
    [pgaf_post_filter show_date="false"]
    Display post date OR not. By default value is “true”. Options are “true” OR “false”.
  • Show Author
    [pgaf_post_filter show_author="true"]
    Display post author. Values are “true” or “false”.
  • Show Comments
    [pgaf_post_filter show_content="true"]
    Display post Short content OR not. By default value is “true”. Options are “true” OR “false”.
  • Show Category Name
    [pgaf_post_filter show_category_name="true"]
    Display post category name OR not. By default value is “True”. Options are “true” OR “false”.
  • Content Word Limit
    [pgaf_post_filter content_words_limit="20"]
    Control post short content Words limit. By default limit is 20 words.
  • Content Tail
    [pgaf_post_filter content_tail=".."]
    Three Dots after short content for continue reading.
  • Show Read More
    [pgaf_post_filter show_read_more="true"]
    Display Read more button or not. Options are “true” OR “false”.
  • Read More Text
    [pgaf_post_filter read_more_text="Read More"]
    Change “Read More” text to your Desired text.
  • All Filter Text
    [pgaf_post_filter all_filter_text="All"]
    All filter text name. Value is any string.
  • Active Category Filter
    [pgaf_post_filter active_filter="1"]
    Enter number to remain active / default category tab at initial stage.
    e.g 2 for second number category. You can pass cat-{Your Cat ID} (cat-20) also.
  • Category Limit
    [pgaf_post_filter cat_limit="0"]
    Display number of categories.
  • Order of Category
    [pgaf_post_filter cat_order="ASC"]
    Set order your categories by “Ascending” OR “Descending”. Values are “asc” OR “desc”.
  • Orderby Category
    [pgaf_post_filter cat_orderby="name"]
    Display Order by category. ie name, term_id, count etc
  • Exclude Category
    [pgaf_post_filter exclude_cat="10,12"]
    Exclude category which you do not want to display. You can pass multiple category ids by comma separated.
  • Exclude Post
    [pgaf_post_filter exclude_post="10,12"]
    Exclude some post which you do not want to display. You can enter multiple ids by comma separated.
  • Specific Posts
    [pgaf_post_filter posts="10,12"]
    Display specific Posts. You can pass multiple ids by comma separated.
  • Single Post Popup
    [pgaf_post_filter single_post_popup="false"]
    Options are “ture” OR “false”.
  • Popup Effects
    [pgaf_post_filter popup_effect="fadein"]
    Display effect for popup.
  • Popup Position-X
    [pgaf_post_filter popup_positionx="center"]
    Display position of popup.
  • Popup Position-Y
    [pgaf_post_filter popup_positiony="center"]
    Display position of popup.
  • Full Screen
    [pgaf_post_filter full_screen="false"]
    Display popup in full-screen.
  • Popup Width
    [pgaf_post_filter popup_width="80%"]
    Set popup width. e.g 80% OR 800px. Leave empty for default width.
  • Speed In
    [pgaf_post_filter speed_in="300"]
    Display popup speed for open. Leave empty for default. Value should be in milliseconds. e.g 300.
  • Speed Out
    [pgaf_post_filter speed_out="300"]
    Display popup speed for Close. Leave empty for default. Value should be in milliseconds. e.g 300.
  • Delay Time
    [pgaf_post_filter delay="150"]
    Display popup delay time. Leave empty for default. Value should be in milliseconds. e.g 150.
  • Enable Loader
    [pgaf_post_filter enable_loader="false"]
    Display loader or not.
  • Loader Color
    [pgaf_post_filter loader_color="#000"]
    Enter Color Value ie #000000.
  • Loader Speed
    [pgaf_post_filter loader_speed="true"]
    Enter the popup loader speed. Leave empty for default. Value should be in milliseconds. e.g 1000.
  • Enable Overlay
    [pgaf_post_filter enable_overlay="true"]
    Display overlay or not.
  • Overlay Color
    [pgaf_post_filter overlay_color="#000"]
    Dispaly overlay color.
  • Overlay Opacity
    [pgaf_post_filter overlay_opacity="0.5"]
    Display opacity of overlay.
  • Parent Category
    [pgaf_post_filter child_of=""]
    Enter parent category ID to retrieve all child terms of.
  • Extra Class
    [pgaf_post_filter extra_class=""]
    You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.

Template Structure + Overriding templates via a theme

The template files of post grid and filter 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-grid-and-filter-with-popup-ultimate-pro, keeping the same file structure.

Example : To override the Post Grid and Filter with Popup Pro design file simply copy file from /post-grid-and-filter-with-popup-ultimate-pro/templates/grid/design-1.php to yourtheme/post-grid-and-filter-with-popup-ultimate-pro/grid/design-1.php

The copied file will now override the Post Grid and Filter with Popup Pro 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-grid-and-filter-with-popup-ultimate-pro/templates/ directory:

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