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 How to Build a WordPress Theme Content Strategy with WordPress Adding Custom Content to the Site

Jon W
Jon W
6,185 Points
Posted by Jon W
Jon W
6,185 Points

"Display on Homepage Slider" custom field checkbox

I'm trying to figure out how Zac uses this custom field to determine whether a project should appear on the homepage. I'm looking at front-page.php and I don't see it being referenced in the loop query. I've gone through some of the videos and can't find where he covers this part.

Most likely I just missed this part when watching the videos but can anyone help? Thanks.

3 Answers

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

If I remember correctly, Zac initially forgot to include this part in the screencasts and posted in a forum on the same topic. My code for this is below I have included the whole middle section. This comes from Zac Gordon:

<?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 Project</h5>

                                <h3 style="color:<?php the_field( 'button_color'); ?>"><?php the_title(); ?></h3>

                                <p><?php the_field( 'description' ); ?></p>

                                <a class="btn" style="background-color: <?php the_field( 'button_color' ); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>

                            </div>

                        </div>

                    </li>
                <?php endif; ?>
            <?php endwhile; endif; ?>
Jon W
Jon W
6,185 Points
Jon W
Jon W
6,185 Points

Brilliant, thanks Chris! I didn't know how to evaluate whether the box had been checked or not. Now I do.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

No problem! It's been a while since I've done this course, but I still had my code! I wish I could find the original forum post but the Treehouse forum was probably getting too cluttered.

Adrie Silva
PLUS
Adrie Silva
Courses Plus Student 535 Points
Adrie Silva
Adrie Silva
Courses Plus Student 535 Points

Hi I am having issues with my flexslider.

My flexslider shows up without that extra php code but then it's just going to show every project I post.

here is my website

I currently have the code as follows:

            <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_slider'); if( $display[0] == "Yes" ) : ?>
            <li>
                <div class="container">
                    <div class="grid_8">
                        <img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_title(); ?> Project Screenshot">
                    </div>
                    <div id="featured-info" class="grid_4 omega">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field( 'description' ); ?></p>
                        <a class="btn" href="<?php the_permalink(); ?>">View Project</a>
                    </div>
                </div>
            </li>
        <?php endif; ?>
        <?php endwhile; endif; ?>
    </ul>
</div>

I renamed my custom field types to "display_on_slider" and "slider_image" and I've checked Yes on one of my work projects to display in the flexslider.

What could be the issue?

Jon W
Jon W
6,185 Points
Jon W
Jon W
6,185 Points

Hi Adrie. So you mean before putting in the code, all project show up fine, but if you put it in, nothing shows up at all?

I have added the code to my template as suggested by Chris, and it works fine for for me. I tested it by unchecking Yes and it correctly removes the project from display.

My code pretty much looks the same as yours, except I'm not using Flexslider as I'm just displaying my featured projects in a grid. But the loop, the IF condition are exactly the same. How odd.

You can try putting in a test just to see what the value of the field is. Put this in your loop:

<?php $test = get_field('display_on_slider'); echo $test[0]; ?>

Does it return a "Yes" whenever it goes through the loop?

Adrie Silva
PLUS
Adrie Silva
Courses Plus Student 535 Points
Adrie Silva
Adrie Silva
Courses Plus Student 535 Points

Hi there, I did get a "Yes", you can find it on the site: http://dreamtounite.com/adriesilva/portfolio/

But I'm now wondering if it's something to do with the theme.js file? Although I'm sure it's exactly as the code featured in the video tutorials. hm.. I'm sure I've missed something. 

          jQuery(document).ready(function($) {
    $('.flexslider').flexslider();
});
    ```