Common Feature Set - WordPress Plugin

Redirect

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_rules

Executed 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.

Parameters

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

TextSearch

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.

Parameters

target	Give a CSS selector of the items to be filtered.
id	Optional CSS id for the search field container.
class	Optional CSS class for the search field container.
placeholder	Optional text for input field placeholder.
icon	Activate search icon of CSS class ´searchicon fas fa-search´.
noresults	Optional text to be displayed, if search result is empty.

Filter Hooks

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

cfswp_render_textsearch

append HTML before output

Grid

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.

Parameters

posttype	The posttype (or post_categories) to display in a grid.
id	The container´s CSS id.
class	The container´s CSS class.
mode	A custom mode switch for passing an arbitrary parameter.
not_in	Exclude posts (or post_categories) by ID comma-separated (in shortcode only).
exclude_self	Exclude the post shown on a single page, e.g. for a list of related posts (in shortcode only).
cat	filter posttype by category, use slugs combined with comma (OR) and + (AND).
cat_and	AND-combine categories by ID comma-separated (in shortcode only).
cat_in	OR-combine categories by ID comma-separated (in shortcode only).
tag	filter posttype by tags, use slugs combined with comma (OR) and + (AND).
tag_in	OR-combine tags by ID comma-separated (in shortcode only).
text	Apply a full text search on title and content (done by search bar)
sort	Give the sortation field, default is post_name.
order	Give the sortation, default is ASC.
limit	Give a limit of posts shown, default is all.
template	Custom item template, see Templates.
hideempty	Hide grids with no result. Hide empty post_categories.
itemclass	Add a CSS class to the grid item, default is item.
oddeven	Add alternating CSS classes odd and even to the grid items.
carousel	Make the grid act as carousel, using the cfs-carousel feature.
group	Add 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.
grouptemplate	Custom group header template, see Templates.
searchbar	Activate the grids serach bar.
searchtemplate	Custom search bar template, see Templates.
searchlabels	Show labels of active search parameters.
searchtags	Expand full text search on tags as well.
hide_textsearch	Hide the default full text search field.
show_catsearch	Activate search by categories (in the default search bar template).
show_tagsearch	Activate search by tags (in the default search bar template).
show_sortlinks	Show sortation switch (in the default search bar template).
show_modelinks	Show custom mode switch (in the default search bar template).
noresults	Display a message if no posts (or sub-categories) were found after search.
nocontent	Display a message if no posts (or sub-categories) were found at all (in shortcode only).

Templates

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_parameters	filters grid shortcode attributes, before a search is applied
cfswp_grid_attributes	filters grid shortcode attributes, before the shortcode is executed
cfswp_grid_query_parameters	filters query parameters, before the query is executed
cfswp_grid_search_template_args	filters search template arguments, before the serach bar is rendered
cfswp_grid_group_template_args	filters 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;
}

Gallery

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:

Parameters

post_id	Pass the post´s ID to the render function, if empty it is taken from the global $post.
field	Pass the gallery field name to the render function, if empty the first ACF field of type gallery is used.
include_thumb	Optionally prepend the post´s thumbnail to the gallery list.
first_only	Only show the first image of the gallery list, e.g. for thumbnail usage.
thumbsize	Choose a registered image size for thumbnails.
bgimg	Render thumbnail as CSS background-image, instead of HTML image tag.
caption	Optionally display the images caption. If the caption is an URL, a link is rendered.
itemclass	Optinal CSS class for gallery items.
id	Optional CSS id for the gallery container.
class	Optional CSS class for the gallery container.
lightbox	Activate lightbox feature, use the value ´gallery´ to show a gallery browser, single image or video popups otherwise.
carousel	Optionally activate carousel feature on the gallery.
autowidth	If carousel is active with option ´autoWidth´, specify the item height (in px) in this parameter, to calculate image sizes correctly.

Lightbox

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)

Carousel

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;
}

Activate

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.

Toggle

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;
}

Parallax

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);
});

Parameters

target	CSS selector to identify the element, on which to apply the parallax effect. Defaults to ´.parallax-scroll´.
speed	Specify 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.
dir	Scroll effect direction ´x´ for horizontal, or ´y´ for vertical (default).
mode	Use ´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´.
head	Boolean ´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.

Common Feature Set WP - WordPress Plugin

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

Redirect

Action Hook

Custom Template

Parameters

TextSearch

Parameters

Filter Hooks

Grid

Parameters

Templates

Filter Hooks

Code Example

Gallery

Parameters

Lightbox

Carousel

Code Example

Activate

Toggle

Contact Flag

Code Example

Parallax

Code Example

Parameters

Temporarily allow unfiltered uploads