To add new CSS classes to a specific div on a specific archive page in WordPress, you can use the body_class
filter hook to add a custom class to the body tag and then use CSS to target the specific div.
Here’s how you can add new CSS classes to a specific div on a specific archive page:
- Identify the archive page where you want to add the new CSS classes. For example, let’s say you want to add the new CSS classes to the archive page for a custom post type called “my_custom_post_type”.
- Open the
functions.php
file of your theme or child theme and add the following code:
phpCopy codefunction add_custom_classes_to_archive_body( $classes ) {
if ( is_post_type_archive( 'my_custom_post_type' ) ) {
$classes[] = 'my-custom-class';
}
return $classes;
}
add_filter( 'body_class', 'add_custom_classes_to_archive_body' );
This code adds the class “my-custom-class” to the body tag of the archive page for the “my_custom_post_type” custom post type.
- Save the
functions.php
file. - Open the archive page template file for the custom post type (e.g.
archive-my_custom_post_type.php
) and find the div that you want to add the new CSS classes to. - Add the following CSS code to your theme’s stylesheet:
cssCopy code.my-custom-class .specific-div {
/* Add your custom styles here */
}
Replace .specific-div
with the class or ID of the specific div that you want to add the new CSS classes to. Also, add your custom styles to this code.
- Save the stylesheet.
Now, when you visit the archive page for the “my_custom_post_type” custom post type, the “my-custom-class” class will be added to the body tag and you can use CSS to target the specific div and add your custom styles.
Last modified: March 3, 2023