Flutter: Basic Usage

We are continuing our Freshout Flutter tutorials by covering the basics of creating Write Panels, Custom Fields and methods of printing those Custom Fields. This tutorial makes the general assumption that the Flutter plugin has been downloaded and successfully installed within a WordPress plugins folder.

Custom Write Panels:

Begin by creating a WordPress category ( Posts > Categories ) named “Articles”. Note that category creation should be done prior to working with the Flutter plugin. Once the category has been created select the WordPress admin menu “Flutter” and choose “Write Panels” from the drop down list. This will take us to a page labeled “Custom Write Panel” with several options: “Browse”, “Import a Write Panel” and “+ Create a Write Panel”. This is our Flutter home page and will eventually display the sum total of our Write Panels in a single location as an easily sortable list. Continue by selecting the “+ Create a Write Panel” button which will take us to the “Create Custom Write Panel” page. This page has several options:

Placement: Determines if our Custom Write Panel will be a WordPress Post entry or a WordPress Page entry. Once the Custom Write Panels have been created they will be listed either at the top level WordPress admin menu ( or under Post / Page if using the Condensing the Flutter Menu tutorial ). For this tutorial we will be selecting “Post”.

Name: This will be the title displayed in the WordPress admin menu, keep it unique, simple and descriptive. For the purposes of this tutorial we will name it “Articles”.

Category: Selection of a category is important and since we have named our Custom Write Panel “Articles” we want to be certain any posts created by this panel are linked to the Articles category. We now no longer need to worry about category selection when writing an Articles post.

Quantity: Two options exist here: “Single” meaning this Custom Write Panel will only ever be used once and hence will not display within the WordPress admin menu or “Multiple” meaning this post will be used more than once and will display within the WordPress admin menu. For our purposes we will select “Multiple”.

Standard / Advanced Fields: De-selection of Standard/Advanced Fields is no longer required through Flutter as WordPress now provides the option for field selection from the “Screen Options” drop down located in the upper right corner of the WordPress admin area. Make sure all choices are checked.

Order: If we were creating multiple Custom Write Panels then we would want to give them an Order number. For example: to keep in line with our site menu we will set Articles as Order number “5″ and Plugins as Order number “6″. This however is not necessary as the system will always begin counting at zero.

Lastly select the “Finish” button at the bottom of the page. We have successfully created our Custom Write Panel.

Custom Write Fields

After creating our Custom Write Panel we are then taken to the individual Write Panel page, in our case the page title is “Articles”. Here we presented with the option of deleting the Write Panel but more importantly we are given two options; create a “Custom Group” which is essentially a wrapper for multiple Custom Fields or “Custom Write Field” which will not be wrapped within a group structure. Best practice is to always create a group and add fields to it, this is because we may need more fields within a group at a later time.

CREATE A CUSTOM GROUP

Name: We are dealing with the “Articles” panel so we will name this group “Article Information” .

Duplication: We will not be duplicating this field. To find our more about Flutter Duplication please read through the Flutter Duplicate Fields Tutorial.

Position: The “Add the group on the right” feature is currently buggy within WordPress 2.8 so we will skip this step. If this feature were working the Custom Group would be added to the right side of our post page just under categories and “Publish Post”. WordPress 2.8 presents the option to drag and drop fields anywhere and therefore the Position option should be removed from Flutter soon.

Once done select the “Finish” button to initiate the creation process and return to our Custom Write Panel “Articles” page. Once again we have the option to create a “Custom Group” or a “Custom Field”. Below these buttons will be a list displaying our recently created Custom Group titled “Article Information”. The next step is to add a Custom Field in order to to enter information and display it within a post. Select the “(create field)” link next to our group “Article Information” to be directed to a page is focused specifically on the Write Field.

CREATE A CUSTOM WRITE FIELD

Name: The Custom Field Name will be used within the code, let’s name it “img”. Try to keep the name a simple, single, descriptive word without dashes or underscores if the field name needs more than one word try something such as “myNameHere”.

Label: Give the Custom Write Field a Label, we will name ours “Images”. The Label will appear next to the Custom Field within the Post page as an identifier.

Can be duplicated: Our field will not be duplicated in this tutorial. To find our more about Flutter Duplication please read through the Flutter Duplicate Fields Tutorial.

Order: Start the order by numbering this as “1″ again this is not necessary as the system will always begin counting at zero.

Required: Determine if this field can be empty when publishing the Post. We have CSS provisions set in place in case the field is empty (example: the image does not exist) so we are comfortable with this field not being a required one.

Type: Select the type of field required, for our purposes we will choose “Textbox”.

Lastly select the “Continue” button at the bottom of the screen and follow the remaining instructions. For a Textbox field we generally leave the dimensions as they are presented.

Field Types:

There are thirteen field types available, however Color Picker and Slider are still buggy within the WordPress 2.8 framework. Keep in mind that just because we would like the Custom Write Field to be utilized for images does not mean it is necessary to choose the Image Type option. Think about how you or your clients will be using WordPress and the easiest way to maintain site layout while keeping it simple. In the tutorial above we are asking the user to enter the file name of the image into the Image Textbox field. For example our Image Textbox field may be filled like so: “myImage.jpg”. We know where the image is stored and have already included the location of the image for the user, the only variable is what is the name of the file. Example code:

<img src="<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'img', $single=true) ?>" >

Let’s look at each field Type and demonstrate how to use them. In the examples below we have provided the Name and Label of each Custom Write Field.

FIELD TYPE: TEXTBOX

Name: myImage
Label: Image

<?php echo get_post_meta($post->ID, 'myImage', $single=true) ?>

FIELD TYPE: MULTILINE TEXTBOX

Name: aComment
Label: Author Comment

<?php echo get_post_meta($post->ID, 'aComment', $single=true) ?>

FIELD TYPE: CHECKBOX

Name: sold
Label: Sold Item?

<?php echo get('sold'); ?>

or

<?php if( get('sold')=='true' ) { ?>
 <div class="image"><img src="http://www.mysite.com/images/myImage.jpg"></div>
<?php } ?>

FIELD TYPE: CHECKBOX LIST

Name: groceryList
Label: My Grocery List

<?php $my_array = get('groceryList');
      $output = "";
      foreach($my_array as $check){
      $output .= "<span>$check</span> ";
      }
      echo $output; ?>

FIELD TYPE: RADIOBUTTON LIST

Name: answer
Label: My Answer

<?php echo get('answer'); ?>

FIELD TYPE: DROPDOWN LIST

Name: autoMaker
Label: Auto Maker List

<?php echo get('autoMaker'); ?>

FIELD TYPE: LISTBOX

Name: chores
Label: My Chores

<?php $my_array = get('chores');
      $output = "";
      foreach($my_array as $select){
      $output .= "<span>$select</span> ";
      }
      echo $output; ?>

FIELD TYPE: FILE

Name: file
Label: File Upload
Location of files: wp-content/files_flutter/

<?php echo get_file('file'); ?>

FIELD TYPE: IMAGE

Name: img
Label: Image
Location of files: wp-content/files_flutter/
Note: This option is enabled under Settings > Flutter by checking the “Browser uploader” option.

<?php echo get_image('img'); ?>

FIELD TYPE: DATE

Name: date
Label: Show Date
Note: To compare dates refer to Making the Flutter Date Field Work for you.

<?php echo get('date''); ?>

FIELD TYPE: AUDIO

Name: music
Label: My Music
Location of files: wp-content/files_flutter/

<?php echo get_audio('music'); ?>