Display Posts List via Shortcode without a Plugin

Where you need this display posts

shortcode and what it will do?

display posts list via shortcode2 tipsmoon
The answer is that this shortcode will be used on pages where we want to display posts in gallery view. This is suitable when you want a page that showcase and display your posts in column and blocks instead of default wordpress archive style where all your posts show a thumbnail and excerpt in rows. It will attract the users and help them to understand about what you are presenting in your site’s web page. It also provide a quick view that users can engage and find their desired posts quickly. So it reduce your websites’s bounce rate in search engines and the users will spend more time on your page. Hence it will increase your SEO score in search engines to rank high in search results. Side by Side it increase your website look more beautiful. Lets do it. It is quite simple:-
Add following function to your Theme’s Function.php file

 

//my fuction to get latest 12 posts for a category in a blog

function wp_PostGallery2($params3 = array()) {

extract(shortcode_atts(array('cat_name2' => 'default'), $params3));	//set parameters for shortcode category input


 //*****  wp query for 12 recent posts 
 
                           $the_query = new WP_Query( array( 
                                'category_name' => $cat_name2,
								'posts_per_page' => 12
								)); 

                   if ( $the_query->have_posts() ) {  //check query is not empty  ?>
				   
                   <div class="gal_posts_h">
				   <ul>
				   <div>
     
	<?php // The Loop
	while ( $the_query->have_posts() ) {
		     $the_query->the_post();
			//check if post has thumbnail image (feature image)
			if ( has_post_thumbnail() ) { ?>
			
			<li>
			<div class="gal_thumb_h">
			<a href="<?php echo get_the_permalink();?>"rel="bookmark"> <?php echo get_the_post_thumbnail($post_id, array(0,'90px'));?></a></div>
			
			<div class="gal_content_h">
			<a href="<?php echo get_the_permalink();?>" rel="bookmark"> <?php echo get_the_title(); ?></a>
			</div>
			</li>
			
			
		    <?php	} else { 
			// if no featured image is found then show only titles  ?>
			<li>
			<div class="gal_content_h">
			<a href="<?php echo get_the_permalink();?>" rel="bookmark"> <?php echo get_the_title();?> </a>
			</div>
			</li>
			<?php
			}
			}
			wp_reset_postdata(); ?> 			
			</ul>
			</div>
	       <?php  } ?>
              
            


   <?php 

      }
   // Add a shortcode
   add_shortcode('post_gallery', 'wp_PostGallery2');
// Enable shortcodes in text widgets
     add_filter('widget_text', 'do_shortcode');

To Display posts properly, we have to add some css style in the theme default style.css file. This css style code is given below:

 

.gal_posts_h {
width: 100%; 
}

.gal_posts_h ul {
position:relative;
overflow:hidden; 
width:100%; 
left:-20px;}

.gal_posts_h ul li {
list-style:none;
position:relative;
top:2px;
left:0px;
height:170px;
margin-left:3px; 
width:24%;
font-size:.75em;
text-align:center;
display:inline-block;
float:left;
margin-bottom:3px;
margin-top:2px;
border:solid 1px #999999 ;
line-height:1.2em;
background-color: #006699 ;
 }
/* old backup
.relatedthumb_h {
margin:0 auto;
height:70px; 
width:100px;  }
*/
.gal_thumb_h {

margin:0 auto;
height:90px; 
width:100%;
background-color: #E0EBF8;  }

.relatedthumb_h a {
color :#333;
text-decoration: none;
display:block; 
margin-left:2px;  }

.gal_content_h { 
width:90%; 
height:25px; 
position:relative;
left:5px; 
top:10px; }

.gal_content_h a {
font-size:1.15em;
margin: 0 0 0px 3px; 
color: #FFFFFF; 
text-decoration: none;     }

After applying this css code our shortcode is ready to use. to use this code you can put following short code in your  post or page.

 

[post_gallery cat_name2="some category" ]

This short code will show following result and display post in list view according to the category given. see image below:-

display posts list via shortcode tipsmoon

Here you can also check my post on How to Make Attractive Landing Page for WordPress Home Page

Leave a Reply

Your email address will not be published. Required fields are marked *