For the past few years I have been referring clients to WordPress as my preferred CMS solution.  I have found WordPress to be a wonderful solution for many of my clients.  There are a few areas that could use some improvement, but honestly I don’t know of a perfect CMS out there, do you?  As most WP developers know, custom fields are the key to using it as a successful CMS, and there have been some major improvements in last few years to help make it easier to implement custom fields into your template files, but in my experience it seems that not all of my clients fully understand how to use custom fields they way they are built into WordPress by default.

There are ways to hack around and make it easier for your client, I even wrote an article over at Foraker.com that explains how incorporate the power of custom fields in WordPress, and this way may be easy to understand for people familiar with WP and PHP but for my clients  I feel that the default layout of using custom fields is a little hard to understand.  Mostly I have had issues with clients wanting to the custom field to be an image and the only way to do this is for the client to upload the photo first via the media up-loader and then insert the path in the custom field value.  Wouldn’t it be nice if the custom field just had an upload feature associated with it?   Also, sometimes my clients are unsure if they can stray from the ones I preset for them and just start creating their own custom field names and values.  This is an issue as they are unaware of the variable calls that need to be placed in the post/page templates as well.  Overall I feel it’s just not as easy as it should be.  This is where Flutter comes in.

What is Flutter?

Good question.  From the words of Freshout, the creators of Flutter, “Flutter is a feature rich WordPress CMS plugin that focuses on easy templating for the developer and simplified content management for the admin by creating custom write panels that can be fully customized.”

A big bonus of Flutter is that it allows you to remove the “generic” page/post buttons from your WordPress dashboard navigation and input new custom buttons that will help categorize the website’s content in a way that is easier for your client to understand.  An example would if you have a cleint that will be publishing multiple types of posts, such as news or events. Instead of having the client manage these in one general section titled “posts” and hoping/praying that they remember to make sure they apply the correct template and custom fields.  With Flutter you can create two custom sections, one titled “News” and the other “Events”.  The client would then use these new buttons to manage posts according to their type, and the post edit screen will already have the associated template, category and custom fields preset.  Pretty sweet huh?!?  Alright then lets move on to the setup and installation of flutter.

Getting Started

Installing Flutter:

1. Download the plug-in here
2. Unzip the file and upload it to your plug-ins directory (/wp-content/plugins/)
3. You will need to create a few additional folders on your server, and make sure they are writable:
   -/wp-content/plugins/fresh-page/thirdparty/phpthumb/cache/
   -/wp-content/files_flutter/
   -wp-content/files_flutter/modules/
4. Now login to your WP site and activate the plug-in (/wp-admin/plugins.php)

That’s it. You should now notice 2 additional buttons in your dashboard navigation.  One is a completely new tab titled “Flutter”,  in this section you will create all of your write panels (custom templates) and write fields.  The second is sub link under the “Settings” tab.  This section will help you set a few global settings for flutter, as well as WordPress in general.

Custom Write Panels

Custom write panels are basically custom templates for posts and pages.  Once you click on the the “Write Panel” link from flutter menu you will be given the option to manage current write panels, import a write panel or create a new one.

Let’s create a new panel:

1. Click on the button “+ Create a Write Panel”
2. Now decide if the template will be for a post or a page (depending on your decision here, the options below may differ)

Options for a post:

1. Give it a name
2. Chose what categories posts created in this write panel will automatically be assigned to
3. Decide whether there will be multiples of this type of post
4. Set what fields the client will see on the edit post screen
5. Then set your advanced fields, FYI – sometimes the fewer options your client has to dig around in, the better.
6. Now click finish

Options for a page:

1. Give it a name
2. Choose a page template that pages in this write panel will use by default
3. Decide whether there will be multiples of this type of page
4. Set what fields the client will see on edit page screen
5. Then set your advanced fields, FYI -  Again, sometimes the fewer options your client has to dig around in, the better.

After you have a write panel created (template), the next step is to add custom fields to that panel.

1. To create a new custom field click on the “+ Create a Field” link
2. Give it a name, this is the name you will use for your variable call so keep it simple
3. Label your field, this the title that the field will be given on the edit post/page screen
4. Decide whether or not the user can duplicate this field and add multiple entries of the same type of content
5. The order you would like to appear on the edit post/page screen
6. Set whether or not this field is required or not (if this set to required, the client will not be able to publish this post/page until a value is entered)
7. Type: Flutter offers multiple types of fields which a great bonus! For example now you can set this field type as image and on the edit post/page screen the user will have the option of uploading an image or entering a url path. Nice!
8. Press continue to add the field.  From here add as many custom fields as you wish for this particular panel

Template Configuration

The next step is to call these custom fields to appropriate spots in your post/page templates.  There are few different ways to go about this, as your field values may serve various purposes.  Below I will outline the more general calls for flutter fields along with how to display multiple fields as the Freshout documentation is limited and a little hard to understand.

To call any custom field value we are going to use the php echo construct.  Also just to note that any of these calls should be used within the_loop.

Basic Variable Call

<? echo get('variable'); ?>

Get an Image with Image Tags

<? echo get_image('variable'); ?>

Get Multiple Check Box Values

<? $checks = get('variable');
$output = "";
foreach($checks as $check){
$output .= "<span>$check,</span> ";
}
echo $output;
// or return $output
?>

Display Duplicate Fields

<?php
$total = getFieldDuplicates('variable',1);
for($i = 1; $i < $total+1; $i++){
echo get('variable',1,$i);
}?>

Display Duplicate Groups

This one is a little bit tricky as instead of just duplicating one custom field, we are duplicating a group that may contain multiple custom fields.  In the example below we are calling a group of fields that can be duplicated.  When using “getGroupDupliates(‘variable1′)”, we can replace variable1 with any field name from that particular group.  For this call we are displaying a group that contains a field name of “variable1″. Then we begin to display the values which are a thumbnail with the value of “variable2″ that has a title value of “variable1″. Then we are wanting this thumbnail to link to the value of “variable3″.

<?php $total = getGroupDuplicates('variable1');?>
<?php for($i = 1; $i < $total+1; $i++):?>
<?php echo "<li>";
echo "<a title=\"" .get('variable1',$i,1). "\" href=\"";
echo get('variable2',$i,1);
echo "\">";
echo "<img src=\"" .get('variable3',$i,1). "\" alt=\"\" />";
echo "</a>";
echo "</li>"; ?>
<?php endfor;?>

The End Result

Once we have our write panels configured and our custom field calls placed in our WordPress template files we should be ready to rock and roll!

Oh and when creating your write panels and custom fields don’t feel like you have to have everything set in place right away. If the purpose of a write panel changes and you need to add/remove custom fields you can do this at any time and the changes will be made to any current or future posts/pages.

Flutter takes a little time to get used to but once you are able to get in a really play around with it you’ll begin to realize the potential it can have to make the use of custom fields much easier for you and your client.