Websites

Rotaract Theme Released

Posted in: Websites, WordPress by koolkat on June 10, 2013 | No Comments

A Rotaract version of the Rotary WordPress theme has been released. This theme sports the Rotaract Colors and logo. See the Eastside Rotaract site for an example implementation.

To learn more visit http://bbrcwebsite.com/.

Watch your WordPress Permalinks

Posted in: Websites, WordPress by koolkat on June 2, 2013 | No Comments

A client recently informed me that some of the blog posts were getting 404 errors. I set about to investigate the issue and discovered that the client was indeed correct.
The permalink settings were set to post name, so I just tried re-saving the settings, which often fixes these kind of problems. This time, my re-save did not work. I noticed the posts appeared on the Archive page, which made it even more mysterious. Then, I started looking trough all page and post types on the site and discovered 2 pages in Trash with the same slug as the problematic posts. Permanently deleting the posts solved the problem and the posts display normally.

SummaUSA launches

Posted in: Ecommerce, Websites, WordPress by koolkat on | No Comments

Just completed development work for Blue Sky Projects to revamp the SummaUSA website. The site was completed using WordPress along with the SHOPP e-commerce plugin.

Creating a Child Theme

Posted in: Websites, WordPress by koolkat on May 20, 2013 | No Comments

I recently worked on a small project designed to promote a book of Cartoon Elephants. The project had a small budget so we decided to purchase a theme. I selected http://themeforest.net/item/rythm-one-page-responsive-wordpress-theme/3672895 as its one-page responsive format was ideal for the site. However, its style was nothing like how a site devoted to a book of Cartoon Elephants should look! The answer to this was to create a child theme.

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.

How WooCommerce Stores Product Variations

Posted in: Websites by koolkat on May 3, 2013 | No Comments

WooCommerce makes use of the standard WordPress SQL tables for both products and product variations. In the posts table, products are stored with the post_type of “product” and each variation for the product has a post_type of “product_variation”. The product variation has a post_parent set to the ID of the product it is related to. So, a product with the ID of 123 that has 5 variations will have 5 entries in the posts table, each with a post_parent of 123 and a post_type of “product_variation”.

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.

Using jQuery datatables with WordPress and AJAX

Posted in: Websites by koolkat on May 1, 2013 | 1 Comment

I have been working on a project requiring the use of jQuery Datatables. This jQuery plugin creates a table layout of data that can be sorted, filtered and dynamically updated. It is capable of getting data via AJAX which makes it very usable in a WordPress site. I am using datatables as part of a plugin. The actual UI is generated by a shortcode. So the first step in the process is to register and then enqueue the scripts and styles I will need:

//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:

GitHub

Posted in: Websites by koolkat on March 6, 2013 | No Comments

I finally started using GitHub and created my first pull request. My prior experience with version control was with SVN so I was a bit nervous – wondering if I would break the original. Of course, nothing broke  and now I am  a fan. I also tried out the free mac app which helped with learning curve as I did not need to think about the command line interface.

Going Repsonsive

Posted in: Mobile Websites, Websites, WordPress by koolkat on January 14, 2013 | No Comments

I finally got around to updating my own website to have a responsive layout for phones and tablets. In order to achieve the desired result, I spent considerable time trying to retrofit my site to the responsive world. I very quickly learned why many experts say to design for mobile first. I simplified the work by setting 2 media query breakpoints:

• @media only screen and (min-width: 768px) and (max-width: 959px)
• @media only screen and (max-width: 480px), only screen and (max-width: 767px)

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.

Getting Sassy with WordPress Part 2 – Sprites

Posted in: Compass, SCSS, Websites, WordPress by koolkat on November 7, 2012 | No Comments

In Getting Sassy with WordPress Part 1, we discussed how to manage using Compass and SASS for your WordPress project. Now we can take our use of Compass one step further and start using image sprites.

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.

Getting Sassy with WordPress Part 1

Posted in: Compass, SCSS, Websites, WordPress by koolkat on October 22, 2012 | No Comments

For a while now, there has been a lot of talk about CSS pre-processors such as LESS and SASS.  As the the details of how such pre-processors work as well as their benefits and drawback have been discussed many places, I will not discuss that here. Instead, I will focus on how I use SASS on my WordPress sites.

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