W4 Post List Examples

some shortcodes are nested. that means they needs to be inside another shortcode. please make sure you have placed shortcodes at it's appropriate place.

All of the lists shown below are created with W4 Post List plugin. Template created with shortcodes, HTML and CSS.


Examples 1: Posts List

List of posts. Showing post title, post date and post categories. Pagination is used with ajax call.

Examples 1: Code

<div class="row">[posts]<article class="[post_class] col-md-6">
  <div class="featured_box">
  <div class="post_meta">[post_date], in [post_terms tax="category"]</div>
  <header><h2><a href="[post_permalink]">[post_title]</a></h2></header>
  </div>
  </article>[/posts]</div>
  [nav ajax=1]
<div class="w4pl-overlay"></div>

Css

#w4pl-list-[listid] ul{ padding-left: 0;}
#w4pl-list-[listid] li{ list-style: none outside; display: block;}
#w4pl-inner-[listid]{ position: relative; padding: 20px 70px; background-color:#EEE; border:1px solid #DDD;}
#w4pl-inner-[listid] .page-numbers{background:url(http://w4dev.com/wp-content/themes/w4dev/images/arrows.png) no-repeat; position: absolute; top: 50%; margin-top:-43px; height:86px; width:60px; display:block; text-indent:-9999px; overflow:hidden;}
#w4pl-inner-[listid] .prev.page-numbers{ left:0px; background-position:left top;}
#w4pl-inner-[listid] .next.page-numbers{ right:0px; background-position:right top;}
#w4pl-list-[listid] .featured_box{ margin-bottom:0;}
#w4pl-list-[listid] .featured_box h2{margin:10px 0 0; font-size:30px; line-height:30px; letter-spacing:-2px;}
#w4pl-list-[listid] article h2 > a{color: #3F7725}
#w4pl-inner-[listid] .w4pl-overlay{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(255,255,255,0.4) url(/wp-admin/images/loading.gif) no-repeat center; display:none; }
#w4pl-list-[listid].w4pl-loading .w4pl-overlay{display:block;}

Examples 2: Media List (images filtered by mime-type)

List of images. Pagination is used with ajax call.

Examples 2: Code

<div class="row">[posts]
<div class="col-sm-3">[attachment_thumbnail width="200"]</div>
[/posts]</div>
[nav ajax=1]
<div class="w4pl-overlay"></div>

Css

#w4pl-list-[listid] ul{ padding-left: 0;overflow:hidden; margin-bottom:0px; vertical-align:middle;}
#w4pl-list-[listid] li{ list-style: none outside; display: inline-block; width:23%; padding: 1%;}
#w4pl-list-[listid] img{ border: 1px solid #CCC; padding: 5px; background-color: #EEE; height:auto; width:100%;}
#w4pl-inner-[listid]{ position: relative; padding: 0 40px; margin-bottom:20px}
#w4pl-inner-[listid] .prev.page-numbers{position: absolute; top: 50%; left:0;}
#w4pl-inner-[listid] .next.page-numbers{position: absolute; top: 50%; right:0;}
#w4pl-inner-[listid] .w4pl-overlay{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(255,255,255,0.4) url(/wp-admin/images/loading.gif) no-repeat center; display:none; }
#w4pl-list-[listid].w4pl-loading .w4pl-overlay{display:block;}


Examples 3: Year/Month Archive

List of posts Grouped by Month/Year.

Examples 3: Code

<ul class="list-unstyled">
[groups]
<li><h4>[group_title]</h4>
<ol>
[posts]
<li>
[title]
</li>
[/posts]
</ol>
</li>
[/groups]
</ul>

Css

#w4pl-list-[listid] h4{ background-color: #DDD; padding: 5px 10px; font-size:14px; border-left:30px solid #AAAAAA; margin:0; }
#w4pl-list-[listid] ol{ background-color: #EEE; padding-top: 10px; padding-bottom: 10px; padding-right:20px; }
#w4pl-list-[listid] ol li{ border-bottom:1px dashed #DDD; }
#w4pl-list-[listid] li a{ text-decoration: none; }


Some beautiful lists created by our plugin user


If you have created a beautiful list, add your link in the comments & we will add it here with regards 🙂

Discussion