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 From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Landing Page

Can the landing page have featured posts?

Hi

I have adapted the portfolio page to display riders profiles for a bike ride.

Is it possible to have a featured post? I need to be able to always have the three profiles appearing first.

Thanks David

5 Answers

Kevin Korte
Kevin Korte
28,148 Points

Sticky posts will probably get the job done.

http://codex.wordpress.org/Sticky_Posts

Thanks Kevin. Just had a look at Sticky Posts.

Doesnt look like it works with custom posts types.

Is there anything else out there that does this but works with custom post types?

Kevin Korte
Kevin Korte
28,148 Points

Are you using the WP_Query class for your custom post types? I would assume so.

Yes, looks like I am.

This is my code Kevin :)

<?php

/*
  Template Name: Full Riders Grid Template
*/

?>

<?php get_header(); ?>

<!-- Jumbotron -->
<div class="jumbotron">
  <div class="container">
    <h1><?php the_title(); ?></h1>
  </div>
</div>

<div class="container">

  <!-- Content -->
  <section>
  <div class="row">
    <div class="col-sm-12 col-md-12">

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

        <?php the_content(); ?>

      <?php endwhile; else: ?>

        <div class="pageheader">
          <h1>Oh no!</h1>
        </div>

        <p>No content is appearing for this page</p>

      <?php endif; ?>

    </div>

  </div>

  <div class="row">

    <?php 
      $args = array(
        'post_type' => 'fullrider'
      );
      $the_query = new WP_Query( $args );

    ?>

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

    <div class="col-sm-3 fullrider-piece">

      <?php 
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true ); 
      ?>

      <p>
        <a href="<?php the_permalink(); ?>">
          <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?>">
          </a>
      </p>
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

    </div>

    <?php $fullrider_count = $the_query->current_post + 1; ?>
    <?php if ( $fullrider_count % 4 == 0 ): ?>

    </div>
    <div class="row">

    <?php endif; ?>

    <?php endwhile; endif; ?>

  </div>

  </section>
  <!--/ Content -->

</div>
<!--/ Container -->        

<?php get_footer(); ?>
Kevin Korte
Kevin Korte
28,148 Points

Okay, so...this is entirely untested by me, but in the example they are passing in a post__in argument to the WP_ Query. Further, if you look at the documentation on the WP_ Query class, and search the page for "post_in" you should find it about 1/3 of the way down the page, under Post & Page Parameters, there is a ```post_in``` that accepts an array of post IDs that are sticky.

The codex example is like so:

$args = array(
    'posts_per_page' => 1,
    'post__in'  => get_option( 'sticky_posts' ),
    'ignore_sticky_posts' => 1
);
$query = new WP_Query( $args );

I'd be tempted to try this first before going to a plugin on something else.

Just tried that by adding but cant get it to work

<?php 
      $args = array(
        'post_type' => 'fullrider',
        'post__in'  => get_option('517')
      );
      $the_query = new WP_Query( $args );
?>

Does this look correct? Should there be a visibility option in the editor when Im in the post?

Kevin Korte
Kevin Korte
28,148 Points

No, I assume that "517" is the post id, which you wouldn't pass to the get_option function.

But...I just re-read the documentation, Yeah, I see that this isn't going to work. It'll work with WP_ Query but only with the post type is post, and now that I see your code, that's clearly not the case. You were right here.

So...

First thing that comes to mind is maybe using a custom field, a simple radio "Yes" "No" would probably be fine, where on each custom post you can have the author decide if this post is a sticky or not.

Than, for this loop, you would first query for the posts that have that custom field set to TRUE, and than show those posts. Than you could reset and show posts that have that field set to FALSE, basically giving you a sticky post functionality.

Thanks Kevin. I'll give that a try and let you know how I get on! Thanks

An easy way would to group stuff using taxonomy or categories instead of 'post__in' => get_option('517').

So if I create a taxonomy or category called "sticky" or "featured" I could set the page to display those first?

Yeah definately let me know if you are having issues with the code. l am more than happy to help.

Kevin Korte
Kevin Korte
28,148 Points

So here is a question about how your loop might work?

  1. Will there always be 3 sticky profiles?
  2. Could there ever be more than or less than 3?
  3. After your sticky posts, do you want the rest of the posts displaying in the loop as normal?

Hi Kevin

Here are some answers to your questions

  1. No it could vary
  2. For this project there will be two. For other projects there could be more than 3
  3. Yes. Just to display as normal after sticky posts

Thanks David

Kevin Korte
Kevin Korte
28,148 Points

Okay, here is what I would be tempted to do. I'm am all ears if somebody has a better way to do this...so here goes my way.

I'd probably use the Advanced Custom Fields plugin. Yes, a default wordpress category would work here too. But the benefit of usine ACF is that you can require that the author chooses whether a new post is a sticky post or not before the post is submitted. With a category, (you can't require, not without a another plugin or custom plugin) that the author gave the post a category, and if they didn't, the post would be excluded from the loop...not ideal.

With the ACF plugin, I'd attach a true / false field to your custom post type. Name it what you want, just be consistent with the name through your code.

Now your loop.

I think I'd run two queries. My concern here is load time. But I'm not sure how else to do this. You'll have to see if load time is an issue here, this may be database intensive. If load time is, you could probably choke up on how many posts it initially loads, and than ajax load the rest of the posts you want off screen in the background. That shouldn't be too hard, and be there is a plugin to help do that. Basically ajax your pagination.

So your loop code might look like

//Args first for sticky posts
$sticky_args = array(
  'post_type' => 'your_post_type_name',
  'meta_query' => array(
    array(
      'key' => 'acf_field_name',
      'value' => 1 //a value of 1 is going to be true
      'compare' => '=',
     //query your custom post type where posts have a your acf field name is equal to true, we know these are sticky posts

    ),
  ),
  //add more WP_Query arguments as needed
);

$sticky_query = new WP_Query( $sticky_args );
//now finish running your loop here like normal.

and the non-sticky posts is almost the same, except for we loop for posts that have your acf field name set to false.

//Args first for sticky posts
$no_sticky_args = array(
  'post_type' => 'your_post_type_name',
  'meta_query' => array(
    array(
      'key' => 'acf_field_name',
      'value' => 1 //a value of 1 is going to be true
      'compare' => '!=',
     //query your custom post type where posts have a your acf field name is equal to false, we know these are not sticky posts

    ),
  ),
  //add more WP_Query arguments as needed
);

$no_sticky_query = new WP_Query( $no_sticky_args );
//now finish running your loop here like normal.

This is all untested, and I've been know to make a mistake here or there....but this is the direction I'd head.

Now for the documentation:

  1. ACF: http://www.advancedcustomfields.com/resources/true-false/
  2. WP: http://codex.wordpress.org/Class_Reference/WP_Query

For the WP Codex, go way down, like 4/5ths of the way down the page, and find the section titled "Custom Field" Parameters". Read from there down. You should be able to use your ACF fields as custom field parameters in the WP Query arguments. I think I've done it before.

Hi Kevin

I've added the ACF and code you suggested. I think I'm now having trouble calling the posts. Sorry I'm a bit new to actually coding with Wordpress and PHP in general.

My code is now

<?php 
      //$args = array(
      //  'post_type' => 'fullrider',
      //  'post_per_page' => 10
      //);
      //$the_query = new WP_Query( $args );

      //Args first for sticky posts
      $sticky_args = array(
        'post_type' => 'featured_profile',
        'meta_query' => array(
          array(
            'key' => 'fullrider',
            'value' => 1, //a value of 1 is going to be true
            'compare' => '=',
           //query your custom post type where posts have a your acf field name is equal to true, we know these are sticky posts

          ),
        ),
        //add more WP_Query arguments as needed
      );

      $sticky_query = new WP_Query( $sticky_args );
      //now finish running your loop here like normal.

      //Args first for sticky posts
      $no_sticky_args = array(
        'post_type' => 'featured_profile',
        'meta_query' => array(
          array(
            'key' => 'fullrider',
            'value' => 1, //a value of 1 is going to be true
            'compare' => '!=',
           //query your custom post type where posts have a your acf field name is equal to false, we know these are not sticky posts

          ),
        ),
        //add more WP_Query arguments as needed
      );

      $no_sticky_query = new WP_Query( $no_sticky_args );
      //now finish running your loop here like normal.

    ?>

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

    <div class="col-sm-3 fullrider-piece">

      <?php 
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true ); 
      ?>

      <p>
        <a href="<?php the_permalink(); ?>">
          <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?>">
          </a>
      </p>
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

    </div>

    <?php $fullrider_count = $the_query->current_post + 1; ?>
    <?php if ( $fullrider_count % 4 == 0 ): ?>

    </div>
    <div class="row">

    <?php endif; ?>

    <?php endwhile; endif; ?>

I've tried

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

and

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

to see if any posts display but I get a blank screen.

Have you any ideas?

Thanks David

you get a blank screen because the code is wrong. What are you actually using the acf for in this instance?

Hi

I spotted that the post type and ACF value were the wrong way round so I've corrected them but it makes no difference to the page.

I'm using ACF because it was used in the Wordpress course that I'm following. Also Kevin suggested it.

Can you see where its going wrong here?

<?php 
      //$args = array(
      //  'post_type' => 'fullrider',
      //  'post_per_page' => 10
      //);
      //$the_query = new WP_Query( $args );

      //Args first for sticky posts
      $sticky_args = array(
        'post_type' => 'featured_profile',
        'meta_query' => array(
          array(
            'key' => 'fullrider',
            'value' => 1, //a value of 1 is going to be true
            'compare' => '=',
           //query your custom post type where posts have a your acf field name is equal to true, we know these are sticky posts

          ),
        ),
        //add more WP_Query arguments as needed
      );

      $sticky_query = new WP_Query( $sticky_args );
      //now finish running your loop here like normal.

      //Args first for sticky posts
      $no_sticky_args = array(
        'post_type' => 'fullrider',
        'meta_query' => array(
          array(
            'key' => 'featured_profile',
            'value' => 1, //a value of 1 is going to be true
            'compare' => '!=',
           //query your custom post type where posts have a your acf field name is equal to false, we know these are not sticky posts

          ),
        ),
        //add more WP_Query arguments as needed
      );

      $no_sticky_query = new WP_Query( $no_sticky_args );
      //now finish running your loop here like normal.

    ?>

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

    <div class="col-sm-3 fullrider-piece">

      <?php 
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true ); 
      ?>

      <p>
        <a href="<?php the_permalink(); ?>">
          <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?>">
          </a>
      </p>
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

    </div>

    <?php $fullrider_count = $the_query->current_post + 1; ?>
    <?php if ( $fullrider_count % 4 == 0 ): ?>

    </div>
    <div class="row">

    <?php endif; ?>

    <?php endwhile; endif; ?>

Thanks David