Friday, 1 February 2013

Wordpress Feeds on your website with responsive multi-column layout - jquery plugin


Wordpress feeds will show up your posts from any wordpress site on your website. All you need to od is specify your wordpress site link or your worpress site Id. Now you can customize this plugin completely at Cloudsmith.

The view is fully responsive with all major browser support. Check out the Cloudsmith customization for Wordpress feeds here!





How to use:

The download pack contains the plugin file - wpress.min.js

Just navigate to the Cloudsmith link for Wordpress feeds. Customize as per your requirement and get the code with the plugin right away!

Technical deatils:

1. Javascript

Set up the javascript variables as shown -
(Just use the Cloudsmith link (live customization) to generate this code for you!)


The description of all variables is shown below -



wpressBlogLink
This must be the URL for your Wordpress blog (http://example.wordpress.com) or the Site ID of your wprdpress site.

wpressBlogLinkType
The value should be "url" or "id" depending on what you specify in the wpressBlogLink variable.

pathToLoadingImage
This the path to a loading image that is used by this widget. Basically this image is shown when the image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server)

If this is not supplied, no loading image is shown.
wpressColumns
The number of columns (for posts) to be displayed in the body of the widget. This value changes as per the width of the plugin. Example: if the width of the widget is less than 600px then a single column layout is shown. For widths less than 1100px a two column layout is shown. For widths greater than 1100px a three column layout is shown.

wpressOneColumnLimit
A single column layout will be shown if the width of the widget is less than the value of wpressOneColumnLimit

wpressTwoColumnLimit
A two column layout will be shown if the width of the widget is less than the value of wpressTwoColumnLimit. A three column layout is shown if the width of the widget is greater than wpressTwoColumnLimit

wpressMobileModeLimit
A simple and small mobile view will be shown if the width of the widget is less than the value of wpressMobileModeLimit.

wpressPostBatchSize
This value specifies the number of posts that will be pulled from your Wordpress blog at one time. Each click of Load-More button will bring this many number of posts.

wpressDisplayHeader
When the value is set to "none", the header is not shown. Set the value to "block" to show the header.

wpressWidgetWidth
The width of the Tumbax widget. CAn be specified as percentage (80%) or in pixels (650px)

wpressWidgetMaxHeight
This will limit the height of your widget. It is advisable not to set the height unless you have limited height constraint on your webpage. Change this value from the Cloudsmith configuration tool.

wpressPostMaxHeight
This will limit the height of each post. It is advisable not to set the height unless you dont wish to display your complete posts. Change this value from the Cloudsmith configuration tool.

wpressHeaderBackground
Background color of your widget header. Change this value from the Cloudsmith configuration tool.

wpressBodyBackground
Background color of your widget body. Change this value from the Cloudsmith configuration tool.

wpressPostBackground
Background color of your each post. Change this value from the Cloudsmith configuration tool.

wpressPostTitleColor
Text color of the title for each post. Change this value from the Cloudsmith configuration tool.

wpressPostTextColor
Text color for each post. Change this value from the Cloudsmith configuration tool.

wpressHeaderTextColor
Text color for widget header. Change this value from the Cloudsmith configuration tool.

wpressBorderColor
Border color for the widget. Change this value from the Cloudsmith configuration tool.


For any other specific requirement, just let me know and I will provide a hack!

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin wpress-feeds.min.js before the end of your body tag and you are done!


3. Create a container for your interface

Add a div as shown below in you HTML. This div will contain the Tumbax widget and display your blog feed.


A Wordpress blog feed in a widget will be shown on your webpage!
Let me know your suggestions.

8 comments:

  1. Jake, Hi great plugin, 1) Can you provide a way to display date for the posts? 2) Option to display summary of posts? and 3) Way to control border color around posts?

    ReplyDelete
  2. A very good resource for everybody that wants to read a good blog...Thanks for the share...http://www.kinexmedia.ca/

    ReplyDelete
  3. i haven't understood most of informaition, but the main point i've mastered)

    ReplyDelete
  4. Your demo doesn't work.

    ReplyDelete
  5. Nice discussion.Just going to try it.I think now it will not be very hard.
    Thanks,
    Cheap website design

    ReplyDelete
    Replies
    1. Stop advertising.

      Delete
  6. First available with WordPress Edition 2.8, this design tag profits the information of a tag. A tag ID can be approved as a parameter, but if no tag ID is approved, the information present queried tag will be came back.Because WordPress connections with this data source by itself, you as an end customer, shouldn't have to fear much about its framework.

    ReplyDelete