2011-04-27 00:52:18 +02:00
< ? php
/**
* Twenty Eleven Theme Options
*
* @ package WordPress
2011-05-18 21:06:09 +02:00
* @ subpackage Twenty_Eleven
2011-04-28 10:06:57 +02:00
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
/**
2011-04-28 10:06:57 +02:00
* Properly enqueue styles and scripts for our theme options page .
*
* This function is attached to the admin_enqueue_scripts action hook .
*
* @ since Twenty Eleven 1.0
*
* @ param string $hook_suffix The action passes the current page to the function . We don ' t
* do anything if we ' re not on our theme options page .
2011-04-27 00:52:18 +02:00
*/
2011-04-28 10:06:57 +02:00
function twentyeleven_admin_enqueue_scripts ( $hook_suffix ) {
if ( $hook_suffix != 'appearance_page_theme_options' )
return ;
2011-04-28 11:32:34 +02:00
wp_enqueue_style ( 'twentyeleven-theme-options' , get_template_directory_uri () . '/inc/theme-options.css' , false , '2011-04-28' );
wp_enqueue_script ( 'twentyeleven-theme-options' , get_template_directory_uri () . '/inc/theme-options.js' , array ( 'farbtastic' ), '2011-04-28' );
2011-04-27 00:52:18 +02:00
wp_enqueue_style ( 'farbtastic' );
}
2011-04-28 10:06:57 +02:00
add_action ( 'admin_enqueue_scripts' , 'twentyeleven_admin_enqueue_scripts' );
2011-04-27 00:52:18 +02:00
/**
2011-04-28 10:06:57 +02:00
* Register the form setting for our twentyeleven_options array .
*
* This function is attached to the admin_init action hook .
*
* This call to register_setting () registers a validation callback , twentyeleven_theme_options_validate (),
* which is used when the option is saved , to ensure that our option values are complete , properly
* formatted , and safe .
*
2011-04-28 10:52:37 +02:00
* We also use this function to add our theme option if it doesn ' t already exist .
*
2011-04-28 10:06:57 +02:00
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
2011-04-28 10:06:57 +02:00
function twentyeleven_theme_options_init () {
2011-04-28 10:52:37 +02:00
// If we have no options in the database, let's add them now.
if ( false === twentyeleven_get_theme_options () )
add_option ( 'twentyeleven_theme_options' , twentyeleven_get_default_theme_options () );
register_setting (
'twentyeleven_options' , // Options group, see settings_fields() call in theme_options_render_page()
'twentyeleven_theme_options' , // Database option, see twentyeleven_get_theme_options()
'twentyeleven_theme_options_validate' // The sanitization callback, see twentyeleven_theme_options_validate()
);
2011-04-27 00:52:18 +02:00
}
2011-04-28 10:06:57 +02:00
add_action ( 'admin_init' , 'twentyeleven_theme_options_init' );
2011-04-27 00:52:18 +02:00
2011-05-22 23:32:44 +02:00
/**
* Change the capability required to save the 'twentyeleven_options' options group .
*
* @ see twentyeleven_theme_options_init () First parameter to register_setting () is the name of the options group .
* @ see twentyeleven_theme_options_add_page () The edit_theme_options capability is used for viewing the page .
*
* By default , the options groups for all registered settings require the manage_options capability .
* This filter is required to change our theme options page to edit_theme_options instead .
* By default , only administrators have either of these capabilities , but the desire here is
* to allow for finer - grained control for roles and users .
*
* @ param string $capability The capability used for the page , which is manage_options by default .
* @ return string The capability to actually use .
*/
function twentyeleven_option_page_capability ( $capability ) {
return 'edit_theme_options' ;
}
add_filter ( 'option_page_capability_twentyeleven_options' , 'twentyeleven_option_page_capability' );
2011-04-27 00:52:18 +02:00
/**
2011-06-01 21:28:42 +02:00
* Add our theme options page to the admin menu , including some help documentation .
2011-04-28 10:06:57 +02:00
*
* This function is attached to the admin_menu action hook .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
2011-04-28 10:06:57 +02:00
function twentyeleven_theme_options_add_page () {
2011-06-01 21:28:42 +02:00
$theme_page = add_theme_page (
2011-04-28 10:06:57 +02:00
__ ( 'Theme Options' , 'twentyeleven' ), // Name of page
__ ( 'Theme Options' , 'twentyeleven' ), // Label in menu
'edit_theme_options' , // Capability required
'theme_options' , // Menu slug, used to uniquely identify the page
'theme_options_render_page' // Function that renders the options page
);
2011-06-04 00:37:13 +02:00
if ( ! $theme_page )
return ;
2011-06-01 21:28:42 +02:00
$help = '<p>' . __ ( 'Some themes provide customization options that are grouped together on a Theme Options screen. If you change themes, options may change or disappear, as they are theme-specific. Your current theme, Twenty Eleven, provides the following Theme Options:' ) . '</p>' .
'<ol>' .
'<li>' . __ ( '<strong>Color Scheme</strong>: You can choose a color palette of "Light" (light background with dark text) or "Dark" (dark background with light text) for your site.' ) . '</li>' .
'<li>' . __ ( '<strong>Link Color</strong>: You can choose the color used for text links on your site. You can enter the HTML color or hex code, or you can choose visually by clicking the "Select a Color" button to pick from a color wheel.' ) . '</li>' .
'<li>' . __ ( '<strong>Default Layout</strong>: You can choose if you want your site’s default layout to have a sidebar on the left, the right, or not at all.' ) . '</li>' .
'</ol>' .
'<p>' . __ ( 'Remember to click "Save Changes" to save any changes you have made to the theme options.' ) . '</p>' .
'<p><strong>' . __ ( 'For more information:' ) . '</strong></p>' .
'<p>' . __ ( '<a href="http://codex.wordpress.org/Appearance_Theme_Options_Screen" target="_blank">Documentation on Theme Options</a>' ) . '</p>' .
'<p>' . __ ( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>' ;
add_contextual_help ( $theme_page , $help );
2011-04-27 00:52:18 +02:00
}
2011-04-28 10:06:57 +02:00
add_action ( 'admin_menu' , 'twentyeleven_theme_options_add_page' );
2011-04-27 00:52:18 +02:00
/**
2011-04-28 10:06:57 +02:00
* Returns an array of color schemes registered for Twenty Eleven .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
function twentyeleven_color_schemes () {
$color_scheme_options = array (
'light' => array (
'value' => 'light' ,
2011-04-28 10:06:57 +02:00
'label' => __ ( 'Light' , 'twentyeleven' ),
2011-04-28 10:59:42 +02:00
'thumbnail' => get_template_directory_uri () . '/inc/images/light.png' ,
2011-04-27 00:52:18 +02:00
),
'dark' => array (
'value' => 'dark' ,
2011-04-28 10:06:57 +02:00
'label' => __ ( 'Dark' , 'twentyeleven' ),
2011-04-28 10:59:42 +02:00
'thumbnail' => get_template_directory_uri () . '/inc/images/dark.png' ,
2011-04-27 00:52:18 +02:00
),
);
2011-04-28 10:06:57 +02:00
return apply_filters ( 'twentyeleven_color_schemes' , $color_scheme_options );
2011-04-27 00:52:18 +02:00
}
/**
2011-04-28 10:06:57 +02:00
* Returns an array of layout options registered for Twenty Eleven .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
function twentyeleven_layouts () {
$layout_options = array (
'content-sidebar' => array (
'value' => 'content-sidebar' ,
'label' => __ ( 'Content on left' , 'twentyeleven' ),
2011-04-28 10:59:42 +02:00
'thumbnail' => get_template_directory_uri () . '/inc/images/content-sidebar.png' ,
2011-04-27 00:52:18 +02:00
),
'sidebar-content' => array (
'value' => 'sidebar-content' ,
2011-04-28 10:06:57 +02:00
'label' => __ ( 'Content on right' , 'twentyeleven' ),
2011-04-28 10:59:42 +02:00
'thumbnail' => get_template_directory_uri () . '/inc/images/sidebar-content.png' ,
2011-04-27 00:52:18 +02:00
),
'content' => array (
'value' => 'content' ,
2011-06-01 21:28:42 +02:00
'label' => __ ( 'One-column, no sidebar' , 'twentyeleven' ),
2011-04-28 10:59:42 +02:00
'thumbnail' => get_template_directory_uri () . '/inc/images/content.png' ,
2011-04-27 00:52:18 +02:00
),
);
2011-04-28 10:06:57 +02:00
return apply_filters ( 'twentyeleven_layouts' , $layout_options );
2011-04-27 00:52:18 +02:00
}
/**
2011-04-28 10:06:57 +02:00
* Returns the default options for Twenty Eleven .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
2011-04-28 01:03:27 +02:00
function twentyeleven_get_default_theme_options () {
2011-04-28 10:06:57 +02:00
$default_theme_options = array (
2011-04-27 00:52:18 +02:00
'color_scheme' => 'light' ,
2011-04-28 10:52:37 +02:00
'link_color' => '#1b8be0' ,
2011-04-27 00:52:18 +02:00
'theme_layout' => 'content-sidebar' ,
);
2011-04-28 10:06:57 +02:00
return apply_filters ( 'twentyeleven_default_theme_options' , $default_theme_options );
2011-04-28 01:03:27 +02:00
}
/**
2011-04-28 10:06:57 +02:00
* Returns the options array for Twenty Eleven .
*
* @ since Twenty Eleven 1.0
2011-04-28 01:03:27 +02:00
*/
function twentyeleven_get_theme_options () {
2011-06-05 21:53:31 +02:00
return get_option ( 'twentyeleven_theme_options' , twentyeleven_get_default_theme_options () );
2011-04-27 00:52:18 +02:00
}
/**
2011-04-28 10:06:57 +02:00
* Returns the options array for Twenty Eleven .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
2011-04-28 10:06:57 +02:00
function theme_options_render_page () {
2011-04-27 00:52:18 +02:00
?>
< div class = " wrap " >
2011-04-28 10:06:57 +02:00
< ? php screen_icon (); ?>
< h2 >< ? php printf ( __ ( '%s Theme Options' , 'twentyeleven' ), get_current_theme () ); ?> </h2>
< ? php settings_errors (); ?>
2011-04-27 00:52:18 +02:00
< form method = " post " action = " options.php " >
2011-04-28 10:06:57 +02:00
< ? php
settings_fields ( 'twentyeleven_options' );
$options = twentyeleven_get_theme_options ();
$default_options = twentyeleven_get_default_theme_options ();
?>
2011-04-27 00:52:18 +02:00
< table class = " form-table " >
< tr valign = " top " class = " image-radio-option " >< th scope = " row " >< ? php _e ( 'Color Scheme' , 'twentyeleven' ); ?> </th>
< td >
2011-06-02 23:59:11 +02:00
< fieldset >< legend class = " screen-reader-text " >< span >< ? php _e ( 'Color Scheme' , 'twentyeleven' ); ?> </span></legend>
2011-04-27 00:52:18 +02:00
< ? php
2011-04-28 10:06:57 +02:00
foreach ( twentyeleven_color_schemes () as $color ) {
2011-04-27 00:52:18 +02:00
?>
< div class = " layout " >
< label class = " description " >
2011-04-28 10:06:57 +02:00
< input type = " radio " name = " twentyeleven_theme_options[color_scheme] " value = " <?php echo esc_attr( $color['value'] ); ?> " < ? php checked ( $options [ 'color_scheme' ], $color [ 'value' ] ); ?> />
2011-04-27 00:52:18 +02:00
< span >
2011-05-24 01:33:30 +02:00
< img src = " <?php echo esc_url( $color['thumbnail'] ); ?> " alt = " " />
2011-04-28 10:06:57 +02:00
< ? php echo $color [ 'label' ]; ?>
2011-04-27 00:52:18 +02:00
</ span >
</ label >
</ div >
< ? php
}
?>
</ fieldset >
</ td >
</ tr >
< tr valign = " top " >< th scope = " row " >< ? php _e ( 'Link Color' , 'twentyeleven' ); ?> </th>
< td >
2011-06-02 23:59:11 +02:00
< fieldset >< legend class = " screen-reader-text " >< span >< ? php _e ( 'Link Color' , 'twentyeleven' ); ?> </span></legend>
2011-04-28 10:06:57 +02:00
< input type = " text " name = " twentyeleven_theme_options[link_color] " id = " link-color " value = " <?php echo esc_attr( $options['link_color'] ); ?> " />
2011-04-28 21:01:51 +02:00
< a href = " # " class = " pickcolor hide-if-no-js " id = " link-color-example " ></ a >
2011-05-24 01:33:30 +02:00
< input type = " button " class = " pickcolor button hide-if-no-js " value = " <?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?> " />
2011-04-27 00:52:18 +02:00
< div id = " colorPickerDiv " style = " z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none; " ></ div >
< br />
2011-04-28 10:06:57 +02:00
< small class = " description " >< ? php printf ( __ ( 'Default color: %s' , 'twentyeleven' ), $default_options [ 'link_color' ] ); ?> </small>
2011-04-27 00:52:18 +02:00
</ fieldset >
</ td >
</ tr >
2011-06-01 21:28:42 +02:00
< tr valign = " top " class = " image-radio-option " >< th scope = " row " >< ? php _e ( 'Default Layout' , 'twentyeleven' ); ?> </th>
2011-04-27 00:52:18 +02:00
< td >
2011-06-02 23:59:11 +02:00
< fieldset >< legend class = " screen-reader-text " >< span >< ? php _e ( 'Color Scheme' , 'twentyeleven' ); ?> </span></legend>
2011-04-27 00:52:18 +02:00
< ? php
2011-04-28 10:06:57 +02:00
foreach ( twentyeleven_layouts () as $layout ) {
2011-04-27 00:52:18 +02:00
?>
< div class = " layout " >
< label class = " description " >
2011-04-28 10:06:57 +02:00
< input type = " radio " name = " twentyeleven_theme_options[theme_layout] " value = " <?php echo esc_attr( $layout['value'] ); ?> " < ? php checked ( $options [ 'theme_layout' ], $layout [ 'value' ] ); ?> />
2011-04-27 00:52:18 +02:00
< span >
2011-05-24 01:33:30 +02:00
< img src = " <?php echo esc_url( $layout['thumbnail'] ); ?> " alt = " " />
2011-04-28 10:06:57 +02:00
< ? php echo $layout [ 'label' ]; ?>
2011-04-27 00:52:18 +02:00
</ span >
</ label >
</ div >
< ? php
}
?>
</ fieldset >
</ td >
</ tr >
</ table >
2011-04-28 10:06:57 +02:00
< ? php submit_button (); ?>
2011-04-27 00:52:18 +02:00
</ form >
</ div >
< ? php
}
/**
2011-04-28 10:06:57 +02:00
* Sanitize and validate form input . Accepts an array , return a sanitized array .
2011-04-28 01:03:27 +02:00
*
2011-04-28 10:06:57 +02:00
* @ see twentyeleven_theme_options_init ()
* @ todo set up Reset Options action
*
2011-04-28 10:52:37 +02:00
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
function twentyeleven_theme_options_validate ( $input ) {
2011-04-28 10:52:37 +02:00
$output = $defaults = twentyeleven_get_default_theme_options ();
2011-04-28 01:03:27 +02:00
// Color scheme must be in our array of color scheme options
2011-04-28 10:06:57 +02:00
if ( isset ( $input [ 'color_scheme' ] ) && array_key_exists ( $input [ 'color_scheme' ], twentyeleven_color_schemes () ) )
$output [ 'color_scheme' ] = $input [ 'color_scheme' ];
2011-04-28 01:03:27 +02:00
// Link color must be 3 or 6 hexadecimal characters
2011-04-28 10:06:57 +02:00
if ( isset ( $input [ 'link_color' ] ) && preg_match ( '/^#?([a-f0-9]{3}){1,2}$/i' , $input [ 'link_color' ] ) )
$output [ 'link_color' ] = '#' . strtolower ( ltrim ( $input [ 'link_color' ], '#' ) );
2011-04-27 00:52:18 +02:00
2011-04-28 01:03:27 +02:00
// Theme layout must be in our array of theme layout options
2011-04-28 10:06:57 +02:00
if ( isset ( $input [ 'theme_layout' ] ) && array_key_exists ( $input [ 'theme_layout' ], twentyeleven_layouts () ) )
$output [ 'theme_layout' ] = $input [ 'theme_layout' ];
2011-04-27 00:52:18 +02:00
2011-04-28 10:52:37 +02:00
return apply_filters ( 'twentyeleven_theme_options_validate' , $output , $input , $defaults );
2011-04-27 00:52:18 +02:00
}
/**
2011-04-28 10:52:37 +02:00
* Enqueue the styles for the current color scheme .
*
* @ since Twenty Eleven 1.0
2011-04-27 00:52:18 +02:00
*/
2011-04-28 13:05:53 +02:00
function twentyeleven_enqueue_color_scheme () {
2011-04-27 00:52:18 +02:00
$options = twentyeleven_get_theme_options ();
2011-04-28 10:06:57 +02:00
$color_scheme = $options [ 'color_scheme' ];
2011-04-27 00:52:18 +02:00
2011-04-28 10:06:57 +02:00
if ( 'dark' == $color_scheme )
2011-04-28 13:05:53 +02:00
wp_enqueue_style ( 'dark' , get_template_directory_uri () . '/colors/dark.css' , array (), null );
2011-04-27 00:52:18 +02:00
2011-04-28 13:05:53 +02:00
do_action ( 'twentyeleven_enqueue_color_scheme' , $color_scheme );
2011-04-27 00:52:18 +02:00
}
2011-04-28 13:05:53 +02:00
add_action ( 'wp_enqueue_scripts' , 'twentyeleven_enqueue_color_scheme' );
2011-04-27 00:52:18 +02:00
/**
2011-04-28 10:06:57 +02:00
* Add a style block to the theme for the current link color .
*
* This function is attached to the wp_head action hook .
2011-04-27 00:52:18 +02:00
*
* @ since Twenty Eleven 1.0
*/
2011-04-28 13:05:53 +02:00
function twentyeleven_print_link_color_style () {
2011-04-27 00:52:18 +02:00
$options = twentyeleven_get_theme_options ();
2011-04-28 10:06:57 +02:00
$link_color = $options [ 'link_color' ];
$default_options = twentyeleven_get_default_theme_options ();
2011-04-28 21:01:51 +02:00
2011-04-28 10:06:57 +02:00
// Don't do anything if the current link color is the default.
if ( $default_options [ 'link_color' ] == $link_color )
return ;
?>
< style >
/* Link color */
a ,
2011-05-26 20:41:35 +02:00
#site-title a:focus,
#site-title a:hover,
#site-title a:active,
2011-04-29 00:04:39 +02:00
. entry - title a : hover ,
2011-05-26 20:41:35 +02:00
. entry - title a : focus ,
. entry - title a : active ,
2011-04-29 00:04:39 +02:00
. widget_twentyeleven_ephemera . comments - link a : hover ,
section . recent - posts . other - recent - posts a [ rel = " bookmark " ] : hover ,
2011-05-05 00:54:50 +02:00
section . recent - posts . other - recent - posts . comments - link a : hover ,
2011-05-13 01:13:56 +02:00
. format - image footer . entry - meta a : hover ,
#site-generator a:hover {
2011-04-28 10:06:57 +02:00
color : < ? php echo $link_color ; ?> ;
}
2011-04-29 00:04:39 +02:00
section . recent - posts . other - recent - posts . comments - link a : hover {
border - color : < ? php echo $link_color ; ?> ;
2011-05-25 23:19:52 +02:00
}
2011-05-30 03:29:55 +02:00
article . feature - image . small . entry - summary p a : hover ,
. entry - header . comments - link a : hover ,
. entry - header . comments - link a : focus ,
. entry - header . comments - link a : active {
2011-05-25 23:19:52 +02:00
background : < ? php echo $link_color ; ?> ;
2011-05-30 03:29:55 +02:00
}
2011-04-28 10:06:57 +02:00
</ style >
< ? php
2011-04-27 00:52:18 +02:00
}
2011-04-28 13:05:53 +02:00
add_action ( 'wp_head' , 'twentyeleven_print_link_color_style' );
2011-04-27 00:52:18 +02:00
/**
2011-04-28 10:52:37 +02:00
* Adds Twenty Eleven layout classes to the array of body classes .
2011-04-27 00:52:18 +02:00
*
* @ since Twenty Eleven 1.0
*/
2011-04-28 13:05:53 +02:00
function twentyeleven_layout_classes ( $existing_classes ) {
2011-04-28 10:06:57 +02:00
$options = twentyeleven_get_theme_options ();
$current_layout = $options [ 'theme_layout' ];
2011-04-28 13:05:53 +02:00
if ( in_array ( $current_layout , array ( 'content-sidebar' , 'sidebar-content' ) ) )
$classes = array ( 'two-column' );
2011-04-28 10:06:57 +02:00
else
2011-04-28 13:05:53 +02:00
$classes = array ( 'one-column' );
2011-04-28 10:06:57 +02:00
2011-04-28 13:05:53 +02:00
$classes [] = $current_layout ;
2011-04-28 10:06:57 +02:00
2011-04-28 13:05:53 +02:00
$classes = apply_filters ( 'twentyeleven_layout_classes' , $classes , $current_layout );
2011-04-27 00:52:18 +02:00
2011-04-28 13:05:53 +02:00
return array_merge ( $existing_classes , $classes );
2011-04-27 00:52:18 +02:00
}
2011-04-28 10:06:57 +02:00
add_filter ( 'body_class' , 'twentyeleven_layout_classes' );