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

All the tools you need to build professional forms online.

Create custom web forms to capture leads

Collect payments

Automate your workflows

Build your business online

Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online