React is a clean and professional responsive theme that provides an excellent experience no matter what device your viewers reach you on. React features built-in project and portfolio support to easily allow you to show your recent artwork, case studies, or completed projects. In addition, React lets you customize the main body text with a large choice of easily configurable fonts.
Responsive Design
We’re big fans of responsive design – websites that display optimally across all devices and screen sizes. React’s layout displays your work and content beautifully no matter which resolution you view it in.
Easily Show Off Your Portfolio
React was designed to help you highlight and showcase your work with minimal configuration. You can easily designate certain posts as “projects”, which gives them a special display and allows you to highlight them on your blog, your homepage, or both. React offers full control over which pages your projects will show up on, including an option to hide project posts from your regular blog content.
Custom Typography
React gives you complete control over your typography. Choose from seven lovely and clean fonts from the convenience of your Theme Options panel.
Theme Options: Logo, Layout, and Subscribe Links
React’s Theme Options menu gives you the flexibility to make all kind of design changes to your theme. With the click of a button you can easily: show and hide recent news and projects in your footer, remove the sidebar, add a custom logo image, or add handcrafted RSS, Flickr, Twitter, and Facebook icons to your sidebar.
Quick Specs (all measurements in pixels):
- React is a flexible-width design, and adjusts to your resolution
- The main column maximum width is
490 except in the full-width layout where it’s 610.
React theme documentation
Images used in the React demo are courtesy of David Lanham.
Setting up projects
Projects are powered through your blog posts. To make a post a project change the Post Format to Gallery. Once a project has been changed to the Gallery Post Format it will be noted on the blog and automatically pulled into any page that you setup to use the Projects page template.
To setup a Projects or Portfolio page: create a new page, give it a title, and select the Projects page template. Once the page has been published you may add it to your menu from Appearance → Menus.
You also have the option to change the sort order of your Projects page and the name of the label applied on the blog posts or hide projects on the blog (see Projects section below for more details).
Creating multiple Project pages (advanced)
If you'd like to create multiple Project pages with each showcasing different projects/galleries, you'll need to do the following:
- Add a new empty page named "My Projects" (or whatever you want to name your projects page), choose the "Projects" page template (see above), and save your page.
- Go to the Edit Post screen for the project post you want to include.
- Get the ID of the Post: Look at the URL of the Edit page. It should look something like
"http://www.yoursite.com/wp-admin/post.php?post=123&action=edit"
post=123 indicates the ID of your project post (123 in this example).
- Go back to the Edit screen for the "My Projects" Page you created in step 1
- Insert
[gallery project_id="123"] into the content of the page (make sure to add quotes around the ID).
- Repeat 2-5 for all projects you want to include, and you'll have a custom Projects page.
Note: Make sure to put spaces between each [gallery] shortcode, otherwise WordPress will ignore all shortcodes after the first.
Setting up pages
Believe it or not, our front page on the demo site uses the default page template. The key is to set a featured image for your page and adjust your footers from Appearance → Theme Options → Layout.
Typography
React has built in support for select fonts from the Google Font Directory. Choose a primary font and you're good to go. Keep in mind that using these fonts will add some weight to your page (noted in parentheses). If you want the absolute fastest load times choose the font with no added page weight.
Layout
You have the option to disable the sidebar on your blog. You also have the option to control where different footers are displayed. There are three footers:
Widgets footer: Controlled via Appearance → Widgets.
Latest news footer: Displays excerpts from your latest three posts.
Recent projects footer: Displays your three latest posts set to the Gallery post format (projects).
Projects
Project items are automatically shown on your blog. If you would like to hide project items from the blog check the "Hide project items on the blog" box.
You may change the label that is applied to projects on the blog and in the "Recent projects" footer. For example, you could use "Case study" for the singular project name and "Case studies" for the plural project name.
You also have the option to set the sort order of your projects on any page that uses the Projects page template.
