W4Dev
  • Plugins
    • W4 Post List
    • Soccer Engine
  • Contact
    • About Us
  • My account
  • Blog
    • WordPress
    • Php
    • Freelance

W4 Post List Examples

Posted on June 22, 2011October 30, 2015, in WordPress
Shazzad Hossain Khan
https://shazzad.me

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.

May 20, 2014, in WordPress

Extend Woocommerce Registration form fields

February 19, 2014, in WordPress

Categories, Tags, Terms Custom Order

Next

Examples 1: Code

Template

<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.

Next

Examples 2: Code

Template

<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.

  • 2014, May

    1. Extend Woocommerce Registration form fields
  • 2014, February

    1. Display Twitter Bootstrap Dropdown on hover by CSS or jQuery
    2. Categories, Tags, Terms Custom Order
  • 2014, January

    1. How to check & increase PHP memory usage
    2. Extending WordPress Registration Fields
    3. Facebook Page Like Count WordPress Shortcode
    4. Using Stylesheet, JavaScript Scripts for WordPress Widget
    5. WordPress Page Add Custom Endpoint
    6. WordPress Multiple Post Type Loop & Pagination by Shortcode
    7. WordPress Plugin page without showing in admin menu
    8. Using Checkbox for post tag & non hierarchical taxonomies
    9. Improving Rank in Google Search – Improve SERP
  • 2013, December

    1. Create WordPress Plugin
    2. add_action – WordPress function to hook on events
    3. Displaying WordPress Future Posts
  • 2013, November

    1. WooCommerce Custom Pricing Method for Products
    2. Win Freelancer.com Bid and Get Awarded
  • 2013, September

    1. WP Admin custom post list page blank
  • 2013, June

    1. Top Outsourcing Websites / Marketplaces
  • 2012, April

    1. Improving Freelancer.com Profile
  • 2012, February

    1. Integrate Registration with Facebook Account on WordPress Site
  • 2011, November

    1. JavaScript debugging function similar to PHP var_dump / print_r
  • 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
  • 2011, August

    1. Login to WordPress Admin Using Php cURL
  • 2011, July

    1. Schedule Additional Cron Job with cron_schedules WordPress hook
  • 2011, June

    1. JavaScript Regular Expression
    2. WordPress Gallery Plugins
    3. W4 Post List Examples
  • 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
  • 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, 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, January

    1. Hex color validation with regex
  • 2010, June

    1. PHP Regular Expression Character Definition

Examples 3: Code

Template

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

Examples 4: Categories

  • WordPress
  • Freelance
  • Php
  • JavaScript
  • jQuery
  • SEO
  • Bootstrap
  • Code Snippets

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

  • http://alexdantas.net

If you have created a beautiful list, add your link in the comments & we will add it here with regards 🙂
w4 post list
  • Facebook
  • Twitter
  • Google Plus
  • Email

About

  • About Us
  • Contact
  • Privacy

Our plugins

  • Soccer Engine
  • W4 Post List

Blog

  • Extend Woocommerce Registration form fields
  • Categories, Tags, Terms Custom Order
  • Display Twitter Bootstrap Dropdown on hover by CSS or jQuery
  • Improving Rank in Google Search – Improve SERP
W4dev Inc. All rights reserved.