1.File Includes
Created: 30/04/2014
Latest Update: 15/08/2014
By: ThimPress
Email: [email protected]
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here. Thanks so much!
All you need to install our theme is the theme zip file squareroot.zip
2.Installation
2.1.Download Theme
Get the Squareroot theme installation package from your account downloads page and save it to your desktop.
2.2.Upload Theme
You can upload the Squareroot file in two ways:
2.2.1.Via WordPress
Step 1. Visit Dashboard > Appearance > Themes > Add New.
Step 2. Click Upload Theme.
Step 3. Browse the squareroot.zip file (not the theme package zip file) on your computer and click Install Now.
Step 4. Activate Squareroot theme.
Step 5. Enable Thim Core to activate the core of Squareroot and start importing the demo data process.
*NOTE: One possible problem when importing Demo is that the theme is missing the style.css style sheet.
Solution: You can refer to the error correction guide here.

2.2.2.Via IE (Internet Explorer) FTP
Step 1. Login to your FTP account via FTP software to access your host web server.
Step 2. Extract squareroot.zip file.
Step 3. Upload the extracted folder squareroot to the wp-content/themes folder.
Step 4. Activate Squareroot theme in Dashboard > Appearance > Themes.
Step 5. Enable Thim Core to activate the core of Squareroot and start importing the demo data process.
2.3.Tips
This way you will find exact styles applied for each tag and trust me, it will make your life easier. It also has a console to track JS errors.
Here you can see a demos using Firebug http://www.youtube.com/results?search_query=firebug .
Just download it and test it, you won’t regret it, I promise you!
2.4.Install Required Plugins
You should be navigated to the Install Required Plugins page. With SquareRoot you will need to install 3 plugins: Contact Form 7, Meta Box, and Pricing Table Plus.
Click on the box beside “Plugin” label to select all plugins in the list, then choose “Install” from the drop-down list at the top and then click “Apply”.
The installing process status will be shown in your browser. It may takes a few minutes, so please be patient.
When the notice “All installations have been completed” appears, click on the Return to Required Plugins Installer link under it to turn back to the plugin list. Click on the box beside the Plugin label again to select all plugins and choose “Activate” this time.
2.5.Import Demo Content
I. The first way: Importing by one click
This is priority to use for importing fully demo content.
The progressing will display on import status bars so you will know when it is finished and your data is ready.
NOTES: IMPORT DEMO DATA BY ONE-CLICK WAY WILL NOT INCLUDE IMAGES FROM OUR DEMO SITE. ALL IMAGES WILL BE REPLACED BY SAMPLE IMAGES.
II. The second way is recommended to use if you have any trouble in the first way.
But if you decide to build your website from scratch without our demo content, you can skip it an move to the next part: Setup Front page.
The following actions will import some dummy posts and pages from the live preview:
- Go to
Tools » Import
- Select “WordPress” from the list
- If you haven’t installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click “Activate Plugin & Run Importer”. If you have installed this plugin, skip to next step.
- Click Browse and select
demo-content.xml
file from the download package - Click “Upload” file and import
- When you are asked to import author, you can create new author or import to existing author. You also should check the “Download” checkbox and import file attachments.
After these steps, access “Page Menu” through “Dashboard” and you will see a list of pages imported into your website.
2.6.Setup Front page
As the name indicates, the Front page is actually your WordPress Homepage, a placeholder needed to turn your normal WordPress installation into a One Page site.
If you have installed our demo content, you can skip creating the Front page and follow the steps below to Setup your Front page.
But if you did not, you will need to create page to use it your Front page.
- Go to
Pages » Add New
to create a page and name it Front page - Find “Page Attributes” box on your right hand and and assign the Frontpage Template to it
- Click “Publish”
Now you have your SquareRoot Front page ready to be used.
Content from this page won’t show on the front page, so you don’t have to worry about it.
To set this page as your WordPress Home, you will need to follow these steps:
- Go to
Settings » Reading
- For Front page displays, select A static page (select below)
- Choose Front page to be your Home
- Click Save Changes
2.7.Setup Contact Page
SquareRoot uses Contact Form 7 to generate its contact form for it. You can go to their Documentation page to read more about it.
Your Contact Page will be created simply by adding the shortcode that Contact Form 7 generated to your page content.Below is the shortcode we use for our demo:
[row width="boxed"]
[heading title="Contact"]Get in touch with me[/heading]
[contact-form-7 id="232" title="Contact form 1" html_id="contact-form" html_class="contact-form row"]
[/row]
2.9.Social Widget
Just go to Appearance » Widgets
to drag SquareRoot: Social Links to Footer Widget Area, and add the corresponding Social URLs to show them on your footer.
3.Theme Options
3.1.Home Settings
You will be able to work with:
Header Logo
This option is for you to customize your “Header Logo”, which would be displayed on your Sticky Menu as your website identifier.
You can upload a new image or use one that already exists in “Media Library”.
You can also paste an image URL from external source here to use as your “Logo”.
Favicon
The favicon, also known as shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar, sometimes in the history as well, and next to the page’s name in a list of bookmarks.
Similar to the Header Logo, you can upload a new image or use one that already exists in “Media Library”.
You can also paste an image URL from external source here to use as your “Logo”.
Excerpt Length
Even though Squareroot is a One Page Wordpress theme, we still provide a section for blogging, and you can define the number of words in your excerpts with the “Excerpt Length” options.
Custom Heading Background
In case you decide to use separated pages in SquareRoot, you can also set an image as header for them. The Custom Heading Background option would allow you to upload an image as header for those pages.
Archive Meta Information
Similarly, if you decide to build special section for “Post Archive”, you can use the options below to decide what meta information of your post will be visible.
3.2.Header Options
Archive Layout Options
This is the place for you to Select an alignment for your archiver pages, which are pages that list all your posts, in case you decide to use them in SquareRoot. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1, 2, or 3 columns.
The width of your 2 sidebars can also be adjusted with 2 slider bars.
3.4.Typography Options
3.5.Custom Css
This will overwrite the theme CSS, so please be careful!
3.6.Backup & Restore
You can even swap data between different installations by pasting the text in the box under Transfer Theme Options Data and click Import Options button.
3.7.Google Map Settings
Google Map
that will display in a Contact Section.
First you will need to find “Enable Google Maps” option and check it to show a Google Map
in a layer under your Contact Information.
You will need to set a Latitude Position
and a Longitude Position
so Google can generate your map.
These values can be found through an address with this online tool http://itouchmap.com/latlong.html.
The three options Address
, Email
, and Phone
are text boxes for you to enter your Contact Information.
You can also change the background color of the Map button with Button color
and Button hover color
.
The Background color
will allow you to set color scheme
for the layer between your Contact Information and your Google Map.
4.Setup the Site
Setup your One Page WordPress Site using SquareRoot
4.1.Content on Front page
So in short, Sections are blocks of content that you use to build your Front page. To use them on your Front page, you would need to:
- Create Section content by Adding a new page.
- Select a Section Layout to indicates how they will be displayed on the Front Page
- Then assign these pages to the Main Menu to create Sections on your Front page.
If you have our demo content installed on your website, you will have a list of pages ready to be used in Pages » All Pages
. You can use them and skip to the next part of this document about assigning pages to Sections and have their content displayed on your Front page.
We’ve also included the Section content from our demo site for you to use as sample in Demo Content Sections, in case you want to build your Sections from scratch and need them as your reference.
Section Content
SquareRoot pulls content into Sections from normal WordPress Pages, so you will need to use pages
to store content for displaying in a Section.
Go to Pages » Add New
and write something in a page so you will be able to pull it out on your Front page later.
You can go to our Shortcode Generator Demo Content Sections to copy content from pages on our demo site and use them as sample for your Content Section.
Content in SquareRoot is formed mostly with blocks of shortcode. They are powerful fundamental elements that you can use to customize your page content in thousand ways. Just about any element you see on our demo is a shortcode that you can insert on any page, and some shortcodes have numerous options for customization that you can choose from.
SquareRoot also has its own Shortcode Generator integrated, which allows you to create your own pages with our shortcodes quickly and easily without touching any fuzzy code line.
When you editing the page, you will see this meta box below the content editor:
-
- These are options to decide how this page will be displayed at the
frontend
- The
Open as a Separate Page
option allow you to use SquareRoot as a multi-page theme.
When the page marked with this option is assign to Main Menu, WordPress would not add its content to the Front page, but will open it normally in a different page. - The
Disable section from menu
option will hide the page from the Main Menu displayed on your Front page when it is assigned to the Main Menu in your Dashboard. - “Assign current page as” allows you to choose a Layout for the Section displayed on your Front page with the content of this page.
Section Layouts
As stated in the previous part, content from other pages will be displayed as “Sections” on the SquareRoot Homepage. You can choose a layout for these sections while editing each page with the “Assign current page as” option in Page Settings Panel.
Listed below are samples for each of these Section Layout.
Home Section
The background image for this Section Layout is the Featured Image of your page.
Parallax Section
Similar to the “Home Section”, the background image of these “Parallax Sections” also comes from the page Featured Image.
You can set its background the same way you did for a “Home Section”.
Portfolio Section, Portfolio 2, Portfolio 3
Sections with this Layout will list posts from your Portfolio Post Type in a Category based arrangement.
You can switch the Section Layout to Portfolio 2 and Portfolio 3 to change the animation hover effects for the Portfolio images displayed on your Homepage.
Resume Section
Sections with this Layout will list all your post in the Resume Post Type in a beautiful Timeline layout.
Blog Section
Sections with this Layout will list all your Blog posts in a beautiful Timeline layout.
Assigning a page content to Section
To add content from a page to your SquareRoot Homepage, you only need to add that page into SquareRoot Main Menu by accessing Appearance » Themes
in your “Dashboard”.
If you’ve installed our demo content, you will see the Main Menu created and ready to be used there. But if you don’t want to import our demo content, you will need to create a new menu then go to the “Manage Location” tab to assign it as SquareRoot Main Menu
After that, just drag the page with content you want to display on your SquareRoot Homepage to a corresponding position on this Main Menu and it will show up in a Section in your Frontpage, unless the “Open as a Separate Page” has been selected for that page.
4.2.Demo Content Sections
To understand more about building these shortcodes with SquareRoot, you can move to the next part and read about our Shortcode Generator.
Shortcodes are listed under page names.
Home
About
Skills
Services
Quotes
Resume
Statistics
Pricing Table
Testimonials
Portfolio
Blog
Contacts box
Contact
4.3.Shortcode Generator
Moreover, SquareRoot Shortcode Generator will help you forming shortcode blocks for any thing you will need, so you can use them as elements to construct your SquareRoot website without touching the fuzzy code lines. Almost every element you see on our demo is a shortcode that you can insert on any page. Some of these shortcodes have numerous options for customization too, so the options you can choose from is really endless.
When you edit a post or a page, click on Shortcodes button above the content editor and the Shortcode Menu will show up.
You can find the list of shortcodes SquareRoot provides as well as their setting options below:
Superscript
Simply choose a text and select superscript, the text will be displaylike this. There’s no configuration for this.
Subscript
Simply choose a text and select subscript, the text will be displaylike this. There’s no configuration for this.
Highlight
This shortcode will highlight any text in post content.
Attributes
- :
Background Color
: Presetted Background color for the highlighted text. If none is chosen, the default color yellow will be used.Custom Background Color
: If you don’t like any color from the predefined set, you can specify your custom background color here.
Row
With SquareRoot Row is the elements that you can use like elements blocks to build your page. It will help you take care of most content block styling work quickly an efficiently.
Attributes
- :
Inner
: Check this box if your Row is placed inside another RowWidth
: Set your Row widthFull
orBoxed
Border
: To line your Row with a decorative border, you need to define border size here. Border can be set separately for each side:Top
,Right
,Left
, orRight
.Border Color
: Pick a color for your decorative border.Border Radius
: A Border Radius allows you to add rounded borders to elements. SquareRoot can help you generate different border radius for each corner. You can even give your Rows a round, circle, or ellipse shape with this option.Padding
: Add padding spaces to 4 sides of the row. Different values can be set for each side.Margin
: Add margin spaces to 4 sides of the row. Different values can be set for each side.Background Color
: Pick a solid color to highlight your Row.Background Image URL
: You can also decorate your Row with a custom background image by pasting the image URL here, or Upload it to your WordPress server using WordPress Media Upload.
Column
Columns will divide the layout of your Row into blocks. SquareRoot Columns are built based on Bootstrap 12-grid columns system.
Attributes
- :
Columns
: Number of Columns as well as a layout of this combination.Extra Class
: Add Extra Class to your row if you want to refer to it in your Custom Css.
Accordions
These shortcodes will display a set of content panel which you can hide/show when clicking on the panel title. When a panel is opened, the others will be closed.
This is a combination of 2 shortcodes: [accordions]
and [accordion]
. [accordions]
is a wrapperand doesn’t have any attribute, while [accordion]
is the code that actually show the content.
Attributes
- :
Title
: Title of the panel.
Toggle
These shortcodes will display a set of content panels you can hide/show by clicking on the panel title.
This is a combination of 2 shortcodes: [toggles]
and [toggle]
. [toggles]
is a wrapperand doesn’t have any attribute, while [toggle]
is the code that actually show the content.
Attributes
- :
Title
: Title of the panel.
Tab
Buttons
This shortcode will placed beautiful, advanced buttons on your page.
Attributes
- :
Link
: button URL.Color
: button color you can choose from presetted values (see screenshot below).Opacity
: create a trendy translucent button by setting an opacity to Button Background.Size
: button size, can be small, medium (default) or large.Icon
: button icon. Select from Font Awesome icons (see screenshot below).Icon Position
: icon position, can be left (default) or right.Align
: you want to float the button to theleft
,right
,center
ornone
(default)?Full Width
: display the button in full width or not. Default is no.Custom Background Color
: choose a custom background color for your button here with the color picker if you don’t want to use the Presetted Button Colors.Custom Text Color
: custom text color for button.Link Target
: default is empty. Decides if link will be openned same the same window in new window.Nofollow
: set link as nofollowed if checked. By default it is not checked.Id
: button ID, in case you want a custom HTML ID attribute for the button. It is useful when you need it for CSS or Javascript.Class
: button CSS, in case you want a custom HTML CSS attribute for the button. It is useful when you need it for CSS or Javascript.
Carousel
This shortcode add a template of carousel for content blocks on your page.
These content blocks can be generated from other shortcodes like Icon box, or just HTML content.
It’s a combination of 2 shortcodes: [carousel]
is a wrapper with attributes to control the display of your carousel on the page such as Navigator
style or position, Auto play
or Total number of items
.
The second shortcode [carousel_item]
is the code to hold each content block of your carousel slider.
Attributes
- :
Button Navigation Position
: belongs to[carousel]
. It allows you to add Navigation Button at theTop
,Bottom
, orSide
of your carousel slideshow.Pagging Navigation Position
: belongs to[carousel]
. It allows you to add Pagination button at theTop
orBottom
of your carousel slideshow.Auto Play
: belongs to[carousel]
. Checking this option will make your slideshow automatically play at page load.Amount of items displayed at a time
: belongs to[carousel]
. It defines the number of carousel items being shown on the screen at one timeTotal number of items
: It define the number of[carousel_item]
, which is the code to hold each content block of your carousel slider.
Heading
This shortcode will style the text inside it to become 5 different type of headings.
Depending on which style you’ve chosen (Style 1 and Style 4), you can add extra Description to these Headings.
Attributes
- :
Title
: Heading textTitle Color
: Heading text colorDescription
: Only available inStyle 1
andStyle 4
. Description text that will be displayed in a different part of your heading.Description Color
: Only available inStyle 1
andStyle 4
. Color of the Description text that will be displayed in a different part of your heading.
Icon Box
Icon box is a way of displaying main information in a “box” with semantic Icon, which is usually used in homepage and landing pages.
With SquareRoot, you can upload custom images to use as icon for your Icon Box too.
Attributes
- :
Title
,Title Color
,Title Background Color
,Title Padding
: Text to display as title of the Icon Box and other options to style it.Description
: Content of your Icon BoxIcon Type
: Choose type for your Icons. They can be icons from Font Awesome or a Custom image. In case you set it to be Custome, another option will appear to allow the uploading.Icon Position
,Icon Position
,Icon
,Icon Size
: Options for you to select and style and the icon that will be used to decorate your Icon Box.Icon Border
,Icon Border Color
,Icon Border Radius
,Icon Effect
: Options to style the Icon decoration and effect.
The Icon Box shortcode generator also allows you to use custom uploaded image as icon for your box.
More
This shortcode will add a button that navigate visitor to the next Section when clicking
Attributes
- :
Text
: Text that will be displayed with the “more” button.
Promo Box
This shortcode will display a promotion box that helps you to get visitor attraction. It’s also called Call To Action box.
The Promo Box comes with a button on your right hand.
Attributes
- :
Heading
: The Promo box heading text.Text
: Content of the Promo box.Edit Button option group
: IncludingColor
,Link Target
,Nofollow
. These options are to style the button that will display with the Promo Box.
Quote
This shortcode will place a group of text with elements required for a Quote on your page.
Attributes
- :
Author
: Author of the Quote.Content
: Quoted Content.
Text Rotator
This shortcode allow you to display changing text with animation on the page to catch the eyes of your visitors.
Attributes
- :
Text
: Text to rotate. The Rotated words or phrases need to be separated with a comma.Effect
: Select an animation effect for the rotation.Background Color
: Set a background color to highlight your rotating text block.Text Color
: Color of the rotating text.Padding
: Add padding at the sides of your rotated text block. Different values can be set for each side.
Contact
This shortcode will place a content block with your contact information on the page.
Attributes
- :
Text options
: Option to insert contact information, including:Email
,Phone
,Address
.Background Color
: This option let you set a solid color as background for your Contact Block.
Statistics
This shortcode will display a progress bar or circle with title and percentage, and also a number value with counting animation.
Attributes
- :
Style
: Style of the Progress bar or Percentage circle. For theHorizontal
style, which would display progress bars on the page, an extraType
style for you to select an “Inline” or “Block” layout for your bars.Text
: Text that display together with your figure or your progress chart orPercent
: Percentage of the progress chart. In case you chose “Number“, it would be the figure that will be displayed on the screen.
Video
Shortcode to embed a Video on your page. It will stream clips from Youtube or Vimeo.
Attributes
- :
Type
: The source where your streamed video comes from. Select Youtube or Vimeo.Auto Play
: Decide whether or not the Video will play at page load.Video ID
: ID of the video being streamed.Width
andHeight
: Size of the streaming iframe.
4.4.Pricing Tables
You can create these special tables by accessing Pricing Tables menu in your “Dashboard”.
You can click the star on each a pricing table to highlight it
After saving your Pricing Tables, click on “All Pricing Table” to go the table list, where you will find an embed code for every table created.
You can just copy these code to any page or post content, and the corresponding Pricing Table would be shown on said page or post.
5.Post Types
Blog, Portfolio, Resume
5.1.Portfolio
There are Custom Extra Fields to include special details about projects you want to show off, and aides from a featured image and a image gallery, you can also add a video from Youtube or Vimeo to display your portfolio in a more lively, animated fashion.
Portfolio can be divided into Categories that can be displayed with a shortcode.