- Design Plan
- Implementation: Steps
- Custom Fields Addition (Steps 1 and 2)
- category.php Codes (Steps 3 and 4)
- Line 2 and 4: preparation
- Line 6 to 16: getting valid manual featured post IDs
- Line 18 to 39: adding random featured posts
- Line 41 to 42: get posts from post IDs
- Carousel Codes (Step 5)
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.
We want to design our featured posts as follows:
- Manual featured posts: each category can manually specify at most 3 featured posts.
- Automatic featured posts: each post has an option to be labeled as “is_featured”.
- 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.
- No duplication.
To meet our featured posts design goal, here are the implementation steps:
- Add custom fields of
'featured_post_id_1', 'featured_post_id_2', 'featured_post_id_3'of integer type to each category.
- Add custom field of
'is_featured'of true/false type to each post.
'category.php', get valid manually specified featured post IDs.
- 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.
- 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
Featured Post ID #s for category. Important thing is the “Number” type and the Location Rules.
Here are the important settings for fields
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'
is_featured checkbox to Post
‘is_featured’ field for every wordpress’ post.
Here are the important settings for the field
Field Type: True/False. This is because we simply need a checkbox (binary).
Required: No.For a
True/Falsetype 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
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:
'post'type (line 21).
- Published posts (line 22).
- With current category (line 23).
- With custom field
- 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
$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
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).
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
<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
The arrow shape is specified by Bootstrap’s glyphicon (line 51,57), which you can also customize.