Title: Changing WP's Caption Setup
Last modified: August 19, 2016

---

# Changing WP's Caption Setup

 *  Resolved [Will White](https://wordpress.org/support/users/willpcg/)
 * (@willpcg)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/changing-wps-caption-setup/)
 * Hey Guys,
 * I’m working on a site for a church and they’ve asked for a staff page that allows
   a mouse-over effect on the images of their staff. I’ve come up with a fix that
   would keep them from having to edit html in order for it to work.
 * The plan is to find the code in the WP files that creates the div that contains
   the image and its caption, and move the caption ‘paragraph’ inside the link code
   that houses the image. That way I can use :hover to display it when a user mouses
   over it.
 * However I can’t seem to find the relevant code. The file ‘media.php’ has the 
   build for the div itself – but references ‘do_shortcode($content);’ to build 
   the link/image. I can’t seem to find where that variable is coming from, because
   its not instantiated in the media.php file.
 * I’m still relatively new to changing native wp files so if there is a better 
   way of doing this (or a way of doing this without altering any WP files) I’d 
   certainly appreciate any insight.
 * Thanks in advance!
 * —
    [http://severnruncom.ipower.com/closer-look/our-staff/](http://severnruncom.ipower.com/closer-look/our-staff/)
   The caption right now is styled to cover the images. Eventually the display on
   them will be set to none and they will only display once a user mouses over a
   picture.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [Will White](https://wordpress.org/support/users/willpcg/)
 * (@willpcg)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/changing-wps-caption-setup/#post-1579057)
 * I’m still digging but not having any luck.
 * For reference this is the structure captioned images output:
 *     ```
       <div id="attachment_130" class="wp-caption alignnone" style="width: 100px">
              <a href="mailto:some@address.com">
                     <img class="size-full wp-image-130" src="http://severnruncom.ipower.com/wp-content/uploads/2010/06/Nathan.jpg" alt="" width="90" />
              </a>
              <p class="wp-caption-text">Staff Member 1</p>
       </div>
       ```
   
 * And what I’m aiming to have it output as:
 *     ```
       <div id="attachment_130" class="wp-caption alignnone" style="width: 100px">
              <a href="mailto:some@address.com">
                    <img class="size-full wp-image-130" src="http://severnruncom.ipower.com/wp-content/uploads/2010/06/Nathan.jpg" alt="" width="90" />
                     <p class="wp-caption-text">Staff Member 1</p>
              </a>
       </div>
       ```
   
 *  Thread Starter [Will White](https://wordpress.org/support/users/willpcg/)
 * (@willpcg)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/changing-wps-caption-setup/#post-1579098)
 * Bump.
 *  Thread Starter [Will White](https://wordpress.org/support/users/willpcg/)
 * (@willpcg)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/changing-wps-caption-setup/#post-1579151)
 * For anyone interested:
 * I finally figured it out. In the file ‘media.php’ in your wp-includes folder 
   on line 650 you can alter the string containing the image and the link enclosing
   it. In this case I removed the last 4 characters (the closing tag) and added 
   it to the div creation return.
 *     ```
       function img_caption_shortcode($attr, $content = null) {
   
       	// Allow plugins/themes to override the default caption template.
       	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
       	if ( $output != '' )
       		return $output;
   
       	extract(shortcode_atts(array(
       		'id'	=> '',
       		'align'	=> 'alignnone',
       		'width'	=> '',
       		'caption' => ''
       	), $attr));
   
       	if ( 1 > (int) $width || empty($caption) )
       		return $content;
   
       	$holder = substr( $content, 0, -4 );
   
       	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
   
       	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
       	. do_shortcode( $holder ) . '<p class="wp-caption-text">' . $caption . '</p></a></div>';
       }
       ```
   
 * Now the caption sits within the link you create for an image, and can be edited
   to pop up as a :hover effect via css.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing WP's Caption Setup’ is closed to new replies.

## Tags

 * [caption](https://wordpress.org/support/topic-tag/caption/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 1 participant
 * Last reply from: [Will White](https://wordpress.org/support/users/willpcg/)
 * Last activity: [15 years, 10 months ago](https://wordpress.org/support/topic/changing-wps-caption-setup/#post-1579151)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics