How I Added Custom Fields to the Genesis Responsive Slider

I have been asked how to add custom fields to the Genesis Responsive Slider and the Genesis Slider several times in the past. Every time I had believed it would require a new widget to be created that called for the custom fields. It is a bit ungainly and beyond the skills of many novice developers.

Recently, however, I had need of this myself. I am working on a client site and they are using this massive and confusing theme that is getting a bit dated. I’ve been asked to bring it up to Genesis but retain much of the existing functionality. They had a custom slider on the front page, but it isn’t responsive and it requires custom code which might break on updates then the theme has to be updated. I much prefer the idea of using the Genesis Responsive Slider because it is responsive and if a WordPress update ever breaks things there is a great team behind it that will update the plugin.

Last I checked, though, the only content display options are the content, the content limit, and the excerpt. No way to add in additional images and custom fields, which were important to how the existing slider worked. I sat down looking at the code and finding no hooks or filters when I remembered, this is WordPress. When I thought it I used the Leonidas voice from 300. “THIS IS SPARTA!!!!!” It makes things so much cooler when you use the right voice for a thought.

WordPress is full of hooks and filters. Once I remembered that I also remembered that the excerpt can be filtered with get_the_excerpt. The post type isn’t using the manual excerpt so it makes perfect sense to change what is being returned. For my needs I wanted to use a static image, the full content, then up to two custom fields with some specific class markup so I could style them differently.

Now, since this is for a client project I can’t really just share all this custom code, but I can write up a similar bit of code for a slightly different scenario.

Converting the Genesis Responsive Slider into a styled Quote Rotator

Obviously you have to install the Genesis Responsive Slider, which also means you need to use Genesis, but I’m going to skip details on those steps. So lets get started with:

Step One: Create Your Post Type

I use a simple function when I want to make post types. Be sure you get the required code and an full explanation of how all of that works from that article. Now, you can put this code into your theme functions.php file, but I actually prefer this method instead. Make a new folder in wp-content named “mu-plugins” and put a new file there named custom-post-types.php. This created a “Must Use” Plugin. Put the ntg_register_post_type function in that file. Then register a new post type named “Quotes.” The entire file should look like this

<?php

/**
 * Registers a post type with default values which can be overridden as needed.
 *
 * @author Nick the Geek
 * @link https://designsbynickthegeek.com/tutorials/custom-post-types-made-easy
 *
 * @uses sanitize_title() WordPress function that formats text for use as a slug
 * @uses wp_parse_args() WordPress function that merges two arrays and parses the values to override defaults
 * @uses register_post_type() WordPress function for registering a new post type
 *
 * @param string $title title of the post type. This will be automatically converted for plural and slug use
 * @param array $args overrides the defaults
 */
function ntg_register_post_type( $title, $args = array() ){

    $sanitizedTitle = sanitize_title( $title );

    $defaults = array(
            'labels' => array(
                'name' => $title . 's',
                'singular_name' => $title,
                'add_new_item' => 'Add New ' . $title,
                'edit_item' => 'Edit ' . $title,
                'new_item' => 'New ' . $title,
                'search_items' => 'Search ' . $title . 's',
                'not_found' => 'No ' . $title . 's found',
                'not_found_in_trash' => 'No ' . $title . 's found in trash'
            ),
            '_builtin' => false,
            'public' => true,
            'hierarchical' => false,
            'taxonomies' => array( ),
            'query_var' => true,
            'menu_position' => 6,
            'supports' => array( 'title', 'editor', 'thumbnail', 'author', 'comments', 'genesis-seo' ),
            'rewrite' => array( 'slug' => $sanitizedTitle ),
            'has_archive' => true
        );

    $args = wp_parse_args( $args, $defaults );

    $postType = isset( $args['postType'] ) ? $args['postType'] : $sanitizedTitle;

    register_post_type( $postType, $args );

}

// Register post type quote
ntg_register_post_type( 'Quote' );

Add Custom Fields

You will also need some custom fields. I fully recommend the Custom Meta Box class that Jared Atchison, Bill Erickson, and others have worked up. It makes for a very simple way to create custom meta boxes. Assuming you already have that setup you can make another file in the mu-plugins directory names “meta-boxes.php” and put this n it

<?php

add_filter( 'cmb_meta_boxes' , 'ntg_create_metaboxes' );
/**
 * Create Metaboxes
 *
 * @link http://www.billerickson.net/wordpress-metaboxes/
 * @param array
 * @return array
 *
 */
function ntg_create_metaboxes( $meta_boxes ) {

	$meta_boxes[] = array(
    	'id' => 'quote-fields',
	    'title' => 'Author Details',
	    'pages' => array('quote'),
		'context' => 'normal',
		'priority' => 'low',
		'show_names' => true,
		'fields' => array(
			array(
		        'name' => 'Author',
		        'desc' => '',
		        'id' => '_author',
	        	'type' => 'text'
			),
			array(
		        'name' => 'Source',
		        'desc' => '',
		        'id' => '_source',
	        	'type' => 'text'
			),
			array(
		        'name' => 'Source URL',
		        'desc' => '',
		        'id' => '_url',
	        	'type' => 'text'
			),
		),
	);

	return $meta_boxes;
 }

This is creating three custom fields for the quote output. The author of the quote, the location the quote came from, and a URL for that location.

Change the Excerpt

For this we are going to assume the excerpt isn’t normally being used for this post type, that the slider is used only on the home page, and that the excerpt only needs to be changed for the slider when using this post type. With those assumptions, you can add this code to your front-page.php (or home.php file if you haven’t read about a better home page).

add_filter( 'get_the_excerpt', 'child_do_quote_excerpt' );
function child_do_quote_excerpt( $excerpt ) {

	if( 'quote' != get_post_type() )
		return $excerpt;

	global $post;

	$content = '<blockquote class="slider-quote">'. wpautop( $post->content ) '</blockquote>';
	$author_name =  ( $name = genesis_get_custom_field( '_author' ) ) ? '<p class="author">'. $name .'</p>' : '';
	$source = ( $_source = genesis_get_custom_field( '_source' ) ) ? '<p class="source">'. $_source .'</p>' : '';
	$source = $source && ( $url = genesis_get_custom_field( '_url' ) ) ? '<a href="'. $url .'" class="source">'. $_source .'</a>' : $source;
	$cite = $author_name || $source ? '<cite class="slider-cite">'. $author_name . $source .'</div>';

	return $content . $cite;

}

This will pull the full content into a blockquote with autop but no other filters, then create a cite tag with the author name and source but only if available from the meta fields. Now all of this can be styled for your needs.

This same technique could be used in a variety of ways to make many other layouts for the Genesis Responsive Slider or Genesis Slider content.