{"id":4447,"date":"2019-03-27T18:20:22","date_gmt":"2019-03-27T12:50:22","guid":{"rendered":"https:\/\/phpyouth.com\/blog\/?p=4447"},"modified":"2025-10-09T14:39:35","modified_gmt":"2025-10-09T09:09:35","slug":"add-multiple-css-classes-in-wordpress","status":"publish","type":"post","link":"https:\/\/phpyouth.com\/blog\/add-multiple-css-classes-in-wordpress\/","title":{"rendered":"How to Add Multiple CSS Classes in WordPress"},"content":{"rendered":"

CSS plays an important role in UI\/UX<\/h2>\n

Today, we will learn how to add multiple CSS <\/a>classes using functions. This helps you design each WordPress post differently using specific classes.<\/p>\n

STEP I:-<\/strong> First, define the classes as an array in the<\/em> functions.php<\/em><\/strong> file inside your\u00a0child-theme<\/em><\/strong> folder. It’s very simple. For Example, use class names like (long-form-article, featured-story, and interactive) for a single Div tag.<\/p>\n

?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', );<\/pre>\n
STEP II:-<\/strong> After defining classes in the<\/em> functions.php<\/em><\/strong>\u00a0file under the<\/em> child-theme<\/em><\/strong> folder. We have to now call them in the post_class<\/em><\/strong> function in the Div tag. Let’s see how it looks.<\/p>\n
A core WordPress function called post_class()<\/strong><\/em> is used by themes to tell WordPress where to add those default classes for posts and pages.<\/p>\n
\n
 <div <?php post_class( $custom_classes ); ?>> <\/pre>\n
The post_class will print out the respective default CSS classes along with your custom CSS class.
\nRESULT:-<\/p>\n
<div class="longform-article featured-story interactive"><\/div> <\/pre>\n
\"Add<\/a>\"\"<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
CSS plays an important role in UI\/UX Today, we will learn how to add multiple CSS classes using functions. This helps you design each WordPress post differently using specific classes. STEP I:- First, define the classes as an array in the functions.php file inside your\u00a0child-theme folder. It’s very simple. For Example, use class names like […]<\/p>\n","protected":false},"author":1,"featured_media":4453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[4,2,5],"tags":[],"class_list":["post-4447","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-wordpress","category-css","category-php","post_format-post-format-image"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2017\/08\/Add-multiple-css.png?fit=560%2C315&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8zepR-19J","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":331,"url":"https:\/\/phpyouth.com\/blog\/wordpress-tutorial-how-to-create-a-wordpress-themes\/","url_meta":{"origin":4447,"position":0},"title":"Create A WordPress Themes","author":"RK Jajoria","date":"May 19, 2014","format":false,"excerpt":"WordPress themes are the most used and popular blogging platform on the web. Its flexibility, usability, and customizability are why people regard WordPress highly. Another reason is WordPress's huge array of themes; you can create almost anything, from online magazines to advanced e-commerce businesses. WordPress themes. You can either get\u2026","rel":"","context":"In "Wordpress"","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5639,"url":"https:\/\/phpyouth.com\/blog\/create-wordpress-admin-user-through-ftp\/","url_meta":{"origin":4447,"position":1},"title":"Create WordPress Admin User Through FTP","author":"RK Jajoria","date":"July 12, 2022","format":false,"excerpt":"Hello friends, Today in this article, we will learn how to create WordPress admin users through FTP. FTP will help us to create a WordPress Admin User when we don't have any other access. You can explore our FTP tutorial if FTP(File Transfer Protocol) is a new thing to you.\u2026","rel":"","context":"In "Wordpress"","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"Create WordPress Admin User Through FTP","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4708,"url":"https:\/\/phpyouth.com\/blog\/customize-logo-on-wordpress-login-register-page\/","url_meta":{"origin":4447,"position":2},"title":"Customize Logo on WordPress Login\/Register Page","author":"RK Jajoria","date":"December 8, 2018","format":false,"excerpt":"Hello Friends! Today, we will show how to customize the Logo on the WordPress Login and sign-up page. We often logged into WordPress websites, but never thought to apply our branding to the login page. It is straightforward code, just copy it and implement it on your website. Let's see\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/phpyouth.com\/blog\/category\/tutorial\/css\/"},"img":{"alt_text":"Customize WP login logo","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/04\/Customize-WP-logo.png?fit=560%2C315&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/04\/Customize-WP-logo.png?fit=560%2C315&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/04\/Customize-WP-logo.png?fit=560%2C315&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":5093,"url":"https:\/\/phpyouth.com\/blog\/wordpress-5-2-3-features\/","url_meta":{"origin":4447,"position":3},"title":"What’s New in WordPress 5.2.3","author":"RK Jajoria","date":"September 6, 2019","format":false,"excerpt":"WordPress has released new updates, including important features for website owners. Let\u2019s explore what\u2019s new in WordPress version 5.2.3. 1. PHP Error Protection Firstly, This administrator-focused update will let you safely fix or manage fatal errors without requiring a developer. It features better handling of the so-called \u201cwhite screen of\u2026","rel":"","context":"In "Wordpress"","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"WordPress 5.2.3","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/09\/WordPress-5.2.3.png?fit=560%2C315&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/09\/WordPress-5.2.3.png?fit=560%2C315&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/09\/WordPress-5.2.3.png?fit=560%2C315&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":12704,"url":"https:\/\/phpyouth.com\/blog\/speed-up-wordpress-core-web-vitals\/","url_meta":{"origin":4447,"position":4},"title":"How to Speed Up WordPress in 2026: The Ultimate Core Web Vitals Checklist","author":"RK Jajoria","date":"June 1, 2026","format":false,"excerpt":"Quick Answer (AI Search Optimized): To speed up WordPress in 2026, follow these steps in order: (1) Upgrade to managed hosting with PHP 8.2+ and TTFB under 200ms. (2) Install WP Rocket or LiteSpeed Cache. (3) Convert images to WebP and preload the hero LCP image. (4) Use a lightweight\u2026","rel":"","context":"In "Speed Performance"","block_context":{"text":"Speed Performance","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/speed-performance\/"},"img":{"alt_text":"speed up wordpress, core web vitals","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/05\/how-to-speed-up-wordpress-2026-featured.webp.webp?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/05\/how-to-speed-up-wordpress-2026-featured.webp.webp?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/05\/how-to-speed-up-wordpress-2026-featured.webp.webp?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/05\/how-to-speed-up-wordpress-2026-featured.webp.webp?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/05\/how-to-speed-up-wordpress-2026-featured.webp.webp?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4750,"url":"https:\/\/phpyouth.com\/blog\/make-taxonomy-slug-seo-friendly\/","url_meta":{"origin":4447,"position":5},"title":"Make Taxonomy Slug SEO Friendly","author":"RK Jajoria","date":"May 14, 2018","format":false,"excerpt":"Hello Friends, Today, we will talk about how to make our website taxonomy slugs SEO friendly. First, we will give you a tip for SEO Friendly URL, this is an important part to make a website SEO friendly. Sometimes developers use underscores to separate words in the URL of Pages\/Posts\u2026","rel":"","context":"In "SEO"","block_context":{"text":"SEO","link":"https:\/\/phpyouth.com\/blog\/category\/seo\/"},"img":{"alt_text":"Taxonomy Slug SEO Friendly","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/05\/Taxonomy-Slug-SEO-Friendly.png?fit=560%2C315&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/05\/Taxonomy-Slug-SEO-Friendly.png?fit=560%2C315&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/05\/Taxonomy-Slug-SEO-Friendly.png?fit=560%2C315&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts\/4447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/comments?post=4447"}],"version-history":[{"count":0,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts\/4447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/media\/4453"}],"wp:attachment":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/media?parent=4447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/categories?post=4447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/tags?post=4447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}