Forefront – Documentation

Forefront is a fully responsive theme that helps you to create a strong-yet beautiful-online presence for your business. Forefront’s layout adjusts itself depending on the device you are using. This means your site will look good not only on desktop and laptop browsers, but also on devices with smaller screens, such as mobile phones and tablets. If you install Jetpack, you can easily create testimonials and display social links.

  • Front, Full-width, and grid page templates.
  • Responsive layout.
  • Custom Background.
  • Custom Header.
  • compatibility for Infinite scroll, Social Links, and Testimonial Custom Post Type.
  • Keyboard navigation for image attachment templates.
  • The GPL v2.0 or later license. 🙂 Use it to make something cool.


  1. In your admin panel, go to Appearance → Themes and click the Add New button.
  2. Click Upload and Choose File, then select the theme’s .zip file. Click Install Now.
  3. Click Activate to use your new theme right away.

Frequently Asked Questions

How to setup the front page like the demo site?

  1. Create or edit a page, and assign it to the Front Page template from the Page Attributes
  2. Go to Settings » Reading and set “Front page displays” to “A static page”.
  3. 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.
  4. Make sure you add a featured image to your front page. This image will be shown in the large hero area below the top menu.

The front page also can display widgets and two testimonials. The page has two dedicated widget areas, Front Page Widget Area One and Front Page Widget Area Two. You can add as many as widgets you want!

Below the widget areas, two randomly chosen testimonials will be displayed. All you need to do is add at least two testimonials, and you’re all set.

Forefront makes easy to add buttons without learning CSS, you just need to add a class, button to your link when you are editing in Text (HTML) view.

For example,

<a class="button" href="">Click me!</a>

this makes a link look this:


If you like more minimal style, use button-minimal class instead.

For example,

<a class="button-minimal" href="">Click me!</a>

this makes a link look this:


How to use the grid page template?

Another useful page template is the grid template. It’s great for a portfolio page, a case study page, or a page to introduce your team members.

  1. Create or edit a page, and assign it to the Grid Page template from the Page Attributes module. This placeholder page will be used to display a small blurb and thumbnail image for each of the child pages (aka sub-pages) you’ll create next.
    Screen Shot 2014-02-13 at 03.09.28
  2. Create additional pages that you want to show on the grid page you’ve just created above. In the Page Attributes box on each child page, select the grid page you created above as the parent page.
    Screen Shot 2014-02-13 at 03.12.27
  3. For the best result, make sure you add a featured images to each child page, so it’ll be displayed above the blurb on the main grid page.

I don’t see the Testimonials menu in my admin, where can I find it?

To make the Testimonials menu appear in your admin, you need to install the Jetpack plugin because it has the required code needed to make custom post types work for the Forefront theme.

Once Jetpack is active, the Testimonials menu will appear in your admin, in addition to standard blog posts. No special Jetpack module is needed and a connection is not required for the Testimonials feature to function. Testimonials will work on a localhost installation of WordPress if you add this line to `wp-config.php`:


The Testimonials admin:

Screen Shot 2014-02-13 at 03.50.17

On your site, two randomly chosen testimonials appear on the front page template so that every testimonial has an equal chance to be there. All testimonials are displayed in a testimonial archive page.

Where is the page that lists all testimonials?

Let’s say you have a site at:

The URL of the testimonial archive page will be:

You’ll need pretty permalinks (any structure) for this URL to work though. If you’re stuck with default permalinks – your links have a query string at the end, like ?p=123 – then your testimonial archive can be accessed by adding this immediately after your URL: /?post_type=jetpack-testimonial

The testimonial archive page:


How to customize the testimonial archive page?

Once you have published a testimonial, under the Testimonials menu in your admin, you will see a link that takes you to the Customizer where you can edit the page title, add an intro text and a featured image. Just make sure you have pretty permalinks (any structure) for this to work.

Customizing the testimonial page:


How to add the social links in the footer?

  1. Make sure you install Jetpack and activate the plugin, and connect it to your account.
  2. In the Jetpack dashboard, activate the Publicize module.
  3. Under Settings → Sharing, connect to your preferred social network(s).
  4. Under Appearance → Customize, in the Connect panel, select the appropriate social-media accounts and save your settings.
  5. The social-media icons for the accounts you’ve selected should now appear in your footer.

Connect setting in the Customizer


Quick Forefront Specs (all measurements in pixels)

  • On single posts and the default page template the main column maximum width is 600.
  • On the full width page template the main column maximum width is 1050.
  • The featured image works best with images at least 1230 wide for pages, 810 for posts.
  • The primary sidebar maximum width is 270.
  • The maximum width for a custom header image is 330.