While I did create a few custom functions and other overrides, most of the work was accomplished with CSS. I also used the Tekton Pro font via typekit. The result is a fun and colorful Cartoon Elephant Book site.

The creation of the child theme points out some guidelines to consider when selecting a theme that you will later customize. First, pick a theme that has the basic functionality you need. In this case it was a responsive design with a single page approach. Next, make sure that you can create the child theme you want from the original parent theme. Since my project was fairly simple, my considerations included the ability to create the right style.

Details about the variations are stored in the postmeta table. Each item in the postmeta table that relates to a variation will have a post_id that points back to that variation. This includes things like attribute name, price, sale price, weight, etc.

The list of attributes that you entered are stored as serialized data for the meta_key “_product_attributes”. This item will have a post_id that points back to the product. In our example, it would contain 123. Default attributes are also stored as serialized data. The meta_key for default attributes is “_default_attributes” and it too contains the post_id for the product.

//register the scripts for shortcodes
function register_script_for_shortcodes() {
wp_register_script('datatables', plugins_url('/js/jquery.dataTables.min.js', __FILE__),  array( 'jquery' ) );
wp_register_script('datatablesreload', plugins_url('/js/jquery.datatables.reload.js', __FILE__),  array( 'jquery' ) );
wp_register_script('rotarydatatables', plugins_url('/js/rotary.datatables.js', __FILE__),  array( 'jquery' ) );
wp_register_style(
'rotary-datatables',plugins_url('/css/rotarydatatables.css', __FILE__), false, 0.1);
}
//the scripts included here are need for the shortcodes
function enqueue_scripts_for_shortcodes() {
wp_enqueue_style('rotary-datatables');
wp_enqueue_script(array('datatables','datatablesreload', 'rotarydatatables', 'jquery-ui-dialog'));
wp_localize_script( 'rotarydatatables', 'rotarydatatables', array('ajaxURL' => array('ajaxURL' => admin_url('admin-ajax.php'), 'tableNonce' => wp_create_nonce( 'rotary-table-nonce' )) );

Notice how the code calls wp_localize_script to build variables that we can use with datatables so it knows where to make the AJAX call for its data source. The code snippet for this is:

rotaryTable = $('#rotarymembers').dataTable( {
				'bProcessing': true,
				'bServerSide': false,
				'sAjaxSource': rotarydatatables.ajaxURL+'?action=rotarymembers'

And remember, you will need to tell WordPress about your AJAX calls:

add_action( 'wp_ajax_nopriv_rotarymembers', array($this, 'rotary_get_members' ));
add_action( 'wp_ajax_rotarymembers', array($this, 'rotary_get_members' ));

So, what do we do in the rotary_get_members function?
First, we need to provide the data in a format that is expected by datatables. This includes the columns we will have and an array of data fields. The aaData array will have rows of data that appear in the table.

$output = array(
        	'sColumns' => 'Name, Classification, Cell/Home Phone, Business Phone, Email',
			'sEcho' => intval($_GET['sEcho']),
			'iTotalRecords' => count($rotaryclubmembers->MEMBER),
			'iTotalDisplayRecords' =>10,
			'aaData' => array()
		);

Each row of data is placed in the $output variable as follows:

$output['aaData'][] = $row;

And we call json_encode on the $output variable to feed it back to datatables.

The resulting UI looks like this:

Project Description: The Rotary WordPress theme, designed by Carolina Torres, is a custom WordPress theme aimed at Rotary Clubs. The theme includes a home page sidebar, custom widgets and makes ample use of the WordPress theme customizer which allows clubs to add their own club data. Future plans include a Rotary membership plugin.

Demo Website: http://www.rotarytheme.koolkattest.com/

The theme Rotary theme project was started by the Bellevue Breakfast Rotary Club (BBRC). For more information on using this theme, please contact the BBRC.

In addition, I replaced the outdated jQuery innerfade plugin with Flexslider. This allow my slideshow to be sized for smaller screens.

I am now testing out the site using Browser Stack.

Image sprites have been used in CSS for quite some time, lending efficiency to both our stylesheets and downloads. With Compass, you can take the labor out of creating images and let Compass do the work for you. Compass can take .png files and create a sprite file. You then use a mixin to reference which image you want to use.

In part 1, we discussed how to use the Compass generated stylsheets in WordPress. Images should also reside in your project directory. So, if your project is directory is “rotary-sass”, this is where your images directory should be located. Note that this is different from the typical WordPress implementation where the image directory appears immediately under the theme or stylesheet directory.

Once your image directory is in the correct location for Compass, create sub-directory for your .png images that will be “sprited” under the images directory. I called my directory, backgrounds. Here is what this directory structure looks like in my Compass project:

The next step is to copy all of your .png images to be sprited int to the backgrounds directory. In your SASS file, include the following:
@import "backgrounds/*.png";
Note: I put this import statement in my _bass.scss file.

Then, wherever you need one the background images, use the following mixin…
@include backgrounds-sprite("filename");
where backgrounds is your directory name and filename is the actual name of your original .png file without the extension. Compass will create a new sprite file in your images directory. It will have a name similar to:
backgrounds-sfc45308739.png
where backgrounds will be replaced by whatever name you used for your sprite directory. This file is referenced in your generated CSS file so be sure to upload it to your server along with the CSS file.

First, I always want to use the Compass CSS Authoring Framework. This framework comes with its own mixins, making CSS3 easy – you never have to worry about vendor prefixes! And, it supports all of the standard SASS rules, variables and selector inheritance. To make life even easier, there is an app that even lets you avoid the command line.

Using the Compass App

I am going to step through the process of using the Compass app on a mac. After successfully installing compass.app, you will get a new icon in the top toolbar area.

1. Click the icon and select “Create compass project” and then “compass” and finally “project”
2. You will then see a finder window where you can select the location for your sass and css files.  I usually place my compass created project in the directory for my theme.
3. Let’s say you called your directory “rotary-sass”,  which for me resides in the directory “wp-content/themes/rotary”, you will end up with a file structure like this in your theme directory:



4. Now we can set some options. Click the compass icon again (which should now have turned orange, indicating an active project) and then click “Change Options”. My personal preference during development is for expanded CSS output, no line comments but debug checked. The reason for checking debug is that it will enable us to use the Firefox extension, FireSass. FireSass allows Firebug to display the original SASS filename and line numbers. Otherwise, you would just see the generated CSS line numbers making troubleshooting much more difficult. You can change the options once your project is finished so you can deliver compress CSS without the debug info.
5. Now that your project is set, all your changes to the SASS files will automatically change your CSS.
6. Next we need to tell WordPress where our new stylesheets reside.  The necessary code will both display the correct CSS rule for your project and return the correct directory and/or file for WordPress API calls such as get_stylesheet_uri().  You can add the following code to your functions.php file or a file included in your functions.php:
   /**
   * overwrite default theme stylesheet uri
   * filter stylesheet_uri
   * @see get_stylesheet_uri()
   */
   add_filter('stylesheet_uri','rotary_stylesheet_uri',10,2);
   function rotary_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){

   return $stylesheet_dir_uri.'/rotary-sass/stylesheets/style.css';
}

7. Finally, make sure that you have both FireBug and FireSass installed as add-in in your Firefox browser. If all is working correctly, your CSS debug info should show the location of your code in the SASS files. Notice that any included files from Compass also show up.

Read Getting Sassy with WordPress Part 2 – Sprites