Thank you for using the Studio Pro theme! If you have any trouble while setting up your new theme, please refer back to this page for helpful tips and documentation on how to get started or simply contact us. You may want to have the Studio Pro Demo open in another tab to help you while you set up your new site.
Installing the Genesis Framework and Studio Pro follows the same process for installing any WordPress theme, except that you have to do it twice! First, you install the Genesis Framework and then you install Studio Pro. Here are the steps to follow:
- Navigate to Appearance > Themes from the WordPress menu
- Click Add New
- Click Upload Theme
- Click Choose File, find and select your zipped copy of the Genesis Framework on your computer
- Click Install Now
After installing the Genesis Framework, you can now install Studio Pro. It’s the same process you’ve just gone through to install the Genesis Framework:
- Navigate to Appearance > Themes from the WordPress menu
- Click Add New
- Click Upload Theme
- Click Choose File, find and select your zipped copy of Studio Pro on your computer Click Install Now
- Lastly, click Activate in order to immediately start using Studio Pro
After you’ve installed both the Genesis Framework and Studio Pro, you’re ready to activate your theme. It is not necessary to activate the Genesis Framework theme as it will run quietly in the background. Be sure the Genesis Framework is installed before you activate Studio Pro.
Step 1. Install Recommended Plugins
Studio Pro is optimized to work with the following plugins. Before you begin, you will need to install and activate them. Studio Pro will display a notice in the admin area to make it easier to install these plugins.
- Easy Widget Columns
- Featured Custom Post Type Widget for Genesis
- Genesis eNews Extended
- Genesis Testimonial Slider
- Genesis Portfolio Pro
- Google Map
- Kirki Toolkit
- Ninja Forms
- Simple Social Icons
- Widget Importer and Exporter
- Widgetized Page Template
- WordPress Importer
- WP Featherlight
Studio Pro will display a notice in the admin dashboard listing the recommended plugins listed above. If any of the required plugins have not been installed, they will appear at the top of your dashboard. To begin activating these plugins, click on the BEGIN INSTALLING PLUGINS option. A new screen with each plugin listed will be displayed. If you already have these plugins installed, they will show as active. Check the box for each plugin to install and then select INSTALL from the dropdown box. The successful installation screen will be displayed. At the bottom, click on the RETURN TO PLUGINS option. Again select each of the plugins that you just installed to activate them. Click ACTIVATE and then follow the instructions throughout the rest of this tutorial to configure them like the demo.
Step 2. WooCommerce Setup
If you have installed the WooCommerce plugin, a setup wizard will appear on the screen. The theme demo content includes the necessary pages so the WooCommerce setup wizard Page Setup step is not required if you plan to use the themes demo content. Simply skip the Page Setup step, then continue the setup wizard as normal. Important: You will need to manually choose the Shop, Cart and Checkout pages. To do this please follow the below steps:
- Complete Step 3 then do the following;
- IMPORT DEMO CONTENT (steps below)
- Navigate to WooCommerce > Settings
- Navigate to the Products tab
- Click the Display link
- Select “Shop” as the Shop Page from the dropdown menu
- Navigate to the Checkout tab
- Select the corresponding Checkout Pages
You should also disable Lightbox for product images if using the WP Featherlight plugin (recommended). This is done by going to WooCommerce > Settings > Products > Display and uncheck ‘Product Image Gallery’.
Step 3. Import Demo Content
Important: Before installing the demo content, I strongly recommend deleting any existing content on your site that is not required including Posts, Pages, Comments and Widgets. Studio Pro comes with all of the content used in the demo.
Install Sample Content
Once the theme and recommended plugins have been installed you are ready to upload the sample content. To upload the demo content navigate to Tools > Import and select the sample.xml file inside of the xml folder that is included with the theme. Follow the steps and the demo post content will be imported. Please note that images are not imported and have to be manually uploaded to posts, pages and portfolio items.
Install Widget Content
Please remove all existing widgets before importing demo widget content.
Navigate to Tools > Widget Importer & Exporter. Click the ‘choose file’ button and then select the widgets.wie file that is inside of the /demo/ folder of your theme. Once this has been uploaded you should see a success message of the imported widgets. You should also ensure that any existing widgets are in the correct widget area.
Be sure that any existing widgets are in the correct widget area. You may also need to set the menu for the Custom Menu widget in the Footer Widgets widget area.
Step 4. Configure Theme Settings
After the demo content has been installed, navigate to Appearance > Customize. Select the Static Front Page section and change this setting to “A static page”, then select ‘Hi, we’re Studio Pro. A digital agency.’ for the Front Page option and ‘Blog Standard’ for the Posts Page option. The page may need to be refreshed after this to see changes.
Step 5. Header Setup
To edit your Site Title, go to Appearance > Customize > Site Identity. Type in your site title, tagline (only displays in a browser tab, not on the site itself), and then upload your favicon under the site icon area. Suggested size for your favicon is 512 x 512px.
If using a logo, uncheck the ‘Display Site Title & Tagline’ option.
To add your own logo, go to Appearance > Customize > Site Identity. In order for your logo to line up correctly, I recommend uploading an image size of approx 400 x 100px.
Click Save & Publish when done.
To create your own menu please follow the steps below:
- Navigate to Appearance > Menus
- Click create new menu
- Select the pages you would like to add (If you don’t have any pages yet, you’ll need to add them under Pages > Add New)
- Click Add To Menu
- At the bottom of the menu, where it says “Menu Settings”, check the box for the “Footer Menu”
- Click Save Menu
To configure the navigation menu do the following:
- Navigate to Appearance > Menus
- Select the menu you would like to edit from the dropdown and click select
- Scroll down to Menu Settings and check the display location checkbox
- Click save menu
Step 6. Hero Section
To set a default Hero Image navigate to Customizer > Hero Section and upload your hero image. The hero image is used as the background image inside the Hero Section of each page. The selected image will be used as the background image if no feature image is set for the page. If a featured image is set then it will override the header image setting. You can set individual featured images on single pages or posts from the admin.
You can also upload a video or enter a YouTube url that will display on the front page. The theme demo uses this placeholder YouTube url: https://youtu.be/BsafeSHN_II
Step 7. Widget Areas
All widget content is included with the theme download inside the /demo/ folder. To install the demo widget content please ensure that the Widget Importer & Exporter plugin is active. Upload the widgets.wie file located in the /demo folder. This should be completed in step 3.
Site-wide widget areas
Studio Pro comes with 3 site-wide widget areas. These include:
- Header Right
- Footer Widgets
Studio Pro uses the Easy Widget Columns & Widgetized Page Template plugins to create widgetized page layouts. To create a widgetized page simply change the pages template to ‘Widgetized Template’. This will then create a new widget area that you can edit in Appearance > Widgets. To create a widget row, add a – Widget Row – widget to the desired widget area. Then add the widgets you want in that row underneath the widget row widget. You can then set the widths of each widget by changing the Column Width dropdown at the bottom of the widget and then click save. The theme demo has 2 widgetized pages, the homepage and the Services page.
To create a row of icons, the Easy Widget Columns plugin must be installed and activated.
First, create a new – Widget Row – in the desired widget area.
To create a single icon box, add a new Text Widget under your – Widget Row – and then select the widget’s column width. The full list of available icons can be found here https://demo.seothemes.net/studio-pro/features/icon-styles/
If you require any help understanding the widget columns please contact us and we will gladly help you get set up!
To create a widget title create a new – Widget Row – and give it a class of ‘title’ in the Advanced options section. Then place a Text Widget below it with a 1/1 column width. Enter your title in the text box, a h2 tag is suggested.
Step 8. Customization
Studio Pro includes the following customization options:
- Background Color
- Header Color
- Sticky Header Color
- Button Color
- Accent Color
- Gradient Left Color
- Gradient Right Color
- Overlay Text Color
- Overlay Opacity (range slider)
The typography settings can be changed by navigating to Appearance > Customize > Typography and then configure the fonts to your liking. Choose from the full range of Google Web Fonts.
The sticky header can be disabled by going to Appearance > Customize > Site Layout and changing the setting.
Step 9. Creating a Portfolio
The Genesis Portfolio Pro plugin is required to display a portfolio like the demo. Any portfolio item you create will be displayed on the portfolio page. If a portfolio item has no featured image it won’t be displayed. To create a new portfolio item navigate to Portfolio > Add New Item. Add a title, description and featured image. To enable the portfolio filter functionality simply assign a category to a post. Any categories will then be displayed on the portfolio page which will act as filters for the portfolio items.
To change the title of the portfolio page, navigate to Portfolio > Archive Settings and update the archive headline. From here you can also add an archive description.
Step 10. Subtitle/Intro/Description
The subtitle feature allows you to display a short description about any post or page. To do this simply navigate to the post/page editor for the desired page. Find the ‘Excerpt’ box and enter your subtitle. If the excerpt box is not visible, click on the ‘Screen Options’ button in the top right corner of the screen and check the ‘Excerpts’ checkbox.
Step 11. Creating a Gallery
The Studio Pro Gallery page uses the default WordPress gallery feature. There are two ways to create a gallery, with a shortcode or with the visual editor. To get started, create a new page for your gallery. Then switch the WordPress page editor from “Text” to “Visual” if it is not already. When it is in Visual mode, click on the Add Media button. The “Insert Media” window will pop up and on the left hand side there is a “Create Gallery” option. Click on create gallery and add or upload as many images as you like. Configure the Gallery settings and click Insert Gallery. Once this is done simply publish the page. Your gallery will now display on your new page, and, if the Responsive Lightbox plugin is active, it will automatically add lightbox functionality to all of the gallery images.
Step 12. Configure Plugins
Genesis Enews Extended
The Genesis eNews Extended plugin creates a new widget. Installation instructions can be found here
Genesis Testimonial Slider
The Genesis Testimonial Slider will create a new custom post type called Testimonials. Once installed and activated, a new menu item will appear in the WordPress admin area for ‘Testimonials’. When you add a new testimonial it will automatically be displayed where ever the Testimonials widget or shortcode is placed.
It also adds a new menu item under the ‘Genesis’ menu item called ‘Testimonials’. To setup your site the same as the theme demo please ensure the following options are set to:
- Effect: slide
- Auto play: yes
- Show controls: yes
- Pause on hover: no
- Loop: yes
- Speed: 6000
- Columns: three
The Kirki Toolkit provides additional customizer options. It will not break anything if not installed but you will have limited customizer functionality.
Ninja Forms is used in the theme demo for the contact form on the contact page.
Responsive Lightbox requires no configuration after it has been installed and activated. It automatically adds a lightbox to any image in the WordPress gallery shortcode.
Simple Social Icons
Simple Social Icons creates a new widget for displaying icons. To add Simple Social Icons to a widget area, navigate to Appearance > Widgets and drag the Simple Social Icons widget into the desired widget area. The theme demo has 2 locations, Header Right and Footer Widgets widget areas.