Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want clean code for a gallery, like:

<div class="gallery">
<ul>
<li><a href='../wp-content/uploads/2014/04/lgitem-01.jpg'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href='../wp-content/uploads/2014/04/lgitem-01.jpg'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href='../wp-content/uploads/2014/04/lgitem-01.jpg'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href='../wp-content/uploads/2014/04/lgitem-01.jpg'><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
</ul>
</div>

Currently my code is coming out like this:

<div id="gallery-2" class="gallery galleryid-12 gallery-columns-5 gallery-size-thumbnail"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-01-150x150.jpg" class="attachment-thumbnail" alt="lgitem-01"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-02.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-02-150x150.jpg" class="attachment-thumbnail" alt="lgitem-02"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-03.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-03-150x150.jpg" class="attachment-thumbnail" alt="lgitem-03"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-04.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-04-150x150.jpg" class="attachment-thumbnail" alt="lgitem-04"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-05.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-05-150x150.jpg" class="attachment-thumbnail" alt="lgitem-05"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-06.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-06-150x150.jpg" class="attachment-thumbnail" alt="lgitem-06"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-07.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-07-150x150.jpg" class="attachment-thumbnail" alt="lgitem-07"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-08.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-08-150x150.jpg" class="attachment-thumbnail" alt="lgitem-08"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-09.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-09-150x150.jpg" class="attachment-thumbnail" alt="lgitem-09"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-10.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-10-150x150.jpg" class="attachment-thumbnail" alt="lgitem-10"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="../uploads/2014/04/lgitem-11.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-11-150x150.jpg" class="attachment-thumbnail" alt="lgitem-11"></a>
        </dt></dl>
        <br style="clear: both;">
    </div>
share|improve this question
    
That doesn't look like native gallery output. You will need to determine what is changing it (plugin/theme/etc) first. –  Rarst Apr 8 at 18:36
    
i simpley just add gallery from admin then show like this code. no plugins installed . i don't want to use any plugins for that now. i have nextgen etc plugins have for small gallery no need actually. –  Accore LTD Apr 8 at 18:38
    
Actually scratch that, this might be default — looked at wrong thing, sorry. –  Rarst Apr 8 at 18:44
    
i already able to change most of thing from media.php page. now want to add class in <a> –  Accore LTD Apr 8 at 19:02
    
finally i made it two way... –  Accore LTD Apr 8 at 19:17

1 Answer 1

up vote 0 down vote accepted

You can try to overwrite the gallery shortcode with:

add_shortcode( 'gallery', 'custom_gallery_shortcode' );

where the shortcode callback is:

/**
 * Overwrite the native [gallery] shortcode, to modify the HTML layout.
 */
function custom_gallery_shortcode( $attr = array(), $content = '' )
{
        $attr['itemtag']        = "li";
        $attr['icontag']        = "";
        $attr['captiontag']     = "p";

        // Run the native gallery shortcode callback:    
        $html = gallery_shortcode( $attr );

        // Remove all tags except a, img,li, p
        $html = strip_tags( $html, '<a><img><li><p>' );

        // Some trivial replacements:
        $from = array(  
            "class='gallery-item'", 
            "class='gallery-icon landscape'", 
            'class="attachment-thumbnail"',
            'a href=', 
        );              
        $to = array( 
            '',
            '',
            'class="tnggallery"', 
            'a class="lightbox" href=', 
        );
        $html = str_replace( $from, $to, $html );

        // Remove width/height attributes:
        $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );

        // Wrap the output in ul tags:
        $html = sprintf( '<ul class="gallery">%s</ul>', $html );

        return $html;
}

to modify the HTML layout.

share|improve this answer
    
thank you so much.. can you tell me how to apply this. just copy and paste (changes if i need ) to function. php file or else –  Accore LTD Apr 8 at 19:19
    
You can add this to your functions.php file in the current theme directory or create a plugin. –  birgire Apr 8 at 19:20
    
cool it work.. and nice too.. but i want to add class under a tag.. like <a href="Back-Double-Swing.jpg" class="lightbox"> –  Accore LTD Apr 8 at 19:29
    
awesome man............... thank you so much......................... i really nice.. i like this solution most . i got two but this one i feel best :) thanks again –  Accore LTD Apr 8 at 19:33
    
ok great, I updated the answer. You can then modify it to your needs. If you need some additional non-trivial replacements, you might want to try for example preg_replace(). –  birgire Apr 8 at 19:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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