Create, display and save an URL field in a WP custom metabox

functions.php

<?php

/**
 * Add the metabox.
 */

function my_url_add_metabox() {
   add_meta_box(
		'my_url_section',           // The HTML id attribute for the metabox section
		'My URL Metabox Title',     // The title of your metabox section
		'my_url_metabox_callback',  // The metabox callback function (below)
		'cpt_slug'                  // Your custom post type slug
	);
}
add_action( 'add_meta_boxes', 'my_url_add_metabox' );

/**
 * Print the metabox content.
 */

function my_url_metabox_callback( $post ) {

   // Create a nonce field.
	wp_nonce_field( 'my_url_metabox', 'my_url_metabox_nonce' );

	// Retrieve a previously saved value, if available.
	$url = get_post_meta( $post->ID, '_my_url', true );

   // Create the metabox field mark-up.
   ?>
      <p>
         <label>My URL </label><input style="width: 20em;" type="text" name="my_url" value="<?php echo esc_url( $url ); ?>" size="30" class="regular-text" />
      </p>
   <?php
}

/**
 * Save the metabox.
 */

function my_url_save_metabox( $post_id ) {
   // Check if our nonce is set.
   if ( ! isset( $_POST['my_url_metabox_nonce'] ) ) {
      return;
   }

   $nonce = $_POST['my_url_metabox_nonce'];

   // Verify that the nonce is valid.
   if ( ! wp_verify_nonce( $nonce, 'my_url_metabox' ) ) {
      return;
   }

   // If this is an autosave, our form has not been submitted, so we don't want to do anything.
   if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
      return;
   }

   // Check the user's permissions.
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
      return;
   }

   // Check for and sanitize user input.
   if ( ! isset( $_POST['my_url'] ) ) {
      return;
   }

   $url = esc_url_raw( $_POST['my_url'] );

   // Update the meta fields in the database, or clean up after ourselves.
   if ( empty( $url ) ) {
      delete_post_meta( $post_id, '_my_url' );
   } else {
      update_post_meta( $post_id, '_my_url', $url );
   }
}
add_action( 'save_post', 'my_url_save_metabox' );

Awesome! How would you then CALL or show this data on the frontend...Example being if I had this URL in your metabox...how could I then make it show on the frontend as a link that said DOWNLOAD REFERENCE GUIDE or something similar?

@seanbrsn bit late, but in case someone comes across this and needs help...

You just need to get the custom_meta and print it out onto the page. (in your front end template file)

$url = get_post_meta( $post->ID, '_my_url', true );
if( !empty( $url ) ){
echo '<a href="'. esc_url( $url ) .'">'DOWNLOAD GUIDE'</a>';
}

@IlonaF,

Thanks for getting me started, but this did not work for me initially. Replacing $post->ID with get_the_ID() did, as well as removing the '' around DOWNLOAD GUIDE.

$url = get_post_meta( get_the_ID(), '_my_url', true );
if( !empty( $url ) ){
echo '<a href="'. esc_url( $url ) .'">DOWNLOAD GUIDE</a>';
}

Hi , It works for me but i need to add more field on it like 1 input text field and then i will want to show it on my template file so how can i create a field and show each field

Hi mandiwise, i have followed your tutorial however the metabox not showing in my post. i'm running wp 4.9.4 version.

Please help.Tq