Style depending on Category

  • Resolved PaulBalluff

    (@paulballuff)


    11 years, 6 months ago

    Hey Folks,

    a short introduction:

    I am running the current version of WordPress (3.4.2) with the new TwentyTwelve Theme (version 0.9, release should be around next week).

    I made some modifications to the theme (yes I made a childtheme) and almost everything is working as I want it.
    I modified the header.php and inserted a if..else to check for the category. Depending on the category a different header image and css is loaded.

    This works almost perfectly fine, however:

    On my mainpage it uses the category of the last post of the page (bottom), not the first. How can I change it that it uses the first post in the loop and not the last?

    Here is the code for the stylesheets in the <head>:

    <?php wp_head(); ?>
<?php if (in_category('banana') ):
?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/banana.css" type="text/css" media="screen" />
<?php elseif (in_category('strawberry') ):
?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/strawberry.css" type="text/css" media="screen" />
<?php endif;  ?>

    Here the code for the header:

    <?php if (in_category('banana') ): ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/banana.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php elseif (in_category('strawberry') ): ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/strawberry.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php else: ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/header.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>

    and here the link to the blog, you can see the effect in action if you go to the second page:

    http://www.balluff-transnational.eu

    thank you very much

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

    11 years, 6 months ago

    try to use either:

    is_category()

    or the combination of:

    is_single() && in_category()

    Thread Starter PaulBalluff

    (@paulballuff)

    11 years, 6 months ago

    thank you for your reply!

    Maybe I have not stated clearly enough what I want to achieve.

    is_category() only works for category pages. And is_single() && in_category() only changes the single post style.

    But I want that my mainpage acquires the style of the most recent post (the one on top).

    Here one example:
    My mainpage displays the recent posts (like a standard blog) in reverse chronoligical order (newest top, oldest bottom). Like here:

    • Post A (Newest) [Cat: Banana]
    • Post B [Cat: Strawberry]
    • Post C [Cat: Strawberry]

    I have different theme options for each category and I want the mainpage to have the theme of the most recent one – in this case Banana.

    But somehow in_category() asks for the last post (the one on the bottom, the old one, in the example ‘Post C’) and the mainpage is displayed with the Strawberry theme.

    How can I ask for the most recent category (in the example: Banana)?

    Thank you very much for your support.

    John Parris

    (@mindctrl)

    11 years, 6 months ago

    You could try a different approach by adding a body class using the cat from the latest post, and doing your css load based on the body class. This is off the top of my head and can probably be done quicker/better, but you get the idea.

    function jp_latest_post_cat_body_class( $classes ) {

    $args = array( 'numberposts' => 1 );
    $latest_post = wp_get_recent_posts( $args );

    foreach ( $latest_post as $latest ) {
        foreach ( ( get_the_category( $latest["ID"] ) ) as $category ) {
            $classes[] = $category->cat_name;
        }
    }

    return $classes;
}
add_filter( 'body_class', 'jp_latest_post_cat_body_class' );
    Thread Starter PaulBalluff

    (@paulballuff)

    11 years, 6 months ago

    Thank you mindctrl for the good idea.

    As my programming skills are not very advanced, it took me a while to understand your approach. Generally speaking it is a very elegant way.

    But this will always return the latest post as body class. No matter on which page I go the body class is always the one of the most recent post. (even though I am viewing a post from an other category.)

    So this approach is too ‘global’…

    Is there no easier way to return the category of the current post? I mean the one that is on top.

    Michael

    (@alchymyth)

    11 years, 6 months ago

    an idea analogous of what is used in Twenty Eleven (in author.php to crate the author info):

    -untested-

    <?php wp_head(); ?>
<?php //NEW
the_post(); // get the first/top post of the loop to provide the info for the category styles; //
//will be reset using 'rewind_posts()' after the header images are set// ?>
<?php if (in_category('banana') ):
?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/banana.css" type="text/css" media="screen" />
<?php elseif (in_category('strawberry') ):
?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/strawberry.css" type="text/css" media="screen" />
<?php endif;  ?>

.....
everything inbetwen
.....

<?php if (in_category('banana') ): ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/banana.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php elseif (in_category('strawberry') ): ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/strawberry.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php else: ?>
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/headers/header.png" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
<?php //NEW
rewind_posts(); // resets the testing post; i.e. brings the query back to original // ?>

    http://codex.wordpress.org/Function_Reference/rewind_posts

    John Parris

    (@mindctrl)

    11 years, 6 months ago

    Paul, I’m a little lost on what exactly you mean. If you want it to only do this on the front page, you could add a if ( is_front_page() ) check to the code to limit it to only there.

    Thread Starter PaulBalluff

    (@paulballuff)

    11 years, 6 months ago

    Thanks everyone!!
    Alchymyth’s solution does exactly what I want: the post which is on top determines the blog style!

    Thank you again for your patience and assistance!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Style depending on Category’ is closed to new replies.