First Theme Documentation

Theme Details | Live Demo

Table of Contents:

Quick Specs（All units in pixels）

  1. Main column width: 644
  2. Sidebar width: 250
  3. Footer widget width: 300
  4. Post feature image width: 644 (Unlimited Height)
  5. Header image and page featured images: 1220×480

Install

You can choose from the following 3 ways to install First.

1. Install from official directory (Recommended)

From the dashboard’s Appearance -> Themes page click Add New at the top and search for First. When First appears, click Install. Once the installation is complete click Activate. This completes the installation.

2. Install from the dashboard

To begin, download the First zip file. From the dashboard’s Appearance -> Themes page click Add New at the top, and then click Upload Theme. Once at the upload screen, choose the zip file to upload. Once the installation is complete click Activate. This completes the installation.

3. Install from FTP

To begin, download the First zip file. Unzip the First zip file, and transfer the first folder via FTP to the …/wp-content/themes/ directory. From the dashboard’s Appearance -> Themes page click Activate. This completes the installation.

If you already have featured images set up, after installing the theme, install the Regenerate Thumbnails plugin and regenerate the images. Images that match the theme’s sizing will be generated automatically.

Customizer

From the Appearance -> Customize area First allows you to make various settings.

Site Identity

  • Site Title: Sets the site name. This is the same as Settings->General.
  • Tagline: Sets site tagline. This is the same as Settings->General.
  • Hide Tagline: Will hide the tagline.

Fonts

  • Headings Font: Sets the heading font.
  • Headings Font Size (%): Sets the heading font size. The units are in %.
  • Body Font: Sets the text font.
  • Body Font Size (px): Sets the text font size. The units are in px.

Colors

If you use Color Scheme, individual settings will be ignored.

  • Menu Background Color: Sets background color of the navigation bar.
  • Footer Background Color: Sets the background color of the footer widget.
  • Link Color: Sets link color.
  • Link Hover color: Sets link hover color.
  • Color Scheme: Sets all of the above values at once.

Background

If you have selected a wide layout in the Layout settings, the background color/image is not displayed.

  • Background Color: Sets the background color.
  • Background Image: Sets the background image. Background image can be selected from the media library or uploaded. No image displays if you do not set an image.

Layout

  • Layout: Chooses between wide/boxed layout.
  • Header Layout: Chooses header layout.
  • Footer Fayout: Chooses footer layout.
  • Disable Responsive: Disables responsive design.

Title

  • Font: Sets the title font.
  • Font Weight: Sets the title’s font weight.
  • Font Size (px): Sets title font size. Units are in px.
  • Font color: Sets font color.
  • Letter Spacing (px): Sets the title’s kerning. Units are in px.
  • Margin Top (px): Sets the top margin of the title. Units are in px.
  • Margin Bottom (px): Sets the bottom margin of the title. Units are in px.
  • All Uppercase: Displays title in all capital letters.

Logo

In order to use a retina logo image, you must have a version of your logo that is doubled in size.

  • Upload Logo: Upload a logo image.
  • Replace Title: Replaces the site title with the logo.
  • Retina Ready: Sets logo image to support retina displays.
  • Add Border Radius: Sets a round crop around the logo image.
  • Margin Top (px): Sets the top margin of the logo. Units are in px.
  • Margin Bottom (px): Sets the bottom margin of the logo. Units are in px.

Navigation

  • Hide Navigation Bar: If you want to hide the navigation bar.
  • Hide Search: Hides the search in the navigation bar.

Header Image

  • Current header: Sets header image to be displayed at the top of the index page. The image can be selected from the media library or uploaded. No image displays if you do not set an image.

Post

  • Display: Chooses whether to display summary or full text in the post list page.
  • Hide Author: Hides author name on posts.
  • Hide Categories: Hides post category.

Footer

Only the a and br HTML tags are allowed in the footer text.

  • Footer Text: Sets footer display text.
  • Hide Credit: Hides the credit to Themehaus and WordPress

Custom CSS

Set custom Google fonts like this: Open+Sans:300,300italic|Roboto:100,900

  • Custom CSS: Allows you to set additional custom CSS.
  • Custom Google Fonts: Reads additional Google fonts.

Menus

Menu items can be set from Appearance -> Menu

  • Navigation Bar: Configures the menu shown in the navigation bar. The page list appears by default if you do not set this.
  • Header Menu: Configures menu displayed in header. It is not displayed if you do not set it.
  • Footer Menu: Configures menu displayed in footer. It is not displayed if you do not set it.

Widgets

Configures each widget. This is the same as setting Appearance -> Widgets

Static Frontpage

  • Front Page Displays: Configures the way the site is displayed as the frontpage. This is the same as in Settings -> Display Settings

Widgets

You can set up First‘s widgets from Appearance -> Widgets. First supports 4 widgets.

Sidebar

Displays the sidebar. If this is not used, it will be a 1 column design.

Footer 1/Footer 2/Footer 3

From left to right there are 3 sequential footer widget areas, and the width is auto-adjusted based on how many you use. If you do not use a footer widget, nothing will be displayed.

First‘s menus can be set from Appearance->Menus. First supports 3 menus.

  • Navigation Bar: Configures the menu shown in the navigation bar. The page list appears by default if you do not set this.
  • Header Menu: Sets the menu displayed in the header. If unset, it will not appear.
  • Footer Menu: Sets the menu displayed in the footer. If unset, it will not appear.

To create a new menu, click create a new menu at the top of the page, and enter in the name of the menu. Then click Create Menu.

Then select the pages you wish to the add to the menu on the left side of the screen and then click Add to Menu. You can add links and categories. You can also change the item order by dragging.

Once you have determined the menu’s item/item order, at the bottom of the page in Menu Settings choose from Theme locations where you want the menu to be displayed and click Save Menu

With this the menu creation is complete. Choose create a new menu again if you want to make another menu.

The following web services and RSS feeds’ links can have icons automatically added to them.
CodePen, Digg, Dribbble, Dropbox, Facebook, Flickr, Google+, GitHub, Instagram, LinkedIn, Pinterest, Polldaddy, Pocket, reddit, Skype, StumbleUpon, Tumblr, Twitter, Vimeo, WordPress, YouTube

Posts

First‘s post format can be selected from Format on an individual post screen. Supported formats are: Standard/Aside/Audio/Chat/Gallery/Image/Link/Quote/Status/Video.

Please refer to the post format category live demo to see what it looks like. In addition you are not constrained by the post format, and can posts images and videos in the standard format.

Also, on the Posts screen, First‘s post’s featured image can be set from the Featured Image box.

Pages

You can set the page templates in First by choosing the Template attribute in the Page Attributes box on an individual page. Page templates available are Default Template, No Sidebar, Full Width.

You can also set a featured image from the Featured Image box on a page.

Updates

You can choose from the following 3 ways to update First.

If you directly modify the theme file, when an update is installed to the theme your changes will be lost. To avoid this, use a child theme.

1. Auto update (Recommended)

When an update for First is available, you will be notified and can download it from the Dashboard -> Updates submenu or Appearance. In the Dashboard -> Updates screen select the First theme and click Update Themes. This completes the update.

2. Update from the dashboard

To begin, download the new First zip file. From the dashboard’s Appearance -> Themes page activate another theme, and click First‘s Theme Details, and then click Delete at the bottom right. Once the old theme is deleted click Add New at the top, and then click Upload Theme. Once at the upload screen, choose the new zip file to upload. Once the installation is complete click Activate. Theme settings are inherited. This completes the update.

3. Update from FTP

To begin, download the new First zip file. Delete …/wp-content/themes/first/ folder via FTP, and unzip the zip file, and then transfer the first folder to the …/wp-content/themes/ directory. From the dashboard’s Appearance -> Themes page click Activate. Theme settings are inherited. This completes the update.

Supported plugins

First supports the following plugins.

Jetpack

Jetpack is a plugin that adds features normally only available to blogs hosted on WordPress.com. First performs styling for the infinite scroll and additional widgets.

Contact Form 7

Contact Form 7 is a simple yet flexible plugin that enables creation of inquiry forms. First performs the styling for the forms.