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.