Skip to content

Theme Options Page

Alex Prokopenko edited this page Jun 26, 2018 · 4 revisions

Each theme has some options to be set like social links, footer text, or 404 page settings.

If you use Advanced Custom Fields PRO plugin (costs 69 AUD), you can use ACF interface to create all the settings you need. However, if you don't want to spend some bucks on this feature, you can use another plugin to create your settings page.

We prefer Titan Framework to build custom admin pages.

Using Titan Framework and ThemeSettings class

To jumpstart, we use a small class object which simplifies the usage of Titan Framework. To create new theme settings page, you need to create a class similar to this one:

<?php
namespace Boilerplate\Theme\Admin;

class Theme_Settings extends \JustCoded\WP\Framework\Admin\Theme_Settings {
	/**
	 * Create admin page for theme settings
	 */
	public function init() {
		$panel = static::titan_instance()->createContainer( array(
			'type' => 'admin-page',
			'name' => 'Theme Options',
		) );

		$this->register_general_tab( $panel );
		$this->register_404_tab( $panel );
	}

	/**
	 * Register fields for General tab
	 *
	 * @param \TitanFrameworkAdminPage $panel  panel object to work with.
	 */
	protected function register_general_tab( $panel ) {
		$tab = $panel->createTab( array(
			'name' => 'General',
		) );

		$tab->createOption( array(
			'name' => 'Footer ',
			'type' => 'heading',
		) );

		$tab->createOption( array(
			'name'    => 'Copyright text',
			'id'      => 'copyright_text',
			'type'    => 'text',
			'default' => '&copy; ' . date( 'Y' ) . '. All rights reserved.',
		) );

		$tab->createOption( array(
			'type' => 'save',
		) );
	}

	/**
	 * Register fields for 404 tab.
	 *
	 * @param \TitanFrameworkAdminPage $panel  panel object to work with.
	 */
	protected function register_404_tab( $panel ) {
		$tab = $panel->createTab( array(
			'name' => '404 Page',
		) );

		$tab->createOption( array(
			'name'    => 'Title',
			'id'      => '404_title',
			'type'    => 'text',
			'default' => __( 'Oops! That page can&rsquo;t be found.', 'boilerplate' ),
		) );

		$tab->createOption( array(
			'name'    => 'Content',
			'id'      => '404_content',
			'type'    => 'editor',
			'default' => __( 'It looks like nothing was found at this location. Maybe try one of the links in menu or a search?', 'boilerplate' ),
		) );

		$tab->createOption( array(
			'type' => 'save',
		) );
	}
}

For more information on fields and panel/tabs methods you can read on official documentation.

Registering Theme Settings

To register Theme Settings we create an instance inside functions.php file:

functions.php

<?php

// ...
$settings = \Boilerplate\Theme\Admin\Theme_Settings::instance();

Printing values from Theme Settings

To get value from settings page you can simply use a ThemeSettings::get() method like this:

<?php
use Boilerplate\Theme\Admin\Theme_Settings;

// ...

echo esc_html( Theme_Settings::get( 'copyright_text' ) );

Next: Dummy Data Generator