Installing SmallBiz using the WordPress dashboard

1. Connect to the member area, expand the SmallBiz theme section and download the SmallBiz.zip file.
2. Inside your WordPress dashboard, navigate to Appearance ⇨ Themes ⇨ Add New ⇨ Upload ⇨ and load the .zip file you just downloaded.
3. Once the upload is finished click on “Activate”. With that done click on the blue Install sample data button.

Installing with FTP

Installing via FTP is necessary on servers that aren’t optimized for WordPress and can often interrupt the installation process because of the long execution time. Good news is that this type of install isn’t particularly hard, just longer compared to installing from the back-end.

• Connect to the member area and download the SmallBiz.zip file.
• Extract the file using software like 7-Zip. Use the Extract Here option.
• Assuming you read the above linked FTP tutorial, navigate to /wp-content/themes/ on your server and upload the extracted theme folder
• Login to your WordPress dashboard and go to Appearance ⇨ Themes. Activate the SmallBiz theme
• While in the Appearance ⇨ Themes section, click on the blue “Install sample data” button to populate your site with dummy data and make it look like our demo.

 

The homepage

To make your homepage look just like the one inside the image below make sure you load the theme’s sample data. You can do that from Appearance ⇨ Themes ⇨ Install sample data (button). If that doesn’t help you might have to tweak a WordPress setting. Click here for more details.

1 – The logo section

To change your logo go to Appearance ⇨ Customize ⇨ Site Logo ⇨ Upload image for logo. Default logo image size is 196×48 pixels. Try to make your logo roughly the same size.

To display your websites tagline below the logo expand the “Site Title & Tagline” section and check the “Display Tagline” option.

2 – Header Strip widget area

Edit this text by going to Appearance ⇨ Widgets. Expand the Header Strip area and edit the Text widget inside that area. To protect your email from spam I recommend you insert a link to your contact form instead of your email address.

Do that by swapping the following line

<li class="mail"><a href="mailto:[email protected]">[email protected]</a></li>

With this

<li class="mail"><a href="your_contact_form_url">Contact Us</a></li>

3 – Primary menu area

You can assign a menu here by going to Appearance ⇨ Menus and creating a menu. When you’re done select “Primary Menu” under Menu Settings ⇨ Theme Locations. For details on how to create custom menus watch the following video…

4 – Homepage Banner area

Edit this content by going to Appearance ⇨ Widgets and expanding the Home Page – Full width banner area. Edit the Text widget within this area and add your own content.

To make the code easier to edit I recommend increasing the size of the text box. You can do that by pulling on the bottom right corner of the box.

5 – Full width area below the banner

Edit this section by going to Appearance ⇨ Widgets. Expand the Home Page – Below Full width banner area and edit the “Success Process” widget. Define your own titles and content for each element. Add new entries by clicking on + Add More button.

6 – Homepage Content area

Edit this section by going to Appearance ⇨ Widgets. Expand the Home Page – Content area and edit the three widgets located in there.

How does the “Our Services” widget work?

Entries inside this widget correspond with pages in wp-admin ⇨ Pages. “Brand Identity”, “App Interface Design”, etc are page titles while the text beneath those titles is the content within each page. Page IDs are used to control which exact pages are used in the widget.

[our_service post_id=11 icon_class="icon_puzzle"]

In the above line 11 is the ID of the page which will be used inside the widget.

To get a page ID go to wp-admin ⇨ Pages and hover over a page you want to use. The ID will be revealed inside the link at the bottom of the page. You can learn more about obtaining IDs by watching this video. The video is focused on categories, but the process is the same for pages.

Where can I see which icons available for the “Our Services” widget?

You can see which icons are available (including their class names) inside the following blog post. Once you open the link scroll down to the “Complete List Of Class Names” section.

Where can I upload images for the Testimonials and Slider widgets?

Upload your image from wp-admin ⇨ Media ⇨ Add New and copy its File URL (not the attachment URL). Once you have the URL just paste it inside the widget.

7 – Homepage Sidebar area

Edit this section by going to Appearance ⇨ Widgets. Expand the Home Page – Sidebar area and edit the widgets located in that area.

8 – Above Footer area

Edit this section by going to Appearance ⇨ Widgets. Expand the Home Page – Above footer Fullwidth area and edit the Text widget located in that area.

How to make the “View More” button open in a new window?

You can do that by changing the following line of code from this

<a href="#" class="btn btn-primary">View More</a>

To this

<a href="#" target="_blank" class="btn btn-primary">View More</a>

9 – Footer areas

Edit this section by going to Appearance ⇨ Widgets. Expand the Footer Column 1, Footer Column 2 and Footer Column 3 areas and edit the widgets located in that area.

Where can I find the icon codes for the Social Media widget

The social media widget utilizes Font Awesome icons. To use a specific icon just click on it on the Font Awesome site. The page that opens will contain the code you need to use to display the icon. The code will look something like this…

<i class="fa fa-cloud-download"></i>

10 – The credits

You can edit this section from Appearance ⇨ Customize ⇨ Footer.

Individual posts

This is the page that opens when you visit a post created from wp-admin ⇨ Posts.

1 – The post title

This is the title you set while creating the post.

2 – The breadcrumbs

This is the path to your post. If you want to remove this add the following CSS code to Appearance ⇨ Custom CSS Editor

.page-heading .breadcrumbs {
display: none;
}

3 – Post content

This is the content you set while creating the post. Feel free to style your posts with HTML and inline CSS.

4 – Post detail page sidebar

Edit this section by going to Appearance ⇨ Widgets. Expand the Blog Detail Page – Sidebar area and edit the widgets located in that area.

Where can I find the icon codes for the Social Media widget

The social media widget utilizes Font Awesome icons. To use a specific icon just click on it on the Font Awesome site. The page that opens will contain the code you need to use to display the icon. The code will look something like this…

<i class="fa fa-cloud-download"></i>

How can I edit the information displayed by the Author widget?

You can do that by editing your own WordPress profile. Go to wp-admin ⇨ Users ⇨ Your Profile. To set an image use the gravatar service.

5 – Post author details

This area displays the same information as the “Author Widget”. You can edit the info that displays here from Users ⇨ Your Profile.

If you want to remove this area go to Appearance ⇨ Custom CSS Editor and enter this code

.author_cont {
display: none !important;
}

6 – The comments section

Comments submitted to your posts can be approved or modified from wp-admin ⇨ Comments. If you don’t want to allow comments on your posts go over to Settings ⇨ Discussion and disable the “Allow people to post comments on new articles” option. To disable comments on existing posts go wp-admin ⇨ Posts. Click on Quick Edit under each post and disable the Comments option. Use the Bulk Edit option if you have a lot of posts.

Setting up a Blog page

The Blog is essentially just a category holding individual blog posts. Follow these steps to create a Blog…

1. Create a new category in Posts ⇨ Categories and name it Blog.
2. Add posts to that category by going to Posts ⇨ Add New.
3. By adding the posts our Blog page was automatically created. You can see it by going to Posts ⇨ Categories and clicking on the “View” link next to your Blog category.

I also recommend adding this Blog category to your navigation menu. Do that by going to Appearance ⇨ Menus and creating a new menu. Expand the categories dropdown, choose blog and hit “Add to menu”. For details on creating custom menus watch our video tutorial.

 

Changing colors

Changing colors in SmallBiz doesn’t require your to touch any code, you can do it from the Appearance ⇨ Customize ⇨ Colors section.The available options are…

• Primary color – Affects the banner and footer background, heading link color, etc.
• Secondary color – Changes the color of the top header strip, menu highlight color, banner buttons, icon color, etc.
• Content color – Changes the color of your text on most pages.
• Body Background – Changing this will change the background of the whole theme. This includes the stuff inside and outside of the main content area (the container).
• Title Color – Changes the title color for all pages, posts and widgets.

General customization tips

If you’re looking to drastically customize the theme then the above mentioned options won’t be enough. In case most of your changes are design-related, check out the Appearance ⇨ Custom CSS Editor section. It allows you quickly overwrite any CSS code. You’ll find more details on how to perform these overwrites in this article.

If however you plan on changing both design and functionality, consider creating a child theme. You’ll find good instructions on this subject in this WPengine post.

 

SEO plugins

To optimize your content for search engines I highly recommend installing one of these two SEO plugins.

• WordPress SEO by Yoast (detailed instructions)
• All in One SEO Pack (detailed instructions)

These plugins will work with SmallBiz in pretty much the same way as with other WordPress themes (there are no theme-specific features). For instructions on setting up each plugin just click on “detailed instructions” in the list above.

Contact form plugins

For setting up contact page (so visitors can get in touch) we’ve provided support for two plugins

• Contact Form 7 (free)
• Gravity Forms (premium)

Once you create the contact form (using one of the plugins) simply insert the provided shortcode inside any page or post inside the theme.

 

How to disable the pop-in effect/animations?

To prevent the scrolling pop-in effect and make all elements show all the times go to Appearance ⇨ Custom CSS Editor and insert the following code

* .cbp-so-init .cbp-so-side {
    opacity: 1 !important;
}
* {
    transform: none !important;
    transition: none 0s ease 0s !important;
}

My homepage isn’t showing my widgets, how to fix that?

The homepage itself is a regular WordPress page created with the Home Page page template. This page (with the “Home Page” page template) is normally created during theme activation and automatically assigned as the sites front page. Please follow these steps if this page wasn’t created automatically:

1. Go to Pages ⇨ Add New. Enter the page title as “Home” (for consistency sake, this isn’t really important) and on the right side, under Page Attributes ⇨ Template choose the “Home Page” template. Publish the page.
2. Navigate to Settings ⇨ Reading and under “Front page displays” choose “A static page”. In the “Front page” dropdown choose “Home”.
3. Go to Appearance ⇨ Widgets to populate the homepage with widgets.

Which sidebar area is displayed on regular pages?

It’s the “Primary Sidebar” widget area. Widgets added to that area should start showing up on regular WordPress pages (those created from wp-admin -> Pages).

How to translate SmallBiz in a different language?

For details instructions on how to translate SmallBiz (or any other Templatic theme) open this translation tutorial.