Metro Pro Theme Setup

Compatibility

Make sure you have the following installed:

• WordPress version 3.6+
• Genesis Framework version 2.0+

Plugins

Before you begin, you will need to install and activate the following plugins Of course, you may substitute your favorite plugin, but this is the one used in the Metro Pro theme demo:

• Genesis eNews Extended

In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:

Default Layout

• Click a thumbnail to select the Default Layout. The Minimum Pro theme uses the Content > Sidebar option.

Content Archives

• For Content Archives, the default setting of “Display post content” is used by the demo.
• Leave the “Limit content to __ characters” option blank or set to 0.
• Leave “Include the Featured Image?” checkbox unchecked.
• Using the drop down box, select “Numeric” for the “Post Navigation Technique.”

Be sure to click the “Save Settings” button to preserve your changes.

The site title and description for your site can be set by navigating to Settings > General.

1. The Site Title will display in the upper left corner of your site.
2. The Tagline Setting will not be displayed when using the Metro Pro Theme.
3. Be sure to click the “Save Settings” button to preserve your changes.

If you prefer a Logo Image rather than a text based SIte Title it is possible to use a small logo style image that will display in the upper left corner of the site.

1. Navigate to Appearance > Header menu in your WordPress admin panel
2. Click “Browse” and Navigate to the image you would like to use for a Logo. Images of exactly 270 × 80 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.
3. Click “Upload” to copy the image from your computer to your website.
4. Be sure to click the “Save Settings” button to preserve your changes.

The Metro Pro theme demo displays an image behind the content area of the site.

1. Navigate to Appearance > Background in your WordPress admin panel.
2. Use the “Browse” button to select the background image you wish to use from your computer.
3. Once the image has been selected click the “Upload” button to load the image for use on your site.
4. Alternatively you can use the “Choose Image” button to select the background image you have loaded to your site previously.
5. The Display Options settings for Position, Repeat, and Attachemnt are not important for this theme. These settings will be ignored.
6. To select a Background Color to show as the Background image Fades in click “Select Color” and choose a color or enter a color code. The theme demo uses #333333
7. Click the “Save Changes” button to preserve your changes.

Note: This background image does not need to be a specific size since the theme is responsive and will crop, shrink, and grow the image as needed.

In the Metro Pro theme, both the Primary Navigation Menu and Secondary Navigation Menu areas are utilized. The menus assigned to the default navigation areas can be set by navigating to Appearance > Menus > Manage Locations.

1. A Menu set in the Primary Navigation Menu location will display immediately below the header area of your site.
2. A Menu set in the Secondary Navigation Menu location will display immediately above the header area of your site.
3. Be sure to click the “Save Settings” button to preserve your changes.

The Metro Pro theme demo has a split menu effect in the Secondary Navigation area with one navigation menu item aligned to the far left of the site while the remaining menu items are aligned to the right side.

1. Navigate to Appearance > Menus
2. Select the Menu that will be used in the Secondary Navigation Menu location
3. Expand Screen Settings to display additional display options
4. Check “CSS Classes”
5. Expland the First Menu Item in the Menu
6. Enter a CSS Class of “alignleft”
7. Be sure to click “Save Menu” to preserve your change

The Metro Pro theme demo home page is configured to display the most recent five posts from a category named Featured in a “magazine” style layout. Several widget areas are included in the Metro Pro theme and are designed to feature content in the Home – Top widget area most prominently.

1. Home – Top: A single featured post with a large image and longer excerpt
2. Home – Middle Left contains a single featured post with a medim sized sized featured image and shorter excerpt floated to the left of the content area.
3. Home – Middle Right contains a single featured post with a medim sized sized featured image and shorter excerpt floated to the right of the content area.
4. Home – Bottom contains featured posts with a thumbnail sized sized featured images and shorter excerpt displayed in a list format.

How to Configure the Home – Top Widget Area

1. Title: Featured Story
2. Category: Feautured
3. Number of Posts to Show: 1
4. Number of Posts to Offset: 0
5. Order By: Date
6. Sort Order: Descending (3, 2, 1)
7. Show Featured Image: Yes
8. Image Size: home-top (700×400)
9. Image Alignment: None
10. Show Post Title: Yes
11. Show Post Info: No
12. Content Type: Show Content Limit
13. Limit content to 380 characters
14. More Text: [Read More]
15. Be sure to click the “Save” button to preserve your changes.

How to Configure the Home – Middle Left Widget Area

1. Title: Featured Story
2. Category: Feautured
3. Number of Posts to Show: 1
4. Number of Posts to Offset: 1
5. Order By: Date
6. Sort Order: Descending (3, 2, 1)
7. Show Featured Image: Yes
8. Image Size: home-middle (332×190)
9. Image Alignment: Left
10. Show Post Title: Yes
11. Show Post Info: No
12. Content Type: Show Content Limit
13. Limit content to 165 characters
14. More Text: [Read More]
15. Be sure to click the “Save” button to preserve your changes.

How to Configure the Home – Middle Right Widget Area

1. Title: Featured Story
2. Category: Feautured
3. Number of Posts to Show: 1
4. Number of Posts to Offset: 2
5. Order By: Date
6. Sort Order: Descending (3, 2, 1)
7. Show Featured Image: Yes
8. Image Size: home-middle (332×190)
9. Image Alignment: Left
10. Show Post Title: Yes
11. Show Post Info: No
12. Content Type: Show Content Limit
13. Limit content to 165 characters
14. More Text: [Read More]
15. Be sure to click the “Save” button to preserve your changes.

How to Configure the Home – Bottom Widget Area

1. Title: Featured Story
2. Category: Feautured
3. Number of Posts to Show: 3
4. Number of Posts to Offset: 3
5. Order By: Date
6. Sort Order: Descending (3, 2, 1)
7. Show Featured Image: Yes
8. Image Size: home-bottom (150×150)
9. Image Alignment: Left
10. Show Post Title: Yes
11. Show Post Info: No
12. Content Type: Show Content Limit
13. Limit content to 260 characters
14. More Text: [Read More]
15. Be sure to click the “Save” button to preserve your changes.

The following widgets are used in the Primary Sidebar area that displays to the right side of the content area.

• Text Widget
• Text Widget
• Genesis eNews Extended
• Recent Posts Widget

Text Widget Settings:

Be sure to click the “Save” button to preserve your changes.

Text Widget Settings:

Be sure to click the “Save” button to preserve your changes.

Genesis eNews Extended Widget Settings:

Be sure to click the “Save” button to preserve your changes.

Recent Posts Widget Settings:

Be sure to click the “Save” button to preserve your changes.

The Metro Pro theme demo uses a 3 column layout on pages other than the home page.

• Archives Widget
• Custom Menu Widget
• Meta Widget

Archives Widget Settings

Be sure to click the “Save” button to preserve your changes.

Custom Menu Widget Settings

Be sure to click the “Save” button to preserve your changes.

Meta Widget Settings

Be sure to click the “Save” button to preserve your changes.

The Metro Pro theme demo uses the included 3 Footer Widget areas.

Footer 1 Widget Area:

• Text Widget

Be sure to click the “Save” button to preserve your changes.

Footer 2 Widget Area Settings:

• Recent Posts Widget

Be sure to click the “Save” button to preserve your changes.

Footer 3 Widget Area Settings:

• Tag Cloud Widget
• Search Widget

Be sure to click the “Save” button to preserve your changes.

An additonal widget area is included and will display on Single Posts after the content and before the Author Box and Comments area when widgets are added to the area.

When using a widgetized home page it can be helpful to create a general blog style page to display elsewhere on your site. For instructions on how to create this page follow the following steps:

1. Navigate to Pages > Add New in your WordPress Admin Panel
2. Create a New Page named “Blog”
3. In the right sidebar of the Page edit screen select the Blog option in the template dropdown menu.
4. Leave the Content of this page blank, it will not be displayed when using the Blog page template.
5. Publish the page.

Once the page has been published you can view the page to see a blog style list of recent posts. Link to this page in the custom menu of your choice.