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

Remove Featured image meta box from WordPress Admin Published: September 6, 2011
Login to WordPress Admin Using Php cURL Published: August 4, 2011
Schedule Additional Cron Job with cron_schedules WordPress hook Published: July 31, 2011
W4 Post List Examples Published: June 22, 2011
WordPress Gallery Plugins Published: June 8, 2011
JavaScript Regular Expression Published: June 7, 2011
Display Users login time on WP Admin Users Table Published: April 30, 2011
WordPress Login Page Customization by filters, actions & plugins Published: April 21, 2011
Add, Remove WordPress Admin Menu Published: April 16, 2011
jQuery On Change Radio value Published: March 23, 2011
List only logged in author’s posts – WordPress tricks Published: March 16, 2011
Create or modify wordpress post type with register_post_type function Published: February 28, 2011
register_taxonomy – WordPress Function to Create or Modify Taxonomy Published: February 12, 2011
Strip out all Html, Php, Js tags by wp_strip_all_tags WordPress Function Published: February 2, 2011
Hex color validation with regex Published: January 15, 2011
PHP Regular Expression Character Definition Published: June 15, 2010

<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
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
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, 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
2022, August
1. How WordPress Plugin Auto Update Works

<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, September

2013, November

2013, December

2014, February

2014, May

2022, August

Examples 4: Categories

Examples 5: List of Tags

About

Our Plugins

Blog