Edit a template – How to add a simple image field browsed from the library.

Hello everybody,

I’m very new to this kind of stuff so I was wondering if anybody could help me about this topic.
I recenttly bought a template to better organize my portfolio.
I’m working right now on the “skills” section which is composed by 2 kind of text field, one for the percentage of the skill (I’m using an “easy pie chart plugin), one for name of the skill/program used.
Now, since I would like to add a logo inside/onTop of the piechart, I wondering how to add a simple field where to select the logo from the library.
I have this code to edit:

<?php

/* Custom Post Types */

add_action( 'init', 'onewp_create_post_type_skills' );

function onewp_create_post_type_skills() {

	register_post_type( 'skills',

		array(

			'labels' => array(

					'name' => __( 'Skills', 'onewp' ),

					'singular_name' => __( 'skill','onewp' )

			),

			'public' => true,

			'menu_icon' => 'dashicons-hammer',

			'has_archive' => true,

			'supports' => array('title'),

		)

	);

	flush_rewrite_rules( false );

}

// Little function to return a custom field value

function onewpSkills_get_custom_field( $value ) {

	global $post;

	$custom_field = get_post_meta( $post->ID, $value, true );

	if ( !empty( $custom_field ) )

		return is_array( $custom_field ) ? stripslashes_deep( $custom_field ) : stripslashes( wp_kses_decode_entities( $custom_field ) );

	return false;

}

// Register the Metabox

function onewpSkills_add_custom_meta_box() {

	add_meta_box( 'onewpSkills-meta-box', __( 'Skill details', 'textdomain' ), 'onewpSkills_meta_box_output', 'skills', 'normal', 'high' );

}

add_action( 'add_meta_boxes', 'onewpSkills_add_custom_meta_box' );

// Output the Metabox

function onewpSkills_meta_box_output( $post ) {

	// create a nonce field

	wp_nonce_field( 'my_onewpSkills_meta_box_nonce', 'onewpSkills_meta_box_nonce' ); ?>

	<table>

		<tr>

			<td>Percent:</td>

			<td><input type="text" name="skill_percent" placeholder="Percent value. eq:50" id="skill_percent" value="<?php echo onewpSkills_get_custom_field( 'skill_percent' ); ?>" /></td>

		</tr>
		<tr>

			<td>Description:</td>

			<td><textarea name="skill_desc" placeholder="Optional description" id="skill_desc" cols="60" rows="2"><?php echo onewpSkills_get_custom_field( 'skill_desc' ); ?></textarea></td>

		</tr>
		<tr>

			<td>Author:</td>

			<td><textarea name="skill_auth" placeholder="Optional author" id="skill_auth" cols="60" rows="2"><?php echo onewpSkills_get_custom_field( 'skill_auth' ); ?></textarea></td>

		</tr>

	</table>

	<?php

}

// Save the Metabox values

function onewpSkills_meta_box_save( $post_id ) {

	// Stop the script when doing autosave

	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

	// Verify the nonce. If insn't there, stop the script

	if( !isset( $_POST['onewpSkills_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['onewpSkills_meta_box_nonce'], 'my_onewpSkills_meta_box_nonce' ) ) return;

	// Stop the script if the user does not have edit permissions

	if( !current_user_can( 'edit_post' ) ) return;

	// Save the textfield

	if( isset( $_POST['skill_percent'] ) )

		update_post_meta( $post_id, 'skill_percent', esc_attr( $_POST['skill_percent'] ) );

	// Save the textarea

	if( isset( $_POST['skill_desc'] ) )

		update_post_meta( $post_id, 'skill_desc', esc_attr( $_POST['skill_desc'] ) );

	// Save the textarea

	if( isset( $_POST['skill_auth'] ) )

		update_post_meta( $post_id, 'skill_auth', esc_attr( $_POST['skill_auth'] ) );

}

add_action( 'save_post', 'onewpSkills_meta_box_save' );

?>

I don’t know the syntax/method to achieve this thing, so any hint will be very appreciated.

Thanks,
Simone