Custom Field Suite and OptionTree: A killer combination for building a WordPress website

I make websites for a living. I do this usually for mom and pop shops or as a subcontractor, with the occasional large corp site thrown into the mix.

One standard I hold very highly in my job is taking full advantage of the power a content management system like WordPress provides for a business. A website with WordPress as its backbone gives a business the ability to manage what they know best – their message.

I feel that it is part of my job to empower a business with the ability to edit all parts of their site, especially the little details like phone numbers and social media links. To that end, I use a killer combination of plugins that makes a site stand on its own: Custom Field Suite (plugin page & author page) for post meta and OptionTree (plugin page & github page) for site options.

OptionTree

Some parts of a site are page/post independent – like info in the footer and header. Some common elements I make dynamic are the logo, phone number(s), and social media links/icons. This information (and much more) is incredibly well-handled by OptionTree. OptionTree allows me to set up static fields like an input for a logo upload as well as dynamic fields like a list field. List fields let me define a group of inputs and the client to add any number of these groups. An example is defining multiple phone numbers or social network images/links.

In the theme, I can then output this information. For a static field, I can just output the value. For dynamic fields, I can loop through the groups and display each group’s values.

OptionTree allows for groups of data (i.e. General, Social), multiple saved layouts (sets of saved site data), and even the ability to import/export settings for recycling on other sites!

OptionTree’s data types (as of 2.1.4) are Background, Category Checkbox, Category Select, Checkbox, Colorpicker, CSS, Custom Post Type Checkbox, Custom Post Type Select, List Item, Measurement, Numeric Slider, Page Checkbox, Page Select, Post Checkbox, Post Select, Radio, Radio Image, Select, Sidebar Select, Slider, Tag Checkbox, Tag Select, Taxonomy Checkbox, Taxonomy Select, Text, Textarea, Textarea Simple, Textblock, Textblock Titled, Typography, and Upload. Whew!

Top this all off with an extremely simple API, excellent documentation included with the plugni, and a slick code-base and you get a plugin that deserves 5 stars all day long.

Custom Field Suite

For all things that belong on specific page or post, I utilize the equally powerful plugin Custom Field Suite. This plugin was developed by Matt Gibbs, a really cool WordPress developer who I personally know follows some sweet code standards. I really appreciate Matt’s expressed desired to keep the plugin’s core lean and to develop non-essential features as addons. One addon he recently released was Revisions, which, for CFS post meta, mimics WP’s built-in revisions feature . You should follow Matt on Twitter.

All personal promotions aside ;), this plugin does an excellent job of adding advanced meta boxes to the page/post editor.

To start, this plugin has documentation that is really good. It covers the methods of getting values for each data type, what type of data the methods will return, and code samples of how to access and use each type.

Speaking of data types – Custom Field Suite (as of 2.0.0) supports Text, Textarea, WYSIWYG Editor, Date, Color, True / False, Select, File Upload, User, Relationship, and Loop data types. Relationship provides a way of selecting other posts/CPTs to link (think Cars to a Brand). Similar to OptionTree’s list field, CFS’ Loop field allows me to group any of the above inputs and the client to add any number of groups they wish to a page/post.

By default, each input includes validation, default values, and notes.  Some fields include specific options, like the WYSIWYG allowing me to choose whether or not the content gets passed through WP’s filters or not.

All of these are grouped into “Field Groups” – each field group appearing as its own meta box. Field Groups have really cool placement rules that let you show their meta box on post types, taxonomies, restrict user roles, page templates, and even specific posts.

A prime example of where I use CFS often is on a site’s home page. Often a home page will have a number of complex items, like featured posts, tabbed areas, etc. This information doesn’t belong anywhere else – it’s the homepage’s content! While I could build/utilize shortcodes in a plugin, with CFS I can allow a client to visually select and build the content in a much more natural way.

Another example: I built a site for a golf course coupon directory. They needed Golf Courses, Coupons, and Advertisements. CFS empowered me to build relationships like associating Coupons to Golf Courses, and Advertisements to cities the Golf Courses generated (a great use of custom CFS field types!). It also let me build the Golf Course post type so I could access and present the data in a format I could count on – I knew things like the phone number, address, etc. would always be accessible. I needed to generate a weather widget on the fly for each course’s individual page. No problem – $cfs->get(‘zip’)  and I have my zip to build a widget with!

Custom Field Suite’s API is one of the cleanest and most common sense to work with I’ve ever used – $cfs->get(‘field_id’). Not only is the API awesome, the plugin has hooks for defining custom data types, overriding placement and validation rules, and modifying data on save/output.

There’s not really a site I’ll build today without using Custom Field Suite in some way. It’s a lightweight plugin with heavyweight abilities. Both it and OptionTree really add to my toolbelt as a WordPress developer. I highly recommend that you try these plugins out on your next site!

One thought on “Custom Field Suite and OptionTree: A killer combination for building a WordPress website

Leave a Reply

Your email address will not be published. Required fields are marked *