1stwebdesigner

---

Light Your Posts: How to Create Featured Posts Section in WordPress Posted: 17 Oct 2014 06:00 AM PDT WordPress is a very powerful CMS. What is great about this is that it can be customized to the way you want it to be. You can add features and edit design and even create featured posts section in just a few minutes. There are features that you can see on the widgets area to display like the categories, the latest posts and archive posts. But what if you want to highlight some posts to your readers on your site? This is commonly known as “Featured Posts Content” or “Featured Posts Section“. It’s not a default feature that you can see on the WordPress “stock” installation. The good news is it can be added. In this article,you are going to learn how you can add a Featured Section on your WordPress site. Note: You will not focus on the design of the featured section here. Instead, you will be focusing on the implementation side of this tutorial. But please feel free to edit the CSS and customize the design the way you want it to be. Resources You Need to Complete This Tutorial: WordPress Installation Knowledge about WordPress Codex and PHP Time and Patience What You Are Going to Build: [ DOWNLOAD THE FINAL VERSION ] Getting Started A simple dummy WP theme called Test-theme was used in this tutorial. It is consists of a series of WP template files (but not complete) just for the sake of displaying featured posts. You can download it here if you want or you can use any other theme to go along with this tutorial. This tutorial will focus on following features: Creating a meta box (checkbox) on pages/posts Saving the meta box information Displaying the Featured posts on the front page Let's start! STEP 1 – Creating a Meta Box (Checkbox) on Pages/Posts Open functions.php, and add the following function to register a checkbox meta box. This function will create and display a meta box on pages/posts edit screen in a form of check box. function add_featured_meta_box($post){ $featured = get_post_meta($post->ID, '_featured-post', true); echo "<label for='_featured-post'>".__('Feature this post?', 'foobar')."</label>"; echo "<input type='checkbox' name='featured-post' id='featured-post' value='1' ".checked(1, $featured)." />"; } If users want to add posts to the Featured Section on the front page or any page, they can simply tick the check box. But for now, it won’t save the data yet since you did not add the function to save the data of the meta box. STEP 2 – Saving the Meta Box Information Once again open functions.php, and add the following snippets under the add_featured_meta_box function. function save_featured_meta($post_id){ // Do validation here for post_type, nonces, autosave, etc... if (isset($_REQUEST['featured-post'])) update_post_meta(esc_attr($post_id), '_featured-post', esc_attr($_REQUEST['featured-post'])); // I like using _ before my custom fields, so they are only editable within my form rather than the normal custom fields UI } add_action('save_post', 'save_featured_meta'); These codes will check if the featured-post was set. It will update or save the data to the database using the update_posts_meta function. This function will update value of an existing meta key (custom field) for the specified post. The first thing this function will do is make sure that $meta_key already exists on $post_id. If it does not, add_post_meta($post_id, $meta_key, $meta_value) is called instead and its result is returned. STEP 3 – Displaying the Featured Posts on the Front Page Now for this part of the tutorial, you're going to display the featured posts on the front page. To do this, copy the snippets below on your preferred WP template file and position. In this tutorial, codes on the index.php file located at the sidebar have been added. <h2>Featured Posts</h2> <?php $args = array( 'posts_per_page' => 5, 'meta_key' => '_featured-post', 'meta_value' => 1 ); $featured = new WP_Query($args); if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post(); ?> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h3> <p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p> <?php if (has_post_thumbnail()) : ?> <figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'box')); ?></a> </figure> <p ><?php the_excerpt();?></p> <?php endif; endwhile; else: endif; ?> This code will simply parse the array of the number of featured posts to display, the ID and the value. Then using WP_Query, you will with the intricacies of a posts (or pages) request to a WordPress about our featured posts. Finally, you will loop the featured posts on the sidebar and get the details like the title, permalink, author, excerpt and so on. Note: CSS has been added on the dummy theme created; however, you can change it the way you want it to be. If you are going to check the front page, you will get result similar to the image below. Conclusion Congrats! You have successfully created your very first featured posts section using WordPress meta box and some functions. If you are not comfortable doing all this, you can use a plugin like TSP Featured Posts and Featured Posts Widget. I hope this tutorial will be useful for you. If you have any way other than this to display a featured posts section please share it with us on the comment section.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610