Who knows what’s next?

Sequoia Solar: Using WordPress as a Custom CMS

July 2nd, 2009 by Matt 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.

sequoia-solar-homeHomepage 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
 }

?>

sequoia-solar-photos

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.

Leave a comment

  • You said,
  • right now:

Trackbacks on this post

From the Blog

Alan and his team needed a website that would allow for blog posts to keep their clients informed and display their rentals. Our approach to the design was to keep it clean and simple to allow for their advice on San Diego property management and San Diego rentals take center stage.
read more

From our clients...

Working with BinaryM is always a pleasure from start to finish. Throughout each phase of the development process they provide invaluable input, design expertise, and technical talent. Additionally, BinaryM’s responsiveness and timely completion of tasks, regardless of their size, is beyond compare. My recommendation for BinaryM as a creator of superior and web standards compliant websites, online applications and as a one-stop firm for your online needs could not be any higher.

Hatim Daher
Online Marketing Manager

Contact Us...

Email:
info@binarym.com
Phone:
619-928-2221
Fax:
619-462-4883