How to Add Multiple CSS Classes in WordPress

 

CSS play an important role in UI/UX

Today we will learn how to add multiple CSS classes using WordPress function. We can design each WordPress post differently using the respective CSS classes.

 

STEP I:- We have to first define the classes as an array in the functions.php file under the child-theme folder. Let see how we define, it’s very simple. Classes names are (long-form-article, featured-story, interactive) for a single Div tag.

<?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', ); ?>

STEP II:- After defining classes in the functions.php file under the child-theme folder. We have to now call them in the post_class function in Div tag. Let see how it looks like.

A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts and pages.

<div <?php post_class( $custom_classes ); ?>>

The post_class will print out respective default CSS classes along with your custom CSS class.

RESULT:-

<div class="longform-article featured-story interactive"></div>

Share:

Facebook
Twitter
Pinterest
LinkedIn

Please share your thought