Wordpress Post Picker ADD-ON

, _(*1)

Wordpress Post Picker add-on , _(*2)

Add-on package for Wordpress Plugin Template and Wordpress Theme Template exclusively., _(*3)

Post Picker is a built-in modal that can be used within Wordpress' admin dashboard to pick / select posts., _(*4)

Installation
- Configure in Template
Usage
Coding Guidelines
Copyright

Installation

This package requires Composer and Bower to install its dependencies. Make sure to have these install before proceeding., _(*5)

Add it as dependency in your composer.json file located on your template's root folder:, _(*6)

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

Then add a the following to your composer.json file:, _(*7)

"scripts": {
    "post-package-install": [
        "php vendor/amostajo/wordpress-add-on-post-picker/ayuco bowerInstall"
    ],
    "post-package-update": [
        "php vendor/amostajo/wordpress-add-on-post-picker/ayuco bowerUpdate"
    ]
}

Then run, _(*8)

composer install

or, _(*9)

composer update

to download package and dependencies., _(*10)

Configure in Template

Add the following string line in your addons array option located at your template's config file., _(*11)

    'Amostajo\Wordpress\PostPickerAddon\PostPicker',

This should be added to: * config\plugin.php on Wordpress Plugin Template * config\theme.php on Wordpress Theme Template, _(*12)

Usage

Enqueue on Main

Before you do any custom code, you need to load or enqueue the Post Picker to Wordpress., _(*13)

Call addon_post_picker() function within your template's Main class, like this:, _(*14)

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:, _(*15)

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

Init Post Picker, ala jQuery, with the options wanted:, _(*16)

$("#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., _(*17)

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., _(*18)

Example using the previous sample:, _(*19)

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












    
        
        {{ title }}

The javascript section should look like this:, _(*20)

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

Post Picker renders the results by default., _(*21)

Templates

There are 3 ways to set your template., _(*22)

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:, _(*23)

Property	Description
`{{ 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 (120x120 px).
`{{ post_type }}`	Post type.
`{{ post_date }}`	Post date.
`{{ excerpt }}`	Excerpt of 15 words.

Options

Option	Data type	Description
`allowMultiple`	bool	Flag that indicates multiple post can be selected or just 1. Default: true
`render`	bool	Flag that indicates if plugin should render results. Default: true
`clearTemplate`	bool	Flag that indicates if template should be cleared once plugin starts. Default: true
`clearTarget`	bool	Flag that indicates if target should be cleared on every selection. Default: true
`target`	string	Element that will hold results.
`template`	string	HTML template.
`templateElement`	string	Element containing the template.
`success`	function	Callback function with the selected posts.