Post Picker (addon)

Composer command composer require amostajo/wordpress-add-on-post-picker:1.0.*

Installation

This package requires Composer.

Add it in your composer.json file located on your template’s root folder:

"amostajo/wordpress-add-on-post-picker": "1.0.*"

Then run

composer install

or

composer update

to download package and dependencies.

Configure in Template

Add the following string line in your addons array option located at your template’s config file.

    'Amostajo\Wordpress\PostPickerAddon\PostPicker',

This should be added to:

  • configplugin.php on WordPress Plugin Template
  • configtheme.php on WordPress Theme Template

Usage

Enqueue on Main

Before you do any custom code, you need to load or enqueue the Post Picker to WordPress.

Call addon_post_picker() function within your template’s Main class, like this:

class Main extends Plugin
{
    public function metabox()
    {
        // The function must be called within your Main.php file
        $this->addon_post_picker();
    }
}

HTML and JS

Create a clickable element, who will call the Post Picker:

<a id="post-picker-caller">
    Add Posts
</a>

Init Post Picker, ala jQuery, with the options wanted:

$("#post-picker-caller").postPicker({
    render: false,
    success: function (posts) {
        // YOUR CUSTOM CODE HERE
        // Example:
        $.each(posts, function(index) {
            // Print post in console
            console.log(this);
        });
    } 
});

Rendering

Post Picker has a built-in rendering system that will lets you display the results easily.

To do this, you need two things in your HTML.

  • Template: A template for each of the results to display.
  • Placeholder target: A target element that will act as placeholder for the results.

Example using the previous sample:

<a id="post-picker-caller">
    Add Posts
</a>

<!-- TARGET PLACEHOLDER -->
<div id="post-picker-placeholder"></div>

<!-- TEMPLATE -->
<div id="post-picker-templateholder">
    <div class="post post-{{ ID }}">
        <img alt="{{ title }}">
        <a href="{{ permalink }}">{{ title }}</a>
        <input type="hidden" value="{{ ID }}">
    </div>
</div>

The javascript section should look like this:

$("#post-picker-caller").postPicker({
    target: "#post-picker-placeholder",
    templateElement: "#post-picker-templateholder"
});

Post Picker renders the results by default.

Templates

There are 3 ways to set your template.

  • Inside caller (Default): Your template will be the HTML inside the caller tags. In the example case#post-picker-caller.
  • An element: Same as the previous example.
  • As option: Pass it as jQuery option.

These are the available Post properties for display:

PropertyDescription
{{ ID }}Post ID.
{{ title }}Post title.
{{ slug }}Post name / slug.
{{ permalink }}Post permalink.
{{ image_id }}Featured image ID.
{{ image_url }}Featured image url.
{{ thumb_image_url }}Featured image thumb url (120×120 px).
{{ post_type }}Post type.
{{ post_date }}Post date.
{{ excerpt }}Excerpt of 15 words.

Options

OptionData typeDescription
allowMultipleboolFlag that indicates multiple post can be selected or just 1. Default: true
renderboolFlag that indicates if plugin should render results. Default: true
clearTemplateboolFlag that indicates if template should be cleared once plugin starts. Default: true
clearTargetboolFlag that indicates if target should be cleared on every selection. Default: true
targetstringElement that will hold results.
templatestringHTML template.
templateElementstringElement containing the template.
successfunctionCallback function with the selected posts.

Post Picker is a built-in modal that can be used within Wordpress' admin dashboard to pick / select posts.

Version:

1.0.2

Min core version:

1.0.7