Öncelikle tema klasörünüzün altında js klasöründe admin.js diye bir dosya oluşturun;

benim örneğimde wp-content/themes/twentyfourteen/js/admin.js şeklinde

var file_frame;
 
jQuery('#yazi-ikon-yukle').live('click', function( event ){

	event.preventDefault();

	// If the media frame already exists, reopen it.
	if ( file_frame ) {
	  file_frame.open();
	  return;
	}

	// Create the media frame.
	file_frame = wp.media.frames.file_frame = wp.media({
	  title: 'Yazı ikon yükle',
	  button: {
	    text: 'İkon Seç',
	  },
	  multiple: false  // Set to true to allow multiple files to be selected
	});

	// When an image is selected, run a callback.
	file_frame.on( 'select', function() {
	  // We set multiple to false so only get one image from the uploader
	  attachment = file_frame.state().get('selection').first().toJSON();

	  // Do something with attachment.id and/or attachment.url here
	  jQuery('#yazi-ikon').val(attachment.url);
	});

	// Finally, open the modal
	file_frame.open();
});

içine yukarıdaki kodları yapıştırın. daha sonra functions.php'nin en altına şu kodları ekleyin;

add_action('admin_head', function(){
	$url = get_template_directory_uri() . '/js/admin.js';
	echo "<script type='text/javascript' src='$url'></script>";
});

add_action('add_meta_boxes', function(){
	add_meta_box('yazi-ikon-mb', 'Yazı ikonu', 'yazi_ikon_cb', 'post');
});


function yazi_ikon_cb( $post ) {
	wp_nonce_field('myplugin_meta_box', 'myplugin_meta_box_nonce');
	$value = get_post_meta( $post->ID, 'yazi_ikon', true );

	echo '<label style="display:block" for="yazi-ikon">Yazı ikonu</label>';
	if(trim($value))
		echo "<img src='". esc_attr( $value ) ."' style='display:block;' />";
	echo '<input style="width:70%" type="text" id="yazi-ikon" name="yazi-ikon" value="' . esc_attr( $value ) . '" size="25" />';
	echo '<input style="margin-left:10px" class="button button-primary button-large" type="button" id="yazi-ikon-yukle" value="Yazı ikonu yükle" />';
}

add_action('save_post', function( $post_id ) {

	/*
	 * We need to verify this came from our screen and with proper authorization,
	 * because the save_post action can be triggered at other times.
	 */

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

	// Verify that the nonce is valid.
	if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
		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 ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

		if ( ! current_user_can( 'edit_page', $post_id ) ) {
			return;
		}

	} else {

		if ( ! current_user_can( 'edit_post', $post_id ) ) {
			return;
		}
	}

	/* OK, it's safe for us to save the data now. */
	
	// Make sure that it is set.
	if ( ! isset( $_POST['yazi-ikon'] ) ) {
		return;
	}

	// Sanitize user input.
	$my_data = sanitize_text_field( $_POST['yazi-ikon'] );

	// Update the meta field in the database.
	update_post_meta( $post_id, 'yazi_ikon', $my_data );
});

daha sonra admin panelinden post düzenleme yada yeni post oluşturma sayfasına girdiğinizde yeni bir kutu gelmiş olucak;



Yazı ikonu yükle butonuna basıp açılan pencereden istediğinizi ikon yükleyip yada yüklenmiş resimlerden seçip İkon Seç'e basın;



daha sonra postu kaydettiğinizde, şu şekilde kaydedilmiş olucak;



daha sonra ikonu göstermek istediğiniz yere şöyle bir kod parçacığı eklemeniz gerekmekte;

$ikon = get_post_meta( $post->ID, 'yazi_ikon', true );
				if($ikon)
					echo "<img src='{$ikon}' width='50' height='43'/>";

istediğiniz şekilde özelleştirebilirsiniz, örneğin ben boyutunu 50x43 şeklinde ayarladım.

Örnek olarak WordPress'in kendi temalarından twentyfourteen'e eklemek için;

wp-content/themes/twentyfourteen/content.php 'de 24. satırdan sonra yukarıdaki kod parçacığını ekleyin ve wp-content/themes/twentyfourteen/style.css'in sonuna şu css kodlarını ekleyin;

.single-post .entry-title {
	display: inline;
	vertical-align: middle;
}

.single-post .entry-header {
	vertical-align: middle;
}

Yazının içine girdiğinizde ikon şu şekilde görüncektir;