It’s no secret that Wordpress is being adapted to go well beyond its traditional blog functionality. In my free time I’ve been doing a lot with WP and in most cases it becomes a content management system. But for a site that isn’t a blog it’s kind of like fitting a square peg in a round hole. Pages aren’t quite pages, posts turn into special pages, tags and categories are adapted for organizing and showing data, widgets are modified to make universal yet flexible pieces on the site, and the whole thing you have to kind of “get used to”. Plugins help expand the functionality and I’ve recently started playing around with Flutter, which is proving itself to be very a powerful step in using Wordpress as a content management system.

I was so excited after I learned how to use custom fields in Wordpress. It gave me the chance to break up the data that a user would put into their post and place it in different portions on the web page. It did the trick, but there were issues. The data was sometimes different. In one field it would be a little text, in others it would be an image link, sometimes it was even more important than the post itself. Plus it was difficult to explain to the user or client what each custom field did and explain to them they had to make sure to set and each one. Flutter leverages the custom field options in Wordpress, but takes it to a whole new level, finally making it very clear what each field is used for, with clear labels and structure on the admin side.

Flutter changes the idea of posts and pages in Wordpress. With the Flutter Plugin you can create a template type for any type of data you want. Maybe you don’t add posts on your page, but you add information on Events or Reviews, maybe you have specific pages with completely different layouts and type of data. With Flutter you create what’s called a Panel. You can add custom data fields and types to that panel to create your very own template for the kind of data you wish your user to add. It then becomes a new option on your admin menu, just like a post or page, but the write/edit template is completely custom. In the settings menu you can even turn off posts and pages completely if you’re not going to use them at all.

I first read about the plugin about 6 months ago but didn’t have the time or experience with programming to really get into it, until today. Today I used it on a project for the very first time and I have to say, I wish I would have started using it 6 months ago.

Displaying a Single Variable or Image in your Theme

The plugin does require some coding work. Like using custom fields, you need to manually add the placeholders to your theme. Luckily it’s done pretty easy. Hear is some example of how to include the custom data into your theme:

  <? echo get('variable_name'); ?>
  <? echo get_image('variable_name'); ?>

It depends some on what kind of fields you get setup, and of course it can get a lot more complicated depending on what you want to accomplish. Here is a screenshot of just one part of the template that I created for a friend’s site:

Displaying a Duplicate Fields in your Theme

There are some downsides to this plugin that I discovered quickly after I began to use it. First is that there is not a lot of documentation. The website has enough basics to get you started, but there is not a lot of resources when it comes to looking for help with specific things. For example there is a really neat feature that allows the user to duplicate fields. Say for instance you have a custom template to enter for Teams and you want to have a field where a user can add Team Members. It’s a simple text field and Flutter is set up to allow the user to add more fields. It gets a little complicated on the display side, because you have to have the logic to find out how many fields have been created and to pull in each one. Luckily I wasn’t the only one with this problem and found a solution to it in the comments on a post at doc4design.com. I wanted to pass that along, as it is kind of a big issue. The code that I found works best is:

  <?php
    $total = getFieldDuplicates('variable_name',1);
     for($i = 1; $i < $total+1; $i++){ echo "<li>" .get('variable_name',1,$i). "</li>";
   }?>

This code needs to be run within the loop and of course swap out variable_name to whatever yours is. Something little like that can be super frustrating if you’re new to php like I am.

There are more disadvantages, it’s buggy. While inspecting the code that it places into the admin menus, there are a lot of tags unclosed or added in a funky way. It’s difficult sometimes to manage the Panels and it’s a little unclear the differences between a Panel, Module, or Template Option. I’ve heard the bugs get worse when you get into Edit-in-Place. That’s another feature I want to get into. I’ll be sure to blog more about it when I get into it. That will add a new layer of tools to the pages themselves to edit content, no longer requiring users to go into the admin tools just to change text. That I think will be even a bigger move to a true CMS.

So it has some bugs, but it does help change WP to fit that CMS role that so many of us are using it as anyway. If you have any experience with Flutter or questions please share them in the comments below. I’d love to hear from you.

UPDATE:

Just wanted to share some more of the fun stuff I’ve learned with Flutter since I wrote the last post.

Displaying Duplicate Groups of Fields in your Theme

In my original post I described how to show single data, even duplicated fields. But I didn’t at the time know how to setup duplicate groups of fields. I found out it’s actually almost identical to multiple fields. All you need to do is first call on one variable in the group and get how many duplicates there are (just like a duplicated fields) but in the loop go ahead and include the code to return the values of the other variables in the group and there you.

          <?php $total = getGroupDuplicates('variable_name');?>
          <?php for($i = 1; $i < $total+1; $i++):?>
              echo "<li>" .get('variable_one',$i,1). "</li>";
              echo "<li>" .get('variable_two',$i,1). "</li>";
              echo "<li>" .get('variable_three',$i,1). "</li>";
          <?php endfor;?> 

Flutter Alternatives

I discovered in working with Flutter that there are actual a couple different branches of the project. One popular alternative, based on the same original code is a plugin called Magic Fields. It works exactly the same way as Flutter and the code that I’ve provided works the same for both. Magic Fields however has stripped out a lot of the typically unused features of Flutter, making the plugin overall a lot more simple to use and less weight on your application. Another benefit to Magic Fields is currently their community is more active than Flutter, making it easier to find information on the plugin, how it works, and what you can do with it. Checkout magicfields.org for more info. I’ve personally made the switch from Flutter to Magic Fields for the reasons stated above.

I’ve done a lot with Magic Fields/Flutter these past couple months. It’s become a pretty crucial tool in taking Wordpress development to the next level. Especially when using it as a content management system. Of course a lot of the functionality that this plugin offers can be done manually with adding custom codes and functions to a theme, I’d rather let the plugin do most of the heavy lifting and just leaving the only work to be done setting up the fields and putting the placeholders in the theme.

Share on digg