Skip to content

Commit

Permalink
Add file with functions to write custom style in head and new field f…
Browse files Browse the repository at this point in the history 
…or link color
  • Loading branch information
@bueltge
bueltge committed Sep 7, 2012
1 parent 8bb3dee commit ff4c3b5
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 28 deletions.
2 changes: 1 addition & 1 deletion css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions css/style.dev.css
View file
Expand Up @@ -8,7 +8,6 @@


body { body {
background: #fff; background: #fff;
color: #111;
font-family: 'Lucida Sans Unicode','Lucida Sans', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Sans Vera', Verdana, Arial, Tahoma, Helvetica, Sans-Serif; font-family: 'Lucida Sans Unicode','Lucida Sans', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Sans Vera', Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
font-style: normal; font-style: normal;
line-height: 1.5em; line-height: 1.5em;
Expand Down Expand Up @@ -113,7 +112,6 @@ line-height: 1.7em;
} }


#content h2 a:link, #content h2 a:visited, #header h1 a:link, #header h1 a:visited { #content h2 a:link, #content h2 a:visited, #header h1 a:link, #header h1 a:visited {
color: #0100be;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
border: none; border: none;
Expand Down Expand Up @@ -344,7 +342,6 @@ margin: 0;


a:link, a:visited { a:link, a:visited {
font-weight: 400; font-weight: 400;
color: #0100be;
text-decoration: none; text-decoration: none;
} }


Expand Down
7 changes: 5 additions & 2 deletions functions.php
View file
Expand Up @@ -52,9 +52,12 @@ function documentation_setup() {
// Load up our theme options page and related code. // Load up our theme options page and related code.
require_once( get_template_directory() . '/inc/theme-options.php' ); require_once( get_template_directory() . '/inc/theme-options.php' );
$documentation_options = new Documentation_Options( $args ); $documentation_options = new Documentation_Options( $args );

// Include the theme customizer for options of theme options
require_once( get_template_directory() . '/inc/theme-customize.php' ); require_once( get_template_directory() . '/inc/theme-customize.php' );
$documentation_customize = new Documentation_Customize( $args ); $documentation_customize = new Documentation_Customize( $args );
// include to write the custom theme options in theme head
require_once( get_template_directory() . '/inc/head-style.php' );
$documentation_head_style = new Documentation_Head_Style( $args );


// Add default posts and comments RSS feed links to <head>. // Add default posts and comments RSS feed links to <head>.
add_theme_support( 'automatic-feed-links' ); add_theme_support( 'automatic-feed-links' );
Expand All @@ -65,7 +68,7 @@ function documentation_setup() {
// Add support for custom background. // Add support for custom background.
$args = array( $args = array(
'default-image' => '', 'default-image' => '',
'default-color' => '', 'default-color' => 'fff',
'wp-head-callback' => '_custom_background_cb', 'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '', 'admin-head-callback' => '',
'admin-preview-callback' => '' 'admin-preview-callback' => ''
Expand Down
110 changes: 110 additions & 0 deletions inc/head-style.php
View file
@@ -0,0 +1,110 @@
<?php
/**
* Documentation Theme Style
* Write style settings in head
*
* @package WordPress
* @subpackage Documentation
* @since 09/05/2012
*/

class Documentation_Head_Style extends Documentation_Options {

/**
* Identifier, namespace
*/
public static $theme_key = '';

/**
* The option value in the database will be based on get_stylesheet()
* so child themes don't share the parent theme's option value.
*/
public static $option_key = '';

/**
* Initialize our options.
*/
var $options = array();

/**
* Constructor
*
* @since 09/07/2012
* @param $args Array
* @return void
*/
public function __construct( $args = NULL ) {

if ( is_admin() )
return NULL;

// Set option key based on get_stylesheet()
if ( NULL === $args )
$args['theme_key'] = strtolower( get_stylesheet() );

// Set option key based on get_stylesheet()
$this->theme_key = $args['theme_key'];
$this->option_key = $this->theme_key . '_theme_options';

add_action( 'wp_head', array( $this, 'get_custom_style' ) );
}

/**
* Returns the default options.
* Use the hook 'documentation_default_theme_options' for change via plugin
*
* @since 08/09/2012
* @return Array
*/
public function get_default_theme_options( $value = NULL ) {

$default_theme_options = array(
'rewrite_url' => 'wp-admin/edit.php',
'text_color' => '#333',
'link_color' => '#0100BE'
);

if ( NULL !== $value )
return $default_theme_options[$value];

return apply_filters( $this->theme_key . '_default_theme_options', $default_theme_options );
}

/**
* Returns the options array.
*
* @since 09/07/2012
* @return Array
*/
public function get_theme_options() {

$saved = (array) get_option( $this->option_key );
$defaults = $this->get_default_theme_options();

$options = wp_parse_args( $saved, $defaults );
$options = array_intersect_key( $options, $defaults );

return apply_filters( $this->theme_key . '_theme_options', $options );
}

/**
* Styles from theme options
* Write in head of frontend
*
* @since 09/07/2012
* @return void
*/
public function get_custom_style() {

$options = $this->get_theme_options();
?>
<style type="text/css">
body { color: <?php echo $options['text_color']; ?>; }
a:link, a:visited,
#content h2 a:link, #content h2 a:visited,
#header h1 a:link, #header h1 a:visited { color: <?php echo $options['link_color']; ?>; }
</style>
<?php
}

} // end class
11 changes: 10 additions & 1 deletion inc/theme-customize.php
View file
Expand Up @@ -73,12 +73,21 @@ public function customize_register( $wp_customize ) {
'type' => 'option', 'type' => 'option',
'capability' => 'edit_theme_options', 'capability' => 'edit_theme_options',
) ); ) );
// add color field include
// add color field include color picker for text color
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $this->option_key . '_text_color', array( $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $this->option_key . '_text_color', array(
'label' => __( 'Text Color', 'documentation' ), 'label' => __( 'Text Color', 'documentation' ),
'section' => 'colors', 'section' => 'colors',
'settings' => $this->option_key . '[text_color]', 'settings' => $this->option_key . '[text_color]',
) ) ); ) ) );

// add color field include color picker for link color
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $this->option_key . '_link_color', array(
'label' => __( 'Link Color', 'documentation' ),
'section' => 'colors',
'settings' => $this->option_key . '[link_color]',
) ) );

} }


} // end class } // end class
4 changes: 2 additions & 2 deletions inc/theme-options.css
View file
Expand Up @@ -20,7 +20,7 @@
.image-radio-option img { .image-radio-option img {
margin: 0 0 0 -2px; margin: 0 0 0 -2px;
} }
#text-color-example { #text-color-example, #link-color-example {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
Expand All @@ -29,7 +29,7 @@
padding: 4px 14px; padding: 4px 14px;
} }


#colorPickerDiv { .colorPickerDiv {
z-index: 100; z-index: 100;
background: #eee; background: #eee;
border: 1px solid #ccc; border: 1px solid #ccc;
Expand Down
25 changes: 13 additions & 12 deletions inc/theme-options.js
View file
Expand Up @@ -3,24 +3,25 @@ var farbtastic;
( function($) { ( function($) {


// set ID or class for the textarea // set ID or class for the textarea
var colorpicker = '#text-color', var colorpicker = '#text-color',
example = '#text-color-example'; example = '#text-color-example',
colorpickerdiv = '#text-colorPickerDiv';


var pickColor = function(a) { var pickColor = function(a) {
farbtastic.setColor(a); farbtastic.setColor(a);
$(colorpicker).val(a); $(colorpicker).val(a);
$(example).css('background-color', a); $(example).css('background-color', a);
}; };


$(document).ready( function() { $(document).ready( function() {
$('#default-color').wrapInner('<a href="#" />'); $('#text-default-color').wrapInner('<a href="#" />');


farbtastic = $.farbtastic('#colorPickerDiv', pickColor); farbtastic = $.farbtastic(colorpickerdiv, pickColor);


pickColor( $(colorpicker).val() ); pickColor( $(colorpicker).val() );


$('.pickcolor').click( function(e) { $('#text-color-example').click( function(e) {
$('#colorPickerDiv').show(); $(colorpickerdiv).show();
e.preventDefault(); e.preventDefault();
}); });


Expand All @@ -36,16 +37,16 @@ var farbtastic;
}); });


$(document).mousedown( function() { $(document).mousedown( function() {
$('#colorPickerDiv').hide(); $(colorpickerdiv).hide();
}); });


$('#default-color a').click( function(e) { $('#text-default-color a').click( function(e) {
pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') ); pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
e.preventDefault(); e.preventDefault();
}); });


$('.image-radio-option.color-scheme input:radio').change( function() { $('.image-radio-option.color-scheme input:radio').change( function() {
var currentDefault = $('#default-color a'), var currentDefault = $('#text-default-color a'),
newDefault = $(this).next().val(); newDefault = $(this).next().val();


if ( $(colorpicker).val() == currentDefault.text() ) if ( $(colorpicker).val() == currentDefault.text() )
Expand Down

0 comments on commit ff4c3b5

Please sign in to comment.