Transforming Emporium Into a Dream Photoblog: Scott Webb’s Customization Journey

Introduction

In 2012, developer Scott Webb wanted to transform the Emporium WooTheme into a site that could serve as an online store, a photoblog, and a resource hub for freebies. Emporium lacked a custom post type for a photoblog, so Scott set out to study code in other themes and build the missing pieces on his own.

The Challenge

Emporium is optimized for commerce but did not include portfolio or photoblog features. To add a photoblog section, Scott needed a new custom post type, custom metabox fields for before and after images, and template files matching Emporium’s responsive layout.

Studying Existing Themes

He opened Simplicity’s theme-functions.php to inspect how portfolio posts were registered, then pulled metabox and CSS rules from its style.css. He also reviewed Inspire’s metabox configuration to adapt two image fields into before and after slots. By tracking similarities in code across themes, he found a clear path for his own modifications.

Building the Photoblog

In his child theme’s functions.php, Scott registered a new post type named ‘photoblog’. He imported and tweaked metabox definitions to capture ‘before’ and ‘after’ images. Template files template-photoblog.php and single-photoblog.php were copied from Simplicity, then updated to call the new post type and custom fields.

Integrating Before and After

Using horizontal and vertical orientation fields, he coded a simple toggle to switch between images on single-photoblog posts. No external scripts were needed—just CSS and a small jQuery snippet for the toggle effect. The feature gives visitors a clear comparison view.

Responsive Adjustments

Because Emporium is responsive, Scott added media queries in his child theme’s style.css to ensure the photoblog grid and image toggle worked at multiple breakpoints. He tested on desktop, tablet, and mobile browsers, refined padding, and optimized image sizes to keep load times low.

Outcome

The result is a seamless photoblog section embedded in Emporium, complete with a before-and-after slider and a clean grid layout. It runs smoothly on any device and adds a fresh creative layer to his NuWomb site, making it a stellar example for other WooThemes users.

Key Lessons

Customizing a theme by building a child theme ensures safe updates and a stable code base. Studying how parent themes handle features like custom post types, metaboxes, and templates can fast-track development. Aligning your templates and CSS to an existing design system will keep the look consistent while giving you flexibility to add new sections and interactive elements. Always test on multiple devices so that your site remains functional and appealing on any screen.