WordPress Framework
The ArsTropica Responsive Theme Framework for WordPress is a highly extensible, search-engine optimized WordPress Theme Framework featuring multiple widget areas, integration with several WordPress plugins, grid-based responsive layouts and much more.
Responsive, Extensibility, UX, Web
Full Customization
Shape The Experience
Although the technical requirements for the framework were very broad, the intent behind the project to create a WordPress framework from scratch was to automate and simplify the development and design process driving the implementation of a boutique blog while delivering a higher quality of user experience to visitors.
Extending the customization functionality native to WordPress, allowed the configuration of every visual aspect of a theme.
A Flexible, Extensible & Efficient Foundation
The Challenges
When creating a WordPress framework from scratch, there were several questions on the appearance, function and utility of the framework that needed to be addressed.
Each one of these questions created challenges in key developmental areas: design, functionality and configuration. A solution to each challenge had to be found in order for the project's goals to be achieved.
A Unified, Flexible Design
Before the project moved to the development stage, a design and prototype for each theme was completed by a graphic / UX artist and a front-end developer.
The initial thought was to distill the existing theme prototypes into a working template into which any common WordPress functionality could then be integrated; however this quickly proved to be too time-consuming as the prototypes were already using a responsive UI framework that did not easily support template driven applications.
Adopting Bootstrap as the UI Framework allowed both rapid development and the flexibility required to layer WordPress onto each design.
Smart Integration
Each theme on the framework was required to interface with the agency's proprietary web services and CRM platform. Several features were developed that seamlessly delivered this custom functionality with custom controls that automated as much of the setup process for each agency client as possible.
Integration of the blog with the agency's CRM system meant that a client's lead generation performance could tracked, analyzed and improved over time.
Fully Configurable
At the time that the framework project was underway, an average blog took 3 weeks to design, provision and finalize. The blog implementation team had to write HTML, PHP and CSS code for each client blog and individually perform a lengthy setup process for any plugins and theme settings.
By leveraging the theme customizer functionality native to WordPress and creating input controls to handle settings both native to the theme and integrated 3rd party plugins, the framework drastically cut the implementation time for a blog from weeks to mere hours.
The result: A richer more varied blog, yet still easy to maintain and use and fully responsive.
Guest Previewer
Bonus: Marketability
Technology is not always a solution to every business challenge, but the right tools can improve a well structured process.
As someone that works directly with clients frequently, I believe that the greatest challenge to being successful in an agency environment is communication. Often, those tasked with talking / selling a product or service to a potential client do not have enough knowledge to inform the client.
As a result, a final feature was developed that offered potential clients a preview of their blog with full customization and functionality. After a client had made their choices, the previewer would then generate settings that would automatically be sent to their agent.
Integration
Communication
Successful programs use communication methods strategically to improve their overall effectiveness and reach.
Preparing your content for a wide audience means developing a good content strategy, organization of that content, and the use of technology that can increase the content's reach.
As a blogging platform, WordPress functions as a consumable content resource that feeds 2nd tier providers in the content marketing ecosystem.
Four plugins were developed to facilitate the dissemination, integration and organization of content with 3rd party services.
Responsive Forms & Lead Reporting
One of the trickier parts of designing a responsive site is controlling the behavior of conversion forms in different layouts and devices. Each framework theme has a mobile device widget area that can display a call to action for a responsive conversion form. The form contains basic configuration options to modify the button text, form message, etc.
Through the framework's integration with the agency CRM tool, information on captured leads is sent to the client's CRM account for historical analysis and follow-up.
Content, Content, Content
Themes with full-screen layouts contain sprawling stretches of real estate that publishers can use to feature their content. Content organization is key to effectively presenting a lot of information to a visual audience.
The framework features two vehicles for the sorting, filtering, isolation and positioning of content outside the main flow.
The related post plugin uses a third party service to display associated content as an aside to the main topic.
The featured post plugin provides finer control over content that is displayed in one of the widget areas. If is configurable by sorting, number, taxonomy and content format.
Combined, these two plugins, allow publishers to add associated content around the main content while preserving the topic and theme of the overall page.
Five Contrasting Themes
Versatility
The framework's responsive grid layout as well as its customization functionality allowed for a wide range of different child themes to be created.
Five child themes ranging in design from a minimalist style to a fully-loaded grid were created. Each of the themes (except one) had multiple widget areas surrounding the content and a banner slideshow.
The framework's customization options allow each theme to adopt an infinite variety of faces with a few mouse clicks.
Ambiance
A broad layout spanning three spaced out columns, stylized headings and dynamic content areas, Ambiance achieves an aesthetic balance between media rich content and functionality. The theme supports a flexible responsive layout that can accommodate different display resolutions all in an elegantly styled theme with strong typography that calls attention to your content.
The Layout
The three column layout allows organization of a lot content on a single page without losing the coherent structure of your site. The placement of multiple widget areas below, above and beside your content engages the eye without distracting from the main content area.
Atmos
The "Atmos" theme is a fusion of a media intensive format, a variable-column layout, customizable background and vivid color accents resulting in a theme with a distinctive character. The theme's options give you a full range of customization to its appearance to make the theme as unique as you like.
The Layout
This theme supports a flexible three-column responsive layout that can accommodate different display resolutions. The theme is built on the bootstrap framework with multiple widget areas below, above and beside your content.
Caption
Caption presents a clean, bold, and simple statement for anyone displaying a lot of content in a straight-forward, yet functional presentation. The theme features a fully responsive two column grid with multiple widget areas below, above and to the side of content.
Freelance
Freelance is an elegantly styled theme that maximizes your content with a full-spread layout, large images and a clean, legible finish. Designed for sites with media rich content, Freelance showcases your images in the way you want them to be seen, even on mobile devices. It also allows plenty of room for your text and as many widgets as you can load. The theme features a fully responsive three column grid with multiple widget areas below and above the content.
Teeline
Teeline is a minimalist theme that singles out your content using large clean typography and a simple one column layout. The theme features a fully responsive one column grid built on the bootstrap framework with multiple widget areas below and above your content.
Final Thoughts
I consider this project one of the most challenging that I have undertaken primarily due to the time and planning constraints; however, I also view it as a success in that a great product was delivered at the end that will facilitate the agency's publishing requirements and help it move forward as a top quality publisher.
