You are here: Home > Online documentation: Smart Post List Light

Online documentation: Smart Post List Light

Table of Contents

A) Description – top

Build lists of posts based on options you choose from a form in a widget. It works similar to SQL query but no coding knowledge is required!

Once you install the widget you can go to your WordPress widgets (Appearance -> Widgets). Drop the widget in a sidebar. Fill the widget’s form, save and have your list prepared for you.

You can drop the widget in as many sidebars you like and build as many independent lists as you like. Every list can have a different content.

Most themes for WordPress will come with default sidebars and a few footer areas where you can drop widgets in. If you want to have custom widget areas for instance in content areas of your pages and post, or any other area of your site:

You can create a fully functional website using this widget. Check the examples on the demo site.

 

B) Installation – top

In order to use the widget and create your smart lists you need to install a plugin that will automatically place the widget in your WordPress widgets section. To do that unzip the .zip file that you downloaded from CodeCanyon. Look for a file called spl.zip. This is your plugin’s zip file.

Install the plugin just like any other WordPress plugin. There are two ways to do that:

    • Using WordPress built-in installer

From the Administration Panels, click on the Plugins tab. Go to Add New->Upload. Choose the plugin’s .zip file from your computer and click Install Now. Then click activate to activate the plugin.

    • Traditional manual installation

Extract zip archive of your plugin. Upload to your server in the wp-content/plugins folder of your WordPress installation. Access the Plugin Panel in your Administration Panels. Scroll down through the list of Plugins to find the newly installed Plugin. Click on the Activate link to turn the Plugin on.

When activated the plugin will place a widget called Smart Post Lists in the list of your widgets (Appearance -> Widgets).

 

C) How to use the widget – top

Once you install the widget go to your widgets section (Appearance -> Widgets). Look for a widget called Smart Post Lists. You can drop the widget in as many widget areas (sidebars) you like and build as many independent lists as you like.

By filling a simple form this widget will build your list based on the options you choose. The form works like an SQL query and controls select expression, where condition, order by expression, limit expression. No coding is required!

When you drop the widget in a sidebar (widget area) you have the following options to choose from:

 

Here is a description of all the options available:

  • Title – The title that will be displayed on top of your posts list (default widget title).
  • Categories – Posts from the selected categories will be included in your posts list. You can select as many categories as you like.
  • Tags – Posts that have the selected tags will be included in your posts list. Enter the tags comma separated. This field is auto complete and gives you suggestions when you start typing.
  • Authors – Posts from the selected authors will be included in your posts list. You can select as many authors as you like.
  • Post Count – Fill in the number of posts to show in your list.
  • Post Offset – Fill in the number of posts to skip before start counting Post Count.
    Example of Post Count and Post Offset:You have to following posts ordered in the same way shown in this example: Post1, Post2, Post3, Post4, Post5.If you set Post Count to 3 and Post Offset to 0 your list will look like this: Post1, Post2, Post3.

    If you set Post Count to 3 and Post Offset to 2 your list will look like this: Post3, Post4, Post5.

  • Order By – Order your list by: date created, date modified, post title.
  • Order to display posts – Choose from ascending or descending.
  • Show title – If this is checked post titles will be shown in your list. Titles will be links to the original posts they represent.
  • Show date – If this is checked post date will be shown in your list. The widget will use the date format set in your WordPress installation (Settings -> General -> Date format)
  • Show excerpt – If this is checked post excerpt will be shown in your list. If a post has empty excerpt the widget will show the post text. Images and all HTML tags will be stripped from the text.
  • Excerpt length in words – Fill in a number of words to show. The widget will first try to count the entered number of words from the excerpt. If the excerpt is empty it will count the number of words from the post text. Images and all HTML tags will be stripped from the text before counting. Only text will be counted.
  • Show number of comments – If this is checked number of post comments will be shown in your list. The number is a link to the post comments section of the post it represents.
  • Show thumbnail on post – Choose to show image on all posts (all) or no posts (none). The widget will look for post’s featured image.
  • Image float – You can choose the image float: top of excerpt, right of excerpt, left of excerpt.

 

 

D) HTML Structure – top

Every list contains a <h3> widget title and <ul> list of posts. Every <li> list member contains two divs. One of them containing the image for the post. The other one containing the text – post title, post date, post comments, post excerpt.

 

E) CSS Files and Structure – top

The CSS file is located in the plugin’s folder and it is named splw.css. The file is separated into well named section:

/* FRONT END CSS */ – front-end general styles

/* FRONT END CUSTOM CSS */ – front-end styles that you can use to customize the look of your lists

.widget-title

.smart-post-list

.smart-post-list-single-container

.smart-post-list-image

.smart-post-list-title

.smart-post-list-date

.smart-post-list-comments

.smart-post-list-main p

/* ADMIN CSS */ – admin styles for the widget

 

F) JavaScript – top

There is a javascript file located in the plugin’s folder and it is named splw.js. It contains one JQuery function that we use for featured image and content sizes.

In the php file of the plugin named splw.php there is a php function add_script_config that will load javascript that we use for tags field autocomplete.

 

G) PHP – top

There is a php file located in the plugin’s folder and it is named splw.php. It contains all the php code for the plugin. The code is separated into functions. Each of them has a short description of what it does.