• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Specific themes / Smart Passive Income Pro Theme: set up guide

Smart Passive Income Pro Theme: set up guide

Smart Passive Income theme from StudioPress
Smart Passive Income theme from StudioPress

The easiest way to set up Smart Passive Income Pro theme is to use my StudioPress set up wizard. I explain how to do that in this tutorial.

Smart Passive Income Pro theme set up video one

Smart Passive Income pro theme set up video two

Configuring Smart Passive Income Pro theme

Once you’ve got the basic site set up with the widget areas configured in the same way as the StudioPress demo site, you’ll need to configure the widgets to suit your own needs.

Smart Passive Income Pro theme is configured by putting widgets into widget areas.

A lot of the widgets used are text widgets. You’ll need to use some HTML code to get the same look as the StudioPress demo. In case you didn’t use my set up wizard, I’ve included some code that you can copy, customize and paste into your own site.

I’m going to explain the settings for each widget area. Just follow along to set up your own theme to look like the demo version

Go to Dashboard > Appearance > Widgets

Header Right widget area

The Header Right widget area displays opposite your site title. It’s at the very top of your website on the right hand side.

The demo version of Smart Passive Income theme uses a text widget in this widget area. The text widget contains one line of text and a button. The text is wrapped in a span class of tagline. A strong tag is also applied to this line of text. The button is a simple HTML text link with a class of button.

Header right widget area in Smart  Passive Income Pro theme

Primary Sidebar

There is only one sidebar available in Smart Passive Income Pro theme. You can display the sidebar on the left or the right of the content area. Or you could choose a full width layout. If you don’t know how to do that see my Genesis Theme Settings page.

The StudioPress demo site uses four widgets in the primary sidebar widget area…

  • Genesis eNews Extended widget
  • Simple Social Icons widget
  • Search widget
  • Recent Posts widget

SPI primary sidebar widget area

We now move on to the Front Page widget areas, these include…

  • Front Page 1
  • Front Page 2
  • Front Page 3 – Top
  • Front Page 3 – Bottom
  • Front Page 4

Front Page 1 widget area

The StudioPress demo site uses a Custom Menu widget in the Front Page 1 widget area. First set the large text you want to display. You do this by typing into the Title: box of the Custom Menu widget. Then choose the menu you want to display from the drop down list. Obviously you have to make a menu before it becomes available for you to choose in the drop down list.

Smart Passive Income Pro theme Front Page 1 widget area

Front Page 2 widget area

On the demo site, in Front Page 2 widget area, you will see a large laptop image with a block of text and a big green button.

Front Page 2 widget area contains one Text Widget, one paragraph of text and a HTML link with a class of button.

Smart Passive Income Front Page 2 widget area

Front Page 3 – Top (widget area)

The Front Page 3 – Top: widget area contains four Text Widgets. In the demo site, these four text widgets do not have any text in the Title: box.

The first text widget in The Front Page 3 – Top widget area contains a heading wrapped in h2 heading tags.

The other three text widgets in The Front Page 3 – Top widget area contain…

  • An image, aligned left
  • A heading in h4 tags
  • A line of text with a span class of small

On the Smart Passive Income Pro theme, StudioPress demo site, the three small square logos for Rainmaker, StudioPress and Synthesis are 2x the visible size.

The images are 160 pixels square. But are set to display at 80 pixels square (width=”80″ height=”80″). You can do this by editing the image code in the WordPress editor. The images are also set to align left.

Smart Passive Income Pro theme Front Page 3 widget area

Front Page 3 – Bottom (widget area)

Front Page 3 – Bottom widget area contains two Text Widgets.
In the first text widget paste the code for an image. The demo site uses an image of Pat Flynn’s podcast player. The easiest way to make the code you need to place an image in a widget area, is to use the wordPress post editor. Once you’ve made the code, in text view, just copy the code and paste it in to your text widget.

The second text widget in Front Page 3 – Bottom widget area.
In this area the StudioPress demo site uses…

  • A title in the Title: box
  • A paragraph of large bold text using a paragraph class of jumbo
  • Followed by a single line of text with no HTML tags applied
  • And finally, a button made from a text link with a class of button

Front Page 4 widget area

This is the main content area, of the Smart Passive Income Pro theme, home page.
It has a white background.

The demo site uses four Genesis Featured Post widgets in Front Page 4 widget area. These Featured Post widgets display a grid of four blog posts from your site. To make your site look like the demo configure the Featured Post widget settings to display…

  • Category: All Categories
  • Number of posts to show: 1
  • Show post title: Yes
  • Show post info: Yes
  • Content type: Show content limit
  • Limit content to: 280
  • Show featured image: NO

Smart Passive Income Front Page 4 widget area

Very Important Note!

All four of these featured Post widgets are set up in the same way…
EXCEPT FOR THE NUMBER OF POSTS TO OFFSET!

The first Featured Post widget should have a, Number of posts to offset: 0.
The second Featured Post widget should have a, Number of posts to offset: 1.
The third Featured Post widget should have a, Number of posts to offset: 2.
The fourth Featured Post widget should have a, Number of posts to offset: 3.

If you discover that the same blog post is being displayed more than once, in the Front Page 4 widget area. Check the Number of posts to offset: setting.

Also check to make sure you have published at least four blog posts on your site. Even WordPress can’t display posts that you haven’t published yet :-)

SPI Number of posts to offset

Footer Banner widget area

In the demo site the footer banner uses a text widget with…

  • A title in the text widget’s Title: box
  • A paragraph of text with a, p class of jumbo
  • And a text link with a class of button

SPI Footer Banner widget area

Footer Widgets, widget area

The demo site displays six small logo images, in a straight line, in the Footer Widgets widget area.

This layout is built using one text widget and Genesis Column Classes HTML code.

If you used my set up wizard Widget Import & Export file, the code you need is provided. But! You will need to make the image code, using the WordPress post editor, and carefully paste that code inside the Column Classes HTML. I show you how to do that in the video.

SPI Footer widgets

After Entry widget area

The After Entry widget area displays after single blog posts.
It does not display on the front page, single web pages (pages are different to posts, remember) or archive and blog listing pages.

In the demo site for the Smart Passive Income Pro theme, After Entry widget area contains…

  • A text widget
  • With a title in the widget’s Title: box
  • Some paragraph text
  • A text link with a class of button.

SPI After Entry widget area

If you got this far, congratulations

The Smart Passive Income Pro theme by Pat Flynn and StudioPress makes an excellent starting point for many different types of website. Not just sites based around affiliate sales.

And don’t forget, the way the demo site is set up is just one suggestion. Many of the widget areas used in the Smart Passive Income Pro theme are flexible. Which means you get different layout designs depending on how many widgets you place in each widget area.

WordPress Customizer

You can use the WordPress Customizer to easily change the main colors used in the home page. And you can replace the large laptop background image near the top of the home page.

Add all of these options together with a little bit of imagination. You could soon have a great looking site based on Pat Flynn’s design. StudioPress code. And customized just enough so that it looks like your own.

P.S. If you do decide to buy the Smart Passive Income Pro theme. Please consider using my affiliate link. It really would be much appreciated :-)

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top