BootFrame is a clean and professional responsive WordPress business theme designed with versatility in mind. BootFrame is highly customizable with unlimited color and font options, logo upload, social media icons and much more that can be adjusted via Costomizer. You can easy build for your business site, portfolio, blog, one page or any other site.

BootFrame is built on Bootstrap framework and supports Site Origin's Page Builder which allows you to build any page layout required. It's also integratet with popular plugins: Contact Form 7, WPML, Polylang, Shortcodes Ultimate, Meta Slider

To install this theme you must have a working version of WordPress already installed. Extract the zipped package to your desktop, in the extracted package you will find the .zip file which is the WordPress theme.

You can install the theme in two ways:

The first option how to install this Theme would be to directly upload the theme .zip file via WordPress Theme Uploader:

1. Log into your WordPress admin panel
2. Go to Appearance > Themes
3. Click Install Themes
4. Click Upload

The second option how to install this Theme would be the upload via FTP manager. After extracting theme .zip file you have to upload the extracted folder to /wp-content/themes/ folder on your server.

1. Log in to the WordPress Administration Panels.
2. Select the Appearance panel, then Themes.
3. From the Themes panel, roll over the Theme thumbnail image for the Theme you are interested in to see options for that theme.
4. You can view more information about any theme by clicking Theme Details.
5. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview.
6. To activate the Theme click the Activate button.

After the theme installation you will be redirected to the plugin activation page. If you want to enjoy all the options offered by the theme or you are going to import the demo content you need to install all plugins listed below:

To make your WordPress website look like the live demo you can use quick demo import panel. You can import content just after installation on the activation page by using button “go to import data panel’ or anytime go to the menu Appearance > Import Demo Data. You will be redirected to the Import Demo Data panel where you can use Import Demo Data button.

Importing demo data (post, pages, images, theme settings, ...) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch. When you import the data following things will happen:

1. No existing posts, pages, categories, images, custom post types or any other data will be deleted or modified .
2. No WordPress settings will be modified .
3. Posts, pages, some images, some widgets and menus will get imported .
4. Images will be downloaded from our server, these images are copyrighted and are for demo use only .

Before you begin, make sure all the required plugins are activated.

On the Import Demo Data panel please click import only once and wait, it can take a couple of minutes.

There are 8 page templates used on this theme:

• Default - the standard page
• FAQ - template to display the FAQ section
• One Page - display all the essential features of your website on the home page. When clicking on navigation links, the user scrolls down the page or jumps to that particular content’s section.
• Page Blocks - best to use page builder components
• Portfolio One Column - display portfolio items in a single column
• Portfolio Three Columns - display portfolio items in three columns
• Portfolio Four Columns - display portfolio items in for columns
• Portfolio Two Columns - display portfolio items in two columns

There are 2 types of category layout in this theme:

• Default - display articles according to the global settings
• No Sidebar - display articles on page without sidebar

There are 3 main widget areas (sidebars) on this theme:

• Main Sidebar - appears on frontpage (if latest posts are displaying on home page)
• Default Page Sidebar - appears on standard page template
• Sidebar Footer - This is the area that you can see in the footer

Page Builder also supports most standard widgets so you can use widgets in grid-based page content.

This theme supports 3 main types of widgets:

• standard WordPress widgets e.g. last commets, tag cluod
• additional theme widgets e.g. Extended Recent Posts, Portfolio Items
• widgets included in the Page Builder Widgets Bundle

Theme widgets

The theme gives you a collection of widgets to add to theme sidebars and Page Builder pages. There are following awesome widgets:

Navigate to Appearance > Menus. You can create menus and put them in position via the 'Theme Locations' setting.

BootFrame supports two locations for custom WordPress menus:

• Top Menu - dedicated for 2-4 pages, displayed in top bar
• Main Menu - main navigation, 2 - level menu, displayed in the top navbar which can be optionally fixed
• Bottom Menu - 1 -level menu, displayed in the footer

With the plugin Smartlib Tools included in the theme you can add new post types which extend your site with specific content:

• Portfolio items
• Testimonials - this type is displayed in the testimonials widget
• FAQ - you can display list of FAQ post types on a particular page using the FAQ page template
• Team Members - this content is displayed in the tem member widget

Post Formats is a popular feature that is part of the WordPress core. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. You can choose the corresponding format of the Post to correctly add a video, audio, gallery or standard post.

BootFrame supports the following post formats:

• Standard – Your normal, default blog post.
• Video - Post containing a video from YouTube or another third-party video sharing service such as Vimeo. You can also upload videos on your site. BootFrame uses video icon to designate video posts on the site.
• Gallery - A gallery of images. Post will likely contain a gallery shortcode and will have image attachments. HarmonUX uses gallery icon to designate gallery posts on the site.

You can also use other post formats which are not graphically highlighted:
Standard, Link, Image, Quote, Status, Audio, Chat

You can use Portfolio custom post type to showcase your projects on the front page of your site. Remember: to use Portfolio items post type you have to install and activate Smartlib Tools plugin included in the theme.

Add a Portfolio Post

The portfolio section uses a custom post type called Portfolio items. This is how you add a new portfolio post:

• Go to: Portfolio items→ Add New.
• Add a title.
• Add text in the content area to describe your portfolio.
• Add some cetagories in the Portfolio Category area.
• Add some skills in the Tags area.
• Add some additional information in the Portfolio Metabox area: Client Name, Portfolio images.
• Click Set Featured Image and upload your image and set one as the featured image. More images you can add in the Portfolio Images area
• Click Publish.

Display portfolio items

To display the latest portfolio items on your page you should use proper page template.

• Go to: Pages→ Add New.
• Add a title
• Select a page template

You can choose one of 4 templates:

• Portfolio One Column - display portfolio items in a single column
• Portfolio Three Columns - display portfolio items in three columns
• Portfolio Four Columns - display portfolio items in for columns
• Portfolio Two Columns - display portfolio items in two columns

We’ve used the built-in WordPress Customizer for this theme.

Go to Appearance > Customize

Theme Customizer is the powerfull tool which allows you to configure the website settings and see all the changes instantly in a Preview frame. In the Customizer there are several sections categorizes all settings into groups. Each section contain one or many settings. To use the Customizer, go to Appearance -> Customize in the dashboard or you can also go to Appearance > Themes and click on either the “Customize” button.

Most of the settings will autoupdate in the live preview window, please note in order to save your changes you must click the blue “Save & Publish” button.

The Site Title is displayed in the title bar of a web browser. Tagline is a short description or catchy phrase to describe what your page is about.

You can easily remove the default logo, upload your own custom logo and change favicon.

Enable or disable Loading animation (preloader)

Enabling this option will display photos using prettyPhoto lightbox

Allows adjust the background color. Select the desired colors using the color pallet or type in the color Hex (#) Value.

You can upload a background image for your website

In this tab you find text area fields where you can type in your own CSS or JavaScript code like Google Analytics:

• Custom Scripts for Header [this code will be displayed in header.php file]
• Custom Scripts for Footer [this code will be displayed in footer.php file]

In this section you can set urls to your social profiles. It will be displayed as icons on header and footer section on the website.

It also allows you to specify which social buttons will be displayed on post pages Your visitors will be able to easily share your content on the most popular social networks: Twitter, Facebook, Google Plus and Pinterest.

This section lets you control all of the main text/font colors or typographic properties for many different elements of your site. For each customizable element, the following properties can be modified:

• Font Family
• Font Size (px)
• Font Weight
• Font Style
• Text Transform

These theme incorporate all types of Bootstrap buttons. This section lets you control all of the buttons properties like font family, background or font color. Buttons are part of layout and you can use these Buttons in an Page, Post or even a Text Widget. You can modify 6 types of buttons:

• Default Button ( most often used )
• Primary Button ( also popular )
• Success Button
• Info Button
• Warning Button
• Danger Button

Navbar is the most important part of website. In this section you can set the global layout for the header. It places the site identity and the navigation side by site.

This is the large dark bar at the top of your page that contains your primary menu links and search form. Within this panel you can adjust the background color of the bar, background opacity and position of the bar.

Fiexed Top Navbar

You can decide if your navbar becomes fixed to the top of your screen when you scroll. You will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space on the screen.

Search in navigation area

It allows you to specify if search icon and search form will be placed in the navbar.

In this section you can adjust the size, style and color of your primary navigation menu.

This customizer section is dedicated to your website footer. Footer was divided into 3 layout sections: Footer Sidebar, Bottom Menu and Copyright & Social icons.

Footer Sidebar is divided into 4 columns where you can add widgets. To add/edit widgets inside, please navigate to Appearance > Widgets section and choose widgets for Footer Sidebar. You can also decide if footer sidebar will be displayed.

In this customizer section you can easily change your footer style:

• Footer Sidebar Background
• Footer Headers Color
• Headers Decorator Color
• Footer Sidebar Text Color
• Footer Border Component Color

You can edit or switch off some components:

• Display social buttons in footer
• Display go to top button - a button which will scroll page back to the top (appears after scrolling)
• Copyright text - some copyright information

The layouts panel is where you can adjust layout or sidebar size and layout variants for your website. You can change global layout scheme (customizer section) or specify individual content type layout schemes on the verery single page (Page Options metabox).

In this customizer section you can change:

• Default Layout Settings - global settings for all pages with sidebar
• Single Page Layout Variants
• Page Width - you can set website width
• Sidebar Width

In this section you can change main Blog sections settings like date or author displaying. You should note that some settings are visible only if you go to proper page in your preview window. If e.g. you want change post date visibility on category pages you should display any category page in the preview window (e.g. by choosing in menu) and then blog category options will appear on Customizer panel (on the right side).

In this section you can change main Blog sections settings like date or author displaying. You should note that some settings are visible only if you go to proper page in your preview window. If e.g. you want change post date visibility on category pages you should display any category page in the preview window (e.g. by choosing in menu) and then blog category options will appear on Customizer panel (on the right side).

By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site. Many WordPress users want a static front page or splash page as the front page instead.

If you wish to display an alternative page You can select “A static page” under the heading “Front page displays”. You will need to create the desired page before they will appear in drop down menu.

In the demo site you can see static front page created with page builder.

SiteOrigin Page Builder is a WordPress plugin which lets you build pages using widgets as building blocks you can drag-and-drop into a responsive layout. It's a comfortable tool to content creation that'll help you create your home, contact, about us or any other page with a linear layout based on rows and columns.

Page Builder Interface

First, let’s take a look at the interface. Page Builder adds an extra tab to the standard WordPress editor.

Clicking on this tab brings up the Page Builder interface.

Toolbar

You can use the toolbar to add a widget, add a new row of columns or to load prebuilt layouts.

Row Actions

Use these buttons to delete and move a row. The up/down icon acts as a handle to pick up and drag the row up or down.

Creating a New Page Using Page Builder

Open a new page by navigating to Pages > Add New

Click on the Page Builder tab to start creating your content. This tab is connected to your visual editor.

Now, we’re ready to start creating a page with Page Builder.

Edit an Existing Page Using Page Builder

Open the page you want to edit using Page Builder by navigating to Pages > All Pages and clicking the page you wish to edit.

If you have not used Page Builder on this page before, it will open in the default visual editor. Click on the Page Builder tab.

Confirm that you’d like to copy the existing content from the visual editor into Page Builder. Any content you create with Page Builder will overwrite the existing content for that page, so we recommend that you copy your content over.

Page Builder copies all of your content to a Visual Editor widget in a single column row. This setup gives you an accurate representation of how your content looked before. Open the Visual Editor widget if you need to access this content.

Using Page Builder on Other Post Types

Page Builder works with all post types, not just standard pages. First, navigate to Settings > SiteOrigin Page Builder. Then, make sure the post type you want to use it for is selected under Post Types.

More information and support forum you find here: https://siteorigin.com/page-builder/documentation/

BootFrame is integrated with Shortcodes Ultimate plugin. With this plugin you can easily create tabs, buttons, boxes, different sliders, responsive videos and much, much more. Turn your free theme to premium in just a few clicks. Shortcodes Ultimate offers over 40 useful shortcodes – many with conditions that can be used to tailor their use – that cover everything from adding spoiler tags and other accordion-like hidden areas to animations, buttons, icons and even formatting your pages and posts into columns.

Shortcodes Ultimate provides you with a useful button for adding shortcodes in the post/page editing screen.

Contact Form 7 plugin is used on the contact form page and we already have styling in place to match the theme.

For all those who prefer translation with files included into theme we recommend to use .mo/.po files. Those files works in pair so for each language you need to have 2 files with the same name but different extension. For example if you want to translate theme into Polish language, you're files should be pl_PL.mo and pl_PL.po

For editing this files you need to use Poedit software which is very easy to use. All you need to do is upload those files into this software, edit them and upload into "languages" folder where theme is installed.

WPML & Polylang

BootFrame was tested with WPML and Polylang(free) plugins and is fully compatible. If you want to have multilingual website, this is the best way to do it. If you want to use this plugins, you must purchase it first (WPML) or download (Polylang) and then install into your wordpress installation. Below we serve links that will be useful:

Polylang - https://wordpress.org/plugins/polylang/
WPML - https://wpml.org/

BootFrame has integrated language switcher from WPML or Polylang. It appears when one of the plugin is activated.

BootFrame is integrated with Smartlib Tools plugin that allows you to quickly and painlessly add social sharing and following features to all your posts, pages and custom post types.

BootFrame provides new extra fields to WordPress user profile. Your User Profile can be accessed via Users -> My Profile in your dashboard. If you are logged in as administrator You can also edit each user's profile( go to Users-> All Users -> click on user name in user list). In user profile you will find two types user extra fields:

• Fields for social network links: Facebook URL, Google+ URL, Pinterest URL, LinkedIn URL, YouTube URL
• When you add a link to a specific service, the correct icon appears directly under the description of the author on a post page.
• User profile picture - allows you to change your default avatar photo by localy uploaded photo. You can paste external photo URL or click on “Upload user photo” button and upload an image.

File structure: How BootFrame is structured

Once downloaded, unzip the compressed folder to see the structure of (the compiled) BootFrame. You'll see this structure:

assets - This folder containsl css files, javascript, all installed plugins and images

dev - all less files needed to create the template stylesheet. Also includs javascript

style.css - main css file (optionally compiled from LESS),

Plugins

Animate.css - A cross-browser library of CSS animations.

flexslider - fully responsive jQuery slider toolkit.

prettyPhoto - a jQuery lightbox clone

Font awesome - scalable vector icons

jQuery countTo - plugin that will count up (or down) to a target number at a specified speed

waypoints - library that makes it easy to execute a function whenever you scroll to an element

Layout

BootFrame has modular components for making these easier to re-use anytime when needed. Template is created with Twitter Bootstrap 3.3 Framework

Default grid system

Layout is based on 12-columns Bootstrap grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

• Use rows to create horizontal groups of columns.

• Content should be placed within columns, and only columns may be immediate children of rows.

• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

more information you can find here: http://getbootstrap.com/css/#grid

Sections and boxes

All templates are divided into content sections. There are two types od sections:

• default content section - it has max witdth 1170px (it can be modify in less files)

  
                                      <section class="smartlib-content-section">
                                      ----
                                      </section>
                                  
                                      

• fluid sections - it covers 100% width of the screen

  
                                      <section class="smartlib-full-width-section">
                                      ----
                                      </section>
                                  
                                      

You can build content by adding and removing these sections. Most of the sections are build in the following way:

                                    <section class="smartlib-content-section smartlib-light-section smartlib-full-width-section smartlib-animate-object animated fadeInUp">
                                        <div class="container">
                                            <!-- Features Section -->
                                                <header class="smartlib-section-header text-center">
                                                    <h2>Heading</h2>
                                                </header>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                    </div>
                                                </div>
                                        <!-- /.row -->
                                        </div>
                                    </section>
                                

Page Structure:

Single page template is divided into 3 Areas

• top navbar - can be found in between the commented tags - !-- Navigation --

• main content area - can be found in between the commented tags - !-- Page Content --

• footer

  
  

  
                                          <footer>
  
                                          </footer>
                                      

Less Customization

For advanced editing the theme includes the LESS files to generate the Bootstrap CSS as well as Grunt tasks to speed up development. If you’re familiar with how to use these tools you can make use of them. If not, there are some basic instructions below about setup and usage.

To use Grunt and LESS you’ll need to have Node installed. Below are the basic steps for using the Grunt and LESS files to update the core Bootstrap CSS files.

• Install dependencies: npm install

• Make sure grunt is available at the command prompt.

• You can install grunt-cli as described on the Grunt Getting Started page.

• Modify one of the LESS files: ‘bootframe/dev/less/‘.

• You should avoid editing files in the ‘bootframe/dev/less/bootstrap/‘ folder.

• In the command prompt, type grunt or grunt watch to build the CSS for a theme.

• Use the grunt watch command to watch the folders and automatically build the CSS each time a LESS file is saved.

• Grunt Files

Grunt is a task-based command line build tool for automating repetitive tasks like minification, compilation, unit testing, linting, etc. The included Grunt file will create your CSS files and minify them across both the HTML and Runway Child theme. The Grunt file will not update the Standalone version of the theme.

Configuration:

BootFrame has support for Grunt so you can create your custom template very easily automated. There Gruntfile.coffee file inside template root directory.

Main LESS Files (inside dev directory):

• dev/bootstrap-variables.less : the variables file from Bootstrap. This is where a large amount of the customization to Bootstrap’s existing styles takes place.

• dev/project-variables.less: main project variables. In this file you can customize the color of your site’s elements, the default spacing, fonts which are not included in bootstrap-variables.less file

• dev/general.less - main template stylesheet

• dev/project-style.less - main project stylesheet. This is the file where you should place your css code

Learn more about setting up and installing Grunt.