Custom Theme Options

theme-options.php

<?php
/**
 * VSP functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package VSP
 */

if ( ! function_exists( 'vsp_setup' ) ) :
	/**
	 * Sets up theme defaults and registers support for various WordPress features.
	 *
	 * Note that this function is hooked into the after_setup_theme hook, which
	 * runs before the init hook. The init hook is too late for some features, such
	 * as indicating support for post thumbnails.
	 */
	function vsp_setup() {
		/*
		 * Make theme available for translation.
		 * Translations can be filed in the /languages/ directory.
		 * If you're building a theme based on VSP, use a find and replace
		 * to change 'vsp' to the name of your theme in all the template files.
		 */
		load_theme_textdomain( 'vsp', get_template_directory() . '/languages' );

		// Add default posts and comments RSS feed links to head.
		add_theme_support( 'automatic-feed-links' );

		/*
		 * Let WordPress manage the document title.
		 * By adding theme support, we declare that this theme does not use a
		 * hard-coded <title> tag in the document head, and expect WordPress to
		 * provide it for us.
		 */
		add_theme_support( 'title-tag' );

		/*
		 * Enable support for Post Thumbnails on posts and pages.
		 *
		 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
		 */
		add_theme_support( 'post-thumbnails' );

		// This theme uses wp_nav_menu() in one location.
		register_nav_menus( array(
			'menu-1' => esc_html__( 'Primary', 'vsp' ),
		) );

		/*
		 * Switch default core markup for search form, comment form, and comments
		 * to output valid HTML5.
		 */
		add_theme_support( 'html5', array(
			'search-form',
			'comment-form',
			'comment-list',
			'gallery',
			'caption',
		) );

		// Set up the WordPress core custom background feature.
		add_theme_support( 'custom-background', apply_filters( 'vsp_custom_background_args', array(
			'default-color' => 'ffffff',
			'default-image' => '',
		) ) );

		// Add theme support for selective refresh for widgets.
		add_theme_support( 'customize-selective-refresh-widgets' );

		/**
		 * Add support for core custom logo.
		 *
		 * @link https://codex.wordpress.org/Theme_Logo
		 */
		add_theme_support( 'custom-logo', array(
			'height'      => 250,
			'width'       => 250,
			'flex-width'  => true,
			'flex-height' => true,
		) );
	}
endif;
add_action( 'after_setup_theme', 'vsp_setup' );

/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function vsp_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'vsp_content_width', 640 );
}
add_action( 'after_setup_theme', 'vsp_content_width', 0 );

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function vsp_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'vsp' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', 'vsp' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'vsp_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function vsp_scripts() {
	wp_enqueue_style( 'vsp-style', get_stylesheet_uri() );

	wp_enqueue_script( 'vsp-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

	wp_enqueue_script( 'vsp-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'vsp_scripts' );

/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Functions which enhance the theme by hooking into WordPress.
 */
require get_template_directory() . '/inc/template-functions.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
if ( defined( 'JETPACK__VERSION' ) ) {
	require get_template_directory() . '/inc/jetpack.php';
}


// Custom Theme Options
function vsp_custom_theme_options() {
	// Footer theme options
	add_settings_section(
		'footer_section',
		'Footer options',
		'vsp_footer_section_display',
		'vsp-footer-options'
	);

	add_settings_field(
		'footer_message_field',
		'Theme Footer Copyright Message',
		'vsp_footer_cop_msg_display',
		'vsp-footer-options',
		'footer_section'
	);

	add_settings_field(
		'footer_facebook_field',
		'Footer Facebook username',
		'vsp_footer_fb_un_display',
		'vsp-footer-options',
		'footer_section'
	);

	register_setting(
		'footer_section',
		'footer_cop'
	);

	// Header theme options
	add_settings_section(
		'header_section',
		'Header options',
		'vsp_header_section_display',
		'vsp-header-options'
	);

	add_settings_field(
		'header_site_title',
		'Header Website Title',
		'vsp_header_title_display',
		'vsp-header-options',
		'header_section'
	);

	register_setting(
		'header_section',
		'header_options'
	);
}

add_action( 'admin_init', 'vsp_custom_theme_options' );

function vsp_footer_section_display() {
	echo 'In this section you can control all the fields under footer section.';
}

function vsp_header_section_display() {
	echo 'In this section you can control all the fields under header section.';	
}

function vsp_footer_cop_msg_display() {
	$options = (array)get_option('footer_cop');
	if( isset($options['fbusername']) ){
		$value = $options['message'];
	}else{
		$value = '';
	}
	echo '<input type="text" name="footer_cop[message]" id="footer_cop_message" value="'. $value .'">';
}

function vsp_footer_fb_un_display() {
	$options = (array)get_option('footer_cop');
	if( isset($options['fbusername']) ){
		$value = $options['fbusername'];
	}else{
		$value = '';
	}
	echo '<input type="text" name="footer_cop[fbusername]" value="'. $value .'">';
}

function vsp_header_title_display(){
	$options = (array)get_option('header_options');
	if( isset($options['title']) ){
		$value = $options['title'];
	}else{
		$value = '';
	}
	echo '<input type="text" name="header_options[title]" id="header_options_title" value="'. $value .'">';	
}

function vsp_add_options_page() {
	/*add_options_page(
		'VSP Theme Options',
		'VSP Theme Options',
		'manage_options',
		'vsp-theme-options', // The slug by which the menu item is accessible
		'vsp_theme_options_display' // The name of the cb function used to display the page content
	);*/

	// This will introduce a new top level menu
	add_menu_page(
		'VSP Options', // The text to be displayed in the browser title bar
		'VSP Options',
		'manage_options',
		'vsp-theme-options', // The slug by which the menu item is accessible
		'vsp_theme_options_display' // The name of the cb function used to display the page content		
	);

	add_submenu_page(
		'vsp-theme-options',
		'Header Options',
		'Header Options',
		'manage_options',
		'vsp-header-options',
		'vsp_theme_header_options_display'
	);

	add_submenu_page(
		'vsp-theme-options',
		'Footer Options',
		'Footer Options',
		'manage_options',
		'vsp-footer-options',
		'vsp_theme_footer_options_display'
	);
}

add_action( 'admin_menu', 'vsp_add_options_page' );

function vsp_theme_options_display() {
	?>
	<div class="wrap">
		<h2>VSP Theme Options</h2>
		<form method="post" action="options.php">
			<?php
				settings_fields( 'footer_section' );
				settings_fields( 'header_section' );
				do_settings_sections('vsp-theme-options');
				submit_button();
			?>
		</form>
	</div>
	<?php
}

function vsp_theme_header_options_display() {
	?>
	<div class="wrap">
		<h2>VSP Header Theme Options</h2>
		<form method="post" action="options.php">
			<?php
				settings_fields( 'header_section' );
				do_settings_sections('vsp-header-options');
				submit_button();
			?>
		</form>
	</div>
	<?php
}

function vsp_theme_footer_options_display() {
	?>
	<div class="wrap">
		<h2>VSP Footer Theme Options</h2>
		<form method="post" action="options.php">
			<?php
				settings_fields( 'footer_section' );
				do_settings_sections('vsp-footer-options');
				submit_button();
			?>
		</form>
	</div>
	<?php
}