Title: Adding custom field support?
Last modified: August 21, 2016

---

# Adding custom field support?

 *  Resolved [StenW](https://wordpress.org/support/users/stenw/)
 * (@stenw)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/adding-custom-field-support/)
 * Hey Phil.
 * I really like the CPT Carousel, but I need to add a feature small feature. I 
   want tot have a button on the individual carousel items, which I can link to 
   either an external or internal url. I think I am pretty close to solving it, 
   but I don´t quite understand your loop.
 *  I added custom field to the $args / supports
    `'supports' => array('title','
   excerpt','thumbnail', 'page-attributes', 'custom-fields')` I called the key link
   and the value is any url set from the backend.
 * I updated the loop:
 *     ```
       function cptbc_frontend($atts){
       	$id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
       	$args = array( 'post_type' => 'cptbc', 'orderby' => 'menu_order', 'order' => 'ASC');
       	$loop = new WP_Query( $args );
       	$images = array();
       	while ( $loop->have_posts() ) {
       		$loop->the_post();
       		if ( '' != get_the_post_thumbnail() ) {
       			$title = get_the_title();
       			$content = get_the_excerpt();
       			$image = get_the_post_thumbnail( get_the_ID(), 'full' );
       			$link = get_post_meta($post->ID,'link',true);
       			$images[] = array('title' => $title, 'content' => $content, 'image' => $image, 'link' => $link);
       		}
       	}
       	if(count($images) > 0){
       		ob_start();
       		?>
       ```
   
 * I also updated the output to this:
 *     ```
       ob_start();
       		?>
       		<div id="cptbc_<?php echo $id; ?>" class="carousel slide">
       			<ol class="carousel-indicators">
       			<?php foreach ($images as $key => $image) { ?>
       				<li data-target="#cptbc_<?php echo $id; ?>" data-slide-to="<?php echo $key; ?>" data-interval="<?php echo $atts['interval']; ?>" <?php echo $key == 0 ? 'class="active"' : ''; ?>></li>
       			<?php } ?>
       			</ol>
       			<div class="carousel-inner">
       			<?php foreach ($images as $key => $image) { ?>
       				<div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
       					<?php echo $image['image']; ?>
       					<?php if($atts['showcaption'] === 'true') { ?>
       						<div class="carousel-caption">
       							<h2><?php echo $image['title']; ?></h2>
       							<p class="lead"><?php echo $image['content']; ?></p>
       							<?php echo '<a class="btn btn-large btn-primary" href="' . $image['link'] . '">Läs mer</a>';?>
       						</div>
       					<?php } ?>
       				</div>
       			<?php } ?>
       			</div>
       			<?php if($atts['showcontrols'] === 'true') { ?>
       				<a class="left carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="prev">‹</a>
       				<a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
       			<?php } ?>
       		</div>
       <?php }
       	$output = ob_get_contents();
       	ob_end_clean();
       ```
   
 * I still can´t get the href to be set from the backend, where I think there is
   something wrong with the loop.
    For full code please see: [http://wordpress.stackexchange.com/questions/108369/echo-custom-field-value?noredirect=1#comment150918_108369](http://wordpress.stackexchange.com/questions/108369/echo-custom-field-value?noredirect=1#comment150918_108369)
 * [http://wordpress.org/plugins/cpt-bootstrap-carousel/](http://wordpress.org/plugins/cpt-bootstrap-carousel/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Phil Ewels](https://wordpress.org/support/users/tallphil/)
 * (@tallphil)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/adding-custom-field-support/#post-3975463)
 * Hi StenW ,
 * Your timing is very good, I was working on something similar last night! Github
   user @atnon made a very similar modification to the code 10 days ago, also using
   custom-fields (though giving the image a link rather than putting a link in the
   caption). You can see his pull request here: [https://github.com/atnon/cpt-bootstrap-carousel/blob/ed4e8bf2e2ebe73a54d8de7f0e3075f830993029/trunk/cpt-bootstrap-carousel.php](https://github.com/atnon/cpt-bootstrap-carousel/blob/ed4e8bf2e2ebe73a54d8de7f0e3075f830993029/trunk/cpt-bootstrap-carousel.php)
 * I re-wrote his code and released an update to the plugin last night, so if you’re
   happy with just the image having a link you should be able to do that with the
   update.
 * I can’t see any problems with your code on the face of it. If I were you, I’d
   update the plugin to incorporate my new code and then make a small edit just 
   to change where the link is being printed in the output. That way you get a cleaner
   meta-box instead of relying on custom fields and it should work without much 
   debugging.
 * Example _(untested)_:
 *     ```
       <div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
       	<?php echo $image['image'];
       	if($atts['showcaption'] === 'true') { ?>
       		<div class="carousel-caption">
       			<h4><?php echo $image['title']; ?></h4>
       			<p><?php echo $image['content']; ?></p>
        			<?php if($image['url']) {
       				echo '<a href="'.$image['url'].'"';
       				if($image['url_openblank']) {
       					echo ' target="_blank"';
       				}
       				echo '>Läs mer</a>';
       			} ?>
       		</div>
       	<?php } ?>
       </div>
       ```
   
 * I hope that helps, let me know how you get on..
 * Phil
 *  Plugin Author [Phil Ewels](https://wordpress.org/support/users/tallphil/)
 * (@tallphil)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/adding-custom-field-support/#post-3975512)
 * Also, if you like the plugin I’d appreciate you leaving a review here – it makes
   a big difference! Cheers..
 *  Thread Starter [StenW](https://wordpress.org/support/users/stenw/)
 * (@stenw)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/adding-custom-field-support/#post-3975595)
 * My solution, which is very similar to the one above, but uses a button instead
   of making the image a link.
 *     ```
       <?php
       /*
       Plugin Name: CPT Bootstrap Carousel
       Plugin URI: http://www.tallphil.co.uk/bootstrap-carousel
       Description: A custom post type for choosing images and content which outputs <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" target="_blank">Bootstrap Carousel</a> from a shortcode. Requires Bootstrap javascript and CSS to be loaded separately.
       Version: 1.1
       Author: Phil Ewels
       Author URI: http://phil.ewels.co.uk
       License: GPLv2
       */
   
       // Custom Post Type Setup
       add_action( 'init', 'cptbc_post_type' );
       function cptbc_post_type() {
       	$labels = array(
       		'name' => 'Carousel Images',
       		'singular_name' => 'Carousel Image',
       		'add_new' => 'Add New',
       		'add_new_item' => 'Add New Carousel Image',
       		'edit_item' => 'Edit Carousel Image',
       		'new_item' => 'New Carousel Image',
       		'view_item' => 'View Carousel Image',
       		'search_items' => 'Search Carousel Images',
       		'not_found' =>  'No Carousel Image',
       		'not_found_in_trash' => 'No Carousel Images found in Trash',
       		'parent_item_colon' => '',
       		'menu_name' => 'Carousel'
       	);
       	$args = array(
       		'labels' => $labels,
       		'public' => true,
       		'exclude_from_search' => true,
       		'publicly_queryable' => false,
       		'show_ui' => true,
       		'show_in_menu' => true,
       		'query_var' => true,
       		'rewrite' => true,
       		'capability_type' => 'page',
       		'has_archive' => true,
       		'hierarchical' => false,
       		'menu_position' => 21,
       		'supports' => array('title','excerpt','thumbnail', 'page-attributes', 'custom-fields')
       	);
       	register_post_type('cptbc', $args);
       }
   
       // Add theme support for featured images if not already present
       // http://wordpress.stackexchange.com/questions/23839/using-add-theme-support-inside-a-plugin
       function cptbc_addFeaturedImageSupport() {
       	$supportedTypes = get_theme_support( 'post-thumbnails' );
       	if( $supportedTypes === false )
       		add_theme_support( 'post-thumbnails', array( 'cptbc' ) );
       	elseif( is_array( $supportedTypes ) ) {
       		$supportedTypes[0][] = 'cptbc';
       		add_theme_support( 'post-thumbnails', $supportedTypes[0] );
       	}
       }
       add_action( 'after_setup_theme', 'cptbc_addFeaturedImageSupport');
   
       // FRONT END
   
       // Shortcode
       function cptbc_shortcode($atts, $content = null) {
       	// Set default shortcode attributes
       	$defaults = array(
       		'interval' => '5000',
       		'showcaption' => 'true',
       		'showcontrols' => 'true'
       	);
   
       	// Parse incomming $atts into an array and merge it with $defaults
       	$atts = shortcode_atts($defaults, $atts);
   
       	return cptbc_frontend($atts);
       }
       add_shortcode('image-carousel', 'cptbc_shortcode');
   
       // Display latest WftC
       function cptbc_frontend($atts){
       	$id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
       	$args = array( 'post_type' => 'cptbc', 'orderby' => 'menu_order', 'order' => 'ASC');
       	$loop = new WP_Query( $args );
       	$images = array();
       	while ( $loop->have_posts() ) {
       		$loop->the_post();
       		if ( '' != get_the_post_thumbnail() ) {
       			$title = get_the_title();
       			$content = get_the_excerpt();
       			$image = get_the_post_thumbnail( get_the_ID(), 'full' );
       			$url = get_post_custom_values("url");
       			$images[] = array('title' => $title, 'content' => $content, 'image' => $image, 'url' => esc_url($url[0]));
       		}
       	}
       	if(count($images) > 0){
       		ob_start();
       		?>
       		<div id="cptbc_<?php echo $id; ?>" class="carousel slide">
       			<ol class="carousel-indicators">
       			<?php foreach ($images as $key => $image) { ?>
       				<li data-target="#cptbc_<?php echo $id; ?>" data-slide-to="<?php echo $key; ?>" data-interval="<?php echo $atts['interval']; ?>" <?php echo $key == 0 ? 'class="active"' : ''; ?>></li>
       			<?php } ?>
       			</ol>
       			<div class="carousel-inner">
       			<?php foreach ($images as $key => $image) { ?>
       				<div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
       					<?php echo $image['image']; ?>
       					<?php if($atts['showcaption'] === 'true') { ?>
       						<div class="carousel-caption">
       							<h2><?php echo $image['title']; ?></h2>
       							<p class="lead"><?php echo $image['content']; ?></p>
       							<?php if($image['url']) { echo '<a class="btn btn-large btn-primary" href="' . $image['url'] . '">Läs mer</a>'; }?>
       						</div>
       					<?php } ?>
       				</div>
       			<?php } ?>
       			</div>
       			<?php if($atts['showcontrols'] === 'true') { ?>
       				<a class="left carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="prev">‹</a>
       				<a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
       			<?php } ?>
       		</div>
       <?php }
       	$output = ob_get_contents();
       	ob_end_clean();
   
       	// Restore original Post Data
       	wp_reset_postdata();	
   
       	return $output;
       }
   
       // Call the carousel in javascript, else it won't start scrolling on its own
       function cptbc_footer_js() {
       ?>
       <script type="text/javascript">
       	jQuery(function(){
       		jQuery('.carousel').carousel()
       	});
       </script>
       <?php
       }
       add_action('wp_footer', 'cptbc_footer_js');
   
       ?>
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding custom field support?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/cpt-bootstrap-carousel_b8b7ae.svg)
 * [CPT Bootstrap Carousel](https://wordpress.org/plugins/cpt-bootstrap-carousel/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cpt-bootstrap-carousel/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cpt-bootstrap-carousel/)
 * [Active Topics](https://wordpress.org/support/plugin/cpt-bootstrap-carousel/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cpt-bootstrap-carousel/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cpt-bootstrap-carousel/reviews/)

## Tags

 * [custom fields](https://wordpress.org/support/topic-tag/custom-fields/)
 * [custom post type](https://wordpress.org/support/topic-tag/custom-post-type/)

 * 3 replies
 * 2 participants
 * Last reply from: [StenW](https://wordpress.org/support/users/stenw/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/adding-custom-field-support/#post-3975595)
 * Status: resolved