Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialEnyel Cuadro
12,884 PointsAdd different class to the div?
What if I have different type of portfolio and I want to add different class to a div to make it as a tag e.g. photo and video
loop that used in this video Creating a Portfolio Landing Page is
<?php
$portfolio = array(
'post_type' => 'portfolio'
);
$the_query = new WP_Query ( $portfolio );
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-md-4 col-sm-6">
<?php the_title(); ?>
</div>
<?php endwhile; endif; ?>
what I want to see when going to have on my portfolio post
<div class="col-sm-6 photo"> photo </div>
<div class="col-sm-6 video"> video </div>
<div class="col-sm-6 photo"> photo </div>
<div class="col-sm-6 video"> video </div>
1 Answer
Jacob Mishkin
23,118 PointsTo get the desired effect it is a two step process.
Step one, create a category for each post, add the corresponding category i.e. photo or video.
Step two, add the WordPress function post_class() inside of the looped div. Please note that this function creates a HTML class structure so you do NOT want to have class="<?php post_class(); ?>"; what you need to do is <div <?php post_class(); ?> and that should echo out the category names into the correct div.
If you have any questions please feel free to ask.
PS to keep the bootstrap classes add then as arguments to the post_class('col-sm-6'); this will include that class as well as the category name class.
Enyel Cuadro
12,884 PointsEnyel Cuadro
12,884 PointsThen how to add the photo/video class to the post or let just say, how to add video class IF the post is a video? is the STEP ONE is what I need to do?
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 Pointsdid you set a category for either the photo or video?
to do this go into the dashboard of the post and on the right hand side set a category.
After you set a category you will see a class name called category-photo or category-video
Enyel Cuadro
12,884 PointsEnyel Cuadro
12,884 Pointsit worked. thank you Jacob!