Common Feature Set WP - WordPress Plugin

A set of customizable features often used in WordPress: Grids, Filters, Carousels and more.


Disable Wordpress standard pages for single posts and category archives by redirecting them to the home page. Specific exceptions can be given for both in the plugin´s settings page: Settings -> Common Feature Set.

Action Hook

cfswp_redirect_rulesExecuted before the default redirections to override or add more redirection rules.

Custom Template

The shortcode [cfs-template type="any"] includes a custom template file /template/custom-any.php from the child theme´s folder anywhere you need it. E.g. use the get_post() and ACF´s get_fields() functions inside the file, to build a custom post template for grid items or single pages.


typeIdentify the template file in the child theme´s folder as /template/custom-[type].php. Defaults to ´post´.


Give CSS class cfs-textsearch to an input field, or use the [cfs-textsearch] shortcode or the WPBalery element CFS-TextSearch. An attribute data-target must hold a CSS selector to identify the searchable items. These will be filtered on input change by their text contents, all non-hits will be hidden.


targetGive a CSS selector of the items to be filtered.
idOptional CSS id for the search field container.
classOptional CSS class for the search field container.
placeholderOptional text for input field placeholder.
iconActivate search icon of CSS class ´searchicon fas fa-search´.
noresultsOptional text to be displayed, if search result is empty.

Filter Hooks

Filter Hooks are defined at the following positions in the code:

cfswp_render_textsearchappend HTML before output


Arrange posts of any posttype in a customizable grid with an optional search bar, using the [cfs-grid] shortcode or the WPBakery element CFS-Grid. A menu of post_categories can be done as well, use ´Taxonomy Images´ plugin to add images. Adapt item and search bar templates or implement custom behaviour, using the parameters and filter hooks, as described below.


posttypeThe posttype (or post_categories) to display in a grid.
idThe container´s CSS id.
classThe container´s CSS class.
modeA custom mode switch for passing an arbitrary parameter.
not_inExclude posts (or post_categories) by ID comma-separated (in shortcode only).
exclude_selfExclude the post shown on a single page, e.g. for a list of related posts (in shortcode only).
catfilter posttype by category, use slugs combined with comma (OR) and + (AND).
cat_andAND-combine categories by ID comma-separated (in shortcode only).
cat_inOR-combine categories by ID comma-separated (in shortcode only).
tagfilter posttype by tags, use slugs combined with comma (OR) and + (AND).
tag_inOR-combine tags by ID comma-separated (in shortcode only).
textApply a full text search on title and content (done by search bar)
sortGive the sortation field, default is post_name.
orderGive the sortation, default is ASC.
limitGive a limit of posts shown, default is all.
templateCustom item template, see Templates.
hideemptyHide grids with no result. Hide empty post_categories.
itemclassAdd a CSS class to the grid item, default is item.
oddevenAdd alternating CSS classes odd and even to the grid items.
carouselMake the grid act as carousel, using the cfs-carousel feature.
groupAdd a group header to sets of items, e.g. post_date date Y-m does that for each month, if sort parameter is set to post_date as well.
grouptemplateCustom group header template, see Templates.
searchbarActivate the grids serach bar.
searchtemplateCustom search bar template, see Templates.
searchlabelsShow labels of active search parameters.
searchtagsExpand full text search on tags as well.
hide_textsearchHide the default full text search field.
show_catsearchActivate search by categories (in the default search bar template).
show_tagsearchActivate search by tags (in the default search bar template).
show_sortlinksShow sortation switch (in the default search bar template).
show_modelinksShow custom mode switch (in the default search bar template).
noresultsDisplay a message if no posts (or sub-categories) were found after search.
nocontentDisplay a message if no posts (or sub-categories) were found at all (in shortcode only).


Templates can be customized for the types item, searchbar and group, see the plugin´s default templates (post-item.php, post-searchbar.php, post-group.php, post_categories-item.php). Custom templates must be put into the child theme´s /templates folder, and are taken in the following order, if existing:

1.A custom template explicitly given by parameter template, searchtemplate or grouptemplate
2.a custom template called [id]-[type].php with the grid´s id parameter
3.a custom template called [class]-[type].php with the grid´s class parameter
4.the plugin´s default template from the plugin´s /templates folder

Filter Hooks

Filter Hooks are defined at the following positions to easily manipulate grid and search parameters in your custom code:

cfswp_grid_search_parametersfilters grid shortcode attributes, before a search is applied
cfswp_grid_attributesfilters grid shortcode attributes, before the shortcode is executed
cfswp_grid_query_parametersfilters query parameters, before the query is executed
cfswp_grid_search_template_argsfilters search template arguments, before the serach bar is rendered
cfswp_grid_group_template_argsfilters group template arguments, before the group header is rendered

Code Example

/* example: sort and query by custom fields */
add_filter( "cfswp_grid_query_parameters", "my_grid_query_callback" , 10, 2);
function my_grid_query_callback($params, $args) {

	// sort by custom field
	if ($args["sort"] == "datum") {
		$params["meta_key"] = "datum";
		$params["orderby"] = "meta_value";

		// query by custom mode switch
		if (!empty($args["mode"]) && $args["mode"] == "past") {
			$params["meta_value"] = date("Y-m-d");
			$params["meta_compare"] = "<=";
			$params["order"] = "DESC" ;
			$params["limit"] = "-1" ;
		if (!empty($args["mode"]) && $args["mode"] == "future") {
			$params["meta_value"] = date("Y-m-d");
			$params["meta_compare"] = ">=";
	return $params;

/* example: activate groups by date */
add_filter( "cfswp_grid_group_template_args", "my_group_active_callback" , 10, 2);
function my_group_active_callback($groupargs, $args) {
	$groupargs["active"] = $groupargs["currentgroup"] >= date("Y-m-d") ? true : false;
	return $groupargs;


The Advanced Custom Fields (ACF) plugin must be installed, and a custom field of type gallery defined. Then you can use the [cfs-gallery] shortcode or cfswp_render_gallery() wrapper function in your grid item or single page templates. It shows images or videos with optional captions and lightbox or carousel feature. The arguments are listed below:


post_idPass the post´s ID to the render function, if empty it is taken from the global $post.
fieldPass the gallery field name to the render function, if empty the first ACF field of type gallery is used.
include_thumbOptionally prepend the post´s thumbnail to the gallery list.
first_onlyOnly show the first image of the gallery list, e.g. for thumbnail usage.
thumbsizeChoose a registered image size for thumbnails.
bgimgRender thumbnail as CSS background-image, instead of HTML image tag.
captionOptionally display the images caption. If the caption is an URL, a link is rendered.
itemclassOptinal CSS class for gallery items.
idOptional CSS id for the gallery container.
classOptional CSS class for the gallery container.
lightboxActivate lightbox feature, use the value ´gallery´ to show a gallery browser, single image or video popups otherwise.
carouselOptionally activate carousel feature on the gallery.
autowidthIf carousel is active with option ´autoWidth´, specify the item height (in px) in this parameter, to calculate image sizes correctly.


All children elements of a container with CSS class cfs-lightbox or cfs-lightbox-gallery will open in a lightbox using the magnificPopup Plugin. The gallery delegates the openers to children a-tags with content path in href-attribute, and lets the lightbox browse through all items. If an item has the CSS class video, it is opened in an iframe, so you can add hosted videos as content paths, too. To customize javascript options, re-define the functions and constants from the plugin file /assets/js/cfswp-options.js in your custom js file (see Carousel Code Example)


If you use the 'carousel' option in CFS-Grid, or give the CSS class cfs-carousel to any item container, the owlCarousel is applied onto the grid items with a minimal CSS and options configuration. To customize javascript options, re-define the functions and constants from the plugin file /assets/js/cfswp-options.js in your custom js file:

Code Example

cfswp_animationSpeed = 300;
cfswp_scrollTopOffset = 50;

function cfswp_getCarouselOptions($, element) {
	var options = { ... };
	return options;

function cfswp_getLightboxOptions($, element) {
	var options = { ... };
	return options;


Give CSS class cfs-activate to elements, that should get a CSS class activated added on click events, while all its siblings lose their supposed activation. So you can exclusively select and hilite grid or list elements, to manipulate their style or content visibility. If you set a CSS selector in an attribute data-target, you can apply this behaviour on other content elements, which then act like a tab.


Give CSS class cfs-toggle to any element, that should act as toggle button. Identify the toggled content by a CSS selector in the button´s attribute data-target. Then the content slides up and down on click events. Content and button get a CSS class active added, if content is visible. So you could build popups or accordions.

Contact Flag

Add the ID contact-flag to any container, and it will be fixed flag-like to the screen´s side. Put an element with CSS class toggler inside, which handles the flag to move in and out of view. You might want to adjust the open and closed width and position of the flag.

Code Example

#contact-flag {
	width: 300px;
	top: 50%;
	right: 0;
#contact-flag:not(.active) {
	right: 60px;


You can add parallax scroll effects to any element, so that its scroll behaviour is slowed down or sped up. In custom Javascript you must initialsize the effect, giving its target selector, an integer speed, direction ´x´ or ´y´. Modes ´left/right/top/bottom´ use absolute positioning, CSS translate is used otherwise. Use mode ´head´ if your effect starts from the very top of the page:

Code Example

jQuery(document).ready(function($) {
	// replace parameter variables by values
	initParallax($, target, speed, dir, mode, head);


targetCSS selector to identify the element, on which to apply the parallax effect. Defaults to ´.parallax-scroll´.
speedSpecify the effect speed, use a positive integer for speeding up, or a negative integer for slowing down the target element´s scroll behaviour. Defaults to 5.
dirScroll effect direction ´x´ for horizontal, or ´y´ for vertical (default).
modeUse ´top´, ´bottom´, ´left´ or ´right´ for target elements with absolute position.
Use ´bg´ for parallax effect on the target element´s ´background-position´ using px values.
Otherwise and by default the effect is realized using the CSS property ´transfrom: translate´.
headBoolean ´true´, if your effect starts from the very top of the page, ´false´ by default.

Temporarily allow unfiltered uploads

For uploading SVGs or WebFonts into the WordPress media library, you must explicitly allow unfiltered uploads. Tick the checkbox to do so temporarily until the end of the next day.