I'd like to have an admin panel where I can upload an image and customize a line of text.

Then use a shortcode throughout the theme to display the text/images.

I'd also like this to be scalable so I can add more image upload/text inputs to this panel as I grow the site.

I was using a tutorial that was showing how to insert a logo in a similar fashion that I was going to hack for my use, but following the tutorial doesn't seem to work in the current version of Wordpress.


Insted of using some custom code that will not work on wp update (as you have experienced) why don't use the core meta uploader?

Go in the "Media -> Add New" on your backend. Simply add a new file.

After you uploaded it, click on Edit and set the attachment title with the line of text that you want to output with the image. Udate the attachment... and you are done.

In your functions.php add something like this

function print_an_image( $id = '', $args = array() ) {
  if ( ! intval($id) ) return;
  $a = get_post($id);
  if ( $a->post_type != 'attachment' ) return;
  $default = array(
     'size' => 'medium',
     'class' => '',
     'link' => false, // if numeric will link that post id, if boolean true will link the same image but in the size specified in 'link_size' att. If false (default) will not insert a link
     'link_size' => 'full',
     'link_rel' => '',
     'title_format' => '<p class="image-title">%s</p>',
     'before' => '<div>',
     'after' => '</div>'
  $args = wp_parse_args($args, $default);
  $image = wp_get_attachment_image_src( $id, $size );
  if ( ! filter_var($image[0], FILTER_VALIDATE_URL) ) return;
  $title = apply_filters('the_title', $a->post_title );
  $url = '';
  if ( is_numeric($link) && $link > 0 ) {
    $url = get_permalink($link);
  } elseif ( $link === true || $link === 'true' ) {
    $url = (array) wp_get_attachment_image_src( $id, $link_size );
    $url = filter_var($url[0], FILTER_VALIDATE_URL) ? $url[0] :  '';
  $out = '';
  if ( is_string($before) && ! empty($before) ) $out .= $before;
  if ( ! empty($url) ) {
    $out .= sprintf('<a href="%s"', esc_url($url) );
    if ( ! empty($link_rel) ) $out .= sprintf(' rel="%s"', esc_attr($link_rel) );
    $out .= sprintf(' title="%s"', esc_attr($title) ) . '>';
  $format = '<img src="%s" width="%d" height="%d" alt="%s"';
  if ( ! empty($class) ) $format .= ' class="%s"';
  $out .= sprintf($format, esc_url($image[0]), $image[1], $image[2], esc_attr($title), esc_attr($class)) . '/>';
  if ( ! empty($url) ) $out .= '</a>';
  $out .= sprintf($title_format, esc_html($title) );
  if ( is_string($after) && ! empty($after) ) $out .= $after;
  return $out;

function print_an_image_sh( $atts ) {
    if ( ! isset($atts['id']) || empty($atts['id']) ) return;
    $id = $atts['id'];
    return print_an_image( $id, $atts );

add_shortcode( 'myimg', 'print_an_image_sh' );

The simplest usage is

[myimg id="10"] 

Where 10 is the id of the image. It will print the image in medium size with the title wrapped in a p and both wrapped in a div.

Using shortcode atts you can configure everithing: the size of the image, the class, if the image should link same image in ither size or link a particular post, the 'rel' attribute of the link (useful for lightbox scripts), how the title should be outputted and what put before and after the image.

Example of advanced use:

[myimg id="10" size="thumb" class="my_image_thumb" link="true" link_size="full" link_rel="lightbox" title_format="<h3>%s</h3>" before="<div class='my_image_wrap'>"]

Of course the print_an_image function can also be used as template tag, with first argument the image id and the second argument is the array of args:

echo print_an_image(10, array('size'=>'large') );
  • The image and the text are two different elements that need to be inserted. But I'm not sure this would work even for the images. The image that will be updated will be on 5-10_ different pages. So does that mean I'd have to go to each page and update the [myimg id="10"] every time we update the image? We'll be uploading the image in the correct size, so we don't need any resizing or extra attributes. We just need it inserted in multiple areas of the site, and uploaded/changed once.
    – Derek
    Oct 9 '13 at 0:48
  • If the text must be different from page to page you can just put the text as additional shortcode argument. If you need to change the image frequently you can use the attachment slug to retrive the image instead of the id (so when you upload the new image you need to change the slug) or maybe you can register a taxonomy for images and use a taxonomy term. Regarding size and other attributes they are just optional, if you don't need them don't use them. Maybe in the future they can be usefull. @Derek
    – gmazzap
    Oct 9 '13 at 0:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.