customization - How to have different background image based on post category

admin管理员组

文章数量:1022405

I have below piece of code in style.css file (website : ) I am looking for option to have different background-image for different post/question category.

 .question-content-text {background-image:(../logo);} 

We cannot write php inside css style so could you please help/guide how can this be achieved?

I have below piece of code in style.css file (website : https://askpuzzle) I am looking for option to have different background-image for different post/question category.

 .question-content-text {background-image:(../logo);} 

We cannot write php inside css style so could you please help/guide how can this be achieved?

• customization
• css

Share Improve this question asked Apr 19, 2019 at 11:44 Avinash PatelAvinash Patel 3988 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have to have something to target, so that means adding a class with the necessary information for your styles.

I recommend adding categories (or terms from your custom taxonomy) to the body classes. You can do this with a simple filter. This targets single templates and pulls terms from the category taxonomy. You can easily change either of these to suit your needs.

add_filter( 'body_class', 'my_body_class' );
function my_body_class( $classes ) {
    if ( is_single() ) {
        $categories = get_the_terms( get_the_ID(), 'category' );
        if ( $categories ) {
            $category_slugs = array();
            foreach ( $categories as $category ) {
                $category_slugs[] = 'cat-' . $category->slug;
            }
            $classes = array_merge( $classes, $category_slugs );
        }
    }
    return $classes;
}

This will add new classes to your body tag like cat-uncategorized.

I have below piece of code in style.css file (website : ) I am looking for option to have different background-image for different post/question category.

 .question-content-text {background-image:(../logo);} 

We cannot write php inside css style so could you please help/guide how can this be achieved?

I have below piece of code in style.css file (website : https://askpuzzle) I am looking for option to have different background-image for different post/question category.

 .question-content-text {background-image:(../logo);} 

We cannot write php inside css style so could you please help/guide how can this be achieved?

• customization
• css

Share Improve this question asked Apr 19, 2019 at 11:44 Avinash PatelAvinash Patel 3988 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have to have something to target, so that means adding a class with the necessary information for your styles.

I recommend adding categories (or terms from your custom taxonomy) to the body classes. You can do this with a simple filter. This targets single templates and pulls terms from the category taxonomy. You can easily change either of these to suit your needs.

add_filter( 'body_class', 'my_body_class' );
function my_body_class( $classes ) {
    if ( is_single() ) {
        $categories = get_the_terms( get_the_ID(), 'category' );
        if ( $categories ) {
            $category_slugs = array();
            foreach ( $categories as $category ) {
                $category_slugs[] = 'cat-' . $category->slug;
            }
            $classes = array_merge( $classes, $category_slugs );
        }
    }
    return $classes;
}

This will add new classes to your body tag like cat-uncategorized.

本文标签： customizationHow to have different background image based on post category