The WordPress loop is a list of all, or a limited number of post/page entries in the database. WordPress will generate content from the database based on your supplied theme page, or using the default index.php page if none are available.

When WordPress returns the content from the database, you will have access to much information relating to your webpage. You can enhance your website by using CSS to style your WordPress theme and the loop results.

NOTE: You must use ${loop} or ${query} tag (Folders only) to generate the WordPress loop.

WORDPRESS RULE: You can use multiple ${query} tags, but only 1 ${loop} tag per template page.

Loop Types

Export Kit gives you full support for WordPress loops to customize both the default rendering, and custom loops you may create in your PSD file.

• Custom Posts Loop
• Query Loop
• Default Entries Loop
• Custom Entries Loop

Loop types give you additional options when creating your WordPress themes, as they give you ability to both style your default WordPress list with ${css|styles} tags, or control the visual data output in your PSD.

Custom Posts Loop

Custom posts loops are used to display dynamic content from the database using elements from your PSD design.

${div|posts} - wraps the ${loop} tag for rendering custom loop elements

${div|post} - will render the WP Post/Page information for customizing list items

Example Custom Posts Loop Design

With custom loops you must assign each required property to a Photoshop layer or that property will not display.

Query Loop

Custom query loops are used to display dynamic content from the database outside of the general page/post loop. You can use Query Loops to display multiple post/page types on a single request.

WARNING: Photoshop and Illustrator have a max character limit in layer names, keep your queries short.  If you need to create a custom (long) query - read here.

1

${query:array('post_type'=>'gallery', 'post__in'=>array(2,5))} gallery posts

${div|posts} - wraps the ${query} tag for rendering custom loop elements

${div|post} - will render the WP Post/Page information for customizing list items

When using Query Tag, the name of the folder becomes the name of the loop with the string “_loop” added to the name in PHP. This is the name you must reference within your ${div|post} to render the content based on the WP_Query results.

FOLDER NAME: gallery posts
LOOP NAME: $gallery_posts_loop

Default Entries Loop

Default Entreis loops will render content using the native WordPress render. This can be a list for any “Archives” style page – including the index page, or the post/page content for single pages.

${div|entries} - wraps the ${loop} tag for rendering default loop elements

${div|entry} - will render the default WP Post/Page list items

Default Entries Loop Design

Default Entries loops only require a blank layer with ${the_content}.

Custom Entries Loop

Custom Posts loops will pull content from WordPress and render into predefined areas in your design. This makes it simple to define the area of your content and sidebar in your PSD or AI design.

${div|entries} - wraps the ${loop} tag for rendering default loop elements

${div|entry} - will render the default WP Post/Page list items

Example Custom Entries Loop Design

Custom Entries loops only require you to draw a shape, and outline where you want the content to display.

${fix} The Loop Size

${fix} - Shapes Only - will create an HTML clear fix using the layer size

The nature of HTML forces us to clear our elements sometimes. This is also common in WordPress themes where you may want to add a “clear” break a rendering list such as the loop.

EXAMPLE: Prevent the sidebar from over-lapping the loop if a post/page is broken.

EXAMPLE: Space elements in the loop and provide padding between items.

The WordPress Loop Advanced

Export Kit gives you full control over the native WordPress loop, and lets you customize all aspects of your PSD output. It is very common, and also recommended to use various WordPress theme modules to enhance your website output.

Use conditional loops to customize your theme template pages as required.

Conditional Loop Support

Some modules have “conditions” which the module will only render under. This makes it easy to extend the functionality of each theme template with additional views based on the user query.

EXAMPLE: If there are no post, then display this.

Conditional loops will allow you to display content from the WordPress database under specific circumstances. You can use a single template page to display content, and respond to the user query in the same template file.

No Post/Pages Available

${div|no_posts} - will render child layers only if there are no Posts/Pages

No post/pages available should give the user a notification message, eg. “No posts found!”. WordPress also recommends you add a searchform to all pages that have no content, including 404 pages.

Is a Single Post/Page

${div|is_single} - will render child layers only if the Post is a Single Page/Post

Is single should display all the content and options related to an individual post/page. WordPress also recommends you add a categories, tags, thumbnail, comments, author and meta to all pages that display content.

Have Post/Pages Available

${div|have_posts} - will render child layers only if there are Posts/Pages

Have post/pages available should list all, or a portion of the posts/pages found based on the user query. The list design and/or style depends on your loop type.

Additional WordPress Tags

NOTE:
(1) Export Kit works 100% with WordPress
(2) WordPress is a complex system
(3) WordPress has many features and options
(4) All EK layer tags are based on actual WP tags