Blog

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.

Stretch Physical Therapy

Posted in: Websites by koolkat on December 5, 2011 | No Comments

Just finished coding another great design from Horsepower.net at http://stretchpt.com/

JQuery animations

Posted in: Websites by koolkat on November 13, 2011 | No Comments

I have recently been working one project using several jQuery animations. While I had already mastered using callback functions to make sure the animation completed and using stop to prevent that nasty continuous animation effect, I negelected to consider what happens when more than one user interaction triggers the animation. The result was an animation mess! The solution, of course, is to check if the item is already being animated and use a time out interval to make sure all animations are complete.

Here is an example from some jQuery code:

this.bind('mouseenter', function() {
var wait = setInterval(function() {
if( inAnimation == false)  {
clearInterval(wait);
var infolink = Galleria.get(0).$("info-link,image-nav-left,image-nav-right,playpause");
var navpause = Galleria.get(0).$("image-nav-left,image-nav-right,playpause");
var orangebars = Galleria.get(0).$("stageleft, stageright");
if (options.showInfo === true) {
if (!Galleria.get(0).$("info-text").is(":visible") )
{
Galleria.get(0).$('playpause').show();
orangebars.stop(true, true).animate({"width": "toggle"}, 500, 'swing', function() {
stageidle.css({'width':'', 'overflow': ''});
stageleftidle.css({'width':'', 'overflow': ''});
infolink.show();
});
}
else {
stageidle.stop(true,true).animate({"width": "toggle"}, 500, 'swing', function() {
navpause.show();
stageidle.css({'width':'', 'overflow': ''});
});

stageidle.show();
navpause.show();
}
}}, 200);
});

5 Critical Aspects of a Web Page

Posted in: Websites by guest on October 31, 2011 | No Comments

Creating a webpage can be both demanding and rewarding. No matter what the topic or motive of the web page, there are some criteria that apply to all websites in order to get the traffic and unique visitors necessary for success. The first critical aspect of having a webpage, is to have a reliable host. Australian web hosting is often the most dependable web hosting. It is important to have a web host with the lowest downtime possible. Once the web host is set up, the next important thing to do is brainstorm ideas to make the webpage unique. 

Successful web development demands that the site be unique and distinguishable from others. A svelte appearance will carry you a long way, such as having a color scheme that is easy on the eyes, or using the space on the webpage wisely. Making sure the webpage is organized for optimal comprehension and user success is another critical facet. If somebody was to visit a website and see that it is jumbled and unorganized, they are not very likely to visit the site a second time. Having a user friendly interface is extremely important in getting repeat visitors to a website.

Feedback from the community also ranks highly on this list. Having a forum or message board is a great way for the visitors to voice their concerns and to give suggestions. They can give feedback on what they like and don't like about the web page. A web site should be much more than just a showcase of whatever service you are offering. It should be a well organized space that visitors can easily navigate, interact with, and respond to.

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 );
}

The Honeycomb Project

Posted in: Websites by koolkat on July 27, 2011 | No Comments

The Honeycomb Project is a nonprofit organization in Chicago that creates and manages meaningful family volunteer events for parents to enjoy with their kids. Their new website was designed by Rupert LLC and developed into a WordPress theme by Kool Kat Web Designs.

WordPress Child Themes

Posted in: Websites by koolkat on June 21, 2011 | No Comments

Recently at the Seattle WordPress Meetup, we heard an excellent presentation by Mark Root-Wiley of MRW Web Design on how to use child themes when developing a WordPress website.  In my work developing WordPress themes, I frequently use child themes, basing them on the default TwentyTen theme. The reason for this is to get a basic template structure that can be turned into any style I want. Some themes are just small adaptations of the TwentyTen theme and are very recognizable as such. Others, have a totally different look and feel.  To get an idea of this take a look at these two websites:

Leadership Navigator

Vital Content PR (developed theme for Blue Sky Projects)

WordPress Custom Posts and Taxonomies

Posted in: Websites by koolkat on June 11, 2011 | No Comments

Many articles have been written about how to set up custom posts and taxonomies in WordPress so I won’t revisit that here. Instead, I will focus on a real world experience of how this technique actually helps clients.

The Allied Arts Foundation wanted a simple way to publish a series of news items for a fixed set up topics.  To do this, I set up a custom post type for News with a custom taxonomy so specific News categories could be added. For the Allied Arts Foundation the following News categories were included:

• AAF News
• Events and Opportunities
• Sponsored and Granted Project News
• Taking Action

The foundation can then add news item posts to any of those categories and a custom WordPress query places them on the home page.  A template for the custom taxonomy was created to display the complete list of posts for a category. Similarly, a custom post template shows a complete single post.

The Allied Arts Foundation has found that the adding and editing of news items to be quite easy and are pleased with the presentation of the news items.

Simple WordPress Gallery

Posted in: Websites by koolkat on April 5, 2011 | No Comments

On the page http://functionalanalyticpsychotherapy.com/fap-research-in-sweden has a small photo gallery with a lightbox that appears when you click an image. This is done  as follows:

1. In the WordPress media library,  for each image you want as part of the gallery on a particular page or post, click attach and then select the appropriate page or post.

2. On the page or post where the gallery should appear enter: [gallery link=”file”]

3. Install and activate Auto Thickbox

4.  Add this CSS:

.gallery dl, .gallery dt {
	width:160px;
	display:inline	}

You now have a simple but functional gallery!

WordPress Contact Form 7 – Part 2

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

In WordPress Contact Form 7 – Part 1, we saw an example of how to customize the contact form. In this post, I am going to discuss a quick method of using an image button in place of the  submit button. The form we are discussing can be found at http://www.alliedarts-foundation.org/contact/

In the form area, the last two lines should look like this:

<p><a href="#"></a></p>
<p>[submit "Send"]</p>

Then in your CSS:

.wpcf7-display-none {
display: none;
}

#maincontent p.sendbtn a {
background: url("images/send-btn.jpg") repeat scroll 0 0 transparent;
float: left;
height: 35px;
width: 132px;
}
#maincontent p.sendbtn a:hover, #maincontent p.sendbtn a:focus {
background-position: 0 -35px;
}

The CSS does a few important things. First, it hides the submit button (notice display:none). Then it uses CSS sprites as discussed in http://www.alistapart.com/articles/sprites. Using CSS sprites give the hover effect that you see on the form. The actual image used looks like this:

The final touch comes from a bit of jQuery which just “clicks” the hidden submit button:

jQuery(".wpcf7-form p.sendbtn a").click(function() {
jQuery(".wpcf7-submit").click();
return false;
});