Loop Layout Item – PageCells Responsive Framework

The Loop generates the main content of any page. Like the other Layout Items, Loops appear as blue dashed boxes on the Theme Options page. Each item inside the Loop Drop Zone is repeated for each Post WordPress selects to display on the page.

Adding Loops

From the Layout Items panel on the top right of the Theme Options page, drag the Loop Icon over to the Row, Container or other Loop Drop Zone where you want it to appear.

There can only be a total of two loops on any given page: a Main Loop and an optional Secondary Loop. If you need additional lists of Posts, you can use IntelliWidget to add much more flexibility to your site.

When you add a new Loop Layout Item, PageCells automatically inserts a typical set of Parts to make it work. In order to make it easy to create Layouts quickly, more Parts are added than you may need in your particular case. Simply click the Trash Can Icon next to each Part to remove the ones that you do not need.

Positioning Loops

Once a Loop is added, you can drag the Loop to change its position on the Theme Options page. Loops can be dragged across Rows or simply repositioned in the same Row.

The Loop Drop Zone appears as a dark yellow dashed box inside the Loop blue dashed box outline.
You can drag other Layout Items, including one other Loop, into its Drop Zone and their widths will adjust to the width of the Loop.

Deleting Loops

Click the red Trash Can Icon on the right side of the Loop to delete it. An alert will appear to confirm that is really what you want to do.

Loop Options

Click the blue Wrench Icon next to the Loop Name to open the Loop Options panel.


You can reuse the Options and Layout Items from another Loop by selecting it from the Copy menu. This Loop will appear with the selected Loop’s name and “(copy)” in its label on the Theme Options page.

Loop Name

The Loop name is used to identify the Loop on the Theme Options page. It has no other purpose except to make the Loop easier to find on the Theme Options page.

Post Type

This is usually set to “From Query,” meaning the Loop will display Posts selected by WordPress. If this is a secondary Loop, however, you can specify a Custom Post Type.

Posts per page

You can specify the number of Posts to display by entering a number in this box. The default is the number of Posts specified under Settings > Reading in the WordPress admin.

Order By

You can change the property by which the Posts are sorted. The default is “date.” Other options are “ID,” “Menu Order,” “Post Title” and “Random.”

Sort Order

This can be Ascending, Descending. If ordering by “Random,” the Sort Order is ignored.

Posts per row

If you would like the Posts to appear in multiple columns (e.g., Portfolio Gallery), you can set the number of columns here. PageCells automatically adjusts the widths to correspond to the number. The number of Posts per Row must be 1-12. 7,9 and 11 will be adjusted to 6,8 and 10, respectively.


This option enables you to display Posts using any criteria you choose. It accepts any valid WP_Query query string. More information is available from the WordPress Codex.

Ignore Sticky Posts

By default, WordPress will show any (selected) Post that is flagged as “sticky” at the top of the list regardless of Post Date. This option allows you to disable this behavior.

Loop CSS

Click the green Paintbrush Icon next to the Loop Name to open the Loop CSS panel. Loops use the same Fluid Cell System classes as other Layout Items as well as the Clearfix class.


This style forces the Row to clear any floated items it contains. This ensures that any background styles can be rendered, and keeps other items from being affected by floated items inside the Row. This style is ENABLED by default.


In this video we discuss the Loop Layout Item, loop options, setting up multiple columns and different ways to apply styles to achieve the results you want using the PageCells Responsive Theme Framework.