Forefrontby Automattic

Forefront is a fully responsive theme that helps you to create a strong–yet beautiful–online presence for your business. The following instructions will help you setup Forefront so your site looks like the demo site.

Using a Custom Front Page Template


As the name suggests, this template is perfect for the front page where you can introduce your business to the world. Rich, powerful, and flexible, the front page template includes three optional widget areas, a big leading image with a call-to-action, and two testimonials. (See the image above.)

When you first activate Forefront, you’ll see your posts in a traditional blog format but if you’d like to use this template as the front page of your site, here are the instructions.

  1. Create or edit a page, and assign it to the Front Page template from the Page Options panel.
  2. Add an introduction to your site. For best results, we’d recommend a couple paragraphs.
  3. The image behind this text is added as a featured image of the page. Learn more about adding featured images.
  4. Go to Customize → Static Front Page and set “Front page displays” to “A static page”.
  5. Select the page you just assigned the Front Page template to as “Front page” and then choose another page as “Posts page” to serve your blog posts.

Call to Action Button

If you would like to add a “call to action” button like the demo site, you can add the built-in CSS class button to an HTML link by switching to HTML mode in the editor. For example:

<a href="" class="button">Visit my page</a>

call to action button Forefront

Front Page Widgets

Now that you have set your home page, you can go to Customize → Widgets and set your widgets for “front page area one” and “front page area two.” “Front page area two” widget section displays below “front page area one.” For best results, it’s recommended to set three widgets for each section.

Setting Up The Blog Page

To setup your blog page, simply create a new page called “Blog” or whatever name you like. Go to Customize → Static Front Page and under “Front page displays” set “Posts page” to the page you want as your blog page.

Setting Up The Grid Page Template

  1. Create or edit a page, and assign it to the Grid Page template from the Page Options panel.
  2. This page displays all child pages of this page with featured images in a grid. It’s perfect for your Case Studies, Team, or Services page for instance. Learn more about creating pages and sub-pages.


Setting Up The Full Width Page Template

Create or edit a page, and assign it to the Full Width Page template from the Page Options panel.



Testimonials from happy customers and clients are important to include on your site to establish trust and encourage potential customers. With Forefront, you can add testimonials easily by going to TestimonialsAdd New. You can also add an optional customer image or logo as a featured image.


Two testimonials appear on the front page template. All testimonials are displayed in a testimonial archive page.

Where is the Testimonial archive page?

Let’s say you have a site at:

The URL of the testimonial archive page will be:

Please note: the URL for the testimonial archive page must end with /testimonial/ (as shown in the example above) for the page to display testimonials properly.

Using the URL as a custom link, you can add a link to the testimonial archive page to your Custom Menu.

Customizing the Testimonial archive page

Once you have published a testimonial, you can go to the Customizer and open the Testimonials panel where you can edit the page title, add an intro text and a featured image.



If you connect your site to popular social networking sites such as Facebook, Twitter, LinkedIn or Tumblr with Publicize in Sharing from your site dashboard, you can display links to your profiles on those sites from the Connect panel in the Customizer.



Widget Areas

Widgets are flexible and great tool to customizing your sites.

Forefront offers four widget areas:

  • Sidebar widget area which appears on the right.
  • Optional footer widget area.
  • Two optional widget areas on the front page template.

Custom Header and Logo

Want to upload your logo? Sure thing! Forefront supports a flexible custom header image with a maximum width of 330 pixels, which you can configure under Customize → Header Image.

Customize Even More

Of course Forefront supports Custom Backgrounds so that you can change the background color or image as a background of your site. When you purchase the Premium Plan or Business Plan, both come with the Custom Design upgrade, so you can change fonts and some key colors so that your site fits with your corporate identity.