Real-life example

Let’s take a look at one example from a recent project. Here is the area of the page in question:

This section showcased the company’s four services, which are also set up as sub-pages of an “Our Services” page. The original request from the client was to set this up in the admin with column shortcodes. The client would wrap each column with a shortcode (replaced with HTML in the theme) and fill in the image, title, description, and Learn More link. Red light!

That’s a pretty tall set of instructions for a client who has probably never even used WordPress before. Additionally, we wanted the code to include the following details:

• Presentation: The image and title are inside one link tag so that hovering the image also changes the title color – a minor but effective design detail.
• Navigation: The image, title, and Learn More link should all point to the corresponding product page, which requires some link-finding and copy-and-pasting in the admin – not very intuitive.

We also found during testing that any extra line breaks in the code – even between the shortcode and the first bit of HTML – would be reflected on the site and cause the four columns to stagger downwards in the box. To fix that the client would have to make sure all extra line breaks were removed, which is just another point on that long checklist.

Of course, we could enter all of the HTML and content ourselves before the site launches so that the client doesn’t need to touch the section, but then what’s the point of using WordPress? Wanting to keep all the editing flexibility but also removing the possibility of breaking the layout by editing content, we proposed a new solution that took advantage of theme code and core WordPress features.

Because all four columns link to sub-pages, we decided to just use a simple query in the template to display those four subpages. The images at the top use the Featured Image function and are automatically inserted and linked within the template. The text content below the title is pulled from the page Excerpt, and the Learn More link was appended at the end. Here’s what that code looked like:

<div id="services" class="clearfix">
	<?php $services = get_page_by_title('Our Services');
	$query = new WP_Query('post_type=page&post_parent='.$services->ID.'&posts_per_page=-1');
	while($query->have_posts()) : $query->the_post(); ?>
	<div class="service">
		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail('thumbnail',array('title' => '')); ?>
			<h3><?php the_title(); ?></h3>
		</a>
		<p><?=$post->post_excerpt?> <strong><a href="<?php the_permalink(); ?>">Learn More &raquo;</a></strong></p>
	</div>
	<?php endwhile; ?>
</div>

(could someone please help us get PHP/HTML syntax highlighting working? :) )

And that’s all it is! By using built-in WordPress functionality such as the featured image and page excerpt (which needs enabled first), we were able to completely reduce the possibility of something breaking after being edited.

Golden rule: No layout HTML in the content editor!

Our philosophy is that layout HTML should never, ever be placed in the WordPress content editor. Even just switching between the Visual and HTML editors – or using the wrong one to add your HTML – can break the whole page. Remember who your client is. Someone who isn’t very tech-savvy will never be able to jump through the hoops required to keep an HTML layout intact.

I hope the example & explanation in this post inspired you to re-think how you code your themes and set WordPress up for your clients. We plan to share more examples like this in the future, not just to show the amount of thought we put into features like this in a project, but also to build some helpful development guides that go beyond the code.

Both styles – light and dark – are included in the download. We decided not to use CSS3 for this because the goal was to match the PSD in all browsers, so instead we created a small sprite sheet with all of the normal, hover, and specialized arrow styles. Instructions can be found in the README file in the zip folder, which can be downloaded from the Premium Pixels site. Enjoy!

Update: Brajeshwar, a friend from the community, has created a CSS3 version of this theme for those who support modern browsers.

With version 3.2 geared up and almost ready for release, Automattic has not only improved WordPress’ core functionality, they’ve also introduced Twenty Eleven, the new theme on the block.

Twenty Eleven originated from the Duster theme released by Ian Stewart just a few months ago. Since then, some updates have been added:

Post Formats

Users now have 7 default post formats to choose from when publishing – Standard, Aside, Link, Gallery, Status, Quote, or Image. Similar to custom post types, post formats use a specific template file to display content appropriately.

Options Panel

Finally, a built-in options panel. It only has a few simple theme style options, but it definitely has potential for more functionality. Previously, developers have used Devin’s Options Framework or needed to create custom panels. The corresponding files for the options panel are located in the inc folder.

You may also create custom color schemes for Twenty Eleven. Check out the new colors folder and reference the twentyeleven_color_schemes function in functions.php for the code used to create a scheme.

Showcase Template

Since version 2.5, we’ve been able to create image galleries and insert them into posts and pages using nifty shortcodes. Our new default themes comes with a new Showcase Page designed to, well, showcase your favorite posts. All you’ve gotta do is mark these posts as Sticky.

Pull Quotes

Spice up your blog posts by using the CSS class “pull” on blockquotes or images. This class will break the element out from the post content into one of the margins on single posts and pages. Simply use the following code:

<blockquote class="pull alignright">Your quote here</blockquote>

Responsive Layout

The Twenty Eleven layout uses naturally adapts to the size of your browser window. If your visitors are using a mobile device, it will respond with an optimized design. If you would like to view the styles for this, check out the “Responsive Structure” section in the stylesheet.

That just about wraps it up! Please let us know your thoughts on the new theme. If you’re doing something fun and exciting with Twenty Eleven, we’d love to hear.

We’re big fans of giving credit where credit is due, so we owe a major shout-out to our buddy Alvin Thong of Sixbase for delivering such an awesome design. Alvin was fantastic to work with, putting up with our multiple rounds of heavy critiquing & detail nitpicking and, being a big Chicago Bulls fan, not being a sore loser when our Heat took the series. When it was all said and done, he made our weekend in California one of the best vacations we’ve ever had as we celebrated the launch. Thanks, Alvin!

If you remember the old site, with the machine and the modal boxes and the lovely brown background, you’ll immediately recognize that we’ve got a whole lot more to say than before. We’ve learned so much since we started back in September 2008. As you can see, we are starting to take some of those new ideas and improvements into action to make WPCoder the best WordPress development service on the ‘net. Here’s what we’ve been working on since the new year, and what we’re focused on right now.

Customer service

We’re totally committed to making your experience with WPCoder the best you’ll ever have. At least 50% of our business has been word-of-mouth referrals from happy clients, and we want to keep it that way by blowing you away with our work and service. Here are just a few things we’ve improved, changed, or added:

• Our development team is becoming more organized so projects are quoted, approved, and started as quickly as possible.
• We’re putting the final touches on our new client area, which will improve communication between everyone involved and fix all the little bugs and quirks in our original system that slowed the project down.
• We now have a separate department that handles theme support, so if something happens to your theme after a while or you have some changes to be made, we’ll get back to you and have the work completed much faster than before.
• We’ll be hiring a few of our developers full-time starting this summer, so if you send us multiple projects it’s even more likely you’ll get to work with the same developer every time.

Expanding our reach

On the services front, we’re now publicly offering a few new minor services to you. We’ve staffed a few Shopp and WP e-Commerce developers, so if an online store is part of your next project, we’re ready to help. We’re also now offering design services, and will be working on expanding our design portfolio this summer. Finally, for anyone who is stuck or needs some ideas or feedback on a project, we’ll be happy to offer you our suggestions – just get in touch with us and share some details about your project.

Building a better blog

In our effort to connect with the community more and provide helpful resources and information for other WordPress developers, we created this journal to do just that. You can expect a new set of tutorials, articles, and interviews in the months to come, and we’ll be much more active on Twitter and other community sites to learn more and share what we know.

Tell us what you think!

In case you haven’t picked up on our drift by now, we’re eager to improve & perfect our service. Experience is a great way to do that, but we love hearing from the community and our clients, too. If you’ve worked with us before, please let us know if there are any ways we could be better. We’re all ears!

Right now, we’re super excited to be in San Diego, CA this weekend! We’ve traveled all the way from Miami, FL and Johnstown, PA to the beautiful west coast of California for Valio Con. We figured there’s no better place to launch our new stuff than at a web developer & designer conference on the beach! Yes, we remembered to bring our floaties.

What brings us to Valio Con? We’ve been following Drew Wilson‘s work for a couple years now and we really admire what he’s accomplished. We’ve also been a part of one of his projects, Yoggrt, a creative ad network, since its initial launch. So as soon as we heard about the conference, we knew we had to find a way over.

Valio Con attendees, look out for us! We’ll be wearing (and passing out) WPCoder tees. We’d love to have a chat with you and see what we can do for you.

If you like our redesign, please leave us a comment below and let us know what you think. Most importantly, if you’re interested in discussing your next WordPress project with us, please get in touch with us directly.

Stay tuned for an official redesign launch post coming early next week.