Tagged: 

Viewing 5 reply threads
  • Author
    Posts
    • December 8, 2016 at 3:15 pm #7628
      hozefasmile
      Member

      Hi I have checked the doc provided in https://piklist.com/learn/doc/creating-your-own-fields/ , but there is not sufficient information provided about what we need to do with piklist/parts/fields/my-customfield.php file?

      For example if I want to use ion range slider as my custom field in a custom post type http://ionden.com/a/plugins/ion.rangeSlider/en.html , then what should I put in that my-customfield.php file? from where we handle html, css and script for creating this custom field ?

      Please help me with this so that I can create any type of custom fields for my post forms.

      Thanks
      Hozefa

    • December 9, 2016 at 1:04 am #7633
      Steve
      Keymaster

      @hozefasmile– Piklist itself uses this to create fields: piklist/parts/fields/

      Check out the examples there.

    • December 9, 2016 at 1:36 am #7634
      Jason
      Keymaster

      Hi @hozefasmile!

      Just to throw it in there, you can often times accomplish these sorts of things with the custom fields. The plugin you provided, for example, you could simply add some js which targets a ion-range-slider class via normal WP enqueueing, then do something like the following:

      piklist('field', array(
  'type'      => 'text',
  'field'     => 'my_range',
  'attributes'=> array(
    'class'     => 'ion-range-slider',
    'data-min'  => 1,
    'data-max'  => 10
  )
));

      The plugin just wants a typical text input as its base, which is exactly what that field generates. You can, of course, create a custom field for this, but I just wanted you to know your options. 🙂

    • December 9, 2016 at 3:19 am #7635
      hozefasmile
      Member

      Hi @Jason,

      Thanks for your simplified solution. But I am still eager to know how to create my custom field. In the tutorial at https://piklist.com/learn/doc/creating-your-own-fields/ , it is just mention that you create your file in /fields/ folder , whatever name you give to the file then can be used as a custom field type value, for example ‘type’ => ‘my-checkbox’

      But what to do with that file which I have created in folder /fields/ ? Can I just put a simple html input field there and then where should I put my css and js files? can I provide path there in same file? If yes then how? Do you have an example of practical use of creating a custom field ?

      Thanks again

    • December 9, 2016 at 12:13 pm #7638
      Jason
      Keymaster

      Hey @hozefasmile!

      For the CSS and JS you’ll want to look into the wp_enqueue_script and wp_enqueue_style WordPress functions. You could just add them to your field, but that would mean every time your field is used they’re being added again, which isn’t terribly efficient.

      Otherwise, just add the HTML to the file as you normally would. I don’t recommend adding other piklist('field') calls in a field, as that can have unexpected results. Instead, keep it down to HTML. Here’s a field I made for using the flatpickr js plugin:

      <?php
$id = piklist_form::get_field_id($arguments);
$name = piklist_form::get_field_name($arguments);
$value = is_array($value) ? esc_attr(end($value)) : esc_attr($value);

$attributes['class'][] = 'flatpickr';
$attributes = piklist_form::attributes_to_string($attributes);

$options = wp_parse_args(isset($options) ? $options: array(), array(
  'show_time'       => true,
  'display_format'  => false
));

$show_time = $options['show_time'] ? 'data-enable-time="true"' : '';
$alt_format = $options['display_format'] ? "data-alt-input='true' data-alt-format='{$options['display_format']}'" : '';

echo <<<HTML
<input type="text" id="$id" name="$name" $attributes value="$value" $show_time $alt_format placeholder="Pick date" data-input>
HTML;

      A couple things to note in here:

      • Make sure to include the piklist_form::get_field_id($arguments), piklist_form::get_field_name($arguments), and piklist_form::attributes_to_string($attributes) functions. As you might imagine, those will give you the field ID, name, and additional attributes, respectively, which are important to input fields in basic HTML.
      • A few variables are automatically injected into every field. Namely, $arguments, $attributes, and $value. $arguments contains all the parameters passed to the field, which you don’t usually need as the keys of the array used in the piklist('field', array()) are injected into the function where the key is the variable (such as attributes). $attributes are all the built-in and passed attributes, as you might expect, which you can extend in the way you see me doing above. And lastly, $value is the current value of the field, whether default or what’s been saved.

      Hope this helps! 🙂

    • December 9, 2016 at 12:44 pm #7639
      Steve
      Keymaster

      Just repeating in case it was missed, but there are lots of field examples here: piklist/parts/fields/

  • Author
    Posts
Viewing 5 reply threads
  • You must be logged in to reply to this topic.