CSS styling based on post category, Custom Post Type archive page

  • Resolved bibliofille

    (@bibliofille)


    8 years, 1 month ago

    I’ve created a custom post type called “Events.” On the archives-events.php template, I’m using CSS flexbox to display the events in a grid, where each grid item is a separate event.

    Some of the events will have an “open to public” category added to them. If the category “open to public” is applied to the event, then the category is displayed, otherwise, no category is displayed.

    Each event has a background color, however, I want to give events categorized as “open to public” a different background color and a border. How can I do that on the CPT archive page?

    Here is the code snippet from my archives-events.php page that I used to achieve to display the “open to public” category, if it exists: 

    <h5><?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
    foreach($categories as $category) {
if($category->name !== 'open to public') 
{
        $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator; }
    }
echo trim($output, $separator);
}
?>
Viewing 6 replies - 1 through 6 (of 6 total)

  • You could reengineer the if statement you’ve used in the code example above and try using this;

    if ($category->name == 'open to public') { /* code goes here */ }

    You could add a class to a div that surrounds the category name and then through CSS add the styles you want to that way. So maybe something like…

    PHP:
    <div class="<?php if ($category->name == 'open to public') : ?>special-category<?php endif; ?>

    CSS:
    .special-category { background: red; }

    You basically just need to check that the category name is equal to whatever you want to check against and then from there add your CSS classes and HTML elements.

    • This reply was modified 8 years, 1 month ago by danieltj. Reason: Code broke
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Check the <body> tag on the pages in question. There should be some specific classes added relevant to the post type and templates.

    Thread Starter bibliofille

    (@bibliofille)

    I tried to implement a solution, but I must be doing something a bit off, because it’s not working.

    Here’s the full code for the events post grid. I tried to add the suggested code from @danieltj to add a div inside the “event-item” div called “special-category” IF the category is “open to public”. 

    <div class="event-container">

							

							<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

							<div class="event-item">

								<?php if ($category->name == 'Open to Public'); ?>

<div class="<?php if ($category->name == 'Open to Public') : ?> special-category <?php endif; ?>">

									<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
									
									<p><?php the_field('event_date'); ?> | <?php the_field('event_start_time'); ?> - <?php the_field('event_end_time'); ?></p>

									<p><?php the_field('event_description'); ?> <a href="mailto:<?php the_field('event_rsvp_email'); ?>"><?php the_field('event_rsvp_email'); ?></a></p>

<h5><?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
    foreach($categories as $category) {
if($category->name !== 'open to public') 
{
        $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator; }
    }
echo trim($output, $separator);
}
?>

</div>

							<?php endwhile; ?>

						

							<?php endif; ?>

						

						</div>

    I put it in wp_debug mode and got the following notices:

    Notice: Undefined variable: category in /Users/labedzde/Documents/Sites/cgla/wp-content/themes/cgla/archive-events.php on line 25

    Notice: Trying to get property of non-object in /Users/labedzde/Documents/Sites/cgla/wp-content/themes/cgla/archive-events.php on line 25

    Line 25 is this:
    <?php if ($category->name == 'Open to Public'); ?>

    So, I must be doing something wrong there?

    Moderator bcworkz

    (@bcworkz)

    Move the get_the_category() line to before any attempt at using $category. Be sure the line is still after while (have_posts()) : the_post(); or else you will be outside the loop. get_the_category() must be within the loop in order to work properly.

    Thread Starter bibliofille

    (@bibliofille)

    Ok, here’s the code I’m now using for the events grid: 

    <div class="event-container">

							

							<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

							<div class="event-item">

							<h5><?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
    foreach($categories as $category) {
if($category->name !== 'open to public') 
{
        $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator; }
    }
echo trim($output, $separator);
}
?>
</h5>

							<div class="<?php if ($category->name == 'open to public') : ?> 'special-category' <?php endif; ?>">

							

									<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
									
									<p><?php the_field('event_date'); ?> | <?php the_field('event_start_time'); ?> - <?php the_field('event_end_time'); ?></p>

									<p><?php the_field('event_description'); ?> <a href="mailto:<?php the_field('event_rsvp_email'); ?>"><?php the_field('event_rsvp_email'); ?></a></p>

				

</div>
							<?php endwhile; ?>

						

							<?php endif; ?>

						

						</div>

					</div>

    It’s getting close, but it’s not quite there. I don’t see the notice error anymore, but I’m also not seeing that “special-category” is added as a class when I look at the page using Chrome inspector. It lists an “undefined variable” error in view source, but not on the front end of the page.

    And I really need the category name to appear at the bottom of the event item div.

    Is there no way to wrap the entire event item in a div IF the category is “open to public”, then display that category name AFTER the rest of the content?

    Moderator bcworkz

    (@bcworkz)

    Your output is for when the category is not “open to public”. You can add an else condition to produce different output when the category is “open to public”. This is where to include a “special-category” class.

    You can code almost any situation you can think of as long as it’s logical. A condition that applies for some situation can still apply much later as long as the variable the condition is stored in is not altered and the variable remains in scope (i.e. the variable is not used in a called function)

    For example, in this “else” condition, you can assign something to $output. As long a $output is not assigned a new value, you can execute echo $output; much much later in the process. However, because $output is assigned inside a foreach loop, it’s very likely to be overwritten, so maybe not such a good example.

    There’s likely ways around this, it just requires some clever thinking and an understanding of all of what’s going on with the code. I like to think I’m a clever thinker, but I certainly don’t know what’s going on. I jumped in because I saw the problem of assigning $category too late.

    I’ll still try to help you, but I’m fuzzy on what this code is really supposed to do. I understand your goal well enough, but I’m unsure how this code is getting you there. You say it’s close, so there’s likely something simple to be done, but I don’t know what that is.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS styling based on post category, Custom Post Type archive page’ is closed to new replies.