W4 Post List Examples

Updated:

/

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

Example 1: Posts List

List of posts, showing post title, post date and post categories. Pagination is handled with an ajax call.

PreviewTemplateCSS
<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>
#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(/wp-content/themes/yourtheme/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;}

Example 2: Photos Grid

List of images. Pagination is handled with an ajax call.

PreviewTemplateCSS
<div class="row">
  [posts]
  <div class="col-sm-3">[attachment_thumbnail width="200"]</div>
  [/posts]
</div>
[nav ajax=1]
<div class="w4pl-overlay"></div>
#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;}

Example 3: Year/Month Archive

List of posts grouped by Month/Year.

PreviewTemplateCSS
<ul class="list-unstyled">
[groups]
<li><h4>[group_title]</h4>
<ol>
[posts]
<li>
[title]
</li>
[/posts]
</ol>
</li>
[/groups]
</ul>
#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; }

Example 4: Categories

Example 5: List of Tags