Post Loop Ajax (post-loop-ajax) free WordPress plugin

Post Loop and Pagination Widget. Multiple Posts Loop placement. Auto page feed and at random.
It works inside Page Builder by SiteOrigin.
Page Builder by SiteOrigin is great plugin.

Settings

system

• unique id

Normally enter default.
Checked and enter unique value, if doesn’t work.
Will be destroyed this value when copied widget.

• remember page number until cookie expires

Default: 7 days

• remove the shortcode when not work

title

Enter widget title or empty. Checkbox: display or not.

put before and after widget

need reload page

If checked then set page number to cookie then reload page, not use ajax call.

scroll to content top after reloaded

class

Specify widget block class.

Default:

post-loop-ajax-use-default-css

display posts

• post type name, separated by comma:

Enter Post Type name, also including Custom Post Type.
Default: post

• category name, separated by comma:

• without category name, separated by comma:

• additional (key=value&key2=value2…):

See: https://codex.wordpress.org/Class_Reference/WP_Query

• to result in (query after assembly):

Display query after assembly.

Doesn’t work if use this query as argument of WP_Query function.

e.g.

post_type=(post,topic)&cat=-1,-3

The expansion of this formula, WP_Query function accept this array.

Array(
    ['post_type'] => Array (
        [0] => 'post'
        [1] => 'topic'
    )
    ['cat'] => '-1,-3'
)

• Can enter query code by json string format. This field is prioritize than above.

e.g.

{
"post_type":"products",
"orderby":"date",
"order":"ASC"
}

e.g.

{
"post_type": "post",
"posts_per_page": 2,
"orderby":"date",
"order":"DESC",
"date_query":[{"after": "12 month ago"}]
}

Don’t use single quote.
This string is convert to PHP Array by ‘json_decode’ function.

posts per page

Default: 10

max page number

Default: 0 (0: disabled)

excerpt char length

Default: 140

excerpt ellipsis

Default: “…”

excerpt more

Default: Read More

date time format

Default:

F jS, Y

pagination type

nothing
normal
lite
prev and next only
full
multi (for responsive design, see: css/post-loop-ajax.css)

hide prev and next button

pagination previous string

Enter previous navigation button string or empty(default button).

pagination next string

Enter next navigation button string or empty(default button).

scroll to content top after rewrite content by ajax, without while loop enabled

• scroll speed (-1: disabled)

Default: 200 (msec)

• scroll offset top

Default: -150 (px)

• scroll offset top margin

Default: 20 (px)

auto loop contents

• loop interval time (0: disabled)

Default: 0

• time until changed contents

Default: 500 (msec)

• page at random

effects

Using jQuery UI Effects.

• don’t display loading image.

• front

select front effect types

• end

select end effect types

template

Enter or select template.

That have 5th blocks, split by <!--split--> tag.

Default:

        <!--header-->
        <div>
            <!-- <div style="overflow-y:auto; height:500px;"> -->
                <!--split-->
                <!--article-->
                <article id="post-%post_id%" %post_class%>
                    <header class="entry-header">
                        <h2 class="entry-title"><a href="%permalink%" rel="bookmark">%title%</a></h2>
                    </header><!-- .entry-header -->
                    <div class="entry-content">
                        <!--
                        %first_image(medium,%permalink%)%
                        %excerpt%
                        -->
                        %content%
                    </div><!-- .entry-content -->
                    <footer class="entry-footer">
                        <div>Posted by <a href="%author_posts_link%">%author%</a> / %time%</div>
                        <div>Category: %category_links%</div>
                    </footer><!-- .entry-footer -->
                </article>
                <!--split-->
                <!--no article-->
                <article id="post-%post_id%" %post_class%>
                    <header class="entry-header">
                        <h2 class="entry-title">Not Found</h2>
                    </header><!-- .entry-header -->
                    <div class="entry-content">
                        <p>Content not found.</p>
                    </div><!-- .entry-content -->
                    <footer class="entry-footer">
                    </footer><!-- .entry-footer -->
                </article>
                <!--split-->
                <!--footer-->
            <!-- </div> -->
            <div>Page: %paged% / %max_number_of_pages% (%number_of_posts% posts)</div>
            %pagination%
        </div>
                <!--split-->
                <!--no article footer-->
            <!-- </div> -->
        </div>

Keyword:

%widget_number%
%post_id%
%post_class%
%permalink%
%title%
%content%
%excerpt%
%category_links%
%time%
%author%
%author_posts_link%
%pagination%
%paged%
%max_number_of_pages%
%number_of_posts%
%loop_interval%
%first_image()%
%custom_field()%
%avatar_image()%
%featured_image_url()%<h3>keyword: "%custom_field(type,name,index,size)%"</h3>

Replaced this keyword to custom field value.

• type : data type

  file, text, image, image_tag, image_url, image_width, image_height or image_is_resized

• name : custom field name

• index: index of custom field name

• size : image size

  thumbnail, medium, large or user defined

e.g.

%custom_field(image,img1,0,large)%
%custom_field(text,customer_name,0)%
%custom_field(file,file,0)%
%custom_field(file,file,0,)%
%custom_field(file,file,1,download)%<h3>keyword: "%featured_image_url(size)%"</h3>

Replaced this keyword to featured image url.

• size is pixel or word (thumbnail, medium, large, full, …).

e.g.

    <img src="%featured_image_url(32,32)%" /> 

    <img src="%featured_image_url(thumbnail)%" />

    <img src="%featured_image_url(large)%" /><h3>keyword: "%avatar_image(size,link)%"</h3>

Replaced this keyword to avatar image / image with link.

• size is pixel size. max 512px.

e.g.

keyword: %avatar_image()%

put avatar img tag. use Default size 96px.

keyword: %avatar_image(32)%

put avatar img tag. size 32px.

keyword: %avatar_image(32,)%

put avatar image url.

keyword: %avatar_image(32,http://example.com)%

put avatar image with link to `http://example.com`. size 32px.

e.g. `<a class="postloopajax-avatar-image-link postloopajax-avatar-image-link-??" href="link"><img src="avatar"/></a>`

?? is author id<h3>keyword: "%first_image(size name,link,remove,html)%"</h3>

Replaced this keyword to image url / image tag / image tag with link.
this function used class ‘wp-image-??’, ?? is image id.

e.g.

keyword: %first_image(thumbnail)%

put thumbnail image tag.

keyword: %first_image(thumbnail,)%

put thumbnail image url.

keyword: %first_image(thumbnail, %first_image(large,)%)%

put thumbnail image tag with link to large image url.

e.g. `<a class="postloopajax-image-link" href="large image url"><img src="thumbnail image url" class="wp-image-??"/></a>`

keyword: %first_image(medium, %permalink%, remove,<div class="f-img">_REPLACE_</div>)%

put medium image tag with link to permalink.

e.g. `<a class="postloopajax-image-link" href="permalink"><img src="medium image url" class="wp-image-??"/></a>`

* Remove first image from content if specified 'remove' option. There are failed cases if contain complicated tags around image tag.