Getting Started
Learn how to install, configure, and use the theme.
Theme Installation
You can install the theme automatically or manually. It’s better to install TheSaaS on a fresh WordPress installation.
Auto Installation (recommended)
The easiest way to install (and later update) your theme is to use the Envato Market plugin. Just download the plugin and follow the installation guide from Envato.
Manual Installation
Extract the zipped package downloaded from ThemeForest to your desktop. In the extracted package you will find thesaasx.zip which is the WordPress theme file.
You can install the theme one of two ways:
-
WordPress- Navigate to Appearance > Themes in your WordPress administration panel.
- Click the Add New button at the top of the page.
- Click the Upload theme button at the top of the page.
- Select the theme .zip file in the theme package downloaded from Themeforest and click Install Now.
-
FTP- Connect to your website host using your FTP client.
- Go to your default WordPress themes folder (/wp-content/themes/) and upload the non-zipped theme folder into that folder (/wp-content/themes/).
Activation
After uploading the theme, you must activate it. For this purpose, navigate to Appearance > Themes and fine TheSaaS X theme. Move your mouse on the theme to see “Activate” button. Pressing this button activates the theme.
Plugin Installation
After the theme’s activation you’ll see a banner above all the content notifying you to install the theme’s recommended plugins. The only plugin you need to install is TheSaaS X; an exclusive plugin for our theme which is responsible to manage all the blocks, custom posts, and customization options. To install TheSaaS X plugin:
- Click on Begin installing plugin.
- In the new page, click install link below the name of TheSaaS X.
-
The final step is to activate the plugin. Open Plugins > Installed Plugins, find “TheSaaS X” and click Activate link.
Installing Starter Content
Since TheSaaS X includes starter content, you should visit the customization page before creating any content. So navigate to Appearance > Customize and press “Publish” button in top-right side of customization panel. After this step, the theme create few pages, set some of the customization options, and create several navbar, header, and footer for getting started.
Congratulations! You successfully installed and configured your theme. If you want to learn more about the theme, we highly suggest to read the rest of content.
Customization
All of the following configurations are inside the Customizer. You can open Customizer by clicking on Appearance > Customize menu. We overview some of the available options.
Site Identity
Upload your logos, change site title, tagline and site icon from here.
Site Configuration
- Google Map: If you’re planning to have a map, you should get a Google Map API Key
- Google Analytics: If you want to track your page views using Google analytics service, provide your Tracking ID which is a value in format of UA-12345678-9
Style
Here’s the place we put most of the design customization options. Currently, you can only change the website fonts, but we’ll add more options regularly.
Layout
This is the place to set your overall website layout such as navbar, header, and footer. Each option has a complete description to let you know where the layout content would displays.
If you followed the theme installation correctly, we’ve already created several layout content (navbar, header, footer) and assign them in this section. Otherwise, you need to create them on your own. For this purpose, from your dashboard, mouse over the “Layout” menu and click any of the layout types available to see the list of items or create new one.
Blog
We have several options to change the design of your blog archive pages or posts. You can set the default blog layout to Grid, Classic, or List as well as show or hide the sidebar. Please take your time to see the options.
Homepage Settings
If you correctly followed the theme installation and activation, TheSaaS X has automatically set this values. By default, it create two pages:
- Home: The front page of your website. You should use the page builder to create content for this page.
- Blog: This is the post pages. It displays the latest posts from your blog. You don’t need to modify this page at all, unless you need to change the title or subtitle.
To make sure this pages has created, click on Static Front Page. Make sure the inputs has following values:
- Front page displays: A static page.
- Front page: Home. If it’s not, click “Add New Page” and create a page with this name.
- Posts page: Blog. If it’s not, click “Add New Page” and create a page with this name.
Additional CSS
A css code to be added to all of your pages. Very useful to customize the design of your website in case we don’t have a customization option for.
Additional Javascript
You can write a javascript code to be run on every pages. Please note that we’ll put this code inside a <script> tag and wrap it by “jQuery(function($) { YOUR_CODE });”. This makes sure that your code will execute after the document is ready.
Developing Your Pages
TheSaaS X completely rewritten on top of WordPress 5 and Gutenberg page builder. It’s so important to learn about the new page builder if you have not used it before. So we highly recommend to take a look at Gutenberg and learn about the interface.
We developed hundreds of blocks on top of the Gutenberg page builder with a lot of customization options. Our blocks are categorized in several categories such as Cover, Header, Blog, etc. and all of them start with a “The” keyword, so they won’t be confused with the default blocks or blocks from the other plugins. Also, our blocks has a different UI in the block inserter which has an image preview.
Once you insert any of our blocks, you’ll have bunch of block options to customize the section. All the other customization options for the components inside the section such as buttons and images, you can click on the component to reveal the component toolbar. The toolbar has all the required customization options to make your changes in place.
Document Options
Apart from block sections, we add few options to the document options tab in case you need them.
Extra Options
We have a subtitle option below “Extra Options” which is basically an input to write a subtitle for the page. Most of our header blocks have a place for subtitle text. So if you provide a subtitle for your page, we’re able to display it in the page header.
Layout
While you can set the layout content from Appearance > Customize > Layout section, we know that sometimes you need a customized layout option for a specific page; for example using another navbar or even completely remove the navbar. You can customize these options from the select inputs in the Layout section.