2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. WooFramework Codex

Adding Post/Page Options

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:

Example of Custom Settings from Backstage
Example of Custom Settings in City Guide

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

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, contact a WooExpert.

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."
        )
);

Resulting in:

Newly added custom field

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.

Custom title with filled in Value

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 -->

Resulting in:

Custom sub title from a custom field

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.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment