portfolio image not showing

Question

my portfolio image isnt showing. i check that i selected a featured image and i check that the custom slug post type is was named 'portfolio' but i still cant get it to load? what else could be causing the problem.

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

?>
<?php get_header();?>

<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h1><?php the_title(); ?></h1>
      <p><?php the_content();?></p>        

    <?php endwhile; endif; ?>
    </div>
  </div>
</section>

<?php

  $args = array(
    'post_type' => 'portfolio'
  );
  $query = new WP_Query( $args );

?> 

<section class="row no-max pad">

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

  <div class="small-6 medium-4 large-3 columns grid-item">
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
  </div>

  <?php endwhile; endif; wp_reset_postdata(); ?>

</section> 

<?php get_footer();?>```

Answer 1 · 2015-05-02T11:20:45Z

May 2, 2015 11:20am

Hi, Melissa. Have you made sure that you've added theme support for post thumbnails? If not, you can do so by adding

add_theme_support('post-thumbnails');

to your functions.php file.

Answer 2 · 2015-05-02T13:59:39Z

May 2, 2015 1:59pm

hi ryan, thanks for you reply. i had already added it. any ideas to what else could be causing it.

<?php

add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );

function register_theme_menus() {

    register_nav_menus(
        array(
            'primary-menu' =>__( 'Primary Menu' )
            )
        );

}
add_action( 'init', 'register_theme_menus' );

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );

    wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.' );

    wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );

    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
    add_action( 'wp_enqueue_scripts', 'wpt_theme_styles');

    function wpt_theme_js() {

        wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js','','', false);
        wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js' ,array('jquery'),'', true);
        wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js' ,array('jquery'),'',true );

    }

    add_action( 'wp_enqueue_scripts', 'wpt_theme_js');
?>

Answer 3 · 2015-05-02T14:11:43Z

May 2, 2015 2:11pm

it gave me a syntax error when i added it . i tried added it both ways with and without the quotions. both gave a syntax error. unless im adding it wrong

  $args = array(
    'post_type' => 'portfolio'
    'posts_per_page' => 9999 
  );
  $query = new WP_Query( $args );

?> ```

```<?php

  $args = array(
    'post_type' => 'portfolio'
    'posts_per_page' => '9999' 
  );
  $query = new WP_Query( $args );

?> ````

Parse error: syntax error, unexpected ''posts_per_page'' (T_CONSTANT_ENCAPSED_STRING), expecting ')' in C:\xampp\htdocs\localwp.com\wp-content\themes\th_practice theme\page-portfolio.php on line 24

Answer 4 · 2015-05-02T14:17:19Z

May 2, 2015 2:17pm

ok thanks, the error msg is not showing anymore but i still cant see the portfolio images.

Answer 5 · 2015-05-02T14:32:29Z

May 2, 2015 2:32pm

mmm how so i check that?

i can go into pages. if i click on the portfolio page i see the featured image of the pink triangle. 2.if i click on edit portfolio piece i see the image stack on one another but no feature image box.
if i add new post there is a featured image section i can add post. but when i click view post there i dont see it anywhere.

Answer 6 · 2015-05-03T13:38:30Z

May 3, 2015 1:38pm

Hi again, Melissa. Another thought just occurred to me: have you actually registered 'portfolio' as a post type? It seems that to use the post_type filter, you need to have registered a custom post type called 'portfolio', and then use that to post under. Otherwise, you can try using something like:

$query = new WP_Query( 'category_name=portfolio' );

and see if that brings up the results you want.

Answer 7 · 2015-05-04T04:15:05Z

May 4, 2015 4:15am

hi ryan thanks for being so helpful. Im still having a little trouble I wanted to give u some more information to help clarify things.

1.First have I registered the portfolio as a post type? Yes I think I did it through the widgets that were download. -In the cpt UI I have added a ‘portfolio’ post type which I see if I open manage posts.

With the custom fields widget I have add a ‘portfolio category’ which I see in the field groups

in the portfolio piece section I cannot see featured images. The video adds post-thumbnails to add this code, ive added it but I still don’t see it. I have added <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>in the page-portfolio.php. And I have added add_theme_support( 'post-thumbnails' ); to the functions page.
secondly again I the portfolio section I don’t have the attributes box that zac has in the video.
im slightly confused what u mean by “If you add 'portfolio' as a category to a post and then click on that category in the sidebar widget for categories, do you get a filtered list of posts for the 'portfolio' category?” Are u talking about in the post section or in the CPT UI or Custom field’s widgets. If I go into make a new post I can add categories there is no portfolio category to choose from but I can add new. Yet Zac is adding the portfolio pages eg pink triangle etc through the portfolio – add new section so shouldn't I add all of mine there as well.
I added the code to the page-portfolio.php but I didn’t notice any difference.

 /*Template Name: Portfolio Page
 */

?>
<?php get_header();?>

<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h1><?php the_title(); ?></h1>
      <?php the_content();?>       

    <?php endwhile; endif; ?>
    </div>
  </div>
</section>

<?php

  $args = array(
    'post_type' => 'portfolio', 
    'posts_per_page' => '9999' 
  );
  $query = new WP_Query( $args );
  $query = new WP_Query( 'category_name=portfolio' );

?> 

<section class="row no-max pad">

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

  <div class="small-6 medium-4 large-3 columns grid-item">
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
  </div>

  <?php endwhile; endif; wp_reset_postdata(); ?>

</section> 

<?php get_footer();?>```

Answer 8 · 2015-05-10T04:32:47Z

May 10, 2015 4:32am

i will try that. but my main goal is just to continue on with the videos, but im stuck on this one point. "wordpress theme development- The Portfolio Homepage'

Answer 9 · 2015-05-10T13:26:11Z

May 10, 2015 1:26pm

im doing local development so no url.

Answer 10 · 2015-05-10T13:27:50Z

May 10, 2015 1:27pm

actually yes sorry i have installed both the ACF and CPT UI plugins. there the ones i am having trouble with

Answer 11 · 2015-05-10T13:29:06Z

May 10, 2015 1:29pm

i think it has something to do with the fact that in the portfolio piece section I cannot see featured images. The video adds post-thumbnails to add this code, ive added it but I still don’t see it. I have already added in the page-portfolio.php. And I have added add_theme_support( 'post-thumbnails' ); to the functions page.

Answer 12 · 2015-05-10T13:50:14Z

May 10, 2015 1:50pm

ok i figured out how to get the featured images section. i had to tick the box in the setting of the CPT UI. but i still cant see the portfolio image

Answer 13 · 2015-05-13T07:24:41Z

May 13, 2015 7:24am

still struggling with this does anyone know what might be the problem?

Answer 14 · 2015-05-13T16:36:47Z

May 13, 2015 4:36pm

Okay, so you have the featured image displaying now?

To pull in any of the custom post fields you would add the_field('field_name') . What does the code look like for your single portfolio template when you compare it to the project download?

Answer 15 · 2015-05-14T04:27:12Z

May 14, 2015 4:27am

Im following the course wordpress theme press and im up to the lesson 'the portfolio home page'. So I am not up to the point where we have created a single portfolio template page.

If I add paragraph to page-portfolio to test it shows in wordpress. Before I added <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a> I could see the small image icon. But when I made it dynamic it when away. And then the pink star that is supposed to show up never showed.

Answer 16 · 2015-05-24T15:38:20Z

May 24, 2015 3:38pm

Okay so on the portfolio homepage you are able to get the featured image to show up, but only a small version of them? I'm not sure what you mean by when you make it dynamic?

Answer 17 · 2015-05-25T04:22:23Z

May 25, 2015 4:22am

hi zac, the image will not show up at all so no there is not a small version of them. By dynamic I mean the point at 5:50mins into the video when we replace the static image with the php post thumbnail function

<?php the_post_thumbnail('large'); ?>

Answer 18 · 2015-06-09T15:23:16Z

June 9, 2015 3:23pm

Two possible problems:

1) In the backend of the site, do you have a featured image set for the content that is showing properly in the admin area when you edit the content. 2) If you try to use <?php the_title(); ?> somewhere in the Loop, does the title display?

Answer 19 · 2015-06-11T10:06:12Z

June 11, 2015 10:06am

<!doctype html>
<html class="no-js" lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name='robots' content='noindex,follow' />
<link rel="alternate" type="application/rss+xml" title="createsomething &raquo; Home Comments Feed" href="http://localhost/localwp.com/?feed=rss2&#038;page_id=10" />
<link rel='stylesheet' id='foundation_css-css'  href='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/css/foundation.css?ver=4.1.5' type='text/css' media='all' />
<link rel='stylesheet' id='normalize_css-css'  href='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/css/normalize.?ver=4.1.5' type='text/css' media='all' />
<link rel='stylesheet' id='googlefont_css-css'  href='http://fonts.googleapis.com/css?family=Asap%3A400%2C700%2C400italic%2C700italic&#038;ver=4.1.5' type='text/css' media='all' />
<link rel='stylesheet' id='main_css-css'  href='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/style.css?ver=4.1.5' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/js/modernizr.js?ver=4.1.5'></script>
<script type='text/javascript' src='http://localhost/localwp.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/localwp.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/localwp.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/localwp.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1.5" />
<link rel='canonical' href='http://localhost/localwp.com/' />
<link rel='shortlink' href='http://localhost/localwp.com/' />

    <head></head>

  <body class="home page page-id-10 page-template-default">
    <header class="row no-max pad main">
  <h1><a class="current" href="http://localhost/localwp.com">createsomething</a></h1>
  <a href="" class="nav-toggle"><span></span>Menu</a>
  <nav>
    <h1 class="open"><a class="current" href="http://localhost/localwp.com">createsomething</a></h1>

    <ul id="menu-main-menu" class="no-bullet"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-13"><a href="http://localhost/localwp.com/">Home</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/localwp.com/?page_id=4">Portfolio</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://localhost/localwp.com/?page_id=6">About</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://localhost/localwp.com/?page_id=8">Contact Us</a></li>
</ul>

<!--
    <ul class="no-bullet">
      <li class="current parent"><a class="current" href="index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="single-post.html">Single Post</a></li>
          <li><a href="author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
-->    
  </nav>
</header>
<section class="row">
      <div class="small-12 columns text-center">
        <div class="leader">
                  <h1>Home</h1>
          <p><p>this is the home page</p>
</p>        

                </div>
      </div>
    </section>

<div class="footer-clear"></div>
<footer class="row no-max pad">      
  <p>Copyright 2015</p>
</footer>


  <script type='text/javascript' src='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/js/foundation.min.js?ver=4.1.5'></script>
<script type='text/javascript' src='http://localhost/localwp.com/wp-content/themes/th_practice%20theme/js/app.js?ver=4.1.5'></script>

</body>
</html>

Dave McFarland hi dave. here is the html code from the browser. no im developing locally so i dont have it hosted anywhere publically.

Answer 20 · 2015-06-11T10:11:38Z

June 11, 2015 10:11am

Zac Gordon Hi Zac. yes the title does display in the loop. yes i have teh featured image set for the content. ive attached some screen shots to show you.

http://imgur.com/jSx248b

http://imgur.com/KuPQmn7

Answer 21 · 2015-06-11T12:21:00Z

June 11, 2015 12:21pm

I just install the course files in wp 4.2.2 and there is no portfolio in backend (admin)... is there going to be an update for the portfolio?

(there is no label: Portfolio in admin area there is only the normal Post area)

thank you

Welcome to the Treehouse Community

Looking to learn something new?

melissa brown

melissa brown

portfolio image not showing

21 Answers

Ryan Field

Ryan Field

melissa brown

melissa brown

Ryan Field

Ryan Field

melissa brown

melissa brown

Ryan Field

Ryan Field

melissa brown

melissa brown

Ryan Field

Ryan Field

melissa brown

melissa brown

Ryan Field

Ryan Field

Ryan Field

Ryan Field

melissa brown

melissa brown

Germán Campos

Germán Campos

melissa brown

melissa brown

Germán Campos

Germán Campos

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

melissa brown

Zac Gordon

Zac Gordon

melissa brown

melissa brown

Zac Gordon

Zac Gordon

melissa brown

melissa brown

Dave McFarland

Dave McFarland

Zac Gordon

Zac Gordon

melissa brown

melissa brown

melissa brown

melissa brown

Umy Ikem

Umy Ikem

Niki Papageorgiou

Niki Papageorgiou