Add custom CSS class to custom post type

Question

I created custom post type called 'song' in the installation. I am running on a theme called fabulous

When I viewed the author archive page with custom posts, the post are not correctly displayed (errors in CSS configurations). I use the foloowing code to display custom posts in the author page.

function custom_post_author_archive($query) {
    if ($query->is_author)
        $query->set( 'post_type', 'song' );
    remove_action( 'pre_get_posts', 'custom_post_author_archive' );
}
add_action('pre_get_posts', 'custom_post_author_archive');

But the archive page with normal posts are displayed (when the above function is not used) correctly. When I checked the codes I noticed that several CSS classes are missing from the <article> tag. I added the missing CSS classes using the developer mode of the browser and the songs displayed correctly.

The missing CSS classes were song-entry masonry-entry col- loop-entry col clr span_1_of_3

I used Custom Post Type UI to create the custom post type song.

My question is, how can I add those missing CSS classes to the <article> tag so that the posts are displayed correctly?

Note: I tried this question and couldn't understand what exactly to do.

Answer 1

Have a look at post_class(). Check if the theme using it (every good theme should). If so then you can use post_class filter to add appropriate classes to the container.

Here is an example how you can use that filter

add_filter('post_class', function($classes){

    if(!is_singular('song'))
        return $classes;

    $additional_classes = array('song-entry', 'masonry-entry', 'col-', 'loop-entry', 'col', 'clr', 'span_1_of_3');

    $classes = $classes + $additional_classes;
    return $classes;

});

Hope it helps. Code not tested