WordPress Featured Content Pt 5

Wordpress Featured Content This tutorial is both a continuation of WordPress News ThemeΒ and my WordPress Featured Content Tutorial.

In this tutorial I’ll show you how to turn the previous html / css version of the featured content slider into a WordPress featured content plugin.

You’ll learn how to make a meta box that allows the user to define the featured image they want to associate with their post.

Part of this tutorial comes from the great book Professional WordPress Plugin Development. I wouldn’t have gotten through one of my problems without it.

All of the code used follows the video. Leave any questions or comments below.

Code From the Video




Plugin Name: NTT Featured Content

Plugin URI: http://www.newthinktank.com/wordpress-featured-content-plugin/

Description: It displays a featured content slider on a web page. It was created to show how to create widgets and plugins.


For it to function the Featured Picture must have the same name as the title of the post. That post also must be in the category named Featured.


Version: 2.0

Author: Derek Banas

Author URI: http://www.newthinktank.com

License: GPL3





This program is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation, either version 3 of the License, or

(at your option) any later version.


This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of


GNU General Public License for more details.


You should have received a copy of the GNU General Public License

along with this program. If not, see <http://www.gnu.org/licenses/>.





// __FILE__ reference to the plugin file itself

// The second parameter is the function to call when plugin is activated

register_activation_hook( __FILE__, ‘ntt_featured_content_install’ );


function ntt_featured_content_install()



// Verify that the current wordpress version is at least 3

if ( version_compare( get_bloginfo( ‘version’ ), ‘3.0’, ‘<‘ ) )


// Deactivate your plugin

deactivate_plugins( basename( __FILE__ ) );



// Create a variable that stores the number of featured posts

// Set this to 0 by default

$ntt_featured_images = array(

‘num_featured_posts’ => 0



update_option( ‘$ntt_featured_images’, $ntt_featured_images);






// Called if plugin is deactivated

register_deactivation_hook( __FILE__, ‘ntt_featured_content_uninstall’);


function ntt_featured_content_uninstall()









// When wordpress checks to see if anything should be added to the editing

// screens my function is called to create the meta box

add_action( ‘add_meta_boxes’, ‘ntt_mbe_image_create’ );


function ntt_mbe_image_create() {


// add_meta_box tells wordpress to display a meta box

// 1st parameter: the div id that surrounds the meta box

// 2nd parameter: the name displayed for your meta box

// 3rd parameter: function that displays your meta box

// 4th parameter: the page to display your meta box on (‘post’, ‘page’)

// 5th parameter: where to display the meta box (‘normal’, ‘side’)

// 6th parameter: priority of meta box (‘high’, ‘low’)

// 7th parameter: arguments to pass to the function above if any


add_meta_box( ‘ntt-image-meta’, ‘Set Image’, ‘ntt_mbe_image_function’, ‘post’, ‘normal’, ‘high’ );






function ntt_mbe_image_function( $post ) {


// Outputs a message to the user

echo ‘Define your Featured Content Image Here. The dimensions of the image must be 576 × 240! <br /><br />To display the Featured image don\’t forget to mark this post under Featured in your categories.’;


// Check if a meta value has already been assigned for the featured image

// get_post_meta returns a value from a custom field

$ntt_mbe_image = get_post_meta( $post->ID, ‘_ntt_mbe_image’, true );



<!– Creating the input field for the featured image

esc_url() sanitizes the image url and encodes HTML entities –>

<input id=”ntt_mbe_image” type=”text” size=”75″ name=”ntt_mbe_image” value=”<?php echo esc_url( $ntt_mbe_image ); ?>” />

<input id=”upload_image_button” type=”button” value=”Media Library Image” class=”button-secondary” /> <br />






// When the post is saved call my function

add_action( ‘save_post’, ‘ntt_mbe_image_save_meta’ );


function ntt_mbe_image_save_meta( $post_id ) {

//verify the metadata is set

if ( isset( $_POST[‘ntt_mbe_image’] ) ) {


// update_post_meta() updates the value of the image

// esc_url_raw() sanitizes the url but doesn’t encode HTML entities

update_post_meta( $post_id, ‘_ntt_mbe_image’, esc_url_raw( $_POST[‘ntt_mbe_image’] ) );






// admin_print_scripts-post.php displays the post editor

// This is saying to call the custom function when the post editor is loaded

add_action(‘admin_print_scripts-post.php’, ‘ntt_mbe_image_admin_scripts’); add_action(‘admin_print_scripts-post-new.php’, ‘ntt_mbe_image_admin_scripts’);


function ntt_mbe_image_admin_scripts() {


// wp_enqueue_script is used to embed javascript into a page

// The array contains built in wordpress scripts that the javascript needs // to work

wp_enqueue_script( ‘ntt-image-upload’, plugins_url( ‘/NTTFeaturedContent2/ntt-meta-image.js’ ), array( ‘jquery’,’media-upload’,’thickbox’ ) );



jQuery(document).ready(function($) {


var formfield = null;


$(‘#upload_image_button’).click(function() {



// Get the value of the attribute name for the featured image

formfield = $(‘#ntt_mbe_image’).attr(‘name’);


// Creates a popup that displays the media upload form using thickbox

tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);

return false;



// user inserts file into post.

//only run custom if user started process using the above process

// window.send_to_editor(html) is how wp normally handle the received data


// Overrides the send_to_editor function that will try to insert the image // into a post. My function is called instead

window.original_send_to_editor = window.send_to_editor; window.send_to_editor = function(html){

var fileurl;


// Check if the image has a name attribute defined

// If so get the source url for that image

// Place that url in the value for the image

// Close the Thickbox popup

if (formfield != null) {

fileurl = $(‘img’,html).attr(‘src’); $(‘#ntt_mbe_image’).val(fileurl);




formfield = null;

} else {


// Resets the original send_to_editor functionality







10 Responses to “WordPress Featured Content Pt 5”

  1. Raphael says:

    Great tutorials.

    I’ve been thinking you should make a series of videos about desktop application programming, which is something that almost nobody talks about.

    Congratulations for your videos.

  2. Jamie says:

    Seriously, thee’ best video I’ve ever seen on creating a Featured Content Slider. Thanks for the level of detail and cutting out all the other side chatter when explaining how to do this.

    I stumbled across your tutorial and watched them all and actually LEARNING something new and something i wanted to learn.

    Most people giving tutorials online tend to make the bad choice of playing music, getting off topic or not sticking to what’s at hand… the specifics.

    Thanks Derek. I am a fan of the site and have bookmarked it. What a time saver/ life saver this video series was. I can’t wait to checkout more.

    Again, thank you.

    And yes…. ill be posting the same msg on your youtube so other know what gem these video(s) are.

    • admin says:

      Thanks a bunch πŸ™‚ Videos like this are aimed at such a small audience. As you can probably tell I don’t make videos to get a bunch of views. I’m trying to do useful videos that haven’t been done. Because those with the ability to create WordPress themes and plugins are in such high demand in the workforce I’ve done my best to teach everything on the subject. I’m glad you like it

  3. Sev says:

    Thanks for your videos. I may be a bit behind, but I just followed your video and created an ‘Include Image’ metabox for a custom plugin. The plugin activates with “The plugin generated 5 characters of unexpected output during activation.”, which I cannot make much sense of.

    Even worse, though, clicking the upload button to include a picture Firefox tells me “Component returned failure code: 0x804b0002 (NS_BINDING_ABORTED) [nsIWebNavigation.reload]”. Do you have any idea, where I have gone wrong? I have the code pretty much word for word…


  4. Rodrigo says:

    Hi, thanks for your awesome tutorials! πŸ™‚
    I’m trying to test your code in my WordPress and when i try to active the plugin, it gives my this error:

    Parse error: syntax error, unexpected T_DNUMBER in /Users/rodrigo/Sites/merci.cheri/wp-content/plugins/ntt_featured_content.php on line 81

    if ( version_compare( get_bloginfo( β€˜version’ ), ’3.0β€², β€˜<’ ) )

    i have WordPress 3.4.2

    Thanks for your help.


    • admin says:

      This usually indicates a missing opening or closing curly brace or a missing line-ending semi-colon. Did you copy the code directly from my site?

      • Rodrigo says:

        Hi, thanks for answer me.
        I found the solution with the file .zip in the last tutorial, and now it’s working.
        The code that you have here, in this page, has some errors with opening and closing
        But your tutorials are the best !
        Keep going i’m learning a lot with you, thanks !

        • admin says:

          Thank you πŸ™‚ I do my best. Feel free to pass any errors you are getting. On occasion WP makes changes that break a small piece of the code, but it is normally easily fixed

Leave a Reply

Your email address will not be published.