Orbit Documentation

1. Install

To install Orbit use the theme installer in the WordPress administration. Go to Appearance » Themes and click on Add New button.

Doc Orbit 01 Install 01

Search “orbit”. Click on the button Install.

Doc Orbit 01 Install 02

After successfull installation click on Activate

Doc Orbit 01 Install 03

2. Orbit Options

2.1 General

In this section you can change aspects that affect the entire web

To access this section please go to : Appearance> Customize > General

Color Schemes

Orbit has 3 Color Schemes, blue, orange and green. You can create your own style in this tutorial

Position Sidebar

Orbit has two templates, each one with separate sidebar. This setting changes the both sidebars position.

Show Breadcrumb

Enable/Disable breadcumb in pages. Breadcumbs never appears at the front page.

Doc Orbit 02 01 General 03

No show main title (h1) in pages

If you do NOT want to show page title, just add the page slug separated by spaces.

You can see the page slug in edit pages section

Doc Orbit 02 01 General 06

Footer info

If you want to add copyrigth symbol ©, use ©. To add trademark symbol ® use ®

Doc Orbit 02 01 General 04

CSS User

CSS User for style customizing

2.2 Front Page

In this section you can configure the different sections of the homepage .

To access this section please go to : Appearance > Orbit Options > Front Page Options

You can custom these sections on the front page

Doc Orbit 02 04 Front Page 01

URL button “call to action”

In this field you can insert the URL of the page that the button will display.

Doc Orbit 02 04 Front Page 02

Posts to Display on Front Page

You can show lastest posts in front page. If greater than 0 Front sidebar is activated.

Slider Images

Each image has a text and an url (are optional). Orbit has three images in the slider, but You can add up to 6. Follow this tutorial to add more images. Slider has three options:

  • Slider Control: Create navigation for paging control of each slide
  • Animate slider automatically: Animate slider automatically
  • Speed of the slideshow: Set the speed of the slideshow cycling, in milliseconds

2.3 Font Options

In this section you can change the types of sources that affect the entire web .

To access this section please go to : Appearance > Customize > Font Option

In fonts configuration, the Google Fonts takes precedence. If you want a fonts set offered in the selection field, you must leave blank the field “Google Fonts”.

Doc Orbit 02 02 Text Options

2.4 Post Options

In this section you can change aspects affecting post pages.

To access this section please go to : Appearance > Customize > Post Options

Default Pagination Posts

There are two pagination types:

Older-newer posts link

Doc Orbit 02 01 General 01

Pages posts link

Doc Orbit 02 01 General 02

Show Author, Categories and Tags

Enables/Disables the meta fields in posts. There are three fields: author, categories and tags

Doc Orbit 02 03 Posts

Headings and Subheadings Color

You can change the heading and subheading color in posts and excerpts

2.5 Social Options

In this section you can put links to your RSS feed and social networks.

To access this section please go to : Appearance > Customize > Social Options

In this section you can configure the link to RSS feed and social networks. Simply enter the URL. Currently Orbit can configure Twitter, Facebook, Google+, LinkedIn, Youtube and Vimeo. The icons will be show in the top right of the page.

Doc Orbit 02 04 Socal Networks

2.6 Status Report

Please include this information when requesting support.

3. Shortcodes

3.1 Install

Shortcades are macros to create special kinds of content and you will need no programming skill.

To use Orbit’s shortcodes you need to install this plugin orb-plus

3.2 Buttons

There are three buttons: light gray, dark gray and blue. And two sizes for each one. They have two parameters: url and size. For size we can use short or long (large)

Small Buttons

[orb-button-light url="#"] Bitado [/orb-button-light]
[orb-button-dark url="#"] Bitado [/orb-button-dark]
[orb-button-blue url="#"] Bitado [/orb-button-blue]

Doc Orbit 03 02 Button 01

Large Buttons

[orb-button-light url="#" size="long"] Bitado [/orb-button-light]
[orb-button-dark url="#" size="long"] Bitado [/orb-button-dark]
[orb-button-blue url="#" size="long"] Bitado [/orb-button-blue]   

Doc Orbit 03 02 Button 02

3.3 Notice Boxes

They are text boxes to highlight text. On the left column you have the shortcode and on the right have displayed:

[orb-notice]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-notice]

Doc Orbit 03 03 Warnning 01

[orb-error]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-error]

Doc Orbit 03 03 Warnning 02

[orb-warning]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-warning]

Doc Orbit 03 03 Warnning 03

[orb-info]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-info]

Doc Orbit 03 03 Warnning 04

3.4 Columns

You can create 2, 3 and 4 columns for your content. Use example:

2 Columns

[orb-row]
  [orb-column21]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column21]
  [orb-column21-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column21-last]
[/orb-row] 

Column 1 of 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 2 of 2 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3 Columns [1/3] [1/3] [1/3]

[orb-row]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column31-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31-last]
[/orb-row] 

3 Columns [1/3] [2/3]

[orb-row]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column32-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column32-last]
[/orb-row] 

Column 2/3 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3 Columns [2/3] [1/3]

[orb-row]
  [orb-column32]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column32]
  [orb-column31-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31-last]
[/orb-row] 

Column 2/3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columns [1/4] [1/4] [1/4] [1/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41-last]
[/orb-row] 

Column 1 of 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 2 of 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 3 of 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 4 of 4 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columns [1/4] [2/4] [1/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column42]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column42]
  [orb-column41-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41-last]
[/orb-row] 

Column 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 2/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 1/4 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columns [1/4] [1/4] [2/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column42-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column42-last]
[/orb-row] 

Column 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 2/4 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columns [1/4] [3/4]

[orb-row]
  [orb-column41]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column43-last]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column43-last]
[/orb-row]

Column 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 3/4 (last)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3.5 Lists

Custom icons in list. This shortcode have two params. icon y color

Shortcode in visual editor

[orb-custom-list icon="icon-minus" color="red"]
  ● First thing
  ● Second thing
  ● Third thing
[/orb-custom-list]  

Shortcode in text editor

[orb-custom-list icon="icon-ok" color="green"]
<ul>
   <li>First thing</li>
   <li>Second thing</li>
   <li>Third thing</li>
</ul>
[/orb-custom-list]  

Some examples:

Doc Orbit 03 05 List 01

Possible values for the parameter icon:

Doc Orbit 03 05 List 02

Possible values for parameter color:

3.6 Contact

You can add Contact information where you want. All this shortcode parameters are optional. Googlemap, twitter, facebook and linkedin are url.

An example

[orb-contact-info name="John Doe" phone="123-456-7890" email="name@gmail.com" address="123 Fake St" city="Wonderland" state="NY" zip="12345" googlemap="maps.google.es/example" twitter="twitter.com/bitadocom" facebook="www.facebook.com/example" googleplus="plus.google.com/example" linkedin="www.linkedin.com/example" iconcolor="blueDark"]

Doc Orbit 03 06 Contact 01

Possible values for parameter iconcolor:

4. Advanced

4.1 Action Hooks

Action hooks are essentially placeholders. Wherever an action hook is placed, it will execute any code that has been “hooked” to it.

The Action Hooks of orbit

Doc Orbit 04 01 Action Hooks

  • bit_main_container: Just after opening <body>
  • bit_main_container_end: Just after closing </div> <!-- end main-container -->
  • bit_header: Just after opening <div id="main-container">
  • bit_in_header: Just after opening <header id="top-header">
  • bit_header_end: Just after closing </header><!-- end of top-header -->
  • bit_content_container: Just before opening <div id="content_container">
  • bit_in_content_container: Just after opening <div id="content_container">
  • bit_content_container_end: Just after closing </div><!-- end content-container -->
  • bit_footer_credit: Just after opening <div class="footer-credit>
  • orbit_credit: Adds credit in the footer. If you use this hook you overwrite the original credits “Orbit & Powered by WordPress”

Added new hooks in front page (Orbit 1.1.0)

Doc Orbit 04 01 Action Hooks 02

  • bit_slider: Just after opening <div id="front-slide">
  • bit_slider_end: Just before closing </div> <!-- end front-slide -->
  • bit_front_boxes_start: Just after opening <div id="front-boxes">
  • bit_front_boxes_end: Just before cloging </div> <!-- end front-boxes -->

Added new hooks in posts page (Orbit 1.1.0)

Doc Orbit 04 01 Action Hooks 03

  • bit_sidebar_main: Just after opening <aside> (sidebar.php)
  • bit_sidebar_main_end: Just before cloging </aside> <!-- End aside main sidebar --> (sidebar.php)
  • bit_post_end: Just after closing </article><!-- end post article -->
  • bit_excerpt_end: Just after closing </article><!-- end excerpt article -->

Sidebar Two (sidebar-two.php)

  • bit_sidebar_two: Just bedore after <aside>
  • bit_sidebar_two_end: Just before closing </aside> <!-- End aside sidebar two -->

Sidebar in front page (sidebar-front.php)

  • bit_sidebar_front: Just bedore after <aside class="sidebar-front">
  • bit_sidebar_front_end: Just before closing </aside> <!-- End aside sidebar front -->

5. Tutorials

5.1 Custom Color

Orbit has three color schemes, but you can add your custom scheme. You need some CSS code.

Color scheme needs two colors, darker one and lighter one. In Orbit the blue scheme use #1d6497 as dark color and #5098cb as lighter color. You can use graphical tool for select your colors. Color Scheme Designer 3 is a good option.

Now you need a text editor. Copy this code in a new document.

#top-header {
  border-top: 6px solid #darker;
}

.top-header-without-breadcrumb {
  border-bottom: 4px solid #darker;
}

#main-footer {
  background-color: #darker;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#darker), color-stop(0.5, #darker), to(#ligther));
  background-image: -webkit-linear-gradient(#darker, color-stop(0.5, #darker), #ligther);
  background-image: -moz-linear-gradient(#darker, color-stop(#darker, 0.5), #ligther);
}

article .edit-link a, .navigation .current, .breadcrumb p {
  background-color: #darker;
}

.breadcrumb p, #main-footer {
  border: 1px solid #darker;
}   

Replace #darker for your darker color, and #ligther for your ligther color. Now copy this code in CSS User field from Appearance > Customize > General

Doc Orbit 05 01 Change Color

And save options.

5.2 Slider More Images

Slider in front page has three images. In this tutorial we will see how to add more (6 maximum).

You need create a Child Theme. Child Theme is a template that inherits from another template. You need create a folder named childorbit inside the path /wp-content/themes/ from your WordPress. Inside childorbit You must create two files: style.css and functions.php

In style.css add this code:

/*
   Theme Name: childorbit
   Theme URI: bitado.com/childorbit
   Description: Child Theme. Parent Theme Orbit
   Author: Pinto
   Author URI: bitado.com
   Template: orbit
   Version: 0.1
*/
@import url(../orbit/style.css);    

In functions.php add this code:

<?php

add_filter( 'orbit_get_custom_setting' , 'childorbit_add_image_slider' );
function childorbit_add_image_slider( $orbit_gen ) {
     $orbit_gen['orbit_slide_images'] = 5;
     return $orbit_gen;
}
?>   

Change 5 by the number of images you want and activate childorbit in Appearance > Themes

You can download the code from here. (Place childorbit folder in themes)

6. Faqs

6.1 How to set a custom front page as homepage?

If you want to enable custom front page, follow these steps:

Add a new empty page with title “Home”

Add another empty page with title “Blog”

Go Settings > Readings and set static page

Doc Orbit 06 01 Faq Front Page

You can add “Home” and “Blog” in your menus, if you want.

6.2 what size should the slider images have?

They should have a maximum of 500px width. A better viewing experience uses all images with same size and 500 px width.

6.3 How I can have more images in the slider?

There are three images, but you can add more to a maximum of 6. In this tutorial I explain how to do it.