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.

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

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.

Custom Layout

If you take look at the form below, you can see it is changed from the usual “out of the box” layout you get when Contact Form 7 is installed:

1. In order to get this form to work we need to do the following:
2. Install and activate the Really Simple CAPTCHA plugin.
3. Edit the Contact Form 7 settings so you end up with the following:

Form Layout

Email Header

Email Message

To get our contact form to look like the one we:

1. Remove all the code from the Form area except for the submit code
2. Add the new fields with the appropriate names and IDs after selecting the Generate Tag dropdown. You will need to add the <p> and <label> tags yourself.
3. Following the directions on the screen to copy the fields to the Form and Message area. Note, that for this form we replace the [your-name] field with our [first-name] [last-name] fields in both the Message Body area and the Mail area.

When we have finished filling out the form and saving our changes, the one remaining item is the CSS.

.wpcf7-form {margin-top:20px;}
.wpcf7-form label {
float:left;
text-align:right;
display:block;
margin-right:0.5em;
width: 8em;
font-weight:bold;
}
.wpcf7-form input[type="radio"] {
vertical-align:top;
}
div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
border:1px solid #EC8800 !important;
}
p#wpcf7-indicates-required {
font-size:.9em;
color:#888888;
}

And for the submit button, you will see rounded corners in Firefox or WebKit (safari, chrome) browsers as well as IE9:

input[type="submit"]{
background:#0b2678;
color:#FFFFFF;
padding:3px;
border:none;
font-size:1.1em;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
letter-spacing:.07em;
}
input[type="submit"]:hover, input[type="submit"]:focus{
color: #ababcc;
}

The actual page can be found at http://createthelifeyouimaginecoaching.com/contact/.

See http://www.koolkatwebdesigns.com/wordpress-contact-form-7-part-2/ for another example.

First, on the home page I use the post’s  excerpt and featured image to feed the slideshow:

global $post;
$featured_posts = query_posts('category_name=Featured Artists&orderby=ID&order=ASC');
foreach( $featured_posts as $post ) {
setup_postdata($post);
?>
<div style="width:960px;">
<div>
<h2><?php the_title() ?></h2>
<?php $sub_head = get_post_custom_values('excerpt-subhead', $post->ID); ?>
<h3><?php echo $sub_head[0]; ?> </h3>
<?php the_excerpt() ?>
<p><a href=" <?php echo get_permalink($post->ID); ?>"><span>read more</span></a></p>
</div><!-- .homeleft -->
<div>
<?php
if (has_post_thumbnail()) {
echo get_the_post_thumbnail($post->ID, $size='full');
}?>
</div><!-- .homeright -->
</div><!-- .hometop -->
<?php }
?>

I also have a custom category template for my “artists” category (category-3.php). On this page, I take advantage of the jCarousel plugin:


jQuery('#mycarousel').jcarousel({
// Configuration goes here
});


And then this html and php:

<ul id="mycarousel">
<?php while ( have_posts() ) : the_post(); ?>
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'numberposts' => 999
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
//echo apply_filters('the_title', $attachment->post_title);
//the_attachment_link($attachment->ID, false);
$custom_image = '<li><a href="'. get_permalink($post->ID).'">'.wp_get_attachment_image($attachment->ID, $size="thumbnail", $icon = false).'</a></li>';
echo $custom_image;
}
}
?>
<?php endwhile; // End the loop. Whew. ?>
</ul>


Of course, there is all of the CSS needed for the carousel. Most of this is shipped with the plugin so I just need to modify it to meld with the look and feel of my theme.

The website is built on a WordPress platform for easy content management and includes a blog.

Download Jcarousel for WordPress Now

Installation

1. Unpack the plugin, put it in your “plugins” folder (`/wp-content/plugins/`).
2. Activate the plugin from the Plugins section.

F.A.Q.

How do I change the layout?
Most of the design, you have to do using CSS. Fortunately there are lots of classes to hook into.

How do I change the image and thumbnail sizes?
Carousel Gallery uses the WordPress Media settings for this (Settings -> Media).

Photos for this demo were provided by Jerry Whiting of JetCityOrange.