Wp Add Custom Theme Settings

Wp Add Custom Theme Settings

function.php ----------------------------------

/**
 * Add Custom theme settings
 */

// create admin page
if( is_admin() ){
	include_once(get_template_directory() . '/admin/settings/add_menu.php');
}


add_menu.php --------------------------------------

<?php

/**
* Add dpktst theme settings menu option
* in dashboard menu.
* function add_menu_page()
*/

if( !function_exists('wp_dpktst_custom_menu') ) {
	/**
	 * Register a custom menu page.
	 */
	function wp_dpktst_custom_menu(){
		add_menu_page( 
			'dpktst Settings Page', // Page title
			'dpktst Settings', // Manu name
			'manage_options', // capability
			'dpktst_settings', // menu_slug
			'dpktst_settings_page', // callback function
			null, // manu icon if not set null
			2 // position
		); 
	}
	add_action( 'admin_menu', 'wp_dpktst_custom_menu' );

	/**
	 * Display a custom menu page
	 */
	function dpktst_settings_page(){
		?>
		    <div class="wrap">
		    <h1>dpktst Settings Page</h1>
		    <form method="post" action="options.php">
		        <?php
		            settings_fields("dpktst_section");
		            do_settings_sections("dpktst-theme-options");      
		            submit_button(); 
		        ?>          
		    </form>
			</div>
		<?php
	}
	/**
	 * Display a twitter
	 */
	function display_twitter_element() {
	?>
    	<input type="text" name="twitter_url" id="twitter_url" value="<?php echo get_option('twitter_url'); ?>" />
    <?php
	}
	/**
	 * Display a facebook
	 */
	function display_facebook_element() {
		?>
	    	<input type="text" name="facebook_url" id="facebook_url" value="<?php echo get_option('facebook_url'); ?>" />
	    <?php
	}
	/**
	 * Display a layout
	 */
	function display_layout_element() {
		?>
			<input type="checkbox" name="theme_layout" value="1" <?php checked(1, get_option('theme_layout'), true); ?> /> 
		<?php
	}
	/**
	 * Display a logo
	 */
	function logo_display() {
		?>
	    <input type="button" value="Upload Image" class="button-primary" id="upload_image"/>
			<input type="hidden" name="logo" class="wp_attachment_id" value="" /> </br>
			<img src="" class="image" style="display:none;margin-top:10px;" image-id=""/>
			<img src="<?php echo get_option('logo'); ?>" class="logo-image">

			<script type="text/javascript">
				(function( $ ) {
					'use strict';
					$(function() {
						$('#upload_image').click(open_custom_media_window);
						function open_custom_media_window() {
							if (this.window === undefined) {
								this.window = wp.media({
									title: 'Insert Image',
									library: {type: 'image'},
									multiple: false,
									button: {text: 'Insert Image'}
								});

								var self = this;
								this.window.on('select', function() {
									var response = self.window.state().get('selection').first().toJSON();
									$('.wp_attachment_id').val(response.sizes.thumbnail.url);
									$('.image').attr('src', response.sizes.thumbnail.url);
									$('.image').attr('image-id', response.id);
				                    $('.image').show();
								});
							}
							this.window.open();
							return false;
						}
					});
				})( jQuery );
			</script>
	        
	   <?php
	}

	/**
	 * Display a custom menu page
	 */
	function display_theme_panel_fields() {
		add_settings_section("dpktst_section", "All Settings", null, "dpktst-theme-options");
		
		add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "dpktst-theme-options", "dpktst_section");
	    add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "dpktst-theme-options", "dpktst_section");
	    add_settings_field("theme_layout", "Do you want the layout to be responsive?", "display_layout_element", "dpktst-theme-options", "dpktst_section");
	    add_settings_field("logo", "Logo", "logo_display", "dpktst-theme-options", "dpktst_section");  


	    register_setting("dpktst_section", "twitter_url");
	    register_setting("dpktst_section", "facebook_url");
	    register_setting("dpktst_section", "theme_layout");
	    register_setting("dpktst_section", "logo");
	}

	function enqueue_scripts_trigger() {
	    wp_enqueue_media();
	}

	add_action( 'admin_enqueue_scripts', 'enqueue_scripts_trigger' );
	add_action("admin_init", "display_theme_panel_fields");
}