Código botón para insertar imágenes en wordpress

[ArturoGallegos]

Que versión de WP usas... en la nueva versión 3.9.1 yo uso este método

Código Javascript:

$('.field_img .add').click(function(){
        var input_img = $(this).parent().children('input');
        var img_thumbnail = null;
        if($(this).parent().children('img').length > 0){
            img_thumbnail = $(this).parent().children('img');
        }else{
            $(this).parent().append('<img src="" />')
            img_thumbnail = $(this).parent().children('img');
        }
        var frame = wp.media({
            title : 'Seleccionar imagen',
            multiple : false,
            library : { type : 'image'},
            button : { text : 'Insert' }
        });
        frame.on('select',function() {
            attachment = frame.state().get('selection').first().toJSON();
            input_img.val(attachment['id']);
            img_thumbnail.attr('src',attachment['url']);
        });
        frame.open();
    });
    $('.field_img .remove').click(function(){
       $(this).parent().children('input').val('');
       $(this).parent().children('img').remove();
    });
 

Código PHP:

<p class="field_img">
    <input type="hidden" name="template_gral[logo]" value="<?php echo $template_gral['logo'];?>" />
    <span class="add"><i class="fa fa-picture-o"></i> <?php _e('Change logo', 'template')?></span>
    <span class="remove"><i class="fa fa-times"></i> <?php _e('Remove', 'template')?></span>
    <?php if(!empty($template_gral['logo'])){
    echo wp_get_attachment_image($template_gral['logo'], 'thumbnail', true);
}?>
</p>
 

Si observas yo uso la ventana de medios para subir la imagen y una vez cargada obtengo la ID.... el porque es muy simple, si obtengo la url cuando intente usarla en el frontend siempre sera de un tamaño fijo pero si obtengo la ID puedo usar cualquier tamaño que yo quiera de los que se generaron cuando subí la imagen.