Is this the best (and only) option to style CSS for a given post type?

by

First of all thanks for reading, and my apologies for my lack of knowledge.

I have a WP site running with a theme and a child theme. I run it in 3 languages Spanish, English and Portuguese; and for handling the translations I’m using WPML plugin.

My problem is that in the translated Portfolios and Contact page the site is not looking quite as I want. After quite a lot of research on WPML support’s end the conclusion was that my devs the child-theme including additional CSS sheets that are surprisingly set to post/page specific levels. So the styling goes like in the pictures:

CSSSheetPageLevelStyling

CMorePageSpecificStyling

And the same goes for the Contacts ID posts.

So in this scenario WMPL support solution is to “copy” the script and just change in the copied lines the post id.

I believe this is a short term solution as if in the future any of the following happen I will have to re do it again:

-I want to create a second Portfolio Page
-I want to add a new language
-For whatever reason I delete the portfolio or contact page and re do it it will have a new post ID

So the question is: Isn’t another option to achieve this in a more “clean” fashion? I wouldn’t know how but I imagine something like saying in the CSS, for Portfolios the styling should be these -no matter which language-; for Contact, the styling should be these, etc

My dev is saying this approach is wrong, but for me their explanations make no sense.

Any advise would be deeply appreciate

Cheers

2 Answers
2

You’re absolutely right in your assumption. CSS should never be tied to post IDs, because they can always change (for example if you decide to migrate your posts to another install).

You can always shift control towards the admin dashboard.

Add a custom field in a post/page that you want styled in a special way (in your example you would have the same custom field in all language versions of the post/page). Let’s say it will be wpse_custom_class. Add it to each post/page; the value will be portfolio for this example.

Add this code to functions.php (copied from this answer). When the page loads it will look for a custom field and insert its value as a CSS class on the HTML body element.

function wpse_filter_post_class( $classes ) {
    $my_post_class = get_post_meta($post->ID, "wpse_custom_class");

    if( $my_post_class != '' ) {
        $classes[] = $my_post_class;
    }
    return $classes;
}

add_filter( 'post_class', 'wpse_filter_post_class' );

Your designer can now use it like so:

.portfolio #content .main {
    max-width: 100%;
}

This is more work on the admin side (you or the designer will need to manually go in and specify those CSS classes for all the custom-styled pages), but ultimately it contributes to a very flexible and future-proof solution.

Leave a Comment