"Single Post (Dropcap)" (#4518731) / PenciDesign

Comments

clarastravelroute started the conversation
8 hours ago
Hello,

I want to capitalize the initials of single posts and make them a different color. (Dropcap) I want to set a different color for single posts in each category. For example, the initials of single posts in the Travel category are orange, the Food category is red, the Health category is green, the Business category is blue, and the Fashion category is purple. Can you give me the code to change these?

Good work!

3,020

PenciDesign replied

Hi,

1/ You should paste this code into the function.php of the child theme or via the CodeSnippet plugin here: https://wordpress.org/plugins/code-snippets/

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

    if ( is_single() ) {

        $post_id = get_the_ID();

        // List the taxonomies you want to include
        $taxonomies = [ 'category', 'post_tag' ]; 
        // Add more if needed, e.g. 'penci_review_cat', 'topic', etc.

        foreach ( $taxonomies as $tax ) {
            $terms = get_the_terms( $post_id, $tax );

            if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
                foreach ( $terms as $term ) {
                    // Add class in the format: taxonomy-term-slug
                    $classes[] = sanitize_html_class( "{$tax}-{$term->slug}" );
                }
            }
        }
    }

    return $classes;
});

2/ Now you can add CSS to filter the code for each category. For example:

.single-post.category-news .entry-content p:first-of-type::first-letter {
color: #000;
}
.single-post.category-solutions .entry-content p:first-of-type::first-letter {
color: #111;
}
.single-post.category-food .entry-content p:first-of-type::first-letter {
color: #222;
}

Regards,
PenciDesign.

1 Like