Light Your Posts: How to Create Featured Posts Section in WordPress

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:

What You Are Going to Build:

screenshot

[ 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.

feature-checkbox

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.

featured-posts

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.

Powered by WPeMatico

Create Custom WordPress Shortcode and Make Your Site User-Friendly

As WordPress introduced the Shortcode API in Version 2.5, a large number of plugins were released to help users add content to posts and pages in a user-friendly way. Although there are five of them already, the need for more shortcodes still continues as more and more plugin and additions of features are being developed. By that, this article is about how to create custom WordPress shortcode.

Shortcodes allow users to add particular styles or features to a site without going to the codes. WordPress have five default shortcodes within the WordPress core, namely:

Understanding Shortcodes

Shortcode API is a simple set of functions for creating macro codes for use in post content. It helps developers to create special kind of content such as forms and content generators, which users can use to attach to a certain post or page.

It usually comes together with themes or plugins. By just inserting something inside square brackets, it will replace that content with some other kind of content, usually being driven by a series of PHP functions.

Shortcode usually comes with this simplest version:

[advertisement]

The Shortcode API makes it easy to create shortcodes that support attributes like this:

[advertisement height=”100” width=”100”]
This is an Add
[/advertisement]

Two Steps Involved in Creating a Shortcode

  1. Building the Primary Handler Function
  2. WordPress Hook for the Handler Function

Although there might be some instances that you need to go beyond these steps, these two are the essential steps to build a shortcode.

Let’s take a look how we can create a custom shortcode for the advertisement theme options created from a previous tutorial about how you can create a theme options.

STEP 1 – Building the Primary Handler Function

The primary handler function will handle all the details and content of the Shortcode. Open up your functions.php file and create the primary function.

function advertisement_1(){
  // Do something here
}

STEP 2 – Adding the Attributes

The name of our function is advertisement_1. Shortcode handlers are generally similar to WordPress filters: they accept parameters (attributes) and return a result (the shortcode output). For this part, add the $atts attribute.

function advertisement_1($atts){
  // Do something here
}

This is the most commonly used attribute which consists of an associative array of attributes or an empty string if no attributes are given.

There are two more parameters that can be passed to the Shortcode callback function:

  • $content – the enclosed content (if the shortcode is used in its enclosing form)
  • $tag – the shortcode tag, useful for shared callback functions

STEP 3 – Creating Shortcode Content

For this tutorial, you’re going to display the content of the theme option advertisement area from this previous tutorial.

There are two advertisements here, the 743 X 82 px and 268 X 268 px banner ads.

Looking into to the process of calling these theme options to the template files, you’ve got the following codes.

<?php $options = get_option( 'theme_settings' ); ?>
<?php echo $options['banner1']; ?>

Now, you need to call these inside your primary function and return the result. Use a variable $output to store the [banner1] option content, which is the 743 X 82 px banner ads content.

function advertisement_1($atts){
$options = get_option( 'theme_settings' );
$output = '<div>' . $options['banner1'] . '</div>';
return $output;
}

Note: As of PHP 5.3, it’s now possible to create an anonymous function but this is not recommended since anonymous functions can’t be removed later by plugins or themes.

For instance, when you distribute your theme, and another developer tries to customize or call it back via a child theme or plugin, it can’t be done. Changes made by an anonymous function is permanent and can’t be revised.

STEP 4 – WordPress Hook for the Primary Function

Next, you need to hook the primary function into the WordPress to associate the shortcode of your theme options. This can be done using the add_shortcode function. Check out the code below.

add_shortcode('advertisement_1', 'advertisement_1' );

The name of the shortcode is exactly the same as primary function for simplification but feel free to set your own name.

So by this time, if you use the [advertisement_1] shortcode the 743 X 82 px banner ads will be display anywhere according to the placement of the shortcode either in post or page.

banner1

Applying the Same Steps on Advertisement 2

It’s actually easy to apply all of these steps on the 2nd banner, which is the 268 X 268 px banner ad. Check out the code below.

function advertisement_2($atts){
$options = get_option( 'theme_settings' );
$output = '<div>' . $options['banner2'] . '</div>';
return $output;
}
add_shortcode('advertisement_2', 'advertisement_2' );

Notice that you have the same set of codes except for the name of the primary function and name of the shortcode inside the hook. You also use the [‘banner2’] option to refer to the 2nd banner and then simply return it using the $output variable.

banner2

Wrapping Up

Congratulations! You just learned how to create a custom shortcode using the theme options elements. I hope you found this tutorial helpful.

If you have any questions or comments or you have other ideas on this topic, feel free to drop a line in the comment section.

Enjoy coding! Don’t forget to subscribe on our newsletter below.

Powered by WPeMatico