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

Rob Kidd
Rob Kidd
10,734 Points
Posted by Rob Kidd
Rob Kidd
10,734 Points

Problems using Wordpress category templates

I'm using Zac's Wordpress/Bootstrap theme to make a portfolio site for an artist. I want to have give each portfolio piece a category (installation, photography etc) so she can group her different portfolio pieces by medium, and have these listed in the drop down navbar menu.

I've got the main portfolio page with all items setup fine using the portfolio grid template. However, when I try to get the categories to use a custom template, they come out messed up, with a mix of correctly-sized thumbnails, image placeholder icons, links from the navbar and other text. Any idea what's going on? I've got screenshots if anyone wants to see them!

6 Answers

Cristian Cisneros
Cristian Cisneros
794 Points
Cristian Cisneros
Cristian Cisneros
794 Points

Robb,

Please send screenshots or share website URL.

I'm not familiar with Zac's Wordpress/Bootstrap theme, but my guess is he set up a Portfolio custom post type and created a single-portfolio.php file to display each portfolio item. I think that's what you might be missing, the single-portfolio.php file.

Rob Kidd
Rob Kidd
10,734 Points
Rob Kidd
Rob Kidd
10,734 Points

Hi Christian,

Thanks for getting back to me.

The single-portfolio page works fine; it's the archive / category page that seems to be playing up. How do I post a screenshot? That might help to show what I mean.

Rob

Cristian Cisneros
Cristian Cisneros
794 Points
Cristian Cisneros
Cristian Cisneros
794 Points

Robb,

Ok please show me your screenshot.

When I post screenshots, I usually use the "Webpage Screenshot" plugin for Chrome and then I upload the image file to my "image" directory on my personal website.

For example: http://cristiancisneros.com/image/screenshot-for-rob-kidd-from-treehouse.png

and then I add the Markdown code.

For example:

html <p> ![screenshot ](http://cristiancisneros.com/image/screenshot-for-rob-kidd-from-treehouse.png "Screenshot") </p>

And here is the result

screenshot

Rob Kidd
Rob Kidd
10,734 Points
Rob Kidd
Rob Kidd
10,734 Points

Thanks so much for your patience, Christian - a busy week. But at least I now know how to do screenshots on this forum.

Here's what my portfolio page looks like - this is working fine:

screenshot

You can see the drop-down navigation I'm going for: Portfolio should take you to all portfolio pieces, whereas 'installation', 'photography' etc should take you to just the portfolio pieces with that category. The problem arises once you click on one of the categories:

screenshot

The geometric image squares should be neatly lined up, the LinkedIn and Twitter links shouldn't be there, and there shouldn't be all those grey image icons.

Let me know if you'd like to see any code!

Thanks,

Rob

Cristian Cisneros
Cristian Cisneros
794 Points
Cristian Cisneros
Cristian Cisneros
794 Points

Rob,

Yes, please post the code.

The problem appears to be somewhere in your template hierarchy. Do you have any category-slug.php files in place?

For example, category-installation.php or category-photography.php

Rob Kidd
Rob Kidd
10,734 Points
Rob Kidd
Rob Kidd
10,734 Points

Hi Cristian, there are no category-slug files. See below a list of files:

archive category footer front-page functions header home index page-contact page-full-width page-portfolio page sidebar-blog sidebar single-portfolio single

Here's the code from category.php:

<?php get_header(); ?>

  <div class="container">   
    <div class="row">

      <div class="col-md-12">

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

          <div class="page-header">
            <h1><?php the_title(); ?></h1>
          </div>

          <?php the_content(); ?>

        <?php endwhile; else: ?>

          <div class="page-header">
            <h1>Oh no!</h1>
          </div>

          <p>No content is appearing for this page!</p>

        <?php endif; ?>


      </div>      

    </div>

    <div class="row">

      <?php
        $args = array( 
          'post_type' => 'portfolio'
        );
        $the_query = new WP_Query( $args );

      ?>

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

      <div class="col-xs-3 portfolio-piece">

          <?php
            $thumbnail_id = get_post_thumbnail_id(); 
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
          ?>

          <p><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></a></p>
          <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

      </div>

      <?php $portfolio_count = $the_query->current_post + 1; ?>
      <?php if ( $portfolio_count % 4 == 0): ?>

      </div><div class="row">

      <?php endif; ?>

      <?php endwhile; endif; ?>


    </div>

<?php get_footer(); ?>

And here's the code from page-portfolio.php:

<?php
/*
  Template Name: Portfolio Grid Template
*/

?>
<?php get_header(); ?>

  <div class="container">   
    <div class="row">

      <div class="col-md-12">

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

          <div class="page-header">
            <h1><?php the_title(); ?></h1>
          </div>

          <?php the_content(); ?>

        <?php endwhile; else: ?>

          <div class="page-header">
            <h1>Oh no!</h1>
          </div>

          <p>No content is appearing for this page!</p>

        <?php endif; ?>


      </div>      

    </div>

    <div class="row">

      <?php
        $args = array( 
          'post_type' => 'portfolio'
        );
        $the_query = new WP_Query( $args );

      ?>

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

      <div class="col-xs-3 portfolio-piece">

          <?php
            $thumbnail_id = get_post_thumbnail_id(); 
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
          ?>

          <p><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></a></p>
          <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

      </div>

      <?php $portfolio_count = $the_query->current_post + 1; ?>
      <?php if ( $portfolio_count % 4 == 0): ?>

      </div><div class="row">

      <?php endif; ?>


      <?php endwhile; endif; ?>


    </div>

<?php get_footer(); ?>

Let me know if you need any more!