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>
#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>
#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.
2014, May
2014, February
2014, January
- How to check & increase PHP memory usage
- Extending WordPress Registration Fields
- Facebook Page Like Count WordPress Shortcode
- Using Stylesheet, JavaScript Scripts for WordPress Widget
- WordPress Page Add Custom Endpoint
- WordPress Multiple Post Type Loop & Pagination by Shortcode
- WordPress Plugin page without showing in admin menu
- Using Checkbox for post tag & non hierarchical taxonomies
- Improving Rank in Google Search – Improve SERP
2013, December
2013, November
2013, September
2013, June
2012, April
2012, February
2011, November
2011, October
2011, September
2011, August
2011, July
2011, June
2011, April
2011, March
2011, February
2011, January
2010, June
Examples 3: Code
<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; }
Examples 4: Categories
Examples 5: List of Tags
WordPress FunctionsFreelancerWordPress Custom FunctionsWordPress CustomizationPreg matchWordPress PostOutsourcingWooCommerceWordPress ShortcodeWordPress RegistrationFreelancingGoogleWordPress AuthorWordPress TermsWordPress MUWordPress MenuWordPress CronFacebookDeveloping WordPress PluginWidgetWordPress PaginationQuestionWordPress Code Snippetw4 post listMysqlSEOWordPress ThemesWordPress Pluginpaginate_links()
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 🙂