The new theme options for the dark theme are loaded after the child theme has loaded it’s stylesheet so some color changes will not work, to overcome this we will load a second stylesheet after the parent twenty eleven theme stylesheet and dark stylesheet have loaded.

The Child Theme

Lets use the WordPress Codex example stylesheet and change this for twenty eleven, we copy the screenshot.png image file across to the child themes folder as well, this is the sample style.css updated for the twenty eleven theme.

/*
Theme Name: Twenty Eleven Child
Description: Child theme for the Twenty Eleven theme
Author: Digital raindrops
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

#site-title a {
 color: #009900;
}

If we activate or child theme we can see that the style for the title color has changed to green, this is the same result we had in the twenty ten theme.

The Dark Theme

A really nice feature of the twenty eleven theme is the dark theme option, if we navigate to Admin > Appearance > Themes > Theme Options, we can activate the dark theme by selection of the dark theme option.

If we now preview the theme we can see the dark theme, however the title has lost our changes, this means that we will not be able to change the color styles from style.css the same way we did for the twenty ten theme.

Looking at the page source we can see that the sequence the stylesheets are loaded into the head section is the reason for our title change being lost, with CSS meaning cascading style sheets, the last change is the one that is applied.

The Changes

What we will do is add a second stylesheet and do all our changes in there, so we create a file in our child theme called custom-style.css and we add our title style into this new file

site-title a {
 color: #009900;
}

We need a way to load this stylesheet, so we create a file called functions.php, there is an action hook ‘after_setup_theme’ we can call this after the child and parent themes have loaded, we create a function to run as an argument, notice the last add_action() we have passed in 11 as the last argument, this means that our stylesheet will be loaded later that the other theme stylesheets.

<?php

/** Tell WordPress to run post_theme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'post_theme_setup' );

if ( !function_exists( 'post_theme_setup' ) ):
function post_theme_setup() {

/* Add our new styles after all stylesheets have loaded */
function twentyeleven_enqueue_child_style() {
wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() . '/custom-style.css', array(), null );
do_action( 'twentyeleven_enqueue_child_style', 'child_style' );
}
add_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_child_style', 11 );
}
endif;

Conclusion

We can now change the dark theme styles in the custom-style.css without having to change any files in the twenty eleven parent theme, as we can now see our style is loaded.

Registered members can download the child theme used for this example, we hope this quick tutorial will help other WordPress users.

[private]

[download id="74"]

[/private]

There is an option to select a dark theme stylesheet as well as the standard, another option is to change all the link options site wide, this option injects styles into the head section as the theme loads, however we did not like the website title being a link, and we got thinking how it would be great to have a lot more control over the colors, so we created a nice little child theme and took control.

We have already been looking at extracting the colors from the header and we have merged this into our child theme, it makes it easy to color the theme around the image colors, we have extracted the most popular 20 colors and created variants of darker, lighter and complimentary, splitting the neutrals into their own section that is the black to white colors.

The Download

This child theme will be our first members only download, all downloads will become members only over the next few months, there is no fee for membership and your details will not be shared.

If you are not registered you can register now, or prefer not to register we respect your position, and will email a copy of the theme if you send an email request , login and revisit this page for the Download.

[private]

[download id="73"]

[/private]

The Child Theme

To load and run the child theme you must be running at least version WordPress 3.2 if you do not see the twenty eleven theme in the theme options then you can not use this child theme.

The first part is just to download the theme install it and activate it, it is best to do this first in a local WordPress environment, the first section of this post has a bit about setting up a local WordPress.

Header Image

Twenty Eleven by default will show random headers, if we want to match our theme colors to our header we set a static header, or upload our own, we have uploaded our own for our example.

The Dark Side

Twenty ten has the option to load a dark stylesheet, our image would look better in a dark theme so we activate the dark theme from the twenty eleven theme options.

Theme Colors

That is all standard so what can our child theme do with the colors, if you have seven minutes then you can get a quick overview from YouTube?

Updated Admin Screen

We have updated the admin area, please view this video for the changes, and it will also show the color picker first instance.

Theme Colors Page

When we select the theme colors page we will see a set of colors from the twenty eleven themes stylesheet, these are the main text colors, links, menus and borders.

Color Selector

Twenty Eleven has a nice color selector, it took us a lot of headaches to get this to work with all our colors, but we managed it “Gold Star * “ , if we select the color swatch or press the select a color button the color wheel will appear so we can select or tweak the color, and to reset the color to the themes default we do the same for the “Reset to Default” options.

Header Color Swatches

At the bottom of our page we can see the colors generated by our header image, as we have already said the first twenty colors, plus the greys, these are so we can find the colors we want, copy the hex codes (#ff00ff) to notepad so we can use them in our theme, we are only showing four from the twenty in this image.

Global Links

A new feature of twenty eleven is the global link color, we can select a color and set this from the theme options tab, we have used one of the colors from our image.

Header Colors

Here we can change the text and border colors for our theme, by default the title has the link color as a hover over, we may want to set this to the same as our main color, and we can change the header tag line which is the Site Description.

Menu Colors

The menu has a built in background gradient and a solid color for older browsers, here we have changed the menu gradient start, and we would change the Menu Background for the older browsers.

Sub Menu and Hover Colors

Here we could change the other color attributes for the dropdown and hover colors.

Title Colors

Now we can change the title colors and hover colors for our theme

Stylesheet

There are two stylesheet boxes, the first is so we can add any other changes without having to edit files, the second is the styles that are generated by the theme, these are for any developers that could be copy and use these to create a new child theme.

Main Background

The main background can be changed with the standard WordPress twenty eleven background options.

The Results

Here we can see that our header now fits into our theme, and the theme colors compliment our header graphic!

We hope that you like our child theme, WordPress are bringing out a new theme each year, that should keep us busy?

We spent quite a while looking around the internet for some php code to find the most common colors from an image, there was code for two different libraries the Imagick and GD2, as we test with XAMPP we soon found that by default Imagick was not installed.

After a few hours we managed to find a post with decent instructions for activating Imagick on XAMPP.

We found some code and this worked quite well after some adjustments, however using this local was fine but this server and many others do not have Imagick installed.

Off we went looking for some php code so we can use the GD2 library, we found a php class file from 2002 by Andy Chase, it is hard to believe the only samples we could find were some nine years old.

In testing we found that a clone function was causing a problem so we adjusted the code and have it working, the lists of top twenty most used colors was sometimes heavy with the neutrals, so we split these, we wanted something in GD2 similar to this website which used the Imagick library.

With the help of the class written by Andy Chase we were able to get close, with the addition of an extra column for the seperated Neutrals.

We think the code needs a revival as it could help developers choose the colors for the website, we know there are web pages that do this, but it will be nice to have this as a plugin or theme feature.

We are still testing the WordPress 3.2 RC and the twenty eleven theme, we have created a website in a new folder so you can have a look at the twenty eleven theme, which has a dark and light option.

The new features are great, it has a full size editor, more post types, a featured posts page template, and a few more nice things, you can choose a dark theme, and the layout left., right or no sidebar.

We will release the colors code when WordPress 3.2 is in full release as they are still working on the theme and things may change.

That is great for a news or magazine website, but what if we wanted to display a series of our posts in ascending order, for a tutorail with the oldest part one first?

The easy ‘no code way’ if we do not have many to deal with, is just to alter the dates and times on the posts to reverse the order.

A simples code way is just to add a call before the loop in the category.php file, this will work on all categories though, we could alse code to find the category and add a string of ‘if  elseif’ statements.

<?php query_posts($query_string . "&order=ASC"); ?>

Our Option

We want to empower the website administrators to be able to select which categories they want to sort in a ascending order, we also want to do this on the category edit page by a simple dropdown selector.

If we look at what we have now there is no way to change the sort order on the ‘Add New Category’ page, so we will add the option to the edit Category page.

If we look at the posts in the aciform category we can see the latest post was Lorum Ipsum, this could be lesson 4 in a series of tutorials, we want to reverse this sort order.

We have as always created a twenty ten child theme, but this can be added in minutes to an artisteer or many other themes, all we need to do is add a folder and two bits of code.

Download the twenty ten child theme here: [download id="72"]

Activate the child theme on a local install, navigate to Admin > Posts > Categories

From the list choose any category and edit, see the new option ‘Sort Order’, we used code from a this post we found online and changed the code for this post.

We prefer to work with a single array option, as this is more inline with how WordPress ask us to develop now, rather than one option per category, so we have reworked the code.

If we change the sort order to ascending we can now see the order has been reversed, pretty effective.

Adding the functions to a Theme

In the download there is a folder called /includes/ and inside the folder is a file called category-functions.php drop the sub folder into the theme’s folder, as in the download.

Two bits of code to add first open functions.php and add in this code block, the first line is a bit of shorthand code, this checks to see it it is a child or parent theme and returns the file name and path.

The second line just looks to see if the file exists, if it is then include it, the last line just returns the stored options into a global variable if they exists.

$filename=( is_child_theme() ) ? STYLESHEETPATH .'/includes/category-functions.php' : TEMPLATEPATH .'/includes/category-functions.php';
if( file_exists($filename) ) include_once( $filename );

$cat_meta = get_option("theme_cat_meta");

Category Page

Next in the themes folder we should have a file category.php open this file and find the get_template_part( ‘loop’,'category’ ) just before this line we want to add another block of code.

This bit of code looks to see if the category meta is set and if it is ‘ASC’, if it is it just reverses the sort order.

<?php
 /* Start Reverse Posts */
 global $cat, $cat_meta;
 if (isset( $cat_meta[$cat]['order'] ) &&  $cat_meta[$cat]['order'] == 'ASC' ) query_posts($query_string . "&order=ASC")
 /* End Reverse Posts */
 ?>

Other Themes

If you have Artisteer or you do not have the template part, or you can not find category.php just save index.php as category.php, open the new file.

Add the code before the if( have_posts() )

<?php
 /* Start Reverse Posts */
 global $cat, $cat_meta;
 if (isset( $cat_meta[$cat]['order'] ) &&  $cat_meta[$cat]['order'] == 'ASC' ) query_posts($query_string . "&order=ASC")
 /* End Reverse Posts */
 ?>

<?php
 if(have_posts()) {

Warning: careful with the php tags, if you are already inside an unclosed <?php tag then you do not need the tags from the new code above.

Conclusion

Inside the file category-functions.php there are two functions, one to add the meta box to the Edit Category page, the other to set the $cat_meta array and store in in a WordPress option, we are not looking at that code as it is covered in the link above.

We now can set the sort order for any category on our website, why it is not already built in, who knows?

category-functions.php

For reference here is the contents of the file:

<?php

add_action ( 'edit_category_form_fields', 'extra_category_fields' );
function extra_category_fields( $tag ) {
 global $theme_css, $cat_meta;
 $t_id = $tag->term_id;
 $curr_meta = $cat_meta[$t_id];
 $direction=( $curr_meta && isset( $curr_meta['order'] ) && $curr_meta['order'] ) ? $curr_meta['order'] : "DESC";
?>

<?php
$sort_order = array(
 'DESC' => array(
 'value' => 'DESC',
 'label' => 'Descending'
 ),
 'ASC' => array(
 'value' => 'ASC',
 'label' => 'Ascending'
 ),
);
?>

<tr>
 <th scope="row" valign="top"><label for="cat_meta[order]"><?php _e('Sort Order'); ?></label></th>
 <td>
 <select id="cat_meta[order]" name="cat_meta[order]">
   <?php
   foreach ( $sort_order as $option ) :
     $label = $option['label'];
     $selected = '';
     if ( $direction && $direction ==  $option['value'] ) $selected = 'selected="selected"';
     echo '<option style="padding-right: 10px;" value="' . esc_attr( $option['value'] ) . '" ' . $selected . '>' . $label . '</option>';
   endforeach;
   ?>
 </select>
 </td>
 </tr>
<?php
}

add_action ( 'edited_category', 'save_extra_category_fields');
function save_extra_category_fields( $term_id ) {
 global $cat_meta;
 if ( isset( $_POST['cat_meta'] ) ) {
   $t_id = $term_id;
   $cat_keys = array_keys($_POST['cat_meta']);
   $curr_meta = array();
   foreach ($cat_keys as $key){
     if (isset($_POST['cat_meta'][$key])){
       $curr_meta[$key] = $_POST['cat_meta'][$key];
     }
   }
   $cat_meta[$t_id] = $curr_meta;
   update_option( "theme_cat_meta", $cat_meta );
 }
}
?>

We are using a Twenty Ten child theme to do this, so what do we need, we are using two horizontal repeat .png images 1087 wide * 1120 high, one for day and one for the night, if we whanted a different set of images, for any of the other methods we would change the quantities, names and code values to suit.

The Images

We have created two sample images just using Serif DrawPlus X4, and editing one of the sample templates, these images are quite simple, but will be great for testing, we will find these images in the child theme download as well.

Download the theme: [download id="71"]

style.css

In our stylesheet we need to add a class for each image, we have .day and .night, if we wanted seasonal images then we would have, .winter, .spring, .summer and .fall.

In each class we add the name of the image to use from our theme or child themes /images/ folder, see we are using day.png and night.png.

/* Our daytime Image top and center repeat horizontal */
.day
{
   background-image: url('images/day.png');
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position: top center;
}

/* Our Nightime Image top and center repeat horizontal */
.night
{
   background-image: url('images/night.png');
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position: top center;
}

If we had only added these styles our header and content area would hide our nice images, so we need to make some parts of our themes background transparent.

/* Menu, Main Content area and Sidebars backgrounds */
#wrapper,
#access,
#primary,
#secondary{
   background: transparent;
}

/* Lets change the stick post format */
.home .sticky{
   background: transparent;
   border: solid 1px #555;
}

/* The menu Text Color */
#access a {
   color: #333;
}

/* Hide the header image */
#branding img {
   display: none;
}

/* And this is that black bar at the foot of the theme */
#colophon {
   border: none;
}

functions.php

What we will do now is add a new function in the functions.php file, this will tell WordPress to load a different body background image based on the time of day, this will use the local time.

add_filter('body_class','day_body_class');
function day_body_class($classes = '') {
  /* pages Day and Night are for testing */
  if( is_page('Day') ) {
    $classes[] = 'day';
    return $classes;
  }
  elseif( is_page('Night')) {
    $classes[] = 'night';
    return $classes;
  }else{
    /* Get the Hour and 18hrs (6:00pm) to 07hrs (7:00am) is Night */
    $h = date('H');
    if( $h > 18  || $h < 07 ) {
      $classes[] = 'night';
      return $classes;
    }
    $classes[] = 'day';
    return $classes;
  }
}

Our Theme

We have added a little extra code so we can test our theme, we can create a page called ‘Day’ and One Called ‘Night’ test our theme and delete the pages.

This is what we will see from 7:00am see the code $h < 07, that could be changed to whatever we wanted, our example will start from 07:00 or 7:00am.

The night background is triggered by $h > 18 which is greater than 18:00hrs or 6:00pm, so this will not change until 19:00 or 7:00pm

Seasonal Code

If we wanted seasonal images instead we would add four images, and then adjust the above code, in the style.css stylesheet we would need to add four classes.

.winter
{
  background-image: url('images/winter.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.spring
{
  background-image: url('images/spring.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.summer
{
  background-image: url('images/summer.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}
.fall
{
  background-image: url('images/fall.png');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top center;
}

And in the functions.php we would need to select which hemisphere we want our seasons to be based on, this would be looking at the most website traffic, or target market countries.

add_filter('body_class','seasonal_body_class');
function seasonal_body_class($classes = '') {
   // Change to southern if appropriate
   $hemisphere = 'northern';
   $m = date('m');
   /*** southern hemisphere seasons ***/
   $southern=array(
     'summer' => array(12, 1, 2),
     'fall' => array(3, 4, 5),
     'winter' => array(6, 7, 8),
     'spring' => array(9, 10, 11)
   );

   /*** northern hemisphere seasons ***/
   $northern=array(
     'summer' => array(6, 7, 8),
     'fall' => array(9, 10, 11),
     'winter' => array(12, 1, 2),
     'spring' => array(3, 4, 5)
   );

   /*** To random test remove the remarks for a random month ***/
   // $m = mt_rand( 1, 12 );

   /*** loop over the hemisphere ***/
   foreach($$hemisphere as $key=>$val) {
     if(in_array($m, $val)) {
       $classes[] = $key;
       return $classes;
     }
   }
   //No month selected from array
   $classes[] = '';
   return $classes;
}

See the line // $m = mt_rand( 1, 12 ); for testing we just remove the remarks // then just refresh the browser to see random different seasons, we could use this code for a random background effect, pretty cool!

We hope this post and the download will help you and add to your develpment toolkit.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

I had a couple of chats about the Internet my website, the traffic numbers, and how could I make any money from it, but it came down to suggestions like writing an eBook, charging for downloads or pay per view posts where you start with a primer, and the visitor pays to read more.

This was not what I had in mind when I created Digital Raindrops, the original concept was for little digital blocks (droplets) of helpful code, a programming resource website that would be easy to manage and benefit the visitors.

The second was a small group of developers, these had a range of beginner to advanced, there were no real WordPress users, some small chat about different CMS systems and a few boasts of how much one could earn from website development, an exchange of business cards, many of these were Moo cards and they sit on a shelf above my computer, these meeting have left me feeling indifferent to meet up groups, they are in the evening and require leaving work sharp to get into town.

I am still a member of the Meet up website and received an email today about a new group just for WordPress and it is in London, United Kingdom, I joined the group and will be attending meetings, the groups owner rather summed it up quite nicely.

As a freelancer, I spend a lot of time isolated in my little development world. Although the internet is a fantastic tool for connecting with others, there’s no doubting the value of face to face contact.

I am hoping that others will join the group and share ideas, talk about projects, and it might be a good place for people interested in WordPress to come along, it would be nice to meet any Local visitors to this website, get some face to face feedback, network a little and have a beer.

Cufón fonts are often the choice, but we are going to look at Google Fonts which has a growing library of fonts, they render in the browser nice and quick, and have an API we can talk to, so no uploading or including the fonts in our theme folders.

Artisteer

Artisteer is a theme generator that will give us a nice acceptable WordPress theme with a small amount of time and effort.

The price to market is reasonable, if we require to produce more than one theme, or just cannot find a theme to suit our requirements and want to make our own.

For our example we will use ‘Artisteer Version 3 RC’, and one of the sample themes “My Diary”, all we have done is saved it as a WordPress theme.

It does not matter if you do not have Artisteer, you can download the theme with the code below from this page: [download id="70"]

If we open the theme we can see that the font does not really suit the theme name, a diary theme may look better with a hand writing style theme heading font.

We could also apply the Google font to any text in our theme.

Google Fonts

Lets visit the Google Fonts website and look for a nice handwriting font, the previews are nice and large and we have chosen a font called “Over the Rainbow”

When we click on the title hyperlink we can see our chosen fonts home page, this will suit our diary theme.

Next we click on the Launch in Font Viewer we are interested in two bits of information the Font Family ‘Over the Rainbow’ (Case Sensitive) and the font style family=Over+the+Rainbow:regular.

This is the part after the colon :regular, we make a note of these as they will be used as defaults for our themes Options Page.

defaults.php

Ok we have our font name and style so we can start to add a little code, in our themes /library/ folder we open the file defaults.php.

Adding in the defaults for our Google font, we we can see we have the font name, and the font size, we tried different sizes over on Google fonts and decided to use 38, this can be changed as a default later.

We add our new defaults after the line:

$theme_default_options = array(

/* googleFont Settings */
 'theme_title_googleFont' => 0,
 'theme_title_fontName' => 'Over the Rainbow',
 'theme_title_FontStyle' => 'regular',
 'theme_title_fontBold' => 1,
 'theme_title_fontItalic' => 0,
 'theme_title_fontSize' => 38,
 'theme_title_fontSpacing' => 0,
 'theme_page_titles' => 0,
 'theme_widget_titles' => 0,
 /* googleFont Settings */

options.php

We need a theme options array for the Google ‘font style’, we add this in the /library/options.php this we will add before the line:

global $theme_options;

/* Google Font Style Options */
$google_font_style_options = array(
 'regular' => 'font+name:regular',
 'bold' => 'font+name:bold'
);

After the header section of options we add our header font section, this we add before the lines.

array(
‘name’ => __(‘Navigation Menu’, THEME_NS),

/* googleFont Settings */
 array(
 'name' => __('Heading Google Font', THEME_NS),
 'type' => 'heading'
 ),

array(
 'id' => 'theme_title_googleFont',
 'name' => __('Use Google Font', THEME_NS),
 'desc' => __('Select to use Alternate Google Font', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_title_fontName',
 'name' => __('Google Font Name', THEME_NS),
 'desc' => __('Google Font Name from <a href="<a href="http://www.google.com/webfonts">Google" _mce_href="http://www.google.com/webfonts">Google">http://www.google.com/webfonts">Google</a> Web Fonts<a>', THEME_NS),
 'type' => 'text'
 ),

array(
 'id' => 'theme_title_FontStyle',
 'name' => __('Font Type', THEME_NS),
 'type' => 'select',
 'options' => $google_font_style_options,
 'desc' => __('the text after the colon : from the font preview EG: over+the+rainbow:<b>regular</b>', THEME_NS),
 ),

 array(
 'id' => 'theme_title_fontSize',
 'name' => __('Font Size', THEME_NS),
 'desc' => __('Numeric Value for the Font Size', THEME_NS),
 'type' => 'numeric'
 ),

array(
 'id' => 'theme_title_fontSpacing',
 'name' => __('Font Spacing', THEME_NS),
 'desc' => __('Numeric Value for the Font Spacing % of em EG: 20 = 0.20em', THEME_NS),
 'type' => 'numeric'
 ),

array(
 'id' => 'theme_title_fontBold',
 'name' => __('Google Font Bold', THEME_NS),
 'desc' => __('Font Bold', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_title_fontItalic',
 'name' => __('Google Font Italic', THEME_NS),
 'desc' => __('Font Italic', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_page_titles',
 'name' => __('Post and Page Titles', THEME_NS),
 'desc' => __('Apply to Post and Page Titles', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_widget_titles',
 'name' => __('Widget Titles', THEME_NS),
 'desc' => __('Apply Font to Widget Titles', THEME_NS),
 'type' => 'checkbox'
 ),
 /* googleFont Settings */

header-font.php

Now  we create a new file called header-font.php in our themes folder, this is a WordPress template part that we will call from the header.php file, by using a template part the code is easy to transfer.

We take the options set from the theme options page add them to an array and use this to formulate the dynamic style.

<?php if( !theme_get_option('theme_title_googleFont') ) return; ?>

<?php
$font=array();
//The name of the Google Font
$font['name'] = theme_get_option('theme_title_fontName');
$font['style'] = theme_get_option('theme_title_fontStyle');
//Parameter to pass to Google Fonts
$font['parameter'] = str_replace(' ','+',$font['name']) .':' .$font['style'];
//If the fold is bold set the weight to 700 else 400
$font['bold'] = ( theme_get_option('theme_title_fontBold') ? 700 : 400 );
//If the fold is italic set the font style to italic else normal
$font['italic'] = (theme_get_option('theme_title_fontItalic' ) ? 'italic' : 'normal' );
//Set the font size in pixels
$font['size'] = theme_get_option('theme_title_fontSize');
//Set the font spacing as a % of em
$font['spacing'] = theme_get_option('theme_title_fontSpacing') / 100;
//Set the page and post titles to the Google font
$font['page'] = theme_get_option('theme_page_titles' );
$font['widget'] = theme_get_option('theme_widget_titles' );
?>

<link  href="<a href="http://fonts.googleapis.com/css?family=<?php">http://fonts.googleapis.com/css?family=<?php</a> echo $font['parameter'] ?>" rel="stylesheet" type="text/css" >
<style>
 h1.art-logo-name a{
 font-family: '<?php echo $font['name']; ?>', serif;
 font-size: <?php echo $font['size']; ?>px !important;
 font-style: <?php echo $font['italic']; ?>;
 font-weight: <?php echo $font['bold']; ?>;
 letter-spacing: <?php echo $font['spacing']; ?>em;
 }
 <?php if ( $font['page'] ) : ?>
 h2.art-postheader a{
 font-family: '<?php echo $font['name']; ?>', serif;
 letter-spacing: <?php echo $font['spacing']; ?>em;

 }
 <?php endif; ?>

<?php if ( $font['page'] ) : ?>
 .art-blockheader h3.t {
 font-family: '<?php echo $font['name']; ?>', serif;
 letter-spacing: <?php echo $font['spacing']; ?>em;
 }
 <?php endif; ?>
</style>

header.php

In out themes header.php we add a line of code to call our new template part, and this will be before the lines for the version check.

<?php if(WP_VERSION < 3.0): ?>

<?php //Load our Google Font ?>
<?php get_template_part('header','font'); ?>

Theme Options

Thats the code done so lets look at what we have, if we go to Admin > Appearance > Theme Options.

We can see our defaults, we have the use Google Font set as false, if we prefer the font to be deafult we would change the default to 1 in the defaults.php

Our Google Font

Well there is our font, not bad but it is a little tight and could do with a little line spacing.

Line Spacing

When we add line spacing we do not put in the fraction but a whole number which will be divided by 100, we have done this because the Artisteer ‘numeric’ option cannot deal with fractions.

That looks a lot better more like a heading when we add in the spacing, this will vary from font to font.

Widget Titles Page and Post Heading

Last test is to turn on the page and widget headings to use our nice Google Font.

Wow! how easy was that to make our Artisteer theme more interesting.

A Different Font

We had the Google font Style and might woner why it is there, lets look at the Google font Cabin Sketch this requires that we pass Google :bold in the fonts url.

We just enter ‘Cabin Sketch’ in the name and change the Font Type to bold, this is not the font weight but a Google option.

There we go!

View Page Source

Lets have a look at the page source and see what our code does:

<link  href="<a href="http://fonts.googleapis.com/css?family=Cabin+Sketch:bold">http://fonts.googleapis.com/css?family=Cabin+Sketch:bold</a>" rel="stylesheet" type="text/css" >
<style>
 h1.art-logo-name a{
 font-family: 'Cabin Sketch', serif;
 font-size: 38px !important;
 font-style: normal;
 font-weight: 700;
 letter-spacing: 0.2em;
 }
 h2.art-postheader a{
 font-family: 'Cabin Sketch', serif;
 letter-spacing: 0.2em;

 }

 .art-blockheader h3.t {
 font-family: 'Cabin Sketch', serif;
 letter-spacing: 0.2em;
 }
</style>

Want to see a live example we are using this on a new non-artisteer theme, where we have to hard code the options, using the Artisteer Theme Options is a much more empowering solution.

Do not for get to like this page and spread the word!

When changing styles we may not want to give the administrator to many options as it is only the style that can really be changed and not the layout, there is no point in loading a stylesheet for a three column layout if the theme has only one column.

We have taken our tabbed options tutorial and added three dropdowns where we can select a stylesheet, home, pages and posts, in the download there are three stylesheets included and a sample child theme for testing.

Download the twenty ten child theme:  [download id="69"]

The Stylesheets

 We have created a folder in the theme called /styles/ and added in our three alternate stylesheets, these can only change fonts, colors and graphics not the layout of any pages.

 We have also give our stylesheets friendly lowercase names like crimson.css, purple.css, blue.css, colbolt.css, this will make it easy for the theme administrator.

This system could also be adapted to give each user a choice without changing the whole theme.

theme-options.php

As we are using a child theme we have used STYLESHEETPATH this would be changed to TEMPLATEPATH if we were not using a Child Theme.

In the theme-options.php. we added a function to get the stylesheet names from the folder, this we load into a variable called $sa_css.

// Get the Stylesheets
function sa_list_styles(){
 $path = STYLESHEETPATH .'/styles/';
    $list = array();
    $dir_handle = @opendir($path) or die("Unable to open $path");
    while($file = readdir($dir_handle)){
        if($file == "." || $file == ".."){continue;}
        $filename = explode(".",$file);
        $cnt = count($filename); $cnt--; $ext = $filename[$cnt];
  $name = $filename[0];
        if(strtolower($ext) == ('css') ) {
   $list[$name] = array( 'value' => $name, 'label' => $name );
  }
    }
    return $list;
}
$sa_css = sa_list_styles();
array_unshift($sa_css, "");

We then added in the stylesheet options in the general array section for switching stylesheets.

// Default options values
$sa_general = array(
 'default_css' => '',
 'post_css' => '',
 'page_css' => '',
 'footer_copyright' => '© ' . date('Y') . ' ' . get_bloginfo('name'),
 'intro_text' => '',
 'featured_cat' => '',
);

header.php

If we only wanted the one option we would have coded to get the setting and load the stylesheet like this, in the download we have used an if else statement for the different file (page) types.

<?php
 $sa_settings = get_option( 'sa_general' );
 if( isset( $sa_settings['default_css']) && $sa_settings['default_css'] ) {
  wp_register_style( 'customstyle', get_stylesheet_directory_uri() .'/styles/'.$sa_settings['default_css'] .'.css', '', '0.1' );
  wp_enqueue_style( 'customstyle' );
 }
 ?>

The Theme Options

There we have our three styles, we hope that you have found the information here of some use, if you are a facebook user please like our pages to help spread the fan base for Digital Raindrops.

We are going to use CSS3 boxes and shadows while still having an alternate for non compatible browsers, we have tested this with a twenty ten child theme.

You can download the child theme here: [download id="67"]

Browsers

If we look at our website visitor browsers with Google Analytics we can see that a lot of older versions are still in use, we have to think of all visitors and make sure the visitor experience is good for all, many new browsers will not have the same legacy browsers as Internet Explorer and Fire Fox.

We test with  FireFox, Google Chrome and Internet Explorer, which covers about 86% of the visitors to our website.

Lets look at what percentage of older browsers are still in use, home users will likely upgrade to the latest where business users will have to look at things like the company intranet before choosing to upgrade a browser.

Internet Explorer

FireFox

Twenty Ten

We are looking at just three areas of the twenty ten theme, the menu items, the main content wrapper and the images, we are adding shadows and round corners to the menu and just shadows to the wrapper and images.

This is how our changes look in a compatible browser using CSS3 borders and shadows.

Internet Explorer 9 has a compatibility feature so we can see how it will look in an older browsers

As you can see we have re-styled the menu and menu sub items.

Borders and Boxes

We are not going to get into the detail about these, we think it is better to be hands on and test different setups in a test environment, if you want more information then Google is a good friend and there are also CSS3 style generators that will produce the compatible variations.

This is how one of the box shadows looks in our download stylesheet file, have a look for a css3 generator and play is the best way to discover more about box shadows, moz and webkit are different browser support.

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

And here is a rounded corners style block used for our menu items, the standard sequence of left (8px), bottom (0), top (8px) and right (0)

border-radius: 8px 0 8px 0;
-moz-border-radius:8px 0 8px 0;
-webkit-border-radius:8px 0 8px 0;

style.css

Here is the stylesheet from the download.

/*
Theme Name: Twenty Ten Shadow Boxing
Theme URI: http://digitalraindrops.net/
Description: Twenty Ten Child, adding to the power of WordPress.
Author: Digital Raindrops
Author URI: http://digitalraindrops.net/
Template: twentyten
Version: 1.2
<div>License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
*/

/* =Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

@import url('../twentyten/style.css');

#wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.gallery img {
box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
}

#access {
padding-top: 5px;
background: #fff;
}

#access .menu-header, div.menu {
margin-left: 0;
}

#access .menu-header li,
div.menu li {
color: #ccc;
border: solid 1px #f1f1f1;
margin-right: 5px;
}

#access a {
color: #444;
border-radius:8px 0px 8px 0px;
-moz-border-radius:8px 0px 8px 0px;
-webkit-border-radius:8px 0px 8px 0px;
box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
}

#access li:hover > a,
#access ul ul :hover > a {
background: #888;
color: #fff;
}

#access ul ul a {
color: #fff;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
background: #666;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
background: #666;
}

We will use two new images the height of our menu and 60px wide, this will be different on different themes, we may want an home image a couple of chevrons [>>] or a clickable small logo image, but when we design our menu we must consider this.

Home Images

For our example we are going to use our Investica theme there is a download in the last part of the series you could follow along if you do not have a theme already.

In any WordPress exported Artisteer theme we will find the style.css, before we can create our menu images we will look to see the height of the menu items, we can see that ours is 43px;

/* begin MenuItem */
.art-hmenu a
{
position: relative;
display: block;
overflow: hidden;
height: 43px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}

 

Opening the images folder we will find a png image called menuitem.png, looking at this we can see the three states of our menu items, the top bar is normal, the second is hover and the last is active, we are creating just two states, normal and active.

 

How we create these images will depend on our theme, we created two images for our theme, menu-home.png and home-active.png and we made the width at 60px.

style.css

For our images to appear in the menu we will need a new class for these so we can style them, we open style.css and add at the end of the file, notice the background url and the other attributes.

/* begin Home MenuItem */
.menu-home {
position: relative;
display: block;
overflow: hidden;
height: 43px;
width: 60px;
cursor: pointer;
background: url('images/home.png');
}
.home-active {
position: relative;
display: block;
overflow: hidden;
height: 43px;
width: 60px;
cursor: pointer;
background: url('images/home-active.png');
}

navigation.php

Artisteer have made it easy for us to apply these classes we only need to adjust two lines of code in the file /library/navigation.php

The position of these lines may be different in other Artisteer themes so we will show the line and the change, first we do not want any text on our home menu images.

We find the line that populates the home caption or title and sets the menu class.

$title = theme_get_option('theme_menu_homeCaption');
$active = is_home();
$items[] = new theme_MenuItem(array(
'id' => 'home',
'active' => $active,
'attr' => array('class' => ($active ? 'active' : ' '), 'href' => get_home_url(), 'title' => $title),
'title' => $title,
));

 

We want to remove the last part of this line ‘title’ and return an empty string, and also the menu class in the array ‘attr’, where we change the class from ‘ ‘ to menu-home and the active class from ‘active’ to  ‘home-active’

$title = theme_get_option('theme_menu_homeCaption');
$active = is_home();
$items[] = new theme_MenuItem(array(
'id' => 'home',
'active' => $active,
'attr' => array('class' => ($active ? 'home-active' : 'menu-home'), 'href' => get_home_url(), 'title' => $title),
'title' => '',
));

 

That is it all we need to do is test our changes, where we can see our active home image.

NOTE: this only works if we are not using a custom menu as the Artisteer home menu item is not included in the custom menu.

 

 

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.