[Synthesizing WP Blog Post #4] WP_Query II: Featured Posts

[Synthesizing WP Blog Post #4] WP_Query II: Featured Posts


In last tutorial we showed some advanced WP_Query techniques. Here we apply them to display featured posts. Displaying featured posts is a good way to enhance your site’s values by making your well-written posts easy to find.

Design Plan

We want to design our featured posts as follows:

  1. Manual featured posts: each category can manually specify at most 3 featured posts.
  2. Automatic featured posts: each post has an option to be labeled as “is_featured”.
  3. At each category page it first displays manual featured posts (at right order). If there are less than 3 manual featured posts the program randomly chooses posts labeled as “is_featured” so total number of featured posts is 3.
  4. No duplication.

Implementation: Steps

To meet our featured posts design goal, here are the implementation steps:

  1. Add custom fields of 'featured_post_id_1', 'featured_post_id_2', 'featured_post_id_3' of integer type to each category.
  2. Add custom field of 'is_featured' of true/false type to each post.
  3. At 'category.php', get valid manually specified featured post IDs.
  4. If less than 3 manually specified featured posts, do WP_Query to randomly get featured posts’ IDs ('is_featured' = true) to make the featured post number to 3. Make sure no post duplication.
  5. Get post data. Use Bootstrap’s carousel to display featured post’s (1) featured image (2) title. Also use post’s url for link to the post.

Custom Fields Addition (Steps 1 and 2)

(For a review about using Advanced Custom Fields plugin see this previous tutorial.)

Add Featured Post ID to Category

wp custom field featured post id

Featured Post ID #s for category. Important thing is the “Number” type and the Location Rules.

Here are the important settings for fields 'featured_post_ID_#':

  • Field Type: Number. This is because we need integer type for post ID.
  • Required: No.  So we can left it blank if we don’t want to specify.
  • Step Size: 1. So we force users to input integers.
  • Location rules: ‘Taxonomy Term' 'is equal to' 'Categories'

Add is_featured checkbox to Post

wp custom field is_featured checkbox

‘is_featured’ field for every wordpress’ post.

Here are the important settings for the field 'is_featured':

  • Field Type: True/False. This is because we simply need a checkbox (binary).
  • Required: No.  For a True/False type custom field, ‘required’ means it has to always be True, which is not we want.
  • Location rules: ‘Post Type' 'is equal to' 'Post'.

category.php Codes (Steps 3 and 4)

Here is the part in category.php that is related to featured posts:

Line 2 and 4: preparation

Get this category’s id and initialize an empty array $featured_IDs used to contain featured posts IDs.

Line 6 to 16: getting valid manual featured post IDs

The loop (line 7) loops over value $i from 0 to 2. It first get the right field name $field_name (line 8), use it to get the custom field value $feat_ID (line 9).

The value is tested against for several condition:

  • not null
  • larger than zero
  • a valid post ID
  • post is published (line 10).

The last two conditions are done by function get_post_status(...).

If the value passes the test, it is pushed into $featured_IDs (line 11). Finally duplication is removed by two functions combiniation array_valus(array_unique(...)) (line 16).

Line 18 to 39: adding random featured posts

If the array $featured_IDs length is less than 3 (line 19), the code tries to add more IDs from posts with “is_featured” set to ‘1’ (default value for ‘true’).

To do so, it first construct the WP_Query arguments as mentioned in the last tutorial (line 20-30). Th conditions are as follows:

  • WordPress 'post' type (line 21).
  • Published posts (line 22).
  • With current category (line 23).
  • With custom field 'is_featured' set to '1' (line 24,26).
  • Exclude manual featured posts (line 25).
  • Random order (line 27).
  • Maximal 3 posts (line 28).
  • Only get post IDs (line 29).

Then it constructs the new WP_Query object (line 30) and gets the post IDs from it (line 31). Finally adequate amount of these IDs (line 35) are appended to the $featured_IDs array (line 36-38).

Line 41 to 42: get posts from post IDs

The reason why we first check if $featured_IDs is empty is due to function get_post‘s default behavior. Without passing any argument to get_post(...) it returns the post object based on global $post variable.

If $featured_IDs is not empty, using PHP function array_map(...) ensures we get posts as the same order as the post IDs.

Carousel Codes (Step 5)

Here is the part in category.php that displays featured posts using Bootstrap’s carousel:

Line 1 and 2: Preparation

The carousel is shown only when the posts array $featured_posts is not empty (line 1). The carousel’s HTML id is set (line 2) to prevent multiple carousels having the same id.

Line 5-7: Carousel Header (not displayed in my site)

Line 9-61: Main Bootstrap carousel codes

Line 10-20: Carousel indicators

Bootstrap carousel indicator part

Indicators (specified by class "carousel-indicators" in line 10 ) are the white circles at the bottom middle. Tag <ol> (line 11,20) represents the ordered list and is used with <li> tags, which are generated by the for loop (line 13).

All the data- attributes (line 14) follow Bootstrap’s example. The first <li> tag has the class "active" so Bootstrap knows to first mark this tag.

Line 21-47: Main carousel content

This section displays the main carousel content (specified by class "carousel-inner" at line 22). Each content is grouped by the <item> tag (line 31). Like indicators these tags are generated by the for loop (line 24).

To prepare featured post’s content, we get the post (line 25) and from it get image (line 27), post url (line 28) and title (line 40). We also prepare the active class for the first <item> tag (line 26).

We then start putting post content inside <item> tag. Texts are put inside a container, then a <div> with class 'carousel-caption' (line 35-43).

The url-spanning trick (line 33) is described in this previous tutorial.

Line 49-59: Two-side previous/next arrow buttons

Bootstrap carousel buttons section

The two <a> tags represent the two arrow buttons for users to switch to next/previous post content. The codes follow Bootsrap’s template, and the only place to customize is the href attribute (line 50,56), which should point to the carousel (via id, thus the '#' sign).

The arrow shape is specified by Bootstrap’s glyphicon (line 51,57), which you can also customize.