I want to wrap some html (divs and classes) around the tag (to create the appearance of photo corners by way of an image sprite).

Basically, I want to re-write all tags added by WP in the content by way of some code in my functions file from this:

<a href="#link"><img src="image.jpg" class="someclass"></a>

to this:

<div class="featured-img">
    <a rel="#lightbox" href="#link" class="#lightboxclass"><img src="image.jpg" class="someclass"></a>
    <div class="corner-nw"></div>
    <div class="corner-ne"></div>
    <div class="corner-sw"></div>
    <div class="corner-se"></div> 

I want this done after the page has been added/edited by me or anyone else adding content. I tried using wp_get_attachment_image with the function below, and it added the html ONLY when adding the image the first time into the edit content screen. Plus, when the image itself is dragged around inside the edit box, or possibly removed, remnants of the html are messed up.

    function image_corners( $html, $id, $alt, $title ){
    $html = '<div class="featured-img"><img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" /><div class="corner-nw"></div><div class="corner-ne"></div><div class="corner-sw"></div><div class="corner-se"></div></div>';
    return $html;

It seems like every option I look at with a filter or a hook only adds it during the add-image step in the edit screen. Am I mistaken on this? I'd be fine with a jquery option to change the html on/after page load, but I'm not quite sure how to write that, and not sure if that is necessary? Any help is appreciated!

  • Why not use JS/jQuery? A simple check to see if img.imgWithCorner exists, and then a append/prepend function.
    – cr0z3r
    Dec 8 '11 at 15:56
  • I think the code/images after "from this" and "to this" are missing Dec 8 '11 at 21:30
  • Yes Naoise, so sorry. Went back to grab the code and then hit the submit button. I'll go fix the question now. Dec 9 '11 at 14:32
  • cr0z3r, how would that work? Dec 9 '11 at 14:37
  • Well I've solved half of it ... The featured images were easy to change the layout. Now, to figure out how to get the code set up for the images that WordPress automatically inserts. Dec 10 '11 at 20:57

One way is to do this dynamically:

function do_the_replacements($matches){

  // $matches[0] = full string
  // $matches[1] = link attributes
  // $matches[2] = link contentes (the image)

  // change 'someclass' here...
  if(strpos($matches[2], 'someclass') !== false){
    return '
      <div class="featured-img">
        <a '.$matches[1].'>'.$matches[2].'</a>
        <div class="corner-nw"></div>
        <div class="corner-ne"></div>
        <div class="corner-sw"></div>
        <div class="corner-se"></div>


  // no matches, leave it as it is
  return $matches[0];

function my_content_filter($content){
    preg_replace_callback('#\<a(.+?)\>(.+?)\<\/a\>#s', 'do_the_replacements', $content);

add_filter('the_content', 'my_content_filter');
  • I would definitely opt for this tactic. Saving all that HTML in your DB and loading it in the editor is a mess, and asking for trouble! Dec 11 '11 at 17:34
  • Thanks this looks much cleaner so far... do I put this in my functions file? or the template file itself... Dec 11 '11 at 17:40
  • I tried adding to functions file, nothing happened. Added to my page template file and get the following error: * Warning: preg_replace_callback() [function.preg-replace-callback]: Requires argument 2, 'do_the_replacements', to be a valid callback* Dec 11 '11 at 17:44
  • --- I think maybe it's because I have a lightbox plugin that auto-adds rel="colorbox" to the a tag...? Dec 11 '11 at 17:53
  • I dont think so... try adding the updated code in your functions file Dec 11 '11 at 18:08

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.