Theme Review: React Pro by The Theme Foundry

React Pro is a premium WordPress theme created by The Theme Foundry and launched in July 2011, which later that month came to WordPress.com. React is a portfolio theme for web and graphics designers, photographers and artists. It’s design is simple and focused on the content, and most importantly responsive, meaning that React displays beautifully no matter which resolution it is viewed in.

Some of the other exciting features of React are custom logo and layout, subscribe links, custom background and typography. It includes four widgetized areas, threaded comments, post thumbnails and navigation menus. React is ready for translation and released under the GPL v3 license. So, let’s give it a spin, shall we?

First Impressions

The marketing effort (not the videos, but the gossip around React) payed off, it made us buy this theme. As usual, we didn’t watch the videos and we didn’t bother to read the documentation — we thought that since it was released on WordPress.com, it had to be easy to use and straightforward. After all, not all WordPress.com users are WordPress theme developers or gurus ;)

So we got the archive, extracted it and activated the theme as usual. We browsed to the homepage and were not surprised to see that it works out of the box. Without any additional setup, we saw this:

React Pro Out of the Box

All our existing posts, just like somebody would have expected, in a neat layout, with our excerpts and our thumbnail images and comments. We did have to regenerate thumbnails to get them displayed correctly though, but that’s pretty much beyond the scope of a theme developer and we understand it.

First impressions

Responsive Design

Next thing we did was resize our browser screen to see how “responsive” the theme was and yes, it fits well on any screen resolution (except a ridiculously small one of course). The iPhone view was a blast although some might say the menu items are a little difficult to tap.

React Pro Responsive Theme

So design-wise the theme looks simple and slick, it’s easy to navigate around, provided that the menu was built correctly. The focus is on the content which is what artists would generally love. The default typography is not at it’s best, but as you’ll find out it later can be replaced with other, much better options.

Design

So we went off to create a few projects to our portfolio and found it surprisingly easy to do.

Features

We first looked for any new registered post types, like Projects or something, but didn’t spot any. Then browsed to the theme options where we spotted a section but that had some layout options only (we’ll return to the theme options in a bit). “It has to be a post” we thought — and of course it was, but not just a regular post. Theme Foundry have made good use of the standard post formats functionality which is now pretty much well known among WordPress users.

React Post Formats

The tricky part was to figure how to actually attach the image to the portfolio item and in a few clicks we did. It’s that very same thumbnail image and React just uses a different image size to output it on the projects page. Downside is that there’s no control of how the big preview image gets cropped and the edit thumbnail functionality didn’t save us this time. Here’s how the single project page looks.

React Theme Single Project

Too bad there wasn’t a full-sized preview of the image, but we figured that with a little bit of PHP code and a child theme, we’ll be able to get it in there as a link. A commenting section wasn’t available on projects either and we know how one would love to get some feedback on their work. We managed to add it via a child theme too, but more on that later.

Front Page Configuration

The initial screenshots that we saw had a nice looking front page, featuring the latest items from the portfolio section. We thought that it’s got to have a special setup, perhaps somewhere in the theme options but we were surprisingly wrong. It was a simple page. A page with a thumbnail image.

One tricky part was to figure out that we had to turn the show the recent projects footer to the front page inside the Theme Options and then simply set that page as the home page in our Reading Settings. This produced a very nice looking view with some welcome text and our recent projects as our home page:

React Pro Homepage

So this brings us to the theme options.

Available Theme Options

The theme options page wasn’t done using the standard WordPress Settings API but the general approach was good enough. Seems like Theme Foundry have made a theme options API of their own and use it by passing in arrays to build form elements. We had this dilemma in our Post Options API lately and Andrew Nacin pointed out on Twitter:

The best framework for building forms is HTML itself.

Anyhow, my thought is that helpers are fine as long as they’re documented and as long as there’s an easy way for custom callbacks as well. Unfortunately we didn’t find an easy enough way to hook to the options page from within our child theme, but anyways, here’s what React’s Theme Options page looks like:

React Pro Theme Options

Quite clean, easy to use and helpful info about each option on the right.

Typography

Six fonts to choose from, powered by Google Web Fonts. We didn’t really like the way the font was included in the head section, and didn’t like the fact that we couldn’t load up more fonts from Google’s library via a simple filter, and the ones available were latin only. What if I were trying to build a Russian website? Oh well..

But we did eventually manage to embed our own Google font family via a child theme stylesheet, but more on that later.

All the Rest

Shortcodes? What shortcodes? A bunch of page and post options? Nah, just the default! Built-in SEO capabilities to break my SEO plugins? None of that. React is all about the theme itself and of course some of you might wonder what about drop caps, multi-columned layouts? Button shortcodes and Google Maps? Nope. None of that in the React theme.

Some might think it’s a good idea, others might think that it’s not flexible enough. From the end-user point of view, well let’s admit they don’t really understand shortcodes or HTML ;) From the developer point of view? You can always add them through your child theme or a plugin if you need to. Of course not without some hacking here and there. We found there was no editor stylesheet though, that was weird.. Anyhow, the basics are there and ready to use out of the box, so we gave it a four ;)

Features

Understanding the Code

The code itself was not very well documented, we didn’t see a bunch of actions and filters where we’d hook in our child theme to extend React. The file structure itself was not very helpful either, since the single.php file was the template for both blog posts and portfolio (gallery) items.

We were also surprised to see that a few calls to the_time gave a format in a localized way, meaning that to change the date display format on our posts, we had to create a localization file. A better option would be to use something like this (off the top of my head):

the_time( apply_filters( 'react_projects_date_format', get_option( 'date_format' ) ) );

This would not only allow the end-user to change the default date/time format in their Settings, but also child theme and plugin developers to hook into that filter explicitly set a format if it had to differ from the format on the regular blog posts for example.

So, having all that in mind, and the earlier Settings API and file structure discussions we can only give it three stars. But the object-oriented approach deserves an extra half ;)

Code Quality

Flexibility

We don’t judge flexibility by the amount of given options, and certainly not by the amount of shortcodes and sidebars. Flexibility in this case means how easy was it for us to make the theme do what we wanted it to do. So we went deeper into the code and set a goal for custom typography and to extend the item view page with a comment form and a full-sized image preview.

Custom Typography

We went ahead with building our child theme by creating a stylesheet and specifying the parent template. We set the typography settings to Helvetica (so that it doesn’t load any fonts from Google) and loaded a new font from within our new stylesheet before embedding the parent theme’s one, like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,300,600&subset=latin,cyrillic);
@import url("../react_pro/style.css");

Since the master stylesheet was quite difficult to read and understand, we ran a quick check through Chrome’s developer tools and figured out a selectors group to change the typography throughout all the website:

.entry h1, .entry h2, .entry h3, .entry h4,
.entry h5, .entry h6, p, table, td, li, blockquote,
.project-indicator, .sticky-indicator,
#sidebar h3.widgettitle, .footer-column h3, .footer h2,
h2.post-title, h1.page-title, h2.page-title, .page-title,
h3#reply-title, h1.small-header,
body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

Not sure we got all of them and some might be redundant, but here’s the result:

React WordPress Theme Open Sans

That’s how we got Open Sans working with support for the Russian alphabet. Quite cryptic eh? Next, commenting and previews for our portfolio items.

Commenting & Full Previews

This wasn’t too tricky to figure out but it would have been much easier if the single.php template was split in three — single.php, content.php and content-gallery.php, similar to how Twenty Eleven approaches post formats. But anyway, we copied the whole single.php file to our child theme and underneath the gallery thumbnail image, wrote this snippet:

<?php $preview_url = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'large' ); ?>
<a href="<?php echo $preview_url[0]; ?>" target="_blank"><?php _e('Full size preview', 'react'); ?></a>

That fetched the thumbnail image sized large and the 0-index gave out the URL to the image file, hence producing a link that opens in a new tab and displays the file. A lightbox script can then be attached to this.

Next, at the end of the gallery item output, right after the closing div, we embedded a commenting section, like this:

<?php comments_template( '', true); ?>

And some stylesheet magic made it look just like the comment form on the blog posts. The content areas were of different width since the blog had a sidebar and projects didn’t, but here’s what solved it:

.single-format-gallery #comments {
    width: 78.125%;
}

Here’s how our preview page now looked:

Commenting on React Pro Portfolio

And that’s about it. None of the above broke React’s responsive design and everything looked perfect on every device and screen size. Of course we had to update our translation file after this. A quick scan revealed a few new strings and an obsolete one, but okay, we can deal with that. Not sure about the end user though ;)

It wasn’t too difficult to get around React and create child themes out of it, but it wasn’t as easy as developers would love it too either. Good thing we have stuff like the Chrome developer tools and Firebug, but would have been better if we didn’t have to, right? ;)

Flexibility

Documentation & Videos

The feature tour wasn’t as amazing as we expected and obviously started from their responsive design part. There are also tutorial videos available on WordPress installation, FTP client usage and working with thumbnail images in WordPress, which is essential to the React Pro theme. The rest of the documentation was online covering the basics from how to install or upgrade the theme to more advanced sections like replacing theme functions.

What we didn’t like is that they offer their own way of creating child themes by extending their theme base class. The idea is of course brilliant, but who on earth would like to learn a new API every time they switch to a new theme? Besides, the poor commenting in the original code makes it even worse ;)

The support forums seem to be active. We’ve noticed two active staff members (Drew and Jeremy) and their responses were quite fast and helpful, although we didn’t ask anything ourselves. Oh, and people are also asking for a featured slider to the React theme ;)

Documentation & support

Conclusion

This was the React Pro premium theme by The Theme Foundry. Available for both WordPress.com and WordPress.org setups for $68, which also gives you a 25% discount on future purchases. There’s a free stripped down version of React available too but it seems that they’re not even providing updates to those.

Overall score

Thank you for reading and hope you enjoyed the review. Use the comments section below if you’ve anything to add and poke us on Twitter if you’re a theme developer (individual or company) — your theme might be up next! Enjoy your day and don’t forget to subscribe to our RSS feed.