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 trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Landing Page

Enyel Cuadro
Enyel Cuadro
12,884 Points
Posted by Enyel Cuadro
Enyel Cuadro
12,884 Points

Add 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
Jacob Mishkin
23,118 Points

To 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
Enyel Cuadro
12,884 Points
Enyel Cuadro
Enyel Cuadro
12,884 Points 
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div <?php post_class('col-sm-6');  ?> >

    <?php the_title(); ?>

  </div>

<?php endwhile; endif; ?>

Then 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
Jacob Mishkin
23,118 Points

did 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
Enyel Cuadro
12,884 Points
Enyel Cuadro
Enyel Cuadro
12,884 Points

it worked. thank you Jacob!