Nicole Beurkens, founder of Horizons Developmental Resource Center, hired Bourn Creative to create a more dynamic and user-friendly website for the practice. Her site www.horizonsdrc.com was already a WordPress site, so we were hired to design a new custom WordPress theme and reorganize the content and flow of the website.

The home page of the Horizons DRC website uses a custom template that incorporates five widget-ready content areas and below, three additional widgets above the footer for displaying content site-wide.

On the home page, the main featured area features the email marketing opt-in and a welcome video that uses the FlowPlayer Pro video player. This lets Horizons show videos on their website without any third-party branding (like the YouTube logo) and with a custom splash image.

On the interior pages that use standard WordPress page templates, we created a unique widget area above the primary sidebar, with it’s own design & CSS to make the free email marketing opt-in offer (a video series) stand out and get noticed. We stripped out the vendor supplied styling in the email marketing opt-in code and created our own, complete with a custom submit button.

The custom WordPress theme we created also supports custom primary and secondary navigation bars with smooth drop-downs as an option.

Besides the custom programming and FlowPlayer Pro integration, the Horizons DRC site also got a more user-friendly navigation menu and a completely custom website design and visual makeover as part of their new WordPress theme built on the Genesis Framework by StudioPress.

You can check out the site at: www.horizonsdrc.com/.

Here’s what Nicole Beurkens had to say about her experience working with Bourn Creative:
 

Recently I flew into Las Vegas for 48 hours of nothing but debauchery and open source geekery for WordCamp. (WordPress summer camp for nerds like me).

Just kidding on the debauchery; I am getting way too old for that and was in bed by 10 both nights. What a loser right? Not everyone packed it in early though, just search Twitter for #wclv and look at the time of some of those tweets.

The Hard Rock Hotel graciously gave all WordCamp attendees a fabulous room rate, which even after I upgraded to get a better view, still wound up to be less than the cost of my flight. Thanks to the Las Vegas WordCamp organizers for securing this for everyone.

This was my first WordCamp so I wasn’t quite sure what to expect. I regularly watch the content sessions from other WordCamps on http://wordpress.tv, but I was looking forward to meeting and hanging out with other WordPress fans like myself.

Thanks to Twitter, I was able to find some other attendees, sponsors, and speakers at the Hard Rock Friday night and had a great time talking shop over drinks and a little blackjack (lost everything in case you are wondering).

WordCamp Vegas was held at UNLV in the student union, which was a good venue for the event. I hadn’t been on a college campus student union since the late 90s, so it felt a little strange to me.

I got there early on purpose to meet people and was delighted to find a great mix of WordPress developers, designers, and users who were all there to learn something and give back to WordPress community.

With concurrent tracks separated for users or developers/designers, I bounced back and forth between the tracks all day. I loved the developer sessions and picked up a few nuggets that I can’t wait to test and implement on a few of our upcoming projects.

I am a WordPress designer/developer first, so I was a little hesitant to listen to some of the user track sessions, but did anyways with the idea of using them for market research. Our customers are not WordPress developers, they are business owners, so I figured this was a great way to listen to their pain points using WordPress for their business website.

This was probably the best decision I made that day (along with calling it night at a reasonable time later on). I sat back and listened to other WordPress professionals like myself give their points of view on using WordPress for business, and listened to the average WordPress user (our customers) ask questions and express their frustrations.

I found these sessions invaluable. I can usually Google & hack my way through coding, but interacting with the people in the users track was great. I plan on using some of the takeaways I discovered to better serve Bourn Creative’s clients in the future.

After WordCamp was officially over the after party across the street got underway with attendees, sponsors, and speakers all having a good time talking all things WordPress.

WordCamp Las Vegas exceeded my expectations and the low key, informal atmosphere made the event comfortable and very enjoyable. I am already looking forward to my next WordCamp in Phoenix; February 2012.

If you are a WordPress fan like me, I definitely recommend attending a WordCamp. Bookmark the schedule page (http://central.wordcamp.org/), register for one and maybe you will see me there.

Just don’t look for me after 10, I will be in bed.

WordPress 3.3 is a major release with major overhauls to the user interface (UI), the media center/media uploader, and several more improvements.

I have been following the development cycle and absolutely love 3.3.

One of my favorite changes is regarding the permalink structure options.

In the past, our favorite permalink structure was to use the custom option /%postname%. This would result in a post URL of http://yourdomain.com/your-post-title which is good for users and SEO, but would cause performance problems when you get a lot of posts and pages in your database. This has been remedied in 3.3 and now is one of the options in the permalinks settings screen.

Remember to completely back up your files and database before upgrading, and if you haven’t yet even upgraded to WordPress 3.2, be sure your hosting company is running PHP 5.2.4 or greater and MySQL 5.0 or greater.

If you are not 100% sure what your host is running, call them or install the Heath Check Plugin to check your current hosting configuration (requires at least WordPress version 2.9.2).

If your current hosting company isn’t up to par for 3.3, we recommend HostGator for WordPress hosting.

WordPress allows 5 different levels of users/authors

Establishing different levels of user access is very important if you will have multiple authors writing blog articles or if you will have anyone else helping you update and maintain your WordPress site. To maintain the various WordPress, SEO, and theme settings that your or your web team has set up, very few people should be given administrator access.

Once a new user has been added to a WordPress site, their level of access can be changed at any time, by anyone with Administrator access.

WordPress User: Administrator

An Administrator has the highest level of access to a WordPress site, and can change anything, at anytime. They have access to all of the theme settings, WordPress settings, Plug-Ins and Plug-In settings, widgets, theme files, and an Administrator is also the only person who can add a new user or delete/edit an existing one.

WordPress User: Editor

An Editor has the next highest level of access to a WordPress site, and can edit any page or post and create new pages and new posts. They also have the ability to create new categories and tags and can administer all comments on every post or page with comments that have been enabled.

Besides and Administrator, and Editor can also change the author of any post or page to any other user on the site.

When logged in as an Editor, you can see that a the majority of the settings are no longer accessible, including widgets, so if there is content in a widget area that needs editing, an Administrator must make the changes.

WordPress User: Author

The next level of access is Author, who only has the ability to create and publish new posts, and can only administer comments on posts that they wrote.

An Author can create, schedule, and publish new posts at anytime, but unlike an Editor, they can only edit existing posts that they have written.

WordPress User: Contributor

The final level of access to create content within a WordPress site is Contributor. A Contributor can only create posts that are saved and must be reviewed by an editor or administrator to be able to be published.

After a Contributor writes a post, instead of the large blue “Publish” button, it is replaced by a similar “Submit For Review” blue button.

A contributor cannot edit previously approved and published posts that they have authored, and they also cannot access the comments on any posts.

When an Editor or Administrator views the lists of posts, they will see any new post submitted by a Contributor as “Pending”. From here, the post can be edited, published, or trashed.

WordPress User: Subscriber

The final level of WordPress user that can be created is Subscriber. A subscriber cannot edit any pages or posts, and has no administrative access. WordPress has a setting, only accessible to Administrators, under the “discussion” menu that can limit comments to only users who have registered and are logged in.

We used several of our latest WordPress tricks on this site and adding an image to highlight Suzanne’s responses to comments on her blog posts was one of them.

A while back Google icon Matt Cutts posted an article to his blog on how to highlight author comments to make them stand out against his site visitors’ comments.

I bookmarked the post for future reference and Suzanne’s project was the perfect one to use the technique on.

Matt’s solution was to add the following to the CSS:

.authcomment {
background-color: #B3FFCC !important;
}

…and edit the comments.php template:

…li class=”user_id) $oddcomment = “authcomment”; echo $oddcomment; ?>” id=”comment…

The end result which works well:

Now Matt Cutts is a software engineer for Google, and not a designer, so we took his post and added the Bourn Creative touch to match Suzanne Evans’ new branding.

We added similar code to the WordPress theme template files, designed a custom icon, and used the following CSS:

.authorstyle {
background: url(images/arrow-right.png) no-repeat top left;
margin-left: 0px !important;
padding-left: 48px !important;
}

As with all changes to your theme files; always backup first, work from backups, and test to be sure it works properly. Not every theme will be compatible.

For the past two weeks, I’ve barely come up for air, and I’ve seriously neglected my social networks!

We completed 17 technical print brochures for one client, took three new WordPress sites live, created an entire set of event materials, including two 70+ page workbooks, designed two logos, designed an information product, launched a complete micro site for a large teleseminar series, and more!

The good news is that while every project doesn’t make it into our portfolio, I’ve finally updated it with some of our recent projects.

I invite you to check out some of our most recent design work here: www.bourncreative.com/design-portfolio

I’m also such a proud mama! Several of our recent Genesis WordPress theme customizations have made it into the StudioPress Showcase!

Brian and I are so excited to share with you! You see before we only built our own custom WordPress themes. But in January 2011, we added the Genesis framework by StudioPress to our repertoire at Bourn Creative and we love it! Since then we’ve transitioned almost solely to building custom sites on the Genesis framework and customizing existing StudioPress themes.

Here are some of our WordPress sites that are featured in the StudioPress showcase:

• www.redhautemama.com
• www.smartwomensolutions.com
• www.drmeredithhansen.com
• www.getradicalconference.com
• www.satoridesignforliving.com
• www.doreenrainey.com
• www.newportinteriors.net

On the flip side, by respecting our boundaries and “shutting Bourn Creative off,” we’ve been able to really relax with the kids too!

We’ve played at the park, had movie night, played board games, and we enjoyed a VERY EARLY, long, leisurely breakfast of Krispy Kreme doughnuts INSIDE the store (I’M SO FULL!), where the kids got to oogle the doughnuts being made, cooked, and frosted!

Now we’ve been in the store and seen the whole process before, but now that we’ve been experimenting with making homemade doughnuts, we have a whole new appreciation for their process and the in-store experience!

WP-Cycle allows you to upload images from your computer and display a rotating gallery on a single WordPress page or post, or site-wide (like in your header). You can also easily change the images that are displayed and also make each image a clickable link to another page on your site. We like WP-Cycle for its ease of use and the ability to easily change the images in the future.

Install the plug-in like any other (through the dashboard or via FTP), then head to the “Media” tab in the WordPress Dashboard to edit the settings and upload your images.

Before uploading any images you should crop & resize them to the same dimensions and save them in a low resolution web format.

The order of the images will be the order that you upload them. When we are editing the images for a WP-Cycle slideshow, we usually name them “Slideshow1, Slideshow2″ etc so it is easy to remember.

While you are uploading images you can also choose to make each image a clickable link and configure the display settings (Below).

After your slideshow images are uploaded, the final step is to put it on your site. A WP-Cycle rotating gallery can be placed on a regular WordPress page or post by using the shortcode [wp_cycle] in the content editor (HTML view).

If you have a unique home page template or want the slideshow to display site-wide (like in your header), you will need to edit the theme files and add to your templates. Besides the WP-Cycle plug-in page on wordpress.org further documentation to embed the php hook in a theme is provided by the developer on his site.

To see the plugin in action, take a look at one of our recent projects for Dr. Meredith Hansen; a Newport Beach, California Relationship and Marriage Counselor.

If you liked the article we wrote about jQuery Lightbox For Native Galleries, stay tuned … We have a site in progress that uses a WP-Cycle slideshow on the home page and jQuery Lightbox for multiple photo galleries. We can’t wait to unveil this one.

As with all changes to your theme files; always backup first, work from backups, and test to be sure it works properly. Not every theme will be compatible.

One issue that came up during the review process was the Adobe Flash based gallery plugin (Simple Viewer) that we use for the portfolio. Flash looks great but is simply not accessible for the impaired and a new solution had to be found.

After scouring the WordPress world, I came up with several potential plugins that would meet ADA standards and still look good on a site. I tested several and in the end the winner was jQuery Lightbox For Native Galleries.

The plugin is simple to use, looks good, and works by extending the built-in gallery feature of WordPress. It also displays ADA compliant source code for screenreaders and is completely usable without a mouse.

I know what you may be saying right now … WordPress has a built in gallery feature?

Yes it does. WordPress has a built-in gallery feature that can be used on any post or page to display a portfolio of images. Many WordPress users do not even know this, and those who do, rarely use the feature because the way the galleries display. By default, WordPress gallery images when clicked on will open in a new “attachment page” to be viewed full size. This isn’t a good experience and it takes away from the design of the site.

With jQuery Lightbox For Native Galleries you wind up with a nice effect for each image when viewing full size, you stay on the same page, and you can scroll through the images with either your keyboard or mouse.

Here’s and example of what an image looks like when you click on the thumbnail to view it:

To add a lightbox gallery to a new or existing WordPress page or post, first install the plugin via FTP or through your dashboard and activate it.

Next, open an existing post or page, or create a new one. After that you need to upload the images you want in the gallery by clicking the “Upload Media” icon.

Pro Tip: Before you upload any images to your WordPress site they should be cropped/resized first and saved as a low resolution file to save space on your server and so your pages loads faster. There are lots of free and low cost image editing software available. Adobe Photoshop Elements is what many of our clients use.

Once you have uploaded all the images scroll down and click “save all changes,” then click on the Gallery Tab that will appear.

Scroll down until you see the Gallery Settings. Choose your ordering method, and decide how many columns you want your gallery to have. We usually use a full width template and set the gallery at three or four columns.

In the Gallery Tab you can also reorder the images via drag and drop, and add a title and description to each image (good for ADA and SEO). The image title will be displayed in the Gallery if you set one. This can come in handy to provide a brief caption to describe the image to your site visitors.

After you have everything configured, click “insert gallery” and the gallery shortcode will be inserted into your page or post. Click “update” or “publish“, and your new gallery will be live on your site.

With jQuery Lightbox For Native Galleries, there is one more option you can choose. In the Dashboard go to Settings–> jQuery Lightbox and select the theme you want to use for your lightbox window. My favorite is theme 1.

jQuery Lightbox is now our preferred plugin for image galleries for its simplicity and ease of use. Try it out and I think you will love it too.

As with all changes to your theme files; always backup first, work from backups, and test to be sure it works properly. Not every theme will be compatible.

Dr. Hansen’s site is a customization of the Agency Child Theme for the Genesis Framework built by StudioPress. At Bourn Creative, we love Genesis and I have to admit, Agency is one of my favorite child themes. I love the simplicity of the home page and the direct focus on three main areas.

We get so many compliments on this site, and while I’d love to take credit for everything, Meredith’s fantasic photography and color palette have a lot to do with it. In fact the exact same design with a different photo wouldn’t be as striking.

Blue and orange are naturally complimentary colors, they are also in direct contrast – on opposite sides of the color wheel, and with opposite meanings of cold and warm. Meredith’s photo in the header is warm and inviting – not only because that’s her personality, but also because it is rich and full of golds, oranges, and peaches. This warm photo on the cool blue background simply radiates off the page and captures your attention.

The other thing I love about this site is that it is appropriate for her non-internet-markety audience. Instead of shoving an opt-in in their face on the home page, Dr. Hansen first let’s them get interested and click into the site before presenting her opt-in for her newsletter. Smart strategy for her audience.

Check out Dr. Meredith Hansen’s Site and let me know what you think!

Here’s what Dr. Meredith Hansen had to say about working with Bourn Creative on her new WordPress Website:
 

If you don’t have a free Gravatar account, head to http://gravatar.com, signup, and upload a photo.

For branding purposes, it is usually a good idea to use the same photo for your Gravatar as your Facebook, Twitter, and LinkedIn profiles.

If you own a WordPress site, under the discussion settings, there is a set of options regarding Avatars and one is to use a custom avatar.

Near the bottom of the Discussion Settings window, there are several options to display different avatars when a commenter on your blog does not have a custom gravatar tied to their email address.

I think these choices are ugly and boring, and often take away from the design of the site.

With a little bit code added to your theme’s (or child theme) functions.php file, and a custom image uploaded via FTP to your theme’s image folder, you can create a new default option that matches your site.

Bourn Creative’s custom branded avatar is a version of our “brand rainbow.”

For a regular WordPress theme (like our custom themes) add the following code at the end of the functions.php just before the closing tag ?> (if there is one).

//**Custom Gravatar**/
add_filter( ‘avatar_defaults’, ‘bourncreative_custom_gravatar’ );

function bourncreative_custom_gravatar ($avatar_defaults) {
$myavatar = get_bloginfo(‘template_directory’) . ‘/images/custom-gravatar.jpg’;
$avatar_defaults[$myavatar] = “Custom Gravatar”;
return $avatar_defaults;
}

For a child theme like a StudioPress theme that runs on the Genesis Framework you can use the following at the end of the functions.php file.

//**Child Theme Custom Gravatar**/
add_filter( ‘avatar_defaults’, ‘bourncreative_custom_gravatar’ );

function bourncreative_custom_gravatar ($avatar_defaults) {
$myavatar = get_stylesheet_directory_uri() . ‘/images/custom-gravatar.jpg’;
$avatar_defaults[$myavatar] = “Custom Gravatar”;
return $avatar_defaults;
}

Next, no matter which method you use, you need to create your custom avatar image, name it the same as the function above (custom-gravatar.jpg), and then upload via FTP to your theme’s image folder.

Once you have done that, you can log in to your WordPress site and navigate to the Discussion settings and your custom avatar should be able to be set as the default.

The end result … a matching, branded avatar that is displayed for your blog commenters who do not have their own Gravatar.

As with all changes to your theme files; always backup first, work from backups, and test to be sure it works properly. Not every theme will be compatible.