Insurance Agency WordPress Theme Documentation by Rayoflightthemes.com

Insurance Agency - Business and Insurance WordPress Theme

Created: 12/18/2015 m/d/y
By: RayoflightThemes

Thank you for purchasing Insurance Agency WordPress Theme. Please read documentation and follow instructions for theme set-up.

If you have questions please send email through Rayoflightthemes Themeforest contact form using account that you purchased theme with to confirm purchase.

Before contact please read more about support on Rayoflightthemes profile page.

Click HERE for Rayoflightthemes Themeforest profile page.

Thanks so much!


Table of Contents

  1. Steps for one click Theme set-up - NEW - read first!
  2. Steps for Theme set-up - depreciated(follow this setup guide if you want to keep old content on your site)
  3. How to set permalinks
  4. How to work with child theme
  5. How to change color
  6. Basic theme structure (how theme works)
  7. How to use page builder
  8. Shortcodes
  9. Menus
  10. Page templates
  11. Theme translation
  12. Contact form
  13. How to reorder posts (page section posts)
  14. Plugins
  15. Widgets
  16. Custom post types - team, gallery, testimonials, page sections
  17. How to change favicon
  18. CSS files
  19. JS files
  20. PHP files
  21. Sources and credits

Steps for Theme set-up NEW top

IMPORTANT: Import theme demo content this way if you have new WordPress installation and you don't have old content that you want to keep on site. This installation will delete old content on site if you have any.
theme demo setup video:
https://screencast-o-matic.com/watch/cD1q2eirQC

(after first minute demo shows how theme works and where to pay attention when edit content)

1. Activate theme 2. Install and activate all recommended plugins 3. Click on Unyson and download "backup" extension. 4. Click on tools/demo content installation 5. Install demo content



Steps for Theme set-up (depreciated) top
IMPORTANT: Import theme demo content this way if you want to keep your old content on site to not to be replaced with new demo content.
depreciated theme demo setup video: https://screencast-o-matic.com/watch/cD1DiKiq0N

How to set permalinks - top

If you want to use permalinks it is very important to follow next procedure to get it work on all posts, pages and custom post types

1. Deactivate "Insurance Agency" theme and all plugins

2. Go to settings/permalinks, set permalinks to default and save

3. Set permalinks to "post name" and save again

4. Activate "Insurance Agency" or "Insurance Agency child theme"

5. Activate all plugins recommended and required by theme

6. Permalinks should work now

How to work with child theme - top

If you want to make changes in theme's code, it is recommended to use child theme. Child theme is bundled in main-file.zip file that you downloaded. Unzip it and find child theme and upload it to WP dashboard. Activate it the same way as parent theme (details explained in steps for theme set up above).

Important: Do not add code in style.css file from child theme!

First, decide which color you want to use. Then in appearance/customize/color switch - mark radio button for that color. Options are default blue, orange and green. If you choose to use blue color then in child theme add your custom css code ONLY in style-default-blue.css file. If you choose to use orange color then in child theme add your custom css code ONLY in style-orange.css file. The same goes for green color. Open and see comments in those style files that will explain how to use them.

If you want to use style.less file for code customization or to change color by changing color variables from less file, it is recommended to add all your custom less code in child theme's style.less file. Before that make sure that in appearance/customize/color-switch 4th option for using less file is marked and WP-LESS plugin is installed and active. https://wordpress.org/plugins/wp-less/

To convert less code to css you can use this (or any other) less-to-css online compiler: http://less2css.org/ and copy/paste in it all content from style.less file from parent theme, then below that copy/paste all content from style.less file from child theme that you added as yours custom code. It will create new css content that you can copy/paste in style-default-blue.css in child theme. To continue to use only css files, deactivate wp-less plugin and mark "default blue" color switch option in appearance/customize/color switch.

How to change color - top

If you want more color options, you should change color using style.less file and less-wp plugin. To change color or make any other change in theme's code it is recommended to use child theme. You can find child theme in main_file.zip packet you downloaded. (unzip it)

Before making changes in style.less code, be sure that wp-less plugin is instaled and activated if you want to see those changes on site. https://wordpress.org/plugins/wp-less/

Theme’s color should be changed in CHILD theme's style.less file. There in style.less file in child theme are already pasted variables with hex code that has to be changed to hex code for color you want to have on site.

To edit style.less file in child theme, open it inside C-panel or via FTP

Find this code:


/*********** COLOR VARIABLES - CHANGE COLORS HERE ************/
@first-color: #42a5e4;
@first-color2: #288fc5;
@first-color3: #207dae;
@first-color4: #1a6a94;
@first-color5: #13577a;
@first-color6: #104a67;
@first-color7: #cee7f7;

@second-color: #282c34;
@second-color2: #2b3039;
@second-color3: #646872;
@second-color4: #454c59;
@second-color5: #1d2b33;
@second-color6: #22252b;
@second-color7: #e4e8ee;
@first-color-transparent: rgba(66, 165, 228, 0.8);
	

#42a5e4,#288fc5 etc - are color's HEX values.

@first-color,@first-color2,@second-color etc - are color's variables

In Theme demo colors assigned to these color variables are: @first-color, @first-color1 etc = light blue colors, @second-color, @second-color2 etc - dark blue colors

Now when you know which colors in Theme demo are assigned to color variables you can change colors. Basicaly you should replace color HEX value for every variable with color HEX value for color you want. Or you can try to just add color name (e.g. red) instead of HEX values but it is more for testing purpose. To find HEX value for color you can use Photoshop or other software for graphic or take a look at this online color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

After you changed hex codes for color and saved style.less file, new color should appear when you refresh page. (wp-less plugin is still activated). Now, you can leave it that way and continue use Theme if you're more comfortable that way (you don't like to work with code) or (that is recommended) go to one of less-to-css online compilers like: http://less2css.org/ and copy in that all code from parent theme style.less file and below that all changed variables from child theme's style.less file, paste into editor and convert into css code. Then, open child theme's style-default-blue.css file and copy/paste converted css code from compiler into it. (don't delete anything that is in child css files, the links and comments). Make sure that in appearance/customize/color-switch, marked option is "default blue". After this, wp-less plugin can be (and should be) deactivated.

orange and green color's less code variables:


/*ORANGE COLORS*/ @first-color: #e47563; @first-color2: #c55643; @first-color3: #ab4636; @first-color4: #924030; @first-color5: #783424; @first-color6: #672a1e; @first-color7: #f5d1cc; @second-color: #312726; @second-color2: #382c2a; @second-color3: #706462; @second-color4: #574643; @second-color5: #32201c; @second-color6: #292220; @second-color7: #ece3e2; @first-color-transparent: rgba(228, 117, 99, 0.8);


/*GREEN COLORS*/ @first-color: #68c399; @first-color2: #41ba86; @first-color3: #20ac6f; @first-color4: #1a9364; @first-color5: #137a54; @first-color6: #106749; @first-color7: #cef7e9; @second-color: #27332c; @second-color2: #2a3830; @second-color3: #627067; @second-color4: #445849; @second-color5: #1d3328; @second-color6: #222b26; @second-color7: #e3ede4; @first-color-transparent: rgba(104, 195, 153, 0.8);

Basic theme structure (how Theme works) - top

Theme's front page or "one page" page consists of page sections . Every page section is one post that you can find in "Page sections" custom post type (left top of Dashboard). ("Page sections2" is also custom post type which works the same way as "page sections" but it is used for home in multipage and will output menu2 that is used for multipage website.) If you imported demo.xml file you already have all posts there, you can modify it or remove it or add new. If you activated Post_type_order plugin then re-order link appears and you can reorder Page section's posts (or any other posts).

You can add content in page sections through text editor using text or shortcodes or page builders templates. (list of shortcodes is added below, page builder will be explained in next section).

Page section custom post type

How to use page builder - top

If you didn't it is recommended to read previous section about Theme's structure to better understand this section about page builder.

Theme's custom Page builder is based on Unyson page builder but it is modified for this Theme.

Make sure that "Unyson" plugin is activated and go to Unyson link in Dashboard (top left of Dashboard).

Notice: Page builder's extensions other then "page builder" are not visible in dashboard. They've never been used for theme and to avoid confusion they are removed. If you want to make them visible and available again (not recommended, but if you want to test it with theme) it is recommended to use "child theme" and to add this code in functions.php file in child theme:
remove_action('admin_print_scripts', 'rt_insurance_hide_extensions_from_the_list');

Click to "Settings" and make sure that Page builder is activated for all options so it can be used in all posts and pages.

If you imported demo.xml you already have templates needed for this theme but you can add your templates too.

IMPORTANT!-All custom made blocks are in folder "Insurance Agency/framework-customizations" and if you ever switch to another theme to not to lose content, this folder and rt-Insurance Agencytheme-functions plugin should be used with new theme.

Examples for creating page builder content and adding them in "Page sections" posts

1. "Service columns (insurance products in theme demo)"

Activate page builder in "page sections"post

- Add "Service columns":

Make sure that this page section is 100% wide and don't have top and bottom paddings:

Shortcodes - top

Shortcode list

Use only available variables for shortcodes. Which variables are available for certain shortcode will be shown below in shortcode list

1.

Business partners carousel shortcode

[business_partners_carousel]

Example with attributes: [business_partners_carousel columns="6" limit="-1" order="ASC"]

Attributes:

limit - For number of posts that will appear (add number inside quotes, example: [rt_gallery limit="5"] )

order - For post order

To show posts from newest to oldest add DESC to quotes, example: [rt_gallery order="DESC"]

To show posts from oldest to newest add ASC to quotes, example [rt_gallery order="ASC"]

columns - For number of columns. Available option: 1,2,3,4,5,6.

2.

Team shortcode

[team]

Example with attributes [team columns="3" limit="-1" order="DESC"]

Attributes:

columns - For number of columns, options from 1 to 6 columns available.

3.

Home blog posts shortcode

[blog_news_carousel]

Example with attributes: [blog_news_carousel columns="3" limit="-1" order="DESC"]

4.

Testimonials shortcode

[testimonials_carousel]

Example with attributes: [testimonials_carousel limit="-1" order="ASC"]

5.

Gallery filterable shortcode

[rt_gallery_filter]

Example with attributes: [rt_gallery_filter limit="-1" order="ASC" columns="3"]

6.

Carousel2 shortcode (not used in theme demo).

[carousel2 columns="6" limit="-1" order="ASC"]

Following shortcodes already have content elements in page builder which are used instead of them but you can use them also if you wish or if it is nessesary.

7.

Main headline shortcode.

[main_headline headline="" subheadline=""]

Very often used in top of "Page sections" posts, see screenshot.

8.

Button shortcodes

[button1 url="http:..." content="button" position="text-center" target="_blank"]

Variables:

url - For URL of page where button will link, start with http://...

content - For button text

position - For button position, available options: "text-left", "text-center", "text-right" - meaning is obvious.

target - If link will open in new tab or the same tab, available options: "_blank", "_self" .

8.

Social icon shortcode

[social_icon]

[social_icon] Example with attributes: [social_icon url="https://linkedin.com" icon="linkedin" target="_blank"] Use icon names from this list http://fontawesome.io/cheatsheet/

10.

One counter shortcode

[one_counter headline="headline" number="50" column="col-sm-4"]

12.

Bootstrap columns shortcodes

[container]content[/container] [container][one]content[/one][/container] [container][one_third]content[/one_third][one_third]content[/one_third][one_third]content[/one_third][/container] [container][one_forth]content[/one_forth][one_forth]content[/one_forth][one_forth]content[/one_forth][/container] [container][one_half]content[/one_half][one_half]content[/one_half][one_half]content[/one_half][/container]

Code snippets


Insurance-list

<ul class="insurance-list"> <li class="insurance-list-title"> Features <span>Amount </span> </li> <li> Amound of Payment: <span>From $20000 to $30000 </span> </li> <li>Risk Level: <span>Level2 </span> </li> <li> Location: <span>USA </span> </li> <li>Number of people: <span>Max 8 </span> </li> <li>Support: <span>24h/7days </span> </li> </ul>

biography list in team single

<div class="bio-list"> <ul> <li>Years of experience: <span>16 </span> </li> <li>Hometown: <span>NYC </span> </li> </ul> <ul> <li>Contract signed: <span>97 </span> </li> <li>Available for work: <span>yes </span> </li> </ul> </div>

button in single team

<div class="button1"><a href="MAILTO:someone@example.com">send email</a></div>

icon list in team

<li> <a href="LINK HERE"><i class="teamicon fa fa-linkedin"></i></a> <li>

Menus - top

Explained also in first section (Steps for Theme set-up)

Very important detail about menu for front page ("menu1" that is set as "Menu for front page") is that links in it need to be connected with page section's "slug" that menu link will scroll to. Page sections's "slug" and menu link should have the same name.

See screenshot to find where in page section is slug:

and where slug's name should be added in menu (with # before it):

Be sure to always use "Links" from left side when adding links for page sections in "menu1" for front page. See screenshot:

Page templates - top

In „page templates“ folder there are 5 page templates. Template „Front Page displays page sections posts“ and "Front Page displays page sections posts2" should be used for homepages. First one for one page site, second one for multipage homepage. How to set page to display page sections as front page is explained in ""Steps for Theme set-up. Other templates should be used for inner pages. Example of page template activation:

Theme translation - top

Activate translation plugin (can use Polylang, tested with theme). https://wordpress.org/plugins/polylang/ Check if settings/languages tab in Dashboard appears. In Theme's folder "languages" default po and mo files are included. To translate text strings in theme, please rename default.po and default.mo files to "language code" for language you want to translate in, for example if you translate to Portugales language code is "pt_BR" so default.po and default.mo should be renamed to "pt_BR.po" and "pt_BR.mo" Then open po file with Poedit and translate text strings that will appear .http://poedit.net/ More details about WordPress translation here:http://codex.wordpress.org/WordPress_in_Your_Language http://codex.wordpress.org/Installing_WordPress_in_Your_Language

Contact form - top

Make sure contact form plugin is activated and add this code snippet in contact form:

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email Address"]
[text* your-subject placeholder "Subject"]

[textarea your-message placeholder "Please leave us a message."]
[submit "Send"]

	

For address information use this code in text editor :

 
<div class="address-inner">
<h4>Contact information</h4>
Praesent tempus lacus sit enenatis laoreet enean aliquet faucibus lorem ipsum dolor sit.
<ul class="ul-list">
	<li><i class="fa fa-phone"></i> (232) 236 23 23</li>
	<li> <i class="fa fa-envelope"></i> insurance.com</li>
	<li><i class="fa fa-map-marker"></i> Example Street 123, City</li>
</ul>
</div>
</div>
 

	   

For google map add embed map code in div tag like in example below and copy/paste to your site (delete width and height from google map embed code if you want it to be responsive): https://support.google.com/maps/answer/3544418?hl=en

 
 
<div class="map-overlay" onClick="style.pointerEvents='none'"></div>
<div class="map">

ADD HERE GOOGLE MAP EMBED CODE!

</div>



How to reorder posts (page section posts) - top

Use this plugin for reordering posts. Instal and activate. It will add re-order link next to every post type for manual post reorder. https://wordpress.org/plugins/metronet-reorder-posts/

Plugins - top

More about plugins you can find in plugin's header informations.

4 plugins are bundled with theme: 1. Rt Insurance Agency theme functions, 2. Rt Unyson Framework Customizations 3.Revolution slider

Revolution slider - premium plugin, when this plugin is installed then you can upload revslider1.zip file that contains demo content for this slider. (this is described in Steps for Theme set-up) revslider1.zip is inside "sliders-demo" folder. Take a look at official documentation in folder "documentation/slider documentation". Official page:

http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380

Rt Insurance Agency theme functions Theme's plugin that contains custom post types and shortcodes for theme. Should always be activated with theme.

Rt Unyson Framework Customizations Theme's plugin for Unyson framework customization. Should always be activated with theme.

Unyson framework plugin Only page builder is used from this plugin and modified for this Theme. Official page: https://wordpress.org/plugins/unyson/

Contact form 7 plugin For contact form, see information about contact form above. Official page: https://wordpress.org/plugins/contact-form-7/

Video lightbox plugin For popup image, see more information in "Custom post types - gallery" section. Official page: https://wordpress.org/plugins/wp-video-lightbox/

Breadcrumbs plugin Official page: https://wordpress.org/plugins/breadcrumb-navxt/

Graphic charts plugin Official page: https://wordpress.org/plugins/visualizer/

Widgets - top

Appearance/widgets in Dashboard. Official documentation: http://codex.wordpress.org/WordPress_Widgets

Theme has 7 widgetized areas.

For "footer first" and "header second" widget areas there are code snippets that are used for icons.

In "footer first" and "header second" widget areas add "text widget" and add code snippets (below) for icons in it and edit it with your links and text. (icon list, please find if icon you want to add exist on list: http://fontawesome.io/cheatsheet/ ) Below is code for header first widget area. (header icon in theme demo)

	

          <a href="LINK TO YOUR TWITTER ACCOUNT"><i class="fa fa-twitter"></i></a>
          <a href=""><i class="fa fa-facebook"></i></a>
          <a href=""><i class="fa fa-linkedin"></i></a>
          <a href=""><i class="fa fa-twitter"></i></a>

          <a href="skype:...?call"><i class="fa fa-phone"> <span>(232) 235 23 55</span></i></a>
          <a href="mailto:someone@yoursite.com"><i class="fa fa-envelope last"> <span> example@example.com</span></i></a>

Below is code for footer first widget area. (footer icon in theme demo)

	


<ul class="socialicons text-center">
<li>
<a href="https:...LINK TO YOUR FACEBOOK ACCOUNT"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href=""><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href=""><i class="fa fa-linkedin"></i></a>
</li>
 <li>
<a href=""><i class="fa fa-instagram"></i></a>
</li>
 <li>
<a href=""><i class="fa fa-skype"></i></a>
</li>
<li>
<a href=""><i class="fa fa-reddit"></i></a>
</li>
<li>
<a href=""><i class="fa fa-youtube"></i></a>
</li>
</ul>


Custom post types - team, gallery, events, page sections - top

Custom post types in this Theme are: "Page sections", "Team", "Gallery", "page sections2", "business partners carousel", "gallery filter", "carousel2", "Testimonials carousel". Custom post type is added via plugin (see more above about plugins and shortcodes). Links for custom post types are in top left of Dahsboard.

Page sections

Every post from "Page section" custom post type appears in front page. Every post has meta-boxes for choosing width of post, background color, padding space etc, you can find it below text editor. More details about "Page sections" find in "Steps for theme set-up". Individual posts for this custom post type should not be visible. (good for SEO to not to duplicate content)

Team

"Team" custom post type is added in Theme via shortcode, more information about shortcodes above.

In every "Team" individual post following information can be added: Headline - for team member name, text editor - for text about team member, metabox - for removing sidebar in post, team member job/position - for team member job, feature image - for image, team member information- for info like social media that appear on roll over team member image (see Theme demo)

In individual team posts everything from fields listed above will appear except "Team member custom html for team page". In Team query that is added in front page via shortcode appears everything except text from text editor.

This is code snippet for adding in "Team member social icons" field that will appear on roll over team member image. (icon list, please find if icon you want to add exist on list: http://fontawesome.io/cheatsheet/ )

Every

		 
<li>		     
<a href="ADD YOUR LINK HERE"><i class="teamicon fa fa-facebook"></i></a>
</li>	
		 
is one icon, just add your link and icon name. Delete or add as much as you need icons.

	 

<li>		     
<a href="ADD YOUR LINK HERE"><i class="teamicon fa fa-facebook"></i></a>
</li>	
<li>						  
<a href="#"><i class="teamicon fa fa-twitter"></i></a>
</li>	
<li>	
<a href="#"><i class="teamicon fa fa-linkedin"></i></a>
</li>	

 

This is code for "team member custom html". In demo, it is used for button that appear in individual team page.

     <div class="button1">
<a href="MAILTO:someone@example.com">send email</a>
</div> 
       
	 

Gallery

"Gallery" custom post type is added in Theme via shortcode, more information about shortcodes above.

In every "Gallery" individual post following information can be added: Headline - for image name, text editor - for text about image, metabox - for removing sidebar in post, feature image - for image, excerpt - for info like link to individual gallery post or/and popup image that appears on roll over gallery image (see Theme demo)

In individual gallery posts everything from fields listed above will appear except the excerpt. In Gallery query that is added in front page via shortcode appears everything except text from text editor.

This is code snippet for adding in excerpt that will appear on roll over gallery member image. (activate wp video lightbox plugin to achieve popup image effect) (If you know nothing about HTML and really really don't know where to add links or change icons, please send support message for help.)

    
		  
		  <a href="ADD IMAGE FOR POPUP LINK HERE" 
		  rel="wp-video-lightbox" title="This is the description">
		  <i class="fa fa-search"></i></a> 
		  
	      

How to change favicon - top

https://codex.wordpress.org/Creating_a_Favicon

CSS files - top

style.css file as main styling file (and style.less file with the same content, see more about less files above in "how to change color". In assets/css there are: bootstrap.css, font-awesome.css (with fonts folder) and animate.css that are connected via links in top of style.css

JS files - top

In assets/js there are all JS files needed, connected via functions.php and scripts.js for preload scripts.

PHP files - top

Framework-customizations folder with custom shortcodes for Unyson page builder. Bundled plugins in plugins folder. Other php files are standard WP files.

Sources and Credits - top

More about js and css files credit you can find in js and css file’s headers


Once again, thank you so much for purchasing this theme. If you have more general question relating to themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

RayoflightThemes

Go To Table of Contents