Zeaks WP Theme Options

Using WP Options for a child theme.


Step 1. It's asummed you know how to create a child theme and have done so. Rename zeak-wp-options.php to functions.php (alternativly you can copy the contents from the plugin to your existing functions.php)

Step 2. Replace line 50
wp_enqueue_style( 'wpoptions-default', plugin_dir_url( __FILE__ ) . 'includes/colors/default/default.css', array(), null );
With
wp_enqueue_style( 'wpoptions-default', get_stylesheet_directory_uri() . '/includes/colors/default/default.css', array(), null );

Step 3. Replace line 52
wp_enqueue_style( 'wpoptions-dark', plugin_dir_url( __FILE__ ) . 'includes/colors/dark/dark.css', array(), null );
With
wp_enqueue_style( 'wpoptions-dark', get_stylesheet_directory_uri() . '/includes/colors/dark/dark.css', array(), null );

Step 4. Replace line 54
wp_enqueue_style( 'wpoptions-light', plugin_dir_url( __FILE__ ) . 'includes/colors/light/light.css', array(), null );
With
wp_enqueue_style( 'wpoptions-light', get_stylesheet_directory_uri() . '/includes/colors/light/light.css', array(), null );

Step 5. Replace line 61
wp_enqueue_style( 'wpoptions-default', plugin_dir_url( __FILE__ ) . 'includes/colors/default/default.css', array(), null );
With
wp_enqueue_style( 'wpoptions-default', get_stylesheet_directory_uri() . '/includes/colors/default/default.css', array(), null );

Step 6. Replace line 126
wp_register_script('wp-options.js', plugin_dir_url( __FILE__ ) . 'includes/wp-options.js', array('jquery'));
With
wp_register_script('wp-options.js', get_stylesheet_directory_uri() . '/includes/wp-options.js', array('jquery'));

Step 7. Change line 134
$data['plugin_dir'] = plugin_dir_url( __FILE__ );
With
$data['plugin_dir'] = get_stylesheet_directory_uri() . '/';

Save and close functions.php. Visit Admin > Appearance > WP-Options

Additional Information.


Relevant sections of the plugin are commented. If you want to add or remove fonts from the selector, open zeak-wp-options.php and scroll to line 150. You'll see how the fonts have been added.
Example
    'Arial' => array(
        'name' => 'Arial',
        'import' => '',
        'css' => "font-family: Arial, sans-serif;"
    ),
This adds the font Arial to the selector. Notice the 'import'=>", is empty. If you want to add a Google font, you'll need to add the import call, this information can be found on the Google fonts website. http://www.google.com/webfonts

Say for example you wanted to have the Google font Salsa added to my selector. I'd find it on the Google fonts website, click "Open Salsa in Google Web Fonts" then scroll down and click the "@import" tab.
This is what you should find there
@import url(http://fonts.googleapis.com/css?family=Salsa);
Scroll down a bit more and you will find font-family: 'Salsa', cursive; which we'll also need.

Now all we need to do is add it to the list. Using the above as a template, here is what my finished code would look like. (green text is what was changed)
    'Salsa' => array(
        'name' => 'Salsa',
        'import' => '@import url(http://fonts.googleapis.com/css?family=Salsa);',
        'css' => "font-family: 'Salsa', cursive;"
    ),
Now go back and refresh the Options page, you should see the new Salsa font in the list.

Adding your own classes for fonts.

By default the title font selector controls these classes h1, h2, h3, h4, h5, h6, .widget .heading, #site-title a, #site-title, .entry-title {
By default the content font selector controls div.entry-content

These work well with a Twenty Ten child theme, but not all themes use the same classes and ID's.

To change these, open zeak-wp-options.php (or functions.php if you've renamed it) and around line 100 you'll see echo   "h1, h2, h3, h4, h5, h6, .widget .heading, #site-title a, #site-title, .entry-title { This is for the title fonts, they must be added separated by a comma


A few lines below that on 108 you'll find echo "div.entry-content{ this is for the content font, same things goes for this, use a comma to separate classes and ID's.


If you need further assistance or run into problems, be sure to visit http://zeaks.org and leave a post on the forums.