4

Is it possible to have the_content() function return the post content in a div with a custom CSS class (i.e. something other than the-content)?

I have a unique post I'm trying to lay out that requires styling of the main content block that is different from virtually all other posts on the site. I'd like to create a custom class just for this subset of posts.

Improve this question
2

1 Answer 1

Reset to default
3

This can be done in multiple different ways. For example:

1. Using the_content filter hook:

Use the_content filter hook to wrap the output of the_content() function call with your required div.

You may try the following CODE in your theme's functions.php file or in a custom plugin:

add_filter( 'the_content', 'wpse_specific_the_content' );
function wpse_specific_the_content( $content ) {
    // logic to identify unique posts
    // for example, using specific post ID
    $unique_ids = array (12, 14, 21);
    // current post ID
    $id = get_the_id();
    if( in_array( $id, $unique_ids ) ) {
        return '<div class="unique-posts">' . $content . '</div>';
    }
    return $content;
}

2. Use post_class filter hook:

You don't actually need to wrap the_content() in additional div. Instead, you may use the post_class filter hook.

This way, you will be able to assign unique CSS classes to different posts and pages that needs them and style them based on those CSS classes.

For example:

add_filter( 'post_class', 'wpse_filter_post_class' );
function wpse_filter_post_class( $class ) {
    $unique_ids = array (12, 14, 21);
    $id = get_the_id();
    if( in_array( $id, $unique_ids ) ) {
        // add these custom CSS classes to matching posts
        $add = array( 'custom-posts', 'some-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

Now target this class the way you need:

.custom-posts {
    background-color: gold;
}
.custom-posts .entry-content {
    background-color: red;
}

3. Use body_class filter hook:

If you need more generic control over the entire page design (compared to what post_class will provide), then you may modify <body> class using the body_class filter hook, the same post_class filter hook is show above.

Like this:

add_filter( 'body_class', 'wpse_filter_body_class' );
function wpse_filter_body_class( $class ) {
    // this check is needed for body_class hook,
    // because the current page may not be a single post at all.
    if ( is_single() ) {
        $unique_ids = array (12, 14, 21);
        $id = get_the_id();
        if( in_array( $id, $unique_ids ) ) {
            $add = array( 'custom-body' );
            $class = array_merge( $add, $class );
        }   
    }
    return $class;
}

Now you can use the following CSS to target custom post page:

body.custom-body .any-inner-content-class {
    color: blue;
}

Since this custom class is added to the <body> tag, this way you'll be able to target any element within the page.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.