Programming Tutorials – Creating an picture gallery is basic creating the wordpress wallpaper’s theme. Seegatesite article will share how to display the picture gallery automatically in wordpress posts. If you want to create a blog wallpapers and you need to display your images in a professional manner like the gallery look? Most people start looking for a WordPress plugin that will help them to create a gallery in WordPress, you actually don’t need a plugin for this if you know how.
Here is videos preview how picture gallery script is working properly
Table of Contents
Here’s how to display the picture gallery on wordpress post automatically
1. Create php file as gallery-show.php in your themes folder and copy this code below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?php if (is_single() ){ global $post; if ($post->post_status == 'publish' ) { $imageattach = get_posts( array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_parent' => $post->ID, 'exclude' => get_post_thumbnail_id() ) ); if ( $imageattach ) { ?> <h3 class="gallery-title">Gallery of <?php the_title(); ?></h3> <ul class="single-gallery"> <?php foreach ( $imageattach as $imageatt ) { echo ' <li class="gallery-items">'; echo wp_get_attachment_link( $imageatt->ID, 'full', true ); echo '</li> '; }?> </ul> <?php } } } ?> |
Explanation :
- Here is Query to showing all of attachment image on wordpress post
1 2 3 4 5 6 | $imageattach = get_posts( array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_parent' => $post->ID, 'exclude' => get_post_thumbnail_id() ) ); |
2. Include these code below to the single.php file in your theme
1 | <?php include('gallery-show.php'); ?> |
3. Add this css script to beautify the look
1 2 3 4 5 | h3.gallery-title{text-align:center;} li.gallery-items{font-size:11px;line-height:16px;overflow:hidden;width:134px;min-height:100px;float:left;} .single-gallery li.gallery-items{margin:0px 6px 6px 2px;} .gallery-items img{border:1px solid #ccc;border-radius:4px;padding:2px;width:95% !important;height:80px !important;} .gallery-items img:hover{box-shadow:0px 0px 3px #111;} |
4. To run these script working properly, try use new post and then go to "add media", upload your images and dont include in the post (just upload from media in the post), because the picture gallery will show automatically into your wordpress post.
Leave a Reply