1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Specific themes
  8. /
  9. Business Pro Theme Setup...

Business Pro Theme Setup Guide

To set up Business Pro theme like the demo just follow this guide…

Important

  • First, make a new page and call it Home.
  • Do not add any content to this page!
  • Then go to Dashboard > Appearance > Customise > Homepage Settings
  • In the Your homepage displays: section, choose A static page.
  • If you’ve made an empty page called Blog, you can set the posts or blog page of your site here too.

Do NOT skip making this empty home page and then setting the page to be your homepage via the customiser.

If you ignore this step your homepage will NOT work!

Finding the code you need

Several of the front page widgets contain code. You can copy and paste that code directly from the official Business Pro theme documentation page…

On the documentation web page, scroll down to find Front Page 1, Front Page 4, Front Page 5. Then copy the code and past it into your own website.

Don’t forget to change the link in the code for the button in Front Page 4 widget area. The button in Front Page 1 widget area is a jump link, you should not need to make any changes to that piece of code.

The plugins you need

After you install Business Pro theme, a message displays at the top of your WordPress editor. The message lists plugins the theme authors recommend you install if you want to set up Business Pro theme like their demo. I only install plugins if I have to. For instance, I don’t install WooCommerce if I’m not running a shop.

Plugins recommended for Business Pro theme
In your dashboard, click to install any of the plugins recommended for Business Pro theme

These are the plugins I installed when building the site used in this tutorial.

Display Posts
Display a listing of posts using the display-posts shortcode

Genesis Portfolio Pro
Adds default portfolio to any Genesis HTML5 theme.

Genesis Testimonial Slider
The Genesis Testimonials Slider is a simple-to-use plugin for adding Testimonials to your Genesis Theme, using a shortcode or a widget.

Genesis Widget Column Classes
Add Genesis (old Bootstrap) column classes to widgets

Icon Widget
Displays an icon widget with a title and description

WP Featherlight
A Simple jQuery Lightbox

To install any of the recommended plugins just click the plugin’s name in the list. The list appears at the top of your WordPress editor after you install Business Pro theme.

Header area of Business Pro theme front page 1
Header area of Business Pro theme front page 1

Adding the homepage title, intro paragraph and button

  • Go to: Customise > Widgets > Front Page 1
  • Add a Custom HTML widget to Front Page 1 widget area.
  • Widget Title: Create your website with Business Pro
  • Widget Content: Everything you need to create your own beautiful website.
  • Button text: See Our Services

You can copy the button text directly from the Business Pro theme documentation page.

You do not need to change the demo code in the button. But you can if you want to.

The Jump link in the button is a section id. If you want to jump to any other section of the homepage you can find the section ids using Chrome’s inspector tool.

Setting the homepage header background image

Go to: Dashboard > Customise > Header Media

  1. Paste a YouTube video page URL in the box
  2. Add a header image, via the dialogue box, the same dimensions as the video. The demo site uses 1920x1080px.
Choosing the header media in Business Pro theme
Choosing the header media in Business Pro theme

Front Page 2 widget area (The Three icon widgets)

Because you installed the Genesis Widget Column Classes plugin, every widget has a width option and a tick box for the first widget in any row. Choose a width of one third for each widget and tick the First: box for the first icon widget.

The three icon widgets used in Business Pro theme
The three icon widgets used in Business Pro theme
  1. Drag 3 icon widgets in to the Front Page 2 widget area. The icon sits above the widget title and widget content.
  2. The icon size is 3x and you can change the icon, and icon bg colours if you wish. Choose align center, ignore padding and border radius settings.
Drag 3 icon widgets into Front Page 2 of Business Pro theme
Drag 3 icon widgets into Front Page 2 of Business Pro theme

All three widgets need a width setting of one-third. But only the first widget needs the First: tick box ticked.

icon settings for Front Page 2 widget area in Business Pro theme
icon settings for Front Page 2 widget area in Business Pro theme

Front Page 3 Widget area (services We Provide)

Front Page 3 widget area in Business Pro theme
Front Page 3 widget area in Business Pro theme

Front Page 3: contains four widgets

  1. One Custom HTML widget above…
  2. Three Genesis Featured PAGE widgets.
Front Page 3 widget area contains a custom HTML widget and three Genesis Featured Page widgets
Front Page 3 widget area contains a custom HTML widget and three Genesis Featured Page widgets

In the Custom HTML widget…

  1. Type a title in the widget title box.
  2. Type the introductory text in the content box.
  3. Leave the width set to None.
The title and paragraph at the top of Front Page 3 widget area
The title and paragraph at the top of Front Page 3 widget area

The three Genesis Featured PAGE widgets

  1. Set a width of one third. And in the first featured page widget, tick the First: box.
  2. Leave the widget title box empty.
  3. Select any of the pages you have already made, from the drop down list.
  4. Show the featured image, with a size of (Portfolio 620×380).
  5. Image alignment: center.
  6. Show page title.
  7. Show page content.
  8. Content character limit: 150
  9. More Text: the demo leaves this box empty. If you type into this box, the text will display inside a button linking to that featured page.
The Featured Page widget settings for Front Page 3 widget area in Business Pro theme
The Featured Page widget settings for Front Page 3 widget area in Business Pro theme

Front Page 4 widget area (photo background with video player button)

Front Page 4 widget area of Business Pro theme includes a show-video CSS class
Front Page 4 widget area of Business Pro theme includes a show-video CSS class

Front Page 4 widget area contains three widgets…

  • An image widget.
  • A Custom HTML widget.
  • A video widget containing a YouTube URL.
Front Page 4 widget area contains 3 widgets
Front Page 4 widget area contains 3 widgets

Use the image widget to select the image you want to use as the background image for this row.

The Custom HTML widget contains a paragraph of text and two buttons. You must get the code right for the video button, or the video will show before you click the show video button. The best way to do this is to do this is to copy the provided code directly from the official documentation site.

You do not need to change the code you copy, just paste it into your own site.

You must include the show-video CSS class, for the video popup to work. And, internet security packages such as McAfee, may also prevent the the video from playing.

The video popup in Front Page 4 widget area will not work unless you include the show-video CSS class
The video popup in Front Page 4 widget area will not work unless you include the show-video CSS class

Place a video widget at the bottom of Front Page 4 widget area

Drag a video widget into the bottom of Front Page 4 widget area
Drag a video widget into the bottom of Front Page 4 widget area

In the video widget click the add video button.

When the popup appears, select Insert From URL.

Paste the YouTube URL of the video page you want to use.

In the popup window look for Insert URL. Paste the YouTube page's URL in here
In the popup window look for Insert URL. Paste the YouTube page’s URL in here

Front Page 5 widget area (the portfolio section)

The Portfolio section in Front Page 5 widget area of Business Pro theme
The Portfolio section in Front Page 5 widget area of Business Pro theme

Front Page 5 widget area contains a single Custom HTML widget.

The Custom HTML widget contains…

  1. Widget title: Our Latest Work
  2. Paragraph of text: We solve business problems with creative solutions. Like these:
  3. A shortcode (copy this from the documentation site)
  4. Set the width to none.
The Portfolio in Front Page 5 widget area uses a shortcode
The Portfolio in Front Page 5 widget area uses a shortcode

Before you can add the portfolio section to your homepage, you must install the Genesis Portfolio Pro plugin and make six portfolio items. A portfolio item is just like a blog post but you make it by clicking the Portfolio Items tab in the WordPress dashboard, instead of the Post tab.

First make six portfolio items.
Make sure each portfolio item has a featured image attached. Portfolio items that do not have a featured image will not display in your portfolio section on the homepage.

To get the code go to the documentation page
Scroll down to the Front Page 5 section and copy the code you need.

The documentation says you should use two Custom HTML widgets in front page 5 widget area. But their own demo content puts both pieces of code in a single widget. Either way will work.

Front Page 6 (the testimonials)

The Testimonials slider in Front Page 6 widget area of Business Pro theme
The Testimonials slider in Front Page 6 widget area of Business Pro theme

Install the Genesis Testimonials Slider plugin. Then…

Go to: Dashboard > Testimonials > Add New

Add several testimonials.

  1. Type the name of the person who gave the testimonial.
  2. Type the testimonial.
  3. Type their company name or their job title.
  4. Type the star rating they gave your service.
  5. The demo does not include a photo, but it is possible to add one.
Adding a new testimonial to the Genesis Testimonial Slider
Adding a new testimonial to the Genesis Testimonial Slider

Then drag the Testimonials widget into Front Page 6 widget area. You do not need to configure this widget. Provided you’ve made some testimonials, and dragged the testimonials widget into the front page 6 widget area, the testimonials will display on your front page.

The Genesis Testimonial Slider widget does not need configuring. Just drag the widget into the Front Page 6 widget area
The Genesis Testimonial Slider widget does not need configuring. Just drag the widget into the Front Page 6 widget area

Before Footer widget area (text and button with image background, below the testimonials)

The Before Footer widget area in Business pro theme
The Before Footer widget area in Business pro theme

The before footer widget area contains three widgets…

  1. An image widget containing the image that displays as the background of this widget area.
  2. A Custom HTML widget that contains the headline for this row (the widget title), and a paragraph of text.
  3. A second Custom HTML widget that contains the button with classes of “accent alignright”.
The Before Footer widget area in Business Pro theme
The Before Footer widget area in Business Pro theme

If you’ve installed the Widget Column Classes plugin, you can make the button sit to the right of the text. Choose a width of two-thirds for the first Custom HTML widget (containing the text). Choose a width of one-third for the second Custom HTML widget (containing the button code). And, for the first widget tick the small box that says First:

The three widgets in the Before Footer widget area in Business pro theme.

The image widget. Click the button to select a background image
The image widget. Click the button to select a background image

The first Custom HTML widget contains the headline and text on the left hand side of the Before Footer widget area.

Widget title and paragraph text in the Before Footer widget area of Business Pro theme
Widget title and paragraph text in the Before Footer widget area of Business Pro theme

The second Custom HTML widget contains the button code.

The second Custom HTML widget in the Before Footer widget area contains the button code
The second Custom HTML widget in the Before Footer widget area contains the button code

Some more useful tips…

Theme settings

Go to: Dashboard > Appearance > Customise > Theme settings

  • Site Layout (sticky logo, navbar and header)
  • Breadcrumbs
  • Comments
  • Content Archive (blog and archive page settings)

Image sizes

  • Hero images: 1920×1080 px
  • Featured images: 1280×720 px minimum
  • Portfolio images: 620×380 px

Popup video in Front page 4 widget area

You must have the WP Featherlight plugin installed, and use the show-video CSS class for the video to popup when the round video icon is clicked.

Image backgrounds in widget areas

You can place image backgrounds in three of the widget areas.

To select the background image and video for the homepage hero header section go to…

Dashboard > Customise > Header Media

You can also place a background image in Front Page 4 and Before Footer widget areas. Just drag an image widget to the top of the widget area, then select the image to display.

Jump links

Each section of the Business Pro front page has a section id. You can use the Google Chrome inspector tool to find the id of any homepage section, then use a jump link to jump to that section.