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

displaying custom posts and fields in a template

I cannot get custom posts and fields to display on my template.

I followed the tutorial for creating wordpress theme.

I did exact coding and nothing. Maybe my directory is wrong?

<?php

/*

Template Name: Work Page

*/

get_header(); ?>

<p>This is the work.php file.</p>

<?php

$args = array( 
    'post_type' => 'work'
);


$the_query = new WP_Query( $args );

?>

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

<h3><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h3>
<?php the_field( 'description' ); ?>
<hr>

<?php endwhile; else: ?>

<p>There are no posts or pages here</p>

<?php endif; ?>

<?php get_footer(); ?>

13 Answers

Kevin Korte
Kevin Korte
28,148 Points

On your work.php page, you are telling it to only query post that are "work" posts. So if you have no posts in the work post type, you will not have any post to display. This is where you would use the custom post type to give you the fields within the work post type that you need to populate the page.

Chris Hubbard
Chris Hubbard
2,253 Points

At first glance your code looks sound.

Did you go into the Wordpress Admin and select the 'Work Page' template for your Work custom post type?

Yeah under the Work page, I see Work page under the template drop down. So on this part, wordpress goes on your html file no? and retrieves your work.html and puts on whatever content you have there (Title, description). My question is...where is the folder need to be?

This is my directory

htdocs/yoursite.com/ htdocs/html-prototype/work.html

both folders need to be inside the htdocs no?

I'm confused because there was one video where under the htdocs folder was the yoursite.com folder alone. There was no prototype folder.

Chris Hubbard
Chris Hubbard
2,253 Points

Well if your saving your files as .html - there's your first problem. It should be saved as work.php (as should all other template files in your theme).

But looking at your directory structure, it appears as though you have much bigger issues going on.

Your theme files should appear in the 'themes' directory. The entire path should look something like this:

htdocs/yoursite.com/wordpress/wp-content/themes/theme-name/work.php

Did you follow the 'How to Make a Wordpress Theme' from the beginning or jump into it ?

Yeah sorry I meant the directory below htdocs/yoursite.com/wordpress/wp-content/themes/theme-name/work.php

I had html-prototype folder inside the htdocs along with yoursite.com folder. So basically I had both folders inside the htdocs but I deleted the html-prototype folder as I saw in one of the videos that he only had the yoursite.com folder inside the htdocs. Either way, having that html-prototype folder inside htdocs made no different. Still no display of custom posts and fields in the template.

Everything was working fine. I can see each title appearing on the page along with the message "This is the file.php page" but when I put $the_query->have_posts and $the_query->the_post(); the title WORK disappears and you only see "This is our header....the menu..."This is the work.php file".....and "This is our footer."

My question is, where is facebook getting those custom posts, titles and description from? From the html-prototype folder? Where does the html-prototype folder need to be?

I meant wordpress not facebook

Kevin Korte
Kevin Korte
28,148 Points

You need the two plug ins that Zac used in the video for this to work (or you could hard code in your functions.php but that is unnecessary).

You need the custom post type plugin, and the advanced custom fields plugin.

With the custom post type UI plugin you need to create a custom post type called "Work".

Then in the advance custom fields plugin you need top populate it with the fields you are calling in the code, one I see for sure in your code is a field called "description". Than you have to set this post type equal to the work post type so the fields show up on the work custom post type in you dashboard.

These plugins are creating new spaces in your database to store the information you put into it, much like the default post type that comes with wordpress. When the custom post type is queried on a page, Wordpress is for that information from the database set up in your config file.

Ok, I have those two plugins. Under Custom Fields I created two Field Groups (Testimonials and Work) They appear on the dashboard. When I click on Work, on the right section it shows "No Work Found" Was I suppose to create work in here? Because I don't remember seeing that video.

OMG LOL now I feel dumb...Well he did not create a project for us but he did say to grab the content from the demo and fill it in, I missed that part. This all make sense now. Thanks a lot Kevin.

in the plugin custom post type...u have to create a project.

Kevin Korte
Kevin Korte
28,148 Points

No worries, it's a bit tricky to get down at first. Lots of moving parts. And than remembering to set up a custom template, custom post type, custom fields, and write code that matches and only queries that custom stuff...

Good luck, let us know if that got you turned around okay.

Yeah at least I learned something important about Custom post types lol.

And yes I created the project in Work and they show up now so perfect. Moving on.. :)

*

Kevin Korte
Kevin Korte
28,148 Points

Awesome! Good job. Happy coding.