Should I use custom menu, C.P.T. or theme options, or something else for this?

Question

On my website, I’ve used Custom Post Types to achieve a slightly more complex version of what you’re trying to do.

Front-end

My requirements were;

Rich text on title
JavaScript animation to flick between “Featured Items” (not covered here)
Ability to edit the featured items easily from the back-end for admin users
Ability to hyperlink the featured items to anything at all on our website, be it an article; blog; news post; species profile or glossary entry

I decided that CPTs were the way forward; this is the interface I’ve developed in the admin area of our somewhat-bespoke WP install.

Admin area

The code for the Custom Post Type itself is fairly straightforward. I created a folder in my plugins directory called sf-featured-items and created a similarly-named php file.

Here is the full code. It looks a lot more complex than it actually is!

<?php
/*
   Plugin Name: Seriously Fish: Featured Items
   Plugin URI: http://dunc.seriouslyfish.com
   Description: This plugin allows administrators to control the "Featured.." banner on index.php of Seriously Fish.
   Version: 0.1
   Author: Duncan Wraight
   Author URI: http://dunc.seriouslyfish.com
   License: GPL2

   Copyright 2012  DUNCAN WRAIGHT  (email : [email protected])

   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License, version 2, as
   published by the Free Software Foundation.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   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, write to the Free Software
   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

if (!class_exists('FeaturedItem')) :

class FeaturedItem {

    var $plugin_url;

    function FeaturedItem()
    {
    $this->plugin_url = trailingslashit(plugins_url('sf-featured-items'));
    }

    function enqueue_scripts() {
        /* start of replacement tinyMCE instance
        wp_register_script('cleditor', $this->plugin_url .'cleditor/jquery.cleditor.min.js', array('jquery'));
    wp_enqueue_script('cleditor'); */
    }

    function enqueue_styles() {
        /* Image upload styles
    wp_enqueue_style('thickbox'); */
    }

    function register_featured_item(){

        $labels = array(
          'name' => _x('Featured Item', 'post type general name'),
          'singular_name' => _x('Featured Item', 'post type singular name'),
          'add_new' => _x('Add New', 'profile'),
          'add_new_item' => __('Add New Featured Item'),
          'edit_item' => __('Edit Featured Item'),
          'new_item' => __('New Featured Item'),
          'view_item' => __('View Featured Item'),
          'search_items' => __('Search Featured Items'),
          'not_found' =>  __('No featured items found'),
          'not_found_in_trash' => __('No featured items found in Trash'),
          'parent_item_colon' => '',
          'menu_name' => 'Featured'

        );
        $args = array(
          'labels' => $labels,
          'public' => true,
          'publicly_queryable' => false,
          'exclude_from_search' => true,    
          'show_ui' => true,
          'show_in_menu' => true,
          'query_var' => true,
          'rewrite' => false,
          'capability_type' => 'post',
          'has_archive' => false,
          'hierarchical' => false,
          'menu_position' => 50,
          'menu_icon' => $this->plugin_url . 'images/star.png',
          'supports' => array('title','editor','thumbnail')
        );

        add_filter('post_updated_messages', 'featured_items_updated_messages');

        function featured_items_updated_messages( $messages ) {
            global $post, $post_ID;

            $messages['species'] = array(
                0 => '', // Unused. Messages start at index 1.
                1 => sprintf( __('Featured item updated. <a href="https://wordpress.stackexchange.com/questions/56289/%s">View</a>.'), esc_url( get_permalink($post_ID) ) ),
                2 => __('Custom field updated.'),
                3 => __('Custom field deleted.'),
                4 => __('Featured item updated.'),
                /* translators: %s: date and time of the revision */
                5 => isset($_GET['revision']) ? sprintf( __('Featured item restored to revision from %s.'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
                6 => sprintf( __('Featured item published. <a href="https://wordpress.stackexchange.com/questions/56289/%s">View</a>.'), esc_url( get_permalink($post_ID) ) ),
                7 => __('Featured item saved.'),
                8 => sprintf( __('Featured item submitted. <a target="_blank" href="https://wordpress.stackexchange.com/questions/56289/%s">Preview</a>.'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
                9 => sprintf( __('Featured item scheduled for: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview</a>.'),
                // translators: Publish box date format, see http://php.net/date
                date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
                10 => sprintf( __('Featured item draft updated. <a target="_blank" href="https://wordpress.stackexchange.com/questions/56289/%s">Preview</a>.'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
            );

            return $messages;
        }

        register_post_type('featured-item', $args);
    }

    function meta_link(){
        global $post;

        if ($post->ID) {
            $link_to_post = get_post_meta( $post->ID , 'link_to_post', TRUE );
        }

        ?>

    <?php wp_nonce_field( plugin_basename( __FILE__ ), 'sf_featured_noncename' ); ?>
    <div class="meta_control">
        <p>Make sure you use the permalink (i.e. written link) rather than the short link (numeric).</p>
        <input type="text" name="link_to_post" class="range" value="<?php if (isset($link_to_post)) { echo esc_attr($link_to_post); } ?>" />
    </div>
        <?php
    }

    function register_featured_meta(){
        add_meta_box("link_to_post", "Link to Post", array($this, 'meta_link'), "featured-item", "normal", "core");
    }

    function update_featured_meta(){
        global $post;

        if ($post) {
            if($post->post_type != 'featured-item')
                return;

            if ( !wp_verify_nonce( $_POST['sf_featured_noncename'], plugin_basename( __FILE__ ) ) )
                return;

            // Taxonomy meta
            update_post_meta( $post->ID, "link_to_post", $_POST["link_to_post"] );
        }
    }

}

else :
    exit("Class FeaturedItem already exists.");
endif ;

/* INSTANCE CLASS */
if (!isset($FeaturedItem)) {
    $FeaturedItem = new FeaturedItem();
}

if (isset($FeaturedItem)) {
    add_action( 'init' , array (&$FeaturedItem, 'register_featured_item' ));
    add_action( 'admin_enqueue_scripts', array (&$FeaturedItem, 'enqueue_scripts' ));
    add_action( 'admin_enqueue_scripts', array (&$FeaturedItem, 'enqueue_styles' ));
    add_action( 'admin_init' , array( &$FeaturedItem, 'register_featured_meta' ));
    add_action( 'save_post' , array( &$FeaturedItem, 'update_featured_meta' ));
}


?>

The added complexity is something which you may not need – the link to the article. Looking back, I could’ve left this off entirely and simply used the rich text editor’s built-in hyperlinking function.

The code for the front-end is quite simple too:

create a secondary post query (WP_Query)
retrieve posts of only type featured-item
limit the posts using posts_per_page => 3;
run <?php while ( $query->have_posts() ) : $query->the_post(); ?>
display posts, amend for formatting as necessary (the formatting on the code below is quite complex because I half-inched an aesthetic example on the internet which I liked the look of)

…

<?php $query = new WP_Query(
        array(
            'post_type' => 'featured-item',
            'posts_per_page' => 3,
            'meta_query' => array( array( 'key' => '_thumbnail_id' ) )
        )
    ); 
?>

<div id="featured" >
    <?php
        $li = ''; 
        $content="";
        $count = 1;
    ?>

    <?php while ( $query->have_posts() ) : $query->the_post(); ?>

    <?php 
        if ($count == 1) {
            $li .= '<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-'. $count .'"><a href="#fragment-'. $count .'"><p>'. get_the_title() . '</p><span>'. get_the_content() .'</span></a></li>';
            $content .= '<div id="fragment-'. $count .'" class="ui-tabs-panel" style="">
                    '. get_the_post_thumbnail($post->ID, 'indexheader-thumb') .'
                     <div class="info" >
                        <p>'. get_the_title() . '</p>
                        <h2><a href="'. get_post_meta( $post->ID , 'link_to_post', TRUE ) .'" >'. get_the_content() .'</a></h2>
                     </div>
                </div>';
        } else {
            $li .= '<li class="ui-tabs-nav-item" id="nav-fragment-'. $count .'"><a href="#fragment-'. $count .'"><p>'. get_the_title() .'</p><span>'. get_the_content() .'</span></a></li>';
            $content .= '<div id="fragment-'. $count .'" class="ui-tabs-panel ui-tabs-hide" style="">
                    '. get_the_post_thumbnail($post->ID, 'indexheader-thumb') .'
                     <div class="info" >
                        <p>'. get_the_title() . '</p>
                        <h2><a href="'. get_post_meta( $post->ID , 'link_to_post', TRUE ) .'" >'. get_the_content() .'</a></h2>
                     </div>
                </div>';
        }

        $count++;
    ?>

    <?php endwhile; ?>

    <?php wp_reset_query(); ?>

    <ul class="ui-tabs-nav">
        <?php echo $li; ?>
    </ul>

    <!-- First Content -->
    <?php echo $content; ?>

</div>

If you want to attempt this, feel free to pester me for additional information.

Related Posts: