Magazine Pro Theme

Thank you for using the Genesis Framework by StudioPress and selecting the Magazine Pro theme. Following are the instructions for setting up your site to resemble the Magazine Pro theme demo.


If you have any trouble, please fill out the contact form for assistance.

You may wish to have the Magazine Pro theme demo open for reference while setting up your theme. The setup documentation for this theme has been broken down into the following sections:

Pre-Installation 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 Magazine Pro theme demo:

Back to Top

Theme Installation

Once you have completed the pre-installation steps and you have the Genesis Framework installed, you may install the Magazine Pro theme. You will find theme installation instructions here.

Back to Top

How to Import Demo Content

For your convenience, an export file of the Demo site is available to assist in the setup of your Magazine Pro theme. You’ll find more information about this in the Importing Demo Content tutorial.

Back to Top

How to Configure the Genesis Theme Settings

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

Back to Top

Color Style
  • Click on the Color Style Dropdown to select an alternative color scheme for your site.
magazine-pro-color-style.png

Back to Top

Default Layout
  • Click a thumbnail to select the Default Layout. The Magazine Pro theme uses the Content > Sidebar option.
magazine-pro-default-layout.png

Back to Top

Content Archives
  1. For Content Archives, the default setting of “Display post content” is used by the demo.
  2. Set the “Limit content to __ characters” option to 380 characters.
  3. Check the “Include the Featured Image?” checkbox.
  4. Select the “thumbnail (150 x 150)” Image Size.
  5. Using the drop down box, select “Previous/Next” for the “Post Navigation Technique.”

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

magazine-pro-content-archives.png

Back to Top

How to Set the Site Title Header Text

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 not displayed when using the Magazine Pro Theme.
  3. Be sure to click the “Save Settings” button to preserve your changes.
magazine-pro-general-settings.png

Back to Top

How to Use a Custom Header Image

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 380 × 90 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.
magazine-pro-custom-header.png

Back to Top

How to Configure the Header Right Widget Area

The Magazine Pro Theme Demo includes a Text Widget with code for a 728×90 Banner Advertisement. Use the Ad code of your choice. The optimal size for this area will be 728px wide and 90px high.

Be Sure to click the “Save” button to preserve your settings

magazine-pro-header-right.png

Back to Top

How to Configure the Navigation Menus

In the Magazine 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 above header area of your site.
  2. A Menu set in the Secondary Navigation Menu location will display immediately below the header area of your site.
  3. Be sure to click the “Save Settings” button to preserve your changes.

Note: The Magazine Pro Theme demo swaps the Menu locations using a menu named “Primary Navigation” in the Secondary Navigation location and a menu named “Secondary Navigation” in the Primary Navigation location in order to allow the Search menu to display at the top of the site using Navigation Extras(see below)

magazine-pro-menu-locations.png

Back to Top

To add the Search Form to the right side of the Primary Navigation area navigate to Genesis > Theme Settings after setting a menu to be used in the Primary Navigation location. Under the Navigation area select “Search Form” in the Primary Navigation Extras dropdown menu.

magazine-pro-navigation-extras.png

Back to Top

How to Configure the Secondary Navigation to Display Left Aligned Menu Item

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

magazine-pro-navigation-right.png

Back to Top

 

  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. Expand the First Menu Item in the Menu
  6. Enter a CSS Class of “first”
  7. Expand the Last Menu Item in the Menu
  8. Enter a CSS Class of “right”
  9. Be sure to click “Save Menu” to preserve your change
magazine-pro-menu-right-class.png

Back to Top

How to Configure the Home Page

The Magazine 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 Magazine 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 contains a single featured post with a medium sized sized featured image and shorter excerpt displayed with two posts horizontally across the page
  3. Home – Bottom contains featured posts with a thumbnail sized sized featured images and shorter excerpt displayed in a list format
magazine-pro-home.png

Back to Top

How to Configure the Home – Top Widget Area
  1. Title: Featured Story
  2. Category: Fashion
  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 (750×420)
  9. Image Alignment: None
  10. Show Post Title: Yes
  11. Show Post Info: Yes
  12. Content Type: Show Content Limit
  13. Limit content to 310 characters
  14. More Text: Continue Reading
  15. Be sure to click the “Save” button to preserve your changes.
magazine-pro-featured-top.png

Back to Top

How to Configure the Home – Middle Widget Area
  1. Title: Travel
  2. Category: Travel
  3. Number of Posts to Show: 2
  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-middle (360×200)
  9. Image Alignment: None
  10. Show Post Title: Yes
  11. Show Post Info: Yes
  12. Content Type: Show Content Limit
  13. Limit content to 145 characters
  14. More Text: Continue Reading
  15. Be sure to click the “Save” button to preserve your changes.
magazine-pro-featured-middle.png

Back to Top

How to Configure the Home – Bottom Widget Area
  1. Title: Featured Story
  2. Category: Featured
  3. Number of Posts to Show: 3
  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: thumbnail (150×150)
  9. Image Alignment: Left
  10. Show Post Title: Yes
  11. Show Post Info: Yes
  12. Content Type: Show Content Limit
  13. Limit content to 215 characters
  14. More Text: Continue Reading
  15. Be sure to click the “Save” button to preserve your changes.
magazine-pro-featured-bottom.png

Back to Top

How to Configure the Primary Sidebar Area

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

magazine-pro-primary-sidebar.png

Back to Top

Genesis – eNews Extended Widget Settings:
magazine-pro-enews-widget.png

Back to Top

Simple Social Icons Widget Settings:
  • Icon Size: 56px
  • Icon Border Radios: 0px
  • Alignment : Align Center
  • Icon Font Color: #222
  • Icon Font Hover Color: #fff
  • Background Color: #eee
  • Background Hover Color: #222
magazine-pro-simple-social-icons.png

Back to Top

Genesis – Featured Posts Widget Settings:
  1. Title: Fashion
  2. Category: Fashion
  3. Number of Posts to Show: 3
  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: sidebar-thumbnail (100×100)
  9. Image Alignment: Left
  10. Show Post Title: Yes
  11. Show Post Info: Yes
  12. Content Type: No Content
  13. More Text: [Read More...]
  14. Be sure to click the “Save” button to preserve your changes.
magazine-pro-featured-sidebar.png

Back to Top

Text Widget Settings:

Use the Ad code of your choice. Optimal size will be 336px wide and 280px high.

magazine-pro-ad-text.png

Back to Top

Tag Cloud Widget Settings:
magazine-pro-tag-cloud.png

Back to Top

How to Configure the Footer Widget Areas

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

magazine-pro-footer-widget-areas.png

Back to Top

Footer 1 Widget Area:
  • Text Widget

Use the text/html of your choice.

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

magazine-pro-footer-1.png

Back to Top

Footer 2 Widget Area Settings:

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

magazine-pro-footer-2.png

Back to Top

Footer 3 Widget Area Settings:
  • Search Widget
  • Tag Cloud Widget

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

magazine-pro-footer-3.png

Back to Top

After Entry Widget Area

An additional 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.

Back to Top

How to Create a Blog Page

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.

magazine-pro-blog-page.png

Back to Top

Congratulations! You are now ready to begin adding content and personal touches to your new Magazine Pro and Genesis powered website. If you run into any problems along the way or have questions, please fill out the contact form and let us know how we can help.

Back to Top