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!

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 WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Single Page

I am creating a template for my custom post type but the html is not outputting on the bookings page.

here is my page-bookings.php:

<?php /**

  • Template Name: Booking Page */ ?>

<?php get_header();?>

<div class="booking-container">

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

<div class="panel">

    <?php get_template_part('content', 'booking'); ?>   

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

<?php

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

?>

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

<div class="small-booking-container"> <div class="panel"> <div class="thumbtitle"> <div class="thumbnail"> <?php the_post_thumbnail('large');?> </div> <h5><?php the_title();?></h5> </div>

    <div class="content">
        <h5>Appearances: </h5>
        <p><?php the_field('appearances');?></p>

        <h5>Available Days For Booking: </h5>
        <p><?php the_field('bookings');?></p>

        <h5>Contact Details:</h5>
        <p>Contact Name: <span><?php the_field('contact_person');?></span></p>
        <p>Phone Number: <span><?php the_field('phone_number');?></span></p>
        <p>Email Address: <span><?php the_field('email_address');?></span></p>
    </div><!-- content -->
    <div class="bio">
        <h5>Profile: </h5>
        <p><?php the_field('additional_info');?></p>
    </div><!-- bio -->
</div><!-- panel -->

</div><!-- small-booking-container --> <?php endwhile;?> </div><!--booking-container-->

<?php get_footer(); ?>

These are the things showing on the Bookings page: The header, the featured image and the footer. The title and the fields are not outputted.

Returned:

<div class="booking-container">

<div class="panel">

</div>

</div>

Please where did I miss it?

Jeremy Castanza
Jeremy Castanza
12,080 Points

This sounds like a registration issue or a syntax issue with your custom loop. Did you register the booking post type?

No I didn't. There is no place where custom post type was registered in the tutorials I watched.

Jeremy Castanza
Jeremy Castanza
12,080 Points

You can do it manually, which is very cumbersome. The easiest way to do it is to use a plugin. Zac does this in the Theme Development course, when he covers custom post types. Usually, there's two plugins that you'll want to install. One to register the custom post and another for the UI on the back end. Hope this helps! :)

Plugins is exactly what I'm using. I've seen that video taught by Zac and saw another video on youtube closer to what I'm trying to achieve. I did everything I saw on the video but I didn't get thesame result. For example, the following:

    <h5>Appearances: </h5>
    <p><?php the_field('appearances');?></p>

    <h5>Available Days For Booking: </h5>
    <p><?php the_field('bookings');?></p>

    <h5>Contact Details:</h5>
    <p>Contact Name: <span><?php the_field('contact_person');?></span></p>
    <p>Phone Number: <span><?php the_field('phone_number');?></span></p>
    <p>Email Address: <span><?php the_field('email_address');?></span></p>

returns only the div tags enclosing it when I viewed the source.

9 Answers

Jeremy Castanza
Jeremy Castanza
12,080 Points

Check your loop. Make sure you're opening and closing it correctly. Keep in mind that the field is driven by the plug in where as everything else is WordPress. Check the Codex to make sure your loop structure is accurate. https://codex.wordpress.org/Class_Reference/WP_Query

I followed the rules. The issue is that the fields: appearances, bookings, contact_person, phone_number and email_address are not outputted on the bookings page.

The divs enclosing these fields are outputted though.

Jeremy Castanza
Jeremy Castanza
12,080 Points

Try this within your loop and see what you get back...

$testvar = get_field('appearances');

echo $testvar;

I tried it but still got a blank page. The only thing I have up is the featured image.

I tried it but still got a blank page. The only thing I have up is the featured image.

Jeremy Castanza
Jeremy Castanza
12,080 Points

Repost your code for the query and the loop... Be sure to include back ticks, otherwise Treehouse will cut off your code. I'm not able to see all of your code since it's getting cut off.

have_posts() ) : $query->the_post(); ?> should be...

<?php if ( $the_query->have_posts() ) : ?> followed by a while loop... The while loop needs to be closed. You should also end with your wp_reset_postdata function after you close your conditional if/else statement.

If you're getting the featured image, your normal WordPress loop is working, but your WP Query is failing. I would also recommend turning debug mode on. This should give you an idea if your code is generating an error and what line it's on. This can be set in the wp-config file by changing the following line to: define('WP_DEBUG', true);

After turning the debug mode on and refreshing the site, the page still loads but before it did, the following error message was spitted:

Failed opening '/home/pearlcar/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/pearlcar/public_html/wp-settings.php on line 65

This is the line 65: WP_DEBUG ? include( WP_CONTENT_DIR . '/advanced-cache.php' ) : @include( WP_CONTENT_DIR . '/advanced-cache.php' );

When I checked, I noticed that advanced-cache file is not in wp-content and I've not seen it in any other folder. How do I get it back if that would solve the issue.

I included all those in my code but Treehouse is cutting it. I'll look up how to use the backtick and resend the codes

Jeremy Castanza
Jeremy Castanza
12,080 Points

I'm not familiar with this file. I may be wrong, but I'm pretty sure this isn't part of the core. I believe it's a plugin file. It's tough to say if this issue is related or a separate issue all together. I suspect that they're two different issues.

If you have a caching plugin installed, I would disable it and reload the site to see if that removes the debug error. If it does, then you've isolated the issue to a plugin. Here's something on the WP forums that seems similar to your issue. https://wordpress.org/support/topic/advanced-cachephp-problems-on-upgrade.

But that still doesn't really address the lack of output from your custom posts. Without seeing the full code for your template file, I can't really help you.

<?php
/**
 *  Template Name: Booking Page
*/
?>


<?php get_header();?>

<div class="booking-container">

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

<div class="panel">

        <?php get_template_part('content', 'booking'); ?>   
 </div>
 <?php endwhile; endif; wp_reset_postdata();?>

 <?php

 $args = array(
    'post_type' => 'booking'
  );?>
  <?php $query = new WP_Query( $args );?>

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

<div class="small-booking-container">
    <div class="panel">
        <div class="thumbtitle">
            <div class="thumbnail">
                <?php the_post_thumbnail('large');?>
            </div>
            <h5><?php the_title();?></h5>
        </div>

        <div class="content">
            <h5>Appearances: </h5>
            <p><?php the_field('appearances');?></p>

            <h5>Available Days For Booking: </h5>
            <p><?php the_field('bookings');?></p>

            <h5>Contact Details:</h5>
            <p>Contact Name: <span><?php the_field('contact_person');?></span></p>
            <p>Phone Number: <span><?php the_field('phone_number');?></span></p>
            <p>Email Address: <span><?php the_field('email_address');?></span></p>
        </div><!-- content -->
        <div class="bio">
            <h5>Profile: </h5>
            <p><?php the_field('additional_info');?></p>
        </div><!-- bio -->
    </div><!-- panel -->
</div><!-- small-booking-container -->
<?php endwhile;?>
</div><!--booking-container-->


<?php get_footer(); ?>
Jeremy Castanza
Jeremy Castanza
12,080 Points

A couple of things...

1) Move wp_reset_postdata(); under

</div><!--booking-container-->

2) Try this instead:

<?php $query = new WP_Query( $args );?>

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

HTML and fields for each booking here.

<?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

If that doesn't work, you could also try assigning each field to a variable. I've had success with this previously.For example: $appearances = get_field( "appearances" ); echo $appearances;

I would also re-evaluate the purpose of the main loop on this page. Without seeing your template part and the header, it's tough to tell what function it's serving. Check to see if your loop is already previously referenced in the header. If so, no need to call it again.

Speaking of the main loop; I have added this line because I saw something like that in the youtube video but I also feel something is wrong with it as I do not have any template_part file created. In this line: <?php get_template_part('content', 'booking');?> , I used 'content' as one of the argument because I saw it in the video and the other argument 'booking' is the name of the Custom Post Type I created using the CPT UI plugin.

This is the header.php:

<?php
/**
 * @package WordPress
 * @subpackage WPEX WordPress Framework
 */
?>
<!DOCTYPE html>

<html <?php language_attributes(); ?>>
<head>
    <?php wpex_hook_head_top(); ?>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <?php
    //add viewport meta if responsive enabled
    if(of_get_option('responsive')) { ?>
    <!-- Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <?php } ?>

    <!-- Title Tag -->
    <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

    <?php
    //set favicon if defined in admin
    if(of_get_option('custom_favicon')) { ?>
    <link rel="icon" type="image/png" href="<?php echo of_get_option('custom_favicon'); ?>" />
    <?php } ?>

    <!-- Browser dependent stylesheets -->
    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css" media="screen" />
    <![endif]-->

    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie7.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/font-awesome-ie7.min.css" media="screen" />
    <![endif]-->

    <!-- Load HTML5 dependancies for IE -->
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <!-- WP Head -->
    <?php
    //WordPress head hook <== DO NOT DELETE ME
    wp_head(); ?>

    <?php wpex_hook_head_bottom(); ?>
</head><!-- /end head -->

<!-- Begin Body -->

<?php $no_sidebar = ( of_get_option('sidebar_layout') == 'none' && is_singular() ) ? 'no-sidebar' : ''; ?>
<body <?php body_class('body '. $no_sidebar .''); ?>>
<?php if (function_exists('AWM_generate_linking_code'))AWM_generate_linking_code(); ?>

<?php wpex_hook_header_before(); ?>
<div id="header-wrap">
    <header id="header" class="outerbox clearfix">
    <?php wpex_hook_header_top(); ?>
        <div id="header-top">
            <div id="logo" class="clearfix">
                <a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home">
                    <?php
                    //show custom image logo if defined in the admin
                    if( of_get_option('custom_logo','') !== '' ) { ?>
                        <img src="<?php echo of_get_option('custom_logo'); ?>" alt="<?php get_bloginfo( 'name' ) ?>" />
                    <?php }
                    //no custom img logo - show text logo
                        else { ?>
                         <h2><?php echo get_bloginfo( 'name' ); ?></h2>
                    <?php } //end logo check ?>
                </a>
            </div><!-- /logo -->
            <?php
            //show social icons if not disabled
            if( of_get_option('social','1') == '1' ) { ?>
            <ul id="header-social">
                <?php
                //get social links from array
                $social_links = wpex_get_social();
                //social loop
                foreach($social_links as $social_link) {
                    if(of_get_option($social_link)) {
                        echo '<li><a href="'. of_get_option($social_link) .'" title="'. $social_link .'" target="_blank" class="wpex-tooltip"><img src="'. get_template_directory_uri() .'/images/social/'.$social_link.'.png" alt="'. $social_link .'" /></a></li>';
                    } //option empty
                } //end foreach ?>
                </ul><!-- /header-social -->
            <?php } //social disabled ?>
        </div><!-- /header-top -->
        <?php
        // Output content for mobile menu
        wpex_mobile_menu(); ?>
        <nav id="navigation" class="clearfix">
            <?php
            // Main Navigation menu
            wp_nav_menu( array(
                'theme_location'    => 'main_menu',
                'sort_column'       => 'menu_order',
                'menu_class'        => 'sf-menu',
                'fallback_cb'       => false
            )); ?>
            <?php get_search_form(); ?>
       </nav><!-- /navigation -->
       <?php wpex_hook_header_bottom(); ?>
    </header><!-- /header -->
</div><!-- /header-wrap -->
<?php wpex_hook_header_after(); ?>

<div id="wrap">

<?php wpex_hook_content_before(); ?>
<div id="main-content" class="outerbox clearfix fitvids <?php if( of_get_option( 'pagination_style', 'infinite_scroll' ) == 'infinite_scroll' ) { echo 'infinite-scroll-enabled'; } ?>">
<?php wpex_hook_content_top(); ?>  

    <?php
    //run code only on pages
    if(is_page() && !is_attachment()) {

        //show large featured images on pages
        if( has_post_thumbnail() ) { echo '<div id="page-featured-img" class="container"><img src="'. wp_get_attachment_url(get_post_thumbnail_id(),'full') .'" alt="'. get_the_title() .'" /></div>'; }

    } ?>

I also replaced the_field() with get_field() but got thesame result

Jeremy Castanza
Jeremy Castanza
12,080 Points

I would get rid of the main loop on this page and test to see if there is a conflict. Alternatively, replace your template part with the_content (). Right now, it sounds like you are looping through a non existent file and you are duplicating your efforts below with a second custom loop. You've also got a lot going on in this theme between some unconventional coding standards and the number of hooks. As a piece of advice, I would build your custom query in a very simple theme (i.e. index and functions file). Then once it's working, move it over into the new theme. If it breaks, there could be a conflict with the new theme.