Forefront

Live Preview

=== Forefront ===

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 (http://jetpack.me), you can easily create testimonials and display social links.

== Installation ==

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? =

The demo site URL: http://forefrontdemo.wordpress.com/?demo

1. Create or edit a page, and assign it to the Front Page template from the Page Attributes module: https://cloudup.com/cCO6975qFO5
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 (see below) 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. The class makes a link look this: https://cloudup.com/cyVu7ymhmfV

If you like more minimal style, use "button-minimal" class instead. It makes a link look this: https://cloudup.com/cKgOahbNyM3

= 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. https://cloudup.com/cl0QFolBf7j 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.
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. https://cloudup.com/cJvJfoWd1xN
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. https://cloudup.com/cxI8Glh0BAa

= 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 (http://jetpack.me) because it has the required code needed to make custom post types (http://codex.wordpress.org/Post_Types#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 WordPress.com 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

define( 'JETPACK_DEV_DEBUG', TRUE );

The Testimonials admin: https://cloudup.com/c3Q7tbPQQR2

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 WordPress.com site at: http://mygroovydomain.com

The URL of the testimonial archive page will be: http://mygroovydomain.com/testimonial/

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: https://cloudup.com/cjfTZ6j3zZ3

= 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: https://cloudup.com/cBy4RuWyees

= How to add the social links in the footer? =

1. Make sure you install Jetpack (http://jetpack.me) and activate the plugin, and connect it to your WordPress.com 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: https://cloudup.com/cokKpvFVQO8

== Quick Forefront Specs (all measurements in pixels) ==

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

== Changelog ==

= 1.0 - Jan 25 2014 =
* Initial release.

= 1.1 - Feb 14 2014 =
* Fix tabbable navigation bug.
* Implement an efficient way to display random testimonials on front page template.

= 1.1.1 - Feb 18 2014 =
* Enable the mobile navigation for more wider screen.

16 Comments

  1. Sallie S.

    Hi Justin
    I just sent you an email. I purchased Forefront and changed hosting providers after one month and lost the Forefront theme. How Do I get access again to Forefront again?

    S

  2. Lincoln Athas

    Hello,

    I am interested in using Forefront for a production company's website, but I have a couple questions about the "grid page." I'm looking at the demo and wondering if the banner at the top of the page could be altogether removed, so that the thumbnails of the child pages show up right away. Second, I'm wondering if the aspect ratio of those thumbnails is customizable, perhaps to a 16:9 cinematic aspect ratio. And third, I'm wondering if on each child page I could have a large vimeo player, filling up the page in the same way the image on each child page does in the demo.

    Thank you!
    Lincoln

  3. Automattic Themes
    • Shop Owner

    Hi Lincoln,

    > I'm looking at the demo and wondering if the banner at the top of the page could be altogether removed, so that the thumbnails of the child pages show up right away.

    If you wanted a header everywhere *except* the grid pages, you could easily add some custom CSS to hide the header just on the grid pages.

    > Second, I'm wondering if the aspect ratio of those thumbnails is customizable, perhaps to a 16:9 cinematic aspect ratio.

    You'd need to do a bit of customization for that. First you'd need to set up a child theme and then you'd add a function to modify the default size of the grid-page thumbnails, which is set out in the file functions.php:

    add_image_size( 'forefront-grid-thumbnail', 330, 330, true );

    I could help you with the specific function to override the size, when the time comes.

    > And third, I'm wondering if on each child page I could have a large vimeo player, filling up the page in the same way the image on each child page does in the demo.

    This isn't something the theme is set up to do, and it would be a complicated tweak. It would require some special customization because the page header is designed to pull in the featured image, not a video. Two possibilities for the video would be adding a new widgetized area, or using custom fields. If you're not comfortable delving into the code at that level, you might want to consider hiring a WordPress developer to help with this type of theme modification.

    Let me know if you have any other questions.

  4. Sallie S.

    Thanks! I got the message and purchased the Forefront theme directly from creativemarket.com. I am trying to upload into my wordpress account and having a few issues. Wordpress is requesting that I upload in a .zip format. What do you recommend I do? I didnt have to go through this process when I purchased Forefront through wordpress.com

  5. Automattic Themes
    • Shop Owner

    Hi Sallie, when you run WordPress on your own server, you need to upload the theme files to your host. There are a few different ways to upload them, which are outlined here: http://codex.wordpress.org/Using_Themes#Adding_New_Themes
    I recommend the FTP method. If you need help using FTP to upload the files on your server, try looking in your host's documentation or contacting them for assistance - they should be able to help you out.

  6. Rob Elings

    Nice theme, and seriously considering it.
    Is there a way to insert a button using shortcode? Please provide live link only.

    Any other shortcodes?

    Many thanks
    Rob

  7. Automattic Themes
    • Shop Owner

    Hi Mark, thanks for the screenshot. Could you please let me know what browser and version you're using, and what OS? If you're not sure, you can visit http://supportdetails.com/ and copy-paste what it says under Operating System and Browser. Thanks!

  8. Automattic Themes
    • Shop Owner

    Mark - thanks very much. I'm looking at the Forefront demo site using the same browser version and OS as you but I don't see the text overflow issue on my end. Would you mind sending an email to themes AT wordpress DOT com so I can troubleshoot further with you directly? - Kathryn

You must be signed in to post a comment.
Can I install this theme on my wordpress.com hosted site?

No, this theme can only be installed on your own self-hosted Wordpress site.