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

Posted by janetchan
janetchan
2,797 Points

Custom post type: display_on_homepage not working

Pretty much everything on my Wordpress site is working, except for this little thing.

There are some projects which I do not want to show up on the homepage slider. So for those project, I did not upload a photo to show on home slider, and did not tick the box for "Display on Homepage." However, the projects still show up on my slider and appear as blank slides.

I did not use "display_on_homepage" anywhere in the code, so there must be a video I missed...

Thank you

Here's the code of my front-page.php:

<?php get_header(); ?>

</div>

<div id="featured" class="clearfix flexslider">

    <ul class="slides">
        <?php 

            $args = array(
                'post_type' => 'graphic_design',
            );

            $slideshow_query = new WP_Query( $args );

        ?>

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

        <li>

            <div class="container">
                <div class="grid_12">
                    <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                </div>
            </div>

        </li>

    <?php endwhile; else: ?>

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

    <?php endif; ?>

    </ul>


</div>

<div class="container clearfix">
    <div class="grid_12">
        <!-- <p>This is the front-page.php file.</p> -->
    </div>

<?php get_footer(); ?>

9 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi!

This was actually my fault. In the original videos I had forgotten to add in the conditional loop to check if the checkbox was checked or not. This code below should do what you're looking for!

<?php get_header(); ?>

</div>

<div id="featured" class="clearfix flexslider">

    <ul class="slides">
        <?php 

            $args = array(
                'post_type' => 'graphic_design',
            );

            $slideshow_query = new WP_Query( $args );

        ?>

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

        <?php if ( the_field( 'display_on_homepage' ) == 'Yes' ): ?>

        <li>

            <div class="container">
                <div class="grid_12">
                    <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                </div>
            </div>

        </li>

        <?php endif(); ?>

    <?php endwhile; else: ?>

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

    <?php endif; ?>

    </ul>


</div>

<div class="container clearfix">
    <div class="grid_12">
        <!-- <p>This is the front-page.php file.</p> -->
    </div>

<?php get_footer(); ?>

Please let me know if this solves the problem!

janetchan
janetchan
2,797 Points

So I changed ( the_field( 'homepage_slider_image' ) == 'Yes' ): ?> to ( the_field( 'display_on_homepage' ) == 'Yes' ) since that is the name of my checkbox. however it doesn't display any of the images, only the text 'Yes'

<div id="featured" class="clearfix flexslider">

<ul class="slides">
    <?php 

        $args = array(
            'post_type' => 'graphic_design',
        );

        $slideshow_query = new WP_Query( $args );

    ?>

    <?php if ( have_posts() ) : while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
        <?php if ( the_field( 'display_on_homepage' ) == 'Yes' ): ?>

        <li>

            <div class="container">
                <div class="grid_12">
                    <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                </div>
            </div>

        </li>

        <?php endif; ?>


<?php endwhile; else: ?>

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

<?php endif; ?>

</ul>

</div>

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Create two new categories for homepage and not homepage. Then, in the query, tell it to get posts from homepage category and exclude not homepage category posts from the query.

Job done!

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

My bad!

Okay, couple things. the_field() will output the text, as you're experience. What we need to do is get the field data and then save it as a variable for processing in our conditional statement.

So, we would do something like this:

        <?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

You'll notice the the $display here is returning an array, since there is an option with this field to have multiple checkboxes. Since we only have one checkbox we are getting that value and then running a conditional statement with it.

So, this should work as our final code:

<ul class="slides">
    <?php 

        $args = array(
            'post_type' => 'graphic_design',
        );

        $slideshow_query = new WP_Query( $args );

    ?>

    <?php if ( have_posts() ) : while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
       <?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

        <li>

            <div class="container">
                <div class="grid_12">
                    <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                </div>
            </div>

        </li>

        <?php endif; ?>


<?php endwhile; else: ?>

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

<?php endif; ?>

</ul>

Let me know if that works for you!

janetchan
janetchan
2,797 Points

Hi Zac, for some reason it still doesn't work, it still displays text

Zac Gordon
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Can you post your code again please?

janetchan
janetchan
2,797 Points

Here it is:

<div id="featured" class="clearfix flexslider">

    <ul class="slides">
        <?php 

            $args = array(
                'post_type' => 'graphic_design',
            );

            $slideshow_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
           <?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

            <li>

                <div class="container">
                    <div class="grid_12">
                        <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                    </div>
                </div>

            </li>

            <?php endif; ?>


    <?php endwhile; else: ?>

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

    <?php endif; ?>

    </ul>

</div>
janetchan
janetchan
2,797 Points
janetchan
janetchan
2,797 Points

Here it is:

<div id="featured" class="clearfix flexslider">

    <ul class="slides">
        <?php 

            $args = array(
                'post_type' => 'graphic_design',
            );

            $slideshow_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
           <?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

            <li>

                <div class="container">
                    <div class="grid_12">
                        <a href="<?php the_permalink(); ?>"><img src="<?php the_field( 'homepage_slider_image' ); ?>"   alt="<?php the_title(); ?> Project Screenshot"></a>
                    </div>
                </div>

            </li>

            <?php endif; ?>


    <?php endwhile; else: ?>

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

    <?php endif; ?>

    </ul>

</div>
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Janet, try making sure that your custom field for display_on_homepage is correct for the slug. Also, is there a reason you have the else statement in there? Try removing these lines:

<?php endwhile; else: ?>

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

    <?php endif; ?>

and replace it with: 

<?php endwhile; endif; ?>
Matthieu Belanger
Matthieu Belanger
13,153 Points
Matthieu Belanger
Matthieu Belanger
13,153 Points

I am having the same issued. And when I try the solution

```<?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

it breaks my homepage and nothing loads at all.
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Matthew, make sure to do an endif statement at the end of the content. Maybe you could post your whole code.

Lord Kyei
PLUS
Lord Kyei
Courses Plus Student 63 Points
Lord Kyei
Lord Kyei
Courses Plus Student 63 Points

Having the same issue and when I add the code below, it breaks my homepage.

<?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

Here is my code

<div id="featured" class="clearfix flexslider">

    <ul class="slides">

        <?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(); ?>

        <?php $display = get_field('display_on_homepage'); if ( $display[0] == 'Yes' ): ?>

            <li style="background-color: <?php the_field('background_color'); ?>";>
                <div class="container">
                    <div class="grid_8">
                        <img src="<?php the_field('homepage_slider_image'); ?>" alt="<?php the_title(); ?> Project Screenshot">
                    </div>
                    <div id="featured-info" class="grid_4 omega">
                        <h5>Featured Projects</h5>
                        <h3 style="color: <?php the_field('button_color'); ?>"><?php the_title(); ?></h3>
                        <p><?php the_field('description'); ?></p>
                        <a class="btn blue" style="background-color: <?php the_field('button_color'); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>
                    </div>
                </div>
            </li>

        <?php endwhile; endif; ?>

    </ul>


</div>
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

This line has an extra semicolon after the style attribute before the close of the opening li tag:

<li style="background-color: <?php the_field('background_color'); ?>";>

It should be this: 

<li style="background-color: <?php the_field('background_color'); ?>">

Hopefully this solves your problem. Typically php will throw a blank screen if there is one character out of sync.

Lord Kyei
PLUS
Lord Kyei
Courses Plus Student 63 Points
Lord Kyei
Lord Kyei
Courses Plus Student 63 Points

Thanks Chris, it worked just fine.

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

I can't seem to delete this, but nevermind I fixed my problem.