Flutter: Basic Usage

Dale Crum |Doc4|July, 31, 2009

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 notdisplay 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 are 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 that 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:

Let's look at each field type with a demonstration on how to use them. In the examples below we have provided the Name and Label of each Custom Write Field.


Name: myImage
Label: Image


Name: aComment
Label: Author Comment


Name: sold
Label: Sold Item?



Name: groceryList
Label: My Grocery List


Name: answer
Label: My Answer


Name: autoMaker
Label: Auto Maker List


Name: chores
Label: My Chores


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


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.


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


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

55 Comments, Questions & Answers

  1. MACC Commented On

    I found the answer on an earlier post. Please display all the comments on this main page to make it easier to search the page. Having the comments separated like this makes it really hard to search for a solution which may already have been presented. Thank you! : )

    • Doc4 Commented On


      Thanks for the suggestion, we're showing 50 per page now.

  2. MACC Commented On


    Is there a way to specify a title within the get command so that Flutter automatically prints the title of the custom field in case it has contents and omits it if the field is empty?

    I could try searching for an if function to do this but maybe you've already included an option to print the field title hence my question.

    Thank you very much!

  3. Vishal Commented On

    Can u plse tell me how to get all names of a particular fields…….

    • Doc4 Commented On


      Just to be clear you're wanting to print the title of the Custom Field, not the content of the Custom Field, correct?

      Example Custom Field:
      Title: The Image Title ( this is what you want to print out )
      Text Field: My Image Title Text

  4. Miz Commented On

    Hey Adam. Did you find a solution to using the cuntion filter where command? I also want to query posts between two different dates (which are custom fields). I can get it to query posts after today's date, but I also want to limit how far out it goes. Any luck?

    Basically got this code from WordPress

    = '" . date('Y-m-d') . "'" . " AND post_date

    I want to change post_date to my custom field? How would I go about doing that. Tried this:

    = '" . date('Y-m-d') . "'" . " AND . $end_date2 .

    Any help will be appreciated much!!!

  5. @anneclaire – try disabling your WordPress Stats plugin, Ive found that fixes the issue for me.

  6. Adam Commented On

    Hi I'm having a little trouble trying to find the answer to this question ..

    I am trying to show "Upcoming Productions" on a homepage of a website, I am using query_posts to output all the productions but I want to only show productions that are "Upcoming" i.e. they have not already passed.

    I have included a flutter date field called prodn_date which i have customised slightly so it only shows the month and year e.g. JAN 2010 and I the query_posts string to only show posts where this fields date has not passed.

    Here is my attempt .. any help would be greatly appreciated

      function filter_where($where = '') {
        //posts where prodn_date has not passed
        $where .= " AND '" . prodn_date . "' < '" . date('M Y') . "'";
        return $where;
    add_filter('posts_where', 'filter_where');

    Thanks in advance

    • Doc4 Commented On


      Just to be clear we are talking about posts that are current, not future posts, correct?

      It might be easier to use a function such as:

      add_filter('the_posts', 'show_all_future_posts');
      function show_all_future_posts($posts)
         global $wp_query, $wpdb;
         if(is_single() && $wp_query->post_count == 0)
            $posts = $wpdb->get_results($wp_query->request);
         return $posts;

      Be sure to set the postdates to the occurring date in the future and then display them in this manner:

      <?php $my_query = new WP_Query('cat=1&post_status=future&order=ASC'); ?>
        <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) :
                  $do_not_duplicate = $post->ID; ?>
        <!-- Do Something Here -->
        <?php endwhile; else: ?>
        <?php endif; ?>

      Where category 1 is specific to the production posts.

  7. Shane Commented On

    I've got Flutter set up on a WP install on an IIS server. For fields of content type image, when editing posts the thumbnail does not appear, instead showing an error message like this:
    phpThumb() v1.7…..
    "d:Inetpubclientnameprojects/wp-contentfiles_flutter1259180662DSC_8398.jpg" does not exist
    where the actual path should look like this:
    Additionally, when viewing the output of an image, the source path experiences the same issue with regard to missing forward slashes.

    Is there somewhere I need to change directory separators for IIS servers?

  1. Descubrimientos del 12 Febrero 2010 | Blog de unique3w