Skip to content
Browse files

Added theme customizer demo.

  • Loading branch information...
1 parent ce09c3e commit 5f9747f30a9098a63b241956f4fef151769d53bc @devinsays committed
View
BIN options-check/screenshot.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
24 options-theme-customizer/footer.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * The template for displaying the footer.
+ *
+ * Contains the closing of the id=main div and all content
+ * after. Calls sidebar-footer.php for bottom widgets.
+ *
+ * @package WordPress
+ * @subpackage Options Theme Customizer
+ */
+?>
+
+ </div><!-- #page -->
+
+<?php
+ /* Always have wp_footer() just before the closing </body>
+ * tag of your theme, or you will break many plugins, which
+ * generally use this hook to reference JavaScript files.
+ */
+
+ wp_footer();
+?>
+</body>
+</html>
View
27 options-theme-customizer/functions.php
@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * Helper function to return the theme option value. If no value has been saved, it returns $default.
+ * Needed because options are saved as serialized strings.
+ *
+ */
+
+if ( !function_exists( 'of_get_option' ) ) {
+function of_get_option($name, $default = false) {
+
+ $optionsframework_settings = get_option('optionsframework');
+
+ // Gets the unique option id
+ $option_name = $optionsframework_settings['id'];
+
+ if ( get_option($option_name) ) {
+ $options = get_option($option_name);
+ }
+
+ if ( isset($options[$name]) ) {
+ return $options[$name];
+ } else {
+ return $default;
+ }
+}
+}
View
19 options-theme-customizer/header.php
@@ -0,0 +1,19 @@
+<?php
+/**
+ * The Header for our theme.
+ *
+ * @package WordPress
+ * @subpackage Options Theme Customizer
+ */
+?><!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+<meta charset="<?php bloginfo( 'charset' ); ?>" />
+<title>Options Check</title>
+<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
+<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+
+ <div id="page">
View
60 options-theme-customizer/index.php
@@ -0,0 +1,60 @@
+<?php
+/**
+ * The main template file.
+ *
+ * This theme is purely for the purpose of testing theme options in Options Framework plugin.
+ *
+ * @package WordPress
+ * @subpackage Options Theme Customizer
+ */
+
+get_header(); ?>
+
+ <article>
+
+ <header class="entry-header">
+ <h1>Options Theme Customizer</h1>
+ </header><!-- .entry-header -->
+
+ <div class="entry-content">
+
+ <dl>
+ <dt>type: text</dt>
+ <dd><?php echo of_get_option('example_text', 'Not Set'); ?></dd>
+ </dl>
+
+ <dl>
+ <dt>type: select</dt>
+ <dd><?php echo of_get_option('example_select', 'Not Set' ); ?></dd>
+ </dl>
+
+ <dl>
+ <dt>type: radio</dt>
+ <dd> <?php echo of_get_option('example_radio', 'Not Set' ); ?></dd>
+ </dl>
+
+ <dl>
+ <dt>type: checkbox <small>(work in progress, little bug here)</small></dt>
+ <dd><?php echo of_get_option('example_checkbox', 'Not Set' ); ?></dd>
+ </dl>
+
+ <dl>
+ <dt>type: uploader</dt>
+ <dd><?php echo of_get_option('example_uploader'); ?></dd>
+ <?php if ( of_get_option('example_uploader') ) { ?>
+ <img src="<?php echo of_get_option('example_uploader'); ?>" />
+ <?php } ?>
+ </dl>
+
+ <dl>
+ <dt>type: colorpicker</dt>
+ <dd>
+ <div style="width:100px; height:100px; background:<?php echo of_get_option('example_colorpicker', '#666666'); ?>"></div>
+ <p><?php echo of_get_option('example_colorpicker'); ?></p>
+ </dd>
+ </dl>
+
+ </div><!-- .entry-content -->
+ </article><!-- #post-0 -->
+
+<?php get_footer(); ?>
View
182 options-theme-customizer/options.php
@@ -0,0 +1,182 @@
+<?php
+/**
+ * The theme option name is set as 'options-theme-customizer' here.
+ * In your own project, you should use a different option name.
+ * I'd recommend using the name of your theme.
+ *
+ * This option name will be used later when we set up the options
+ * for the front end theme customizer.
+ */
+
+function optionsframework_option_name() {
+
+ $optionsframework_settings = get_option('optionsframework');
+
+ // Edit 'options-theme-customizer' and set your own theme name instead
+ $optionsframework_settings['id'] = 'options_theme_customizer';
+ update_option('optionsframework', $optionsframework_settings);
+}
+
+/**
+ * Defines an array of options that will be used to generate the settings page and be saved in the database.
+ * When creating the "id" fields, make sure to use all lowercase and no spaces.
+ */
+
+function optionsframework_options() {
+
+ // Test data
+ $test_array = array(
+ "First" => "First Option",
+ "Second" => "Second Option",
+ "Third" => "Third Option" );
+
+ $options = array();
+
+ $options[] = array( "name" => "Example Settings",
+ "type" => "heading" );
+
+ $options['example_text'] = array(
+ "name" => "Text",
+ "id" => "example_text",
+ "std" => "Default Value",
+ "type" => "text" );
+
+ $options['example_select'] = array(
+ "name" => "Select Box",
+ "id" => "example_select",
+ "std" => "First",
+ "type" => "select",
+ "options" => $test_array );
+
+ $options['example_radio'] = array(
+ "name" => "Radio Buttons",
+ "id" => "example_radio",
+ "std" => "Third",
+ "type" => "radio",
+ "options" => $test_array );
+
+ $options['example_checkbox'] = array(
+ "name" => "Input Checkbox",
+ "desc" => "This is a work in progress. There is are some issues with how the front end customizer saves checkbox options, and how the Options Framework does. Bear with me a bit while I work on a solution.",
+ "id" => "example_checkbox",
+ "std" => "1",
+ "type" => "checkbox" );
+
+ $options['example_uploader'] = array(
+ "name" => "Uploader Test",
+ "desc" => "This creates a full size uploader that previews the image.",
+ "id" => "example_uploader",
+ "type" => "upload" );
+
+ $options['example_colorpicker'] = array(
+ "name" => "Colorpicker",
+ "id" => "example_colorpicker",
+ "std" => "#666666",
+ "type" => "color" );
+
+ return $options;
+}
+
+/**
+ * Front End Customizer
+ *
+ * WordPress 3.4 Required
+ */
+
+add_action( 'customize_register', 'options_theme_customizer_register' );
+
+function options_theme_customizer_register($wp_customize) {
+
+ /**
+ * This is optional, but if you want to reuse some of the defaults
+ * or values you already have built in the options panel, you
+ * can load them into $options for easy reference
+ */
+
+ $options = optionsframework_options();
+
+ /* Basic */
+
+ $wp_customize->add_section( 'options_theme_customizer_basic', array(
+ 'title' => __( 'Basic', 'options_theme_customizer' ),
+ 'priority' => 100
+ ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_text]', array(
+ 'default' => $options['example_text']['std'],
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( 'options_theme_customizer_example_text', array(
+ 'label' => $options['example_text']['name'],
+ 'section' => 'options_theme_customizer_basic',
+ 'settings' => 'options_theme_customizer[example_text]',
+ 'type' => $options['example_text']['type']
+ ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_select]', array(
+ 'default' => $options['example_select']['std'],
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( 'options_theme_customizer_example_select', array(
+ 'label' => $options['example_select']['name'],
+ 'section' => 'options_theme_customizer_basic',
+ 'settings' => 'options_theme_customizer[example_select]',
+ 'type' => $options['example_select']['type'],
+ 'choices' => $options['example_select']['options']
+ ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_radio]', array(
+ 'default' => $options['example_radio']['std'],
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( 'options_theme_customizer_example_radio', array(
+ 'label' => $options['example_radio']['name'],
+ 'section' => 'options_theme_customizer_basic',
+ 'settings' => 'options_theme_customizer[example_radio]',
+ 'type' => $options['example_radio']['type'],
+ 'choices' => $options['example_radio']['options']
+ ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_checkbox]', array(
+ 'default' => $options['example_checkbox']['std'],
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( 'options_theme_customizer_example_checkbox', array(
+ 'label' => $options['example_checkbox']['name'],
+ 'section' => 'options_theme_customizer_basic',
+ 'settings' => 'options_theme_customizer[example_checkbox]',
+ 'type' => $options['example_checkbox']['type']
+ ) );
+
+ /* Extended */
+
+ $wp_customize->add_section( 'options_theme_customizer_extended', array(
+ 'title' => __( 'Extended', 'options_theme_customizer' ),
+ 'priority' => 110
+ ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_uploader]', array(
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'example_uploader', array(
+ 'label' => $options['example_uploader']['name'],
+ 'section' => 'options_theme_customizer_extended',
+ 'settings' => 'options_theme_customizer[example_uploader]'
+ ) ) );
+
+ $wp_customize->add_setting( 'options_theme_customizer[example_colorpicker]', array(
+ 'default' => $options['example_colorpicker']['std'],
+ 'type' => 'option'
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
+ 'label' => $options['example_colorpicker']['name'],
+ 'section' => 'options_theme_customizer_extended',
+ 'settings' => 'options_theme_customizer[example_colorpicker]'
+ ) ) );
+}
View
BIN options-theme-customizer/screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
53 options-theme-customizer/style.css
@@ -0,0 +1,53 @@
+/*
+Theme Name: Options Theme Customizer
+Theme URI: http://wptheming.com
+Description: A demo theme that shows how the front-end theme customizer works.
+Author: Devin Price
+Author URI: http://wptheming.com
+Version: 1.3
+*/
+
+body {
+ background:#eee;
+}
+
+body, input, textarea {
+ color: #222;
+ font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ line-height: 1.625;
+}
+
+p {
+ margin:0 0 10px 0;
+}
+
+h1, h2, h3 {
+ margin:0 0 10px 0;
+}
+
+#page {
+ background:#fff;
+ min-width:440px;
+ max-width:740px;
+ margin:20px auto;
+}
+
+header {
+ background:#dedede;
+ padding:30px 40px;
+}
+
+.entry-content {
+ padding:20px 40px;
+}
+
+dt {
+ color:#666;
+ margin-bottom:5px;
+}
+dd {
+ clear:both;
+ margin:0;
+ font-size:1.2em;
+}

0 comments on commit 5f9747f

Please sign in to comment.
Something went wrong with that request. Please try again.