Table of Contents
This Default Field Type is available in WordPress Creation Kit free version. The Upload Field creates a file upload form. It can be used to upload images, videos, PDFs etc. and uses the default WordPress Media Uploader.
To add an Upload Field to a previously created Custom Meta Box, under the Meta Box Fields tab simply insert a Field Title and under Field Type make sure you select Upload.
The Upload Field contains options to customize it:
This is how the Upload Field we created above looks like in the Edit Screen:
The following examples are for a Custom Meta Box with the “Group Name” argument “my_meta_name“. Make sure to replace this with the “Group Name” you have set up. The Custom Meta Box below is setup to be attached to a post.
The Upload Field returns the source string, the attachment post object or, for a image upload, an array with the image details.
To output a value inside the loop we use the function the_cfc_field() which echoes the src of the upload
1 | <img src="<?php the_cfc_field('my_meta_name', 'avatar'); ?>" /> |
To assign the value to a variable we use the function get_cfc_field() which for the Upload Field return the attachment post object or, for a image upload, an array with the image details:
1 | <!--?php $attachment_object = get_cfc_field('my_meta_name', 'avatar'); /* For a image the attachment array looks like this: array( 'id' => 151, 'alt' => 'Avatar Image', 'title' => 'Tim', 'caption' => 'Our number on member', 'description' => 'a avatar image', 'url' => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim.jpg", 'width' => "100", 'height' => "120", 'sizes' => Array ( [thumbnail] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim-150x150.jpg", [medium] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim-300x119.jpg", [large] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim.jpg" ) ); */ /* For a normal upload (not an image) the attachment object looks like this: object(WP_Post)[279] public 'ID' => int 55 public 'post_author' => string '1' (length=1) public 'post_date' => string '2014-07-28 09:00:54' (length=19) public 'post_date_gmt' => string '2014-07-28 09:00:54' (length=19) public 'post_content' => string '' (length=0) public 'post_title' => string 'over_1400_downloads_per_week' (length=28) public 'post_excerpt' => string '' (length=0) public 'post_status' => string 'inherit' (length=7) public 'comment_status' => string 'open' (length=4) public 'ping_status' => string 'open' (length=4) public 'post_password' => string '' (length=0) public 'post_name' => string 'over_1400_downloads_per_week-2' (length=30) public 'to_ping' => string '' (length=0) public 'pinged' => string '' (length=0) public 'post_modified' => string '2014-07-28 09:00:54' (length=19) public 'post_modified_gmt' => string '2014-07-28 09:00:54' (length=19) public 'post_content_filtered' => string '' (length=0) public 'post_parent' => int 54 public 'guid' => string 'http://localhost/wckpro/wp-content/uploads/2014/07/over_1400_downloads_per_week1.ods' (length=84) public 'menu_order' => int 0 public 'post_type' => string 'attachment' (length=10) public 'post_mime_type' => string 'application/vnd.oasis.opendocument.spreadsheet' (length=46) public 'comment_count' => string '0' (length=1) public 'filter' => string 'raw' (length=3) */ ?--> |
To output all the “Avatar” entries from the repeater field we use the functions get_cfc_meta() and the_cfc_field():
1 | <!--?php foreach( get_cfc_meta( 'my_meta_name' ) as $key => $value ){ ?--><img src=""<?php" />"/><!--?php } ?--> |
To output a specific “Avatar” entry from the repeater field, for example the second entry, we use the function the_cfc_field():
1 | <img src="<?php the_cfc_field( 'my_meta_name','avatar', false, 1 ); ?>" /> |
The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…
The Upload Field returns the attachment id.
1 2 3 | <!--?php $my_meta = get_post_meta( $post->ID, 'my_meta_name', true ); if( !empty( $my_meta[0]['avatar'] ) ){ $src = wp_get_attachment_image_src( $my_meta[0]['avatar'], 'full' ); echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"?-->'; } ?> |
To output all the “Avatar” entries in the repeater field:
1 2 3 4 | <!--?php $my_meta = get_post_meta( $post->ID, 'my_meta_name', true ); if( !empty( $my_meta ) ){ foreach( $my_meta as $entry ){ $src = wp_get_attachment_image_src( $entry['avatar'], 'full' ); echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"?-->'; } } ?> |
To output a specific “Avatar” entry from the repeater field, for example the second entry:
1 2 3 | <!--?php $my_meta = get_post_meta( $post->ID, 'my_meta_name', true ); if( !empty( $my_meta[1]['avatar'] ) ){ $src = wp_get_attachment_image_src( $my_meta[1]['avatar'], 'full' ); echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"?-->'; } ?> |
The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…
Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.
Get 25% off with the bundle
