Introduction ↑ Back to top
When writing a post in WordPress you can enhance a post over and above the normal post content with the use of custom fields also known as post meta. If you are not familiar with them you should read up on custom fields to get a better understanding on how they work.
The WooFramework has taken this functionality and created a more user-friendly approach to these custom fields that will go hand in hand with your theme.
The Custom Settings Panel ↑ Back to top
This panel can vary greatly from one theme to theme. Some themes will have custom fields for addresses and websites, where as others will have settings for image thumbnail uploads and video embed fields.
Here are two examples:
Predefined options ↑ Back to top
Custom Settings are highly dependent on the type of theme and what features it comes with. Therefore there are no standard options such as in the Theme Settings panel. The most common custom field is the ‘custom image uploader’ option that makes it easy to attach a post thumbnails to a post.
Understanding the Options ↑ Back to top
Adding your own custom settings to your post/page write page is not as hard as you might think. Theme WooFramework does all the heavy lifting and it’s up to you to get creative. There is one file that will be of great interest once you want to start adding your own options.
Locate the /includes/theme-options.php file. Inside you should see the following situated under the Theme Settings array:
// Woo Metabox Options $woo_metaboxes = array( "image" => array ( "name" => "image", "label" => "Post Image", "type" => "upload", "desc" => "Upload file here…" ), …
Options Types ↑ Back to top
Here is a list of the templates available for use in the Custom Settings panel:
- text – Single line text/HTML input
- textarea – Multiple lines of text/HTML input
- select – Dropdown select input; v1
- radio – Radio button group
- checkbox – Single checkbox input
- upload – Ajax upload button with text input
- images – Selecting mechanism with the use of images
Adding Custom Fields ↑ Back to top
Creating your new field ↑ Back to top
If we wanted to add a custom field for adding text into your post and pull it out on command then we’ll be adding the following code:
"sub_title" => array ( "name" => "sub_title", "std" => "", "label" => "Sub Title", "type" => "text", "desc" => "Add a sub title to you post titles."
And adding it to the $woo_metabox array like so:
// Woo Metabox Options $woo_metaboxes = array( "image" => array ( "name" => "image", "label" => "Post Image", "type" => "upload", "desc" => "Upload file here…" ), "sub_title" => array ( "name" => "sub_title", "std" => "", "label" => "Sub Title", "type" => "text", "desc" => "Add a sub title to you post titles." ) );
Populate and Save ↑ Back to top
Once you have setup your new custom field you need to create a post, add some date to the custom field and publish or save your post. Once that has been done you can move onto using the “post meta” in your theme.
Using the Custom Field ↑ Back to top
Now it’s time to use the get_post_meta() function to add what you have saved in the post/page write panel to the front-end of your theme.
<div class="post"> <h1 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> <!-- ECHO THE CUSTOM FIELD BELOW THE POST TITLE --> <?php echo get_post_meta($id, "sub_title", true); ?> <div class="entry"> <?php if ( $woo_options['woo_post_content'] == "content" ) the_content(__('Continue Reading →', 'woothemes')); else the_excerpt(); ?> </div> </div><!-- /.post -->
Creating complex custom fields ↑ Back to top
There are lots of types of options to use, from selects, to image uploads, to checkboxes and radio buttons. It all depends on what you want to do. A good place to start learning how to use these options would be by looking under the bonnet of an existing theme.