WordPress

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.

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

Helping the Client with Advanced Custom Fields

Posted in: Websites, WordPress by koolkat on September 25, 2012 | No Comments

The Patricia Rovzar Gallery uses a custom WordPress theme which allows the gallery to maintain its current artists and exhibits.  The gallery updates its featured artists on a monthly basis. While the site handled the image updates easily, the gallery was struggling with correctly formatting the text on the home page. The situation is complicated by the fact that there may be one or two featured artists each month in addition to the need to change the focus depending on which artist is featured.  The initial attempt used <li> tags with classes from the style drop down. The tags often got overwritten by the visual editor and the client found the implementation cumbersome. To remedy this situation, we installed the Advanced Custom Fields plugin. This plugin allowed us to separate out artists, exhibit dates and other information into separate fields which are easy for the gallery to maintain. Plus, the API provided by Advanced Custom Fields, gives us the ability to see how many artists there are for the current exhibit. This allows us to set CSS classes to control the format so the gallery owner does not need to worry about displaying the artists’ information.

My CSS is out of control!

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

I have been working on an e-commerce site using the SHOPP plugin. Along with that, I am using jQuery UI to create tabs. Shopp and jQuery UI come with CSS files. And the layout from the site designer is fairly complex. Even the pages with tabs may have different fonts and different numbers of tabs. The result of all this is a lot of CSS with too much specificity and lacking in efficiency. What to do?

Well, for one, I am trying out SASS. I am hoping this will allow me to better organize my files, get rid of redundancies and improve the overall efficiency. Since this is my first foray into SASS, I will need to re-assess once the project is complete.

Patricia Rovzar Gallery

Posted in: Websites, WordPress by koolkat on January 31, 2012 | No Comments

Patricia Rovzar Gallery launched its new WordPress based website at http://www.rovzargallery.com/.

The site was designed by Horsepower.net with Kool Kat Web Designs as the developer. The website uses the following features to enhance the site:

1. A custom post type to display each artists

2. Custom attachment fields to handle items specific to an art gallery such as price, media type and actual item size.

3. A jQuery carousel from http://caroufredsel.frebsite.nl/. This carousel was chosen as it supports variable width items.

WordPress and Soap Authentication

Posted in: Websites, WordPress by koolkat on August 16, 2011 | No Comments

I have been working on a project that requires the use of Soap Authentication in order to use a web service. While I understood how to create a SOAP call in php, I did not know how to get around the standard WordPress authentication process. Fortunately, I found a SOAP Authentication plugin that I could adapt to my needs. The plugin helped me understand what actions and filters were required to achieve the desired results. Since the site has specific requirements that the end-user cannot change, I did not need any of the user interface provided by the plugin. As a result, I stripped all of that away and just made the code I needed part of my theme. I  also needed to allow the end-user to login with an email instead of a user name and to store a token for further use when making additional SOAP calls to retrieve data from the Web Service. The token gets stored in the user meta data. The main part of code that handles the SOAP authentication process is presented below. You will have to provide your own valid WSDL file; the one in the example does not exist.

remove_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 );
//add_filter( 'authenticate', array('Soap_Auth', 'rotary_email_login_authenticate'), 20, 3 );
add_action('wp_authenticate', array('Soap_Auth', 'soap_auth_check_login'), 1, 2);
add_action('lost_password', array('Soap_Auth', 'disable_function'));
add_action('user_register', array('Soap_Auth', 'disable_function'));
add_action('wordp', array('Soap_Auth', 'disable_function_register'));
add_action('retrieve_password', array('Soap_Auth', 'disable_function'));
add_action('password_reset', array('Soap_Auth', 'disable_function'));
add_filter('login_errors', array('Soap_Auth', 'soap_errors'));
add_filter('show_password_fields', array('Soap_Auth', 'soap_show_password_fields'));


function soap_auth_check_login($username, $password) {
require_once(ABSPATH.'wp-includes/registration.php');
try{
$client = new SoapClient('http://www.someWSDL.com', array('trace' => true));
$response = $client->Authenticate($username, $password);
} catch(SoapFault $e) {
$response = $e;
global $error_type;
$error_type = "soap";
global $error_msg;
$error_msg = "There was a problem with the soap service: " . $e->getMessage();
}

if ( $response->AuthorizationToken->Token != 0) {
$email = $username;
$username = substr(trim($username), 0, strlen($username) - 4);
if ( $user_id = username_exists($username)) {
update_user_meta( $user_id, 'rotary_user_session', $response->AuthorizationToken->Token);
}
else {
remove_action('user_register', array('Soap_Auth', 'disable_function'));
$user_id = wp_create_user( $username, $password, $email );
add_user_meta( $user_id, 'rotary_user_session', $response->AuthorizationToken->Token, true );
}

add_filter( 'authenticate', array('Soap_Auth', 'rotary_email_login_authenticate'), 20, 3 );
}

function rotary_email_login_authenticate( $user, $username, $password ) {
$user = get_user_by_email( $username );
if ( $user )
$username = $user->user_login;

return wp_authenticate_username_password( null, $username, $password );
}

Google Map API V3 – revisited

Posted in: Websites, WordPress by koolkat on March 10, 2011 | No Comments

In my previous posts on using the Google Map API, I did not address how slow the geo-coding (converting addresses to latitude and longitude) process is.  I wanted to find some method of  caching the data for a reasonable period of time so that the map loads quickly but I still can get address changes in a timely manner.

Since I am using WordPress, this led me to transients.  I added my transient function to the after_setup_theme hook, which runs  before the init hook since I wanted to cache the data as soon as possible. Here is the code I used in functions.php:

add_action( 'after_setup_theme', 'rotary_setup' );

if ( ! function_exists( 'rotary_setup' ) ):
function rotary_setup() {
$markers = array();
$markerRow = 0;
if (false === ($value = get_transient('map_data'))) {
$rotaryclubs = simplexml_load_file('http://www.ismyrotaryclub.org/club/Clubmeetings.cfm?D=5030&ClubTypeIDs=0,4&xsl=http://rotary5030.org/xsl/MeetingsX.xsl');
foreach($rotaryclubs->CLUB as $club) {
if (strlen (strval($club->MEETINGADDRESS)) >0 ) {
$address = urlencode($club->MEETINGADDRESS . ' ' . $club->MEETINGCITY . ' ' . $club->MEETINGSTATECODE . ' ' . $club->MEETINGPOSTALCODE);
$geocode = simplexml_load_file('http://maps.googleapis.com/maps/api/geocode/xml?address=' . $address . '&sensor=false');
$markers[$markerRow] = array("clubname"=>strval($club->CLUBNAME), "address"=>strval($geocode->result->formatted_address),"lat"=>strval($geocode->result->geometry->location->lat), "lng"=>strval($geocode->result->geometry->location->lng));
$markerRow++;
}
}
set_transient('map_data', json_encode($markers), 60*60*12);
}
}
endif;

Notice a few things about this code:

1. It is basically the same method of pulling XML data and creating JSON outpu
2. The transient data expires in 12 hours
3. We check to see if the transient data exists before running the code.

To use this code to build the map I added the following to my header.php:

<script type="text/javascript">
var data = <?php echo get_transient('map_data'); ?>;
</script>

Then my initialize() javascript function no longer needs to call getJSON as I already have the data. The new function looks like this:

function initialize() {
if (jQuery("#map_canvas").length > 0) {
var latlng = new google.maps.LatLng(47.6062095, -122.3320708);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); for (i=0; i
addMarker(data[i].lat, data[i].lng, data[i].clubname, data[i].address)
}
}
}

You can view the results of the geo-coding on this website.

Short South Management + Development Blog

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

Short South Management + Development of Grand Rapids, MI  specializing in property management  now has a WordPress blog that coordinates with the rest of the website.