“Psychologist WordPress Theme” Documentation by “Rayoflightthemes.com


Psychologist - Psychological Practice WordPress Theme

Created: 02/16/2015 m/d/y
By: Rayoflightthemes

Thank you for purchasing Psychologist 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!


THEME DEMO SETUP VIDEO http://screencast-o-matic.com/watch/cD1brQiYxb


IMPORTANT: always activate Unyson page builder extension before demo.xml content import!

Table of Contents (FAQ)

  1. Steps for Theme set-up - READ FIRST!
  2. How to set permalinks
  3. How to change color
  4. Basic theme structure (how theme works)
  5. How to use page builder
  6. Shortcodes
  7. Menus
  8. Page templates
  9. Theme translation
  10. Contact form
  11. How to reorder posts (page section posts)
  12. Plugins
  13. Widgets
  14. Custom post types - team, gallery, events, page sections
  15. How to change favicon
  16. CSS files
  17. JS files
  18. PHP files
  19. Sources and credits

Steps for Theme set-up - top

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 "Psychologist" 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 "Psychologist" or "Psychologist child theme"

5. Activate "Events calendar" plugin first

6. Activate all other plugins recommended and required by theme

7. Permalinks should work now

8. If you ever deactivate Events plugin or Theme you need to repeat these steps again to make permalinks work again

How to change color - top

If you want 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.

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

Find this code:

	/*********** COLOR VARIABLES - CHANGE COLOR HERE ************/
@dark-color: #252b3b;
@light-color: #ff6544;
@base-color1: #f0f0f0;
@base-color2: #555555;
	

#252b3b,#ff6544,#f0f0f0,#555555 - are color's HEX values.

@dark-color,@light-color,@base-color1,@base-color2 - are color's variables

In Theme demo colors assigned to these color variables are: @dark-color = blue color, @light-color = orange color, @base-color1 = light grey color, @base-color2 = dark grey color

Now when you know which colors in Theme demo are assigned to color variables you can change colors. Basicaly you need to 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 all code from child theme's style.less file, paste into editor and convert into css code. Then, open child theme's style.css file and copy/paste converted css code from compiler into it. (below first comment in style.css, without it child theme won't work). After this, wp-less plugin can be (and should be) deactivated.

Basic theme structure (how Theme works) - top

Theme's front page or "one page" page consists of page sections (mostly with different color backgrounds in Theme demo). Every page section is one post that you can find in "Page sections" custom post type (left top of Dashboard). 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: Since version 1.2 - extensions other then "page builder" are not visible in dashboard anymore. 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', 'psy_hide_extensions_from_the_list');

IMPORTANT - activate only "Page builder" extension (click on button "download")because it is only extension needed and customized for this Theme.

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!-It is recommended to use "page section's" text editor instead of page builder for next 4 (custom post type)shortcodes: homeblog, events, gallery, team. You also can use main-headline shortcode [main_headline headline="text" subheadline="text"] in combination with those shortcodes instead page builder and it's content element "main headline" (because text editor and page builder can't work together). If you must use page builder for shortcodes then add them in "text block" page builder content element.

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

Examples for making page builder templates and adding them in "Page sections" posts

1. "Main columns" page builder template example

Activate page builder in "page sections"post

- Create "main columns" template:

Make sure that this page section is 100% wide and don't have top and bottom paddings: For icons it is important to see the list for available icons and add correct icon name for icon you choose. See icon list: http://fontawesome.io/cheatsheet/

See selected icon names in screenshot below, only name after fa- should be added in icon field in page builder. Same applies for every icon in this list.

Shortcodes - top

Shortcode list

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

IMPORTANT! - Next 7 shortcodes are used in Theme's demo. Shortcodes for custom post types are: team, homeblog, events, gallery.

1.

Gallery shortcode

[rt_gallery]

Example [rt_gallery limit="5" order="ASC"]

Variables:

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"]

2.

Team shortcode

[team]

Example [team limit="3" order="ASC" columnsteam="col-md-4"]

Variables:

columnsteam - For number of columns, add Bootstrap class inside quotes (available classes for columns are: col-md-3 - for 4 columns, col-md-4 - for 3 columns, col-md-6 - for 2 columns, col-md-12 - for 1 column. Don't use other classes! When you want to add one team image in page builder's column it is recommended to use this shortcode: [team limit="1" order="ASC" columnsteam="col-md-12"] This shortcode is useful only when you want to show one team member. That shortcode can be added in 1/1 page builder column or in 1/2 or in any other but it will only show one team member no matter how much times you add that code. If you have text content to add in other page builder columns that is right choice with this shortcode.

3.

Home blog posts shortcode

[homeblog]

Example: [homeblog limit="2" order="DESC" columnshomeblog="col-md-6"]

Variables:

columnshomeblog - For number of columns, add Bootstrap class inside quotes (available classes for columns are: col-md-3 - for 4 columns, col-md-4 - for 3 columns, col-md-6 - for 2 columns. Don't use other classes!

4.

Events timeline shortcode

[events]

Example: [events limit="5" order="DESC"]

5.

Icon shortcode

[social_icon] Icons shortcode, used in widgets for social icons. Example: [social_icon url="https://linkedin.com" icon="linkedin" target="_blank"] Use icon names from this list http://fontawesome.io/cheatsheet/ Explanation about icon usage can be found in "Main columns page builder example".

6.

Main headline shortcode.

[main_headline]

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

Variables: headline and subheadline for adding text in quotes, example: [main_headline headline="this is headline" subheadline="this is subheadline"]

7.

Buttons shortcodes

[button1]

[button1small]

[button1big]

[button_cta]

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" .

Example: [button1 url="http://themeforest.net/user/rayoflightt" content="button" position="text-center" target="_blank"]



IMPORTANT! - Shortcodes below (number 8 - number 12) are not used in Theme's demo and are considered as depreciated functionality, but if you don't want to use page builder for some reason you can test them.

8.

One skill shortcode (appears in "about us" page section in theme demo).

[one_skill]

Variables:

headline - for adding text in quotes:

percentage - for percentage in quotes:

example: [one_skill headline="one skill" percent="90%"]

9.

One counter shortcode (appears in "about us" page section in theme demo).

[one_counter]

Variables:

headline - for adding text in quotes:

number - for number in quotes:

example: [one_counter headline="headline" number="250"]

10.

One service shortcode

[one_service]

Variable:

icon - for adding icon code in quotes

Use icon names from this list http://fontawesome.io/cheatsheet/ Explanation about icon usage can be found in "Main columns page builder example" in text above.

content - for adding text in quotes

headline - for adding headline in quotes

example: [one_service icon="fa-arrow-circle-up" content="text" headline="headline"]

11.

Main columns shortcodes

[main_column1] [main_column2] [main_column3] [main_column4]

Number after "main_column" is for different colors of column. main_column1 for dark-color, main_column2 for white-color, main_column3 for light-color; main_column4 for base-color1

Variables:

icon - for adding icon code in quotes

Use icon names from this list http://fontawesome.io/cheatsheet/ Explanation about icon usage in "Main columns page builder example" in text above.

content - for adding text in quotes

headline - for adding headline in quotes

width - for adding class for width in quotes, available options: "column1", "column2", "column3", "column4", "column5", for 100% width, 50% width; 33% width, 25% width and 20% width.

example: [main_column4 icon="fa-frown-o" width="column3" headline="headline" content="text"]

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]

Menus - top

Explained in first section (Steps for Activism Theme set-up) in step 7 and 8

Very important detail about menu for front page ("menu1" that is set as "primary menu") 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 6 page templates. Template „Front Page Template With Slider Wide“, "Front Page Template With Slider Boxed" and „Front Page Template No Slider“ should be used for 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:
<div class="col-sm-12">
[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email Address"]
[text* your-subject placeholder "Subject"]
</div>
<div class="col-sm-12">
[textarea your-message placeholder "Please leave us a message."]
[submit "Send"]
</div>
	

For contact information use this code for text styling (add text in h3 and ul li tags as in example):

 
<h3>Contact information</h3>
<b>
<ul class="contactaddress" style="margin:0;padding:0; list-style: none;">
	<li>Address: 123 Street, City</li>
	<li>Phone: 123/1234-1234</li>
	<li>Working hours: 09am - 17pm</li>
</ul>
</b>
	   

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="iframe-container">

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/post-types-order/

Plugins - top

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

4 plugins are bundled with theme: 1. Rt psychologistheme functions, 2. Rt Unyson Framework Customizations 3. All Around slider, 4. 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

All Around slider / carousel - premium plugin, when installed upload all_around_export.json file that contains demo content for this slider. (this is described in Steps for Theme set-up) all_around_export.json is inside "sliders-demo" folder. Official page:

http://codecanyon.net/item/all-around-wordpress-content-slider-carousel/5266981

Rt psychologisttheme 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/

Events plugin Timeline events list on front page displays this plugin's posts. It is added via shortcode for events, more information about shortcodes above. Official page: https://wordpress.org/plugins/the-events-calendar/

CP Appointment calendar plugin Official page https://wordpress.org/plugins/cp-appointment-calendar/ Quote: "Please note that this is a plugin originally designed to accept bookings linked to PayPal payments. The feature for working without PayPal is implemented/available in the Pro version: http://wordpress.dwbooster.com/calendars/cp-appointment-calendar#download "

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/

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 this code snippet (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/ )

Every [social_icon url="https://twitter.com" icon="twitter"] is one shortcode for one icon, just add your link and icon name. Delete or add as much as you need these icon shortcodes.

	

<ul style="list-style: none;" class="socialicons text-center">

[social_icon url="https://twitter.com" icon="twitter"]
[social_icon url="https://facebook.com" icon="facebook"]
[social_icon url="https://youtube.com" icon="youtube"]
[social_icon url="https://instagram.com" icon="instagram"]
[social_icon url="https://linkedin.com" icon="linkedin"]

</ul>


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

Custom post types in this Theme are: "Page sections", "Team" and "Gallery". "Events" 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, excerpt - 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 the excerpt. 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 excerpt 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="#"><i class="fa fa-twitter"></i></a>
</li>	
		 
is one icon, just add your link and icon name. Delete or add as much as you need icons.

	 
<ul>	
<li>		     
<a href="ADD YOUR LINK HERE"><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 class="teamlinkwrapper">	
<a href="" class="teamlink">read more <i class="fa fa-arrow-right"></i></a>
</li>	
</ul>
		
		 

In this part of code add link for another page (add link for page instead of YOUR LINK HERE!)

<li class="teamlinkwrapper">	
<a href="YOUR LINK HERE!" class="teamlink">read more <i class="fa fa-arrow-right"></i></a>
</li>	
	 

Gallery

"Gallery" custom post type is added in Theme via shortcode, more information about shortcodes above. You should use images with same width and height if you want to achieve boxed gallery look without empty space at bottom. It is also possible to achieve that look with different height images but not always easy to achieve that(see Theme demo for that). It is Masonry gallery style and images can have different sizes but it is common, as in every Masonry gallery, to have some empty space at bottom of gallery.

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-arrows-alt"></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