Created: 02/16/2015 m/d/y
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!
Upload „psychologist.zip“ and „psychologist-child.zip“ folders to your hosting inside wordpress/wpcontent/themes folder and unzip it.Or upload it in Dashboard.
In WordPress dashboard go to appearance/themes/ and activate theme „Psychologist“
Install and activate all recommended and required theme’s plugins
When finish plugin's instalation and activation new post types links should appear (left Dashboard side) for team, events etc.:
Site will look like this:
Click on link Unyson and download and set page builder extension
Go to tools/import and import demo.xml file. If it happens that some of images are not imported, just continue adding your images. When it is imported go to "team" and "gallery" custom post types, and in blog posts to add your images in "featured image".
Open "pages" link in Dashboard and check if page named "home" is set to template "Front page template with slider wide". Also if you didn't import demo.xml file and you don't have page named "home" with template "front page template with slider wide" please create that page. That will be a static front page for homepage as in Theme demo. (see next step for details)
Go to appearance/customize and set static page (front page) for home page
Go to appearance/menus (or appearance/customize/menus like in demo video) and check if "menu1" and "menu2" appears. If you didn't import xml file, please make two menus and you can name them as you wish. Important is that one menu is for front page and another one is for inner pages. If you imported demo.xml then you already have "menu1" set for front page and "menu2" for inner pages.
Read more about menus in "Menus" section below
Go to appearance/customize and connect menus for pages. "menu1" as the menu for front page, connect to "primary menu" and "menu2" as menu for inner pages, connect to "header menu"
Go to appearance/customize add your copyright details, upload logo and add site title and tagline.
If you set home page as static page with template "Front page template with slider wide" and stil didn't upload revolution slider demo content (sliders-demo/revslider1.zip) it is perfectly fine if you see this on homepage:
Now click to "Revolution slider" in Dashboard and upload sliders-demo/revslider1.zip file with demo content and add your images in it. Official plugin page: http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
If you want to make customization in code it is recommended to use Child Theme. Activate psychologist-child theme and repeat the same for menu and static page settings as for main theme (previous steps). If you make customization in style.less file it is important to make the same customization in style.css file. Or just make customization in style.less file and then use some of less to css compilers to make css file. http://less2css.org/
Set contact form to looks like in Theme demo. See "contact form" section below.
Set Event calendar plugin. It is important not to change default settings. Change only „events template“ to "Default page template" and save changes. Official page: https://wordpress.org/plugins/the-events-calendar/
Set All Around slider (in left bottom of Dashboard there is link for it). You can create your slides or upload sliders-demo/all_around_export.json file. Copy shortcode that will appear after slider is created and paste it in "page section" where you want carousel to appear. Official page: http://codecanyon.net/item/all-around-wordpress-content-slider-carousel/5266981
Set CP Appointment calendar - go to settings/cp appointment calendar and customize it, for more info see official page: https://wordpress.org/plugins/cp-appointment-calendar/ To have more features and to get function to redirect on another page instead of Paypal you can buy premium plugin
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
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
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.
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
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:
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/
Use only available variables for shortcodes. Which variables are available for certain shortcode will be shown below in shortcode list
Example [rt_gallery limit="5" order="ASC"]
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"]
Example [team limit="3" order="ASC" columnsteam="col-md-4"]
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.
Example: [homeblog limit="2" order="DESC" columnshomeblog="col-md-6"]
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!
Example: [events limit="5" order="DESC"]
[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".
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"]
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"]
headline - for adding text in quotes:
percentage - for percentage in quotes:
example: [one_skill headline="one skill" percent="90%"]
headline - for adding text in quotes:
number - for number in quotes:
example: [one_counter headline="headline" number="250"]
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"]
[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
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"]
[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]
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:
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:
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
<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>
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/
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/
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 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.
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" 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/ )
<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" 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>
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
In assets/js there are all JS files needed, connected via functions.php and scripts.js for preload scripts.
Framework-customizations folder with custom shortcodes for Unyson page builder. Bundled plugins in plugins folder. Other php files are standard WP files.
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.