W4 Post List Examples

Posted on June 22, 2011
,
In WordPress

Shazzad Hossain Khan

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.

PreviewTemplateCSS

Extend Woocommerce Registration form fields Published: May 20, 2014
Categories, Tags, Terms Custom Order Published: February 19, 2014
Display Twitter Bootstrap Dropdown on hover by CSS or jQuery Published: February 1, 2014
WordPress Plugin page without showing in admin menu Published: January 10, 2014
WordPress Multiple Post Type Loop & Pagination by Shortcode Published: January 10, 2014
WordPress Page Add Custom Endpoint Published: January 8, 2014
Using Stylesheet, JavaScript Scripts for WordPress Widget Published: January 5, 2014
Extending WordPress Registration Fields Published: January 2, 2014

<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://localhost/w4dev/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: Photos Grid

List of images. Pagination is used with 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;}

Examples 3: Year/Month Archive

List of posts Grouped by Month/Year.

PreviewTemplateCSS

2011, January
1. Hex color validation with regex
2010, June
1. PHP Regular Expression Character Definition
2011, March
1. jQuery On Change Radio value
2. List only logged in author’s posts – WordPress tricks
3. Show Posts from another blog on WordPress MU Website
2011, June
1. JavaScript Regular Expression
2. WordPress Gallery Plugins
3. W4 Post List Examples
2011, February
1. Strip out all Html, Php, Js tags by wp_strip_all_tags WordPress Function
2. register_taxonomy – WordPress Function to Create or Modify Taxonomy
3. Create or modify wordpress post type with register_post_type function
2011, April
1. Add, Remove WordPress Admin Menu
2. WordPress Login Page Customization by filters, actions & plugins
3. Display Users login time on WP Admin Users Table
2014, January
1. Extending WordPress Registration Fields
2. Facebook Page Like Count WordPress Shortcode
3. Using Stylesheet, JavaScript Scripts for WordPress Widget
4. WordPress Page Add Custom Endpoint
5. WordPress Multiple Post Type Loop & Pagination by Shortcode
6. WordPress Plugin page without showing in admin menu
2011, August
1. Login to WordPress Admin Using Php cURL
2011, July
1. Schedule Additional Cron Job with cron_schedules WordPress hook
2011, October
1. Wp Ajax – WordPress Hook to Handle Ajax Request
2. Freelancer.com Hourly Project
2011, September
1. Remove Featured image meta box from WordPress Admin
2012, February
1. Integrate Registration with Facebook Account on WordPress Site
2012, April
1. Improving Freelancer.com Profile
2011, November
1. JavaScript debugging function similar to PHP var_dump / print_r
2013, June
1. Top Outsourcing Websites / Marketplaces
2013, September
1. WP Admin custom post list page blank
2013, November
1. WooCommerce Custom Pricing Method for Products
2. Win Freelancer.com Bid and Get Awarded
2013, December
1. Create WordPress Plugin
2. add_action – WordPress function to hook on events
3. Displaying WordPress Future Posts
2014, February
1. Display Twitter Bootstrap Dropdown on hover by CSS or jQuery
2. Categories, Tags, Terms Custom Order
2014, May
1. Extend Woocommerce Registration form fields

<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; }

W4 Post List Examples

Examples 1: Posts List

Examples 2: Photos Grid

Examples 3: Year/Month Archive

2011, January

2010, June

2011, March

2011, June

2011, February

2011, April

2014, January

2011, August

2011, July

2011, October

2011, September

2012, February

2012, April

2011, November

2013, June

2013, September

2013, November

2013, December

2014, February

2014, May

Examples 4: Categories

Examples 5: List of Tags

About

Our Plugins

Blog