BinaryM

Sequoia Solar: Using Wordpress as a Custom CMS

July 2nd, 2009 by mcinvale

Working with our friends at Promar Designs, we completed the Sequoia Solar website in June 2009.  The new site is a massive upgrade for them, adding much needed content management functionality, improving their branding, and including large amounts of quality content that didn’t fit into the previous site.

Most of the site’s functionality is handled without any trouble by a default Wordpress install. Since that isn’t very fun to write (or read) about, here are two sections that go beyond that.

Homepage Boxes

Sequoia needed a way to manage the four content boxes on the homepage of the site. The solution here was to use the Wordpress media manager. The title, caption, description, and image are all translated into the boxes with a little snippet of PHP.

<?php
 $homeImages =& get_children('post_type=attachment&post_mime_type=image&orderby=menu_order&order=asc&post_parent=' . $post->ID );

 foreach($homeImages as $image) {
?>
<div>
<h4><a href="<?php echo $image->post_excerpt; ?>"><span><?php echo $image->post_title; ?></span></a></h4>
<a href="<?php echo $image->post_excerpt; ?>"><img src="<?php echo $image->guid; ?>" alt="<?php echo $image->post_title; ?>" /></a>

<?php echo $image->post_content; ?></div>
<?php
 }

?>

This pulls all of our images out of the database and creates some nice markup.  Add in a little CSS and some Javascript, and the entire thing comes together very nicely.

Case Studies & Installation Galleries

One feature seriously lacking in the previous site was the absence of photos.  We needed some way to display a large amount of images along with some verbiage about them.  For this, we go back into the media manager, use custom fields, create a Wordpress plugin, and even more PHP, jQuery & CSS.

In order to get the thumbnail sizes that we need, a little hack is needed in wp-config.php

if( FALSE === get_option("micro_size_w") )
{
 add_option("micro_size_w", "34");
 add_option("micro_size_h", "34");
 add_option("micro_crop", "1");
}
else
{
 update_option("micro_size_w", "34");
 update_option("micro_size_h", "34");
 update_option("micro_crop", "1");
} 

function additional_image_sizes( $sizes )
{
 $sizes[] = "micro"; 

 return $sizes;
}
add_filter( 'intermediate_image_sizes', 'additional_image_sizes' );

Now, we’ll have pretty 34×34 sized thumbnails for our galleries. Hooray!

Next up is the Custom Fields Template plugin. This plugin allows you to configure your custom fields in all sorts of ways. It’s quite useful for improving Wordpress as a CMS.

Now that we have our images and custom fields taken care of, we need to move into our custom template. Here are the ‘CliffsNotes’ for what we’re doing.

Pull all of our custom fields into an array.

$customFields = get_post_custom();

Add our previous/next navigation using Next Page, Not Next Post.

<ul class="top">
	<li class="next"><?php echo next_page_not_post('Next Install','loop'); ?></li>
	<li class="back"><?php echo previous_page_not_post('Previous Install','loop'); ?></li>
</ul>

Grab all the uploaded images and display them, only adding the thumbnails if there are multiple images.

<?php
 $imageArray =& get_children('post_type=attachment&post_mime_type=image&orderby=menu_order&order=asc&post_parent=' . $post->ID );

 $imageCount = 0;
 $totalCount = count($imageArray);

 if (is_array($imageArray)) { 

 foreach($imageArray as $image) {

 if ($imageCount == 0) echo '
<div id="galleryThumbs" style="background-image: url(' . $image->guid . ')">';            

 list($alternateUrl, $alternateWidth, $alternateHeight) = wp_get_attachment_image_src($image->ID, '');

 if ($totalCount > 1) $images .= '<a href="'.$alternateUrl.'">' . wp_get_attachment_image($image->ID, 'micro') . '</a>';

 $imageCount++;

 }

 echo '
<div>' . $images . '</div>
' . "\n" . '</div>
';

 }
 ?>

Check for the existence of each custom field and display it, if it is set.

<dl>
 <?php
 if ($customFields['System Size'][0]) {
 ?>
 <dt>System Size</dt>
 <dd><?php echo $customFields['System Size'][0]; ?></dd>
// trimmed
 </dl>

And finally, parse the post_content string to produce properly formatted HTML needed for our design requirements.

<?php
 if (!empty($post->post_content)) {
 $contentArray = explode('<!--more-->', $post->post_content);

 for($x=0;$x<count($contentArray);$x++) {
 $content = $contentArray[$x];
 $content = apply_filters('the_content', $content);
 $content = str_replace(']]>', ']]>', $content);

 echo '
<div class="content">' . $content . '</div>
' . "\n";
 }
 }
 ?>

We (and, more importantly, the clients) are very happy with how the entire project turned out. Wordpress works very well for their needs and is a joy to work with.

Tags: PHP
Posted in WordPress | No Comments »