Understanding and customizing HTML classes added to shortcode output

Reasons you may want to customize classes

CPTUI-Extended outputs a number of classes on its markup already, but there may be times or cases where they are not enough, or you are trying to match up the markup to existing styles on your site, and those styles are looking for specific classes.

With the filters outlined below, you can safely include those new classes without having to edit CPTUI-Extended templates yourself.

Wrapper classes

These are the classes that get applied to the
<div> that we wrap all of a shortcode’s markup in. #’s indicate a post ID will be in that place

Default classes

• cptui-shortcode
• cptui-shortcode-#
• shortcode slug ex. default-shortcode

Customizing the wrapper classes.

/** 
 * Callback to customize CPTUI-Extended classes.
 * 
 * @param string $classes   Current string of classes to output with shortcode wrapper.
 * @param string $shortcode The current shortcode layout type being rendered. 
 */ 
function pluginize_customize_shortcode_classes( $classes, $shortcode ) {
	// Add a class for all shortcodes' output.
	$classes .= ' my-demo-class';

	// Add an extra class for just the default shortcode.
	if ( 'default_shortcode' === $shortcode ) {
	    $classes .= ' my-default-shortcode-demo-class';
	}

	return $classes;
}
add_filter( 'cptui_shortcode_classes', 'pluginize_customize_shortcode_classes', 10, 2 );

Notes

Things to keep in mind here is that the
$classes parameter is going to be a string that needs concatenated on. If you completely overwrite the variable, then only your specified classes will get returned. You will also want to check and confirm if you need to include spaces in your concatenation, so that you don’t get something like “default-shortcodemy-demo-class”.

The shortcode parameter is available so that you can customize the classes conditionally. If you only want the classes to be appended for certain layout types, check to see if the current shortcode is the one you’re targeting, and proceed from there.

Individual Posts classes

These are the classes applied to each item found in the resulting query. They will be useful for making style changes to the individual items.

Default classes

• cptui-entry
• Results of the get_post_class() function.

Customizing the item classes

/**
 * Callback to customize classes for individual items in CPTUI-Extended output.
 * 
 * @param string $classes             String of classes already set for a given item.
 * @param array $shortcode_attributes Array of the attributes provided for the current
 *                                    shortcode being rendered.
 */
function pluginize_customize_shortcode_items_classes( $classes, $shortcode_attributes ) {
	// Add a class for all items' output.
	$classes .= ' my-demo-item-class';

	// Add an extra class for just the default shortcode.
	if ( 'default_shortcode' === $shortcode_attributes['cptui_shortcode'] ) {
    	$classes .= ' my-default-shortcode-demo-item-class';
	}

	return $classes;
}
add_filter( 'cptui_post_class', 'pluginize_customize_shortcode_items_classes', 10, 2 );

Notes

If you have ever peaked at the output of a post and seen a lot of classes, similar to the following, then you’re already familiar with what the
$classes parameter will have.

cptui-entry post-125 post type-post status-publish format-standard has-post-thumbnail hentry category-test-category category-uncategorized

The
$shortcode_attributes is an array with this filter and provides all of the attributes used when the shortcode got generated. With that information, you can conditionally do a lot more. You can still add classes dependent on the shortcode, but you can also go based off of the current post type queried for, or the shortcode ID that we include to differentiate between shortcode instances in the post editors.