Creating Settings for AppThemes

Last week we looked at how you can use our Framework to create Post Meta Boxes. That is great if you want to store data related to specific to a post, page, or some other post type. But what if you want to store something more general?

We’ve had the same problem! We wanted to make storing general settings simple, so we created the APP_Tabs_Page. It creates an easy and concise format where users can navigate between different categories of settings and set up their site just the way they want.

Creating a Tabbed Settings Page

class My_Settings_Tabs extends APP_Tabs_Page {
    public function setup();
    public function init_tabs();
}

Now, sometimes you’re going to need your own settings page. We’ll cover that next week. Today we’re going to talk about inserting additional settings for your plugin into existing AppThemes Settings pages. Its really simple.

The first thing to do is create your function that we will hook into later.

function add_more_options( $page ) {
    //... add more options here
}

Tabbed pages have two defining attributes: tabs, and their options. You can easily insert a new tab by accessing the tabs property on the passed pages object. Every tab has an identifier and a title:

// Add a tab to the end of the list
$page->tabs->add( 'my-tab', __( 'My New Tab' ) );
// Add a tab before or after the 'general' tab
$page->tabs->add_before( 'general', 'my-tab', __( 'My New Tab' ) );
$page->tabs->add_after( 'general', 'my-tab', __( 'My New Tab' ) );

The identifier is important when you are creating the options list. You can access the options list through the tab_sections class property.

// Add an options section to the page
$page->tab_sections['tab-identifier']['section-identifier'] = array(
    'title'  => 'Tab Title',
    'fields' => array(
       array( .... ),
       array( .... ),
    ),
);

You can add multiple sections to each tab to create a more structured settings page. Your fields follow the standard AppThemes Form Array format.

$field = array(
    'title' => 'Field Title',
    'type'  => 'text',
    'name'  => 'field-name',
    'value' => 'field-default-value'
);

Now to access these saved values, you’re going to have to instantiate the class.

Accessing Saved Fields

Settings values are stored in the WordPress database in an option. However, at AppThemes we like to avoid having a lot of options running around that could create conflicts in the global namespace. So, we use an options object that is a part of the scbFramework to store our options. It stores all of the data in a single site option to avoid conflicts. While using the scbOptions object is a subject for another tutorial, we’ll get you started with the basics:

$defaults = array(
    'field_name' => 'default-field-value'
);
$options = new scbOptions( 'site-option-key', null, $defaults );

The options object will only accept field values for the keys defined in the defaults array, so make sure you list all the fields you’re hoping to store values for.

When you create your new settings page, you’ll want to create a new scbOptions object and pass it to it. Then, your scbOptions object will be populated with the user defined settings whenever the user saves the page. You can access the settings like so:

$value = $options->field_name;

If nothing has been saved, it will default to the value stored in the defaults array. Otherwise, it will use the user-saved value.

Going Further

There’s lots of things you can do with settings pages. In the upcoming weeks, we’ll show you how to insert new sections into existing pages, create a non-tabbed admin page, and use the options object for all sorts of neat stuff. Stay tuned.

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.