Resources

Loops

Overview

Loops is a powerful section for controlling the native WordPress loop and WP Query. With layout controls.

Installation & Activation

Loops can easily be downloaded from inside WordPress using Extend.

  1. Download the plugin from Extend. It will now appear in your Plugins tab.
  2. Click Plugins, and find your Loops plugin (titled PageLines Section Loops).
  3. Click Activate to be able to use the plugin inside your editor.
  4. Go to your PageLines Builder where you will now find Loops in the Content section.

Settings

As with all section, the Loops section includes the Standard Section Options such as padding/margin, background options and etc.

The Loops section options are separated into three categories, these are Layout options, Query options and Meta Query options.

Layout Options

The Layout options provide control over the look of posts in the Loops section.

Loops Shortcodes / HTML
All post elements such as title, featured image and so forth are controlled using shortcodes. Use these shortcodes to control the dynamic post info. The shortcodes can be ordered in any way you like, creating a unique post layout rathe than the traditional title, image, content etc...

Clicking the Reference button will expand the shortcode list, showing all available shortcodes.


[loops_title align="left"]
[loops_media size="thumbnail" align="left"]
[loops_content]
[loops_comments]
[loops_excerpt length="80"]
[loops_author]
[loops_date format="F j, Y"]
[loops_link text="Read More" align="left"]
[loops_avatar size="64" align="left"]

You can change the alignment using align="" with either left, center or right. The media shortcode supports thumbnail and all post format elements.

For further customization, you can also include a class="" attribute to each shortcode. This allows you to add your own styling to each shortcode.


[loops_title align="left" class="my-custom-class"]

Grid Columns Standard
Allows you to control how your posts are displayed such as in a grid or listed like a traditional blog. You can select between four columns, three columns, two columns and one column. One column is the default option and lists your posts like a traditional blog.

Grid Columns On Mobile
The Grid Columns On Mobile options operates the same as the Grid Columns Standard option, but will only affect mobile devices. This is useful if you wish to use a different layout option on mobile devices.

Base Font Size (px)
Provides control over the font size for the Loops section, you can select between 10 pixels and 32 pixels. The value you select will affect all type in the Loops section.

Query Options

The Query options provide control over what content is displayed in the Loops section.

Select Post Type
This provides control over what post type populates the Loops section. Out-the-box, this option will have the Pages post type and the Posts post type. However, if you create any custom post types they too will be listed for you to use.

Select Taxonomy Term
This allows you to filter the content for the post type you select in the Select Post Type option. For example, if you select the Posts post type, you will be able to display posts from a specific category or tag.

This is useful if you wish to use Loops on a category or tag archive page or create a magazine layout.

Sort Elements by Postdate
This provides control over how your posts are sorted, you can select between:

  • Date Descending (Default)
  • Date Ascending
  • Random

Posts Per Page (adds pagination)
Provides control over how many posts are displayed in the Loops section, you can select between 0-32 posts. This option will also add pagination to the bottom of the Loops section for paged navigation.

Posts Offset
This allows you to skip posts from the value you have selected. This is useful if you're creating a magazine layout or using a post slider that is already displaying your latest posts.

Meta Query Options

The Meta Query options are for advanced users and allows you to populate the Loops section with posts using specific query options. This is useful if you wish to display featured products from WooCommerce or products within a certain price range.

For more information on the WP Query, please review the WP_Query Documentation on the WordPress Codex.

Shortcode

The Loops section can be inserted into a page, post or widget using the shortcode below. This is used as a quick reference and we recommend including a unique ID.


[pl_section section="loops" id="Enter_Unique_Id_Here"]

Classes

We recommend using your own custom classes via the Additional Styling Classes option to customize sections. However, you can use the classes below as a quick reference or in your own styles, if you prefer to use the default class(es) instead of your own.


/* pl-sn-loops class is assigned to the <section> element */
.pl-sn-loops { ... }

/* loops-wrap class is assigned to the div that wraps all posts */
.loops-wrap { ... }

/* Assigned to the <article> element */
.loops-post { ... }

/* Post elements */
.pl-loops-excerpt { ... }
.pl-loops-content { ... }
.pl-loops-author { ... }
.pl-loops-thumb { ... }
.pl-loops-title { ... }
.pl-loops-date { ... }
.pl-loops-link { ... }

/* Pagination */
.pl-pagination-simple { ... }
.page-numbers .current { ... }
.page-numbers .next { ... }
.page-numbers .prev { ... }
.page-numbers { ... }

On This Page