WordPress

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.

WordPress Contact Form 7 – Part 1

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

Many WordPress users rely on the Contact Form 7 plugin to create a contact form that can be emailed.  There have been many posts and videos on how to install and configure the plugin, so I won’t cover that here. Instead, I am going to show a few sites which take the contact page to the next level.

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.

Using Worperss Posts for Dynamic Content

Posted in: HTML5, Websites, WordPress by koolkat on October 5, 2010 | No Comments

In working on the website for the Allied Arts Foundation, I was able to take advantage of WordPress’ post to create dynamic content for my website.

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.

Data2insight Website Launched

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

Data2insight helps organizations put 4 key strategies to work: Visualization, Measurement, Research and Planning.

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

Jcarousel for WordPress

Posted in: WordPress, WordPress Plugin by koolkat on March 31, 2010 | No Comments

This plugin displays images in a carousel. It was inspired by Carousel Gallery by Joen.

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.

Seattle Town Car and Limousine Service Website

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

Please, LLC Limousine and Town Car Service of Seattle now has a website. This site is designed on a WordPress platform using a custom theme that reflects the company’s branding.

Another WordPress theme

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

As part of the team working on a relaunch of OnPoint Urgent Care on a WordPress platform, my role was to design the theme. My role consisted of creating a lot of CSS as well as implementing the jQuery used in the drop down menus and slide show.