Showcase your work.
It’s never been easier.
React makes it simple to show off your work to your clients, customers, and fans. Quickly create a new post and include images, videos, and text. Your portfolio posts will automatically be displayed on your projects page. Your customers can browse all of your best work in one convenient location.
Add some style.
Make it your own.
Personalizing your new website should be fun. We’ve leveraged the built-in WordPress customizer, so adding your own background image or color is easy. On top of that, we’ve included seven hand selected font options. We’ve also included two flexible footer areas — latest news and recent projects. Combine these fonts and footers with a custom background to match your brand and give your website a truly unique look.
Introduce your brand.
Your business front and center.
The home page introduces you and your work. First, drag and drop a featured image and it will show up at the top of the page. Next, add some text that introduces you or your business to your customers. It’s also important for potential clients to see your latest work and any news, and you can optionally include both of these section in the footer of the page.
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
- Images used in the React live 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
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
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
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.
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.
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).
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.