Created: 09/22/2014 m/d/y
Thank you for purchasing Activism 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!
1. Upload „activism.zip“ and „activism-child.zip“ folders to your hosting inside wordpress/wpcontent/themes folder and unzip it.
2. In WordPress dashboard go to appearance/themes/ and activate theme „Activism“
3. Install and activate all recommended and required theme’s plugins
When finish plugin's instalation and activation you should see new post types links (left Dashboard side) for team, page sections, parallax section and testimonials etc.:
Site will look like something like this:
4. Go to tools/import and import demo.xml file
5. Open "pages" link in Dashboard and check if page named "home" is set to template "Front page template with slider". Also if you didn't import demo.xml file and you don't have page named "home page" with template "front page template with slider" please create that page. That will be a static front page for homepage as in Theme demo. (see next step for details)
6. Go to appearance/customize and set home page (front page) for static page
7. Go to appearance/menus 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 next step below and in "Menus" section in documentation.
8. Go to appearance/menus 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"
9. Go to appearance/customize and add your copyright details, upload logo and add site title and tagline.(this is code snippet for copyright with clickable link:
Copyright <a href="link to your page">copyright text </a>)
If you set home page as static page with template "Front page template with slider" and stil didn't upload revolution slider demo content (revslider_slider_for_import/revslider1.zip) it is perfectly fine if you see this on homepage:
10. Now click to "Revolution slider" in Dashboard and upload revslider_slider_for_import/revslider1.zip file contains demo content and add your images in it. Official plugin page: http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
11. If you want to make customization in code it is recommended to use Child Theme. Activate activism-child theme and repeat the same for menu and static page settings as for main theme (previous steps).
12. 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/
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 "Activism" theme and all plugins
4. Activate "Activism" or "Activism 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 in style.less file:
/********* CHANGE THESE VARIABLES FOR COLOR *********/ @base-color: #1d0907; @main-color: #e7453a; @rgba-color: rgba(231, 69, 58, 0.8);
#1d0907, #e7453a, rgba(231, 69, 58, 0.8) - are color's HEX values.
@base-color, @main-color, @rgba-color - are color's variables
In Theme demo colors assigned to these color variables are: @base-color = dark color, @main-color = red color, @rgba-color = red transparent color appear on roll on gallery images
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 softvare 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, content can be text or shortcodes or page builders templates. (list of shortcodes is added below, page builder will be explained in next section). More complex posts in "Page sections" are built with pagebuilder, those are posts with more columns. But some of posts are just shortcodes pasted in "Page sections" posts. For example: team, testimonials, homeblog etc. Those shortcodes will display custom post types which are created as posts and can appear via shortcode anywhere in Site. More about custom post types and shortcodes in next sections.
Page section custom post type
Go to appearance/page builder to use pagebuilder. You can use pagebuilder to create "templates" and add available "blocks" with content in templates. If you imported demo.xml you already have templates needed for this theme but you can add your templates too.
When pagebuilder templates are created you can add them whereever you want it to appear on Site. If you want it for example in front page then add it in one of posts inside "Page sections".
One of most useful blocks is "columns" because you can make as much columns in one page as you wish and fill them with text content. To add text or image content use "visual editor" block. Also you can use pagebuilder in inner pages, not just in front page.
Examples for making pagebuilder blocks and adding them in Page sections posts
1. "Goals" pagebuilder template example
- In appearance/page builder create "goals" template:Give it a name: Add "Main headline" and "goals one column" blocks as it is in screenshot: Add content in it - When finish adding content in pagebuilder template you can add it into "Page sections" post, see screenshots below:
- Template ID number can be changed in your example so be sure always to add template with correct name(name for template the same as in pagebuilder), don't pay attention to it's ID number because it can change.
All content (posts) from page sections will appear in page who's page template is set to "front page template". That page won't show it's own content as long as it has "front page template" set.
[events_timeline limit="5" order="asc" readmore="read more"] For events timeline custom post type. Attributes: limit (-1 for unlimited and any other positive number), order (asc-from oldest to newest, desc-from newest to oldest) readmore (any text you want to appear instead "read more" button text)
[activismtheme_testimonials] For testimonials custom post type
[team limit="4" order="DESC" columnsteam="col-lg-3"] For team custom post type. Add columnsteam="col-lg-3" attribute for 4 columns and columnsteam="col-lg-4" for 3 columns
[homeblog limit="4" order="DESC"] Use this shortcode in page section to display blog posts as columns carousel in homepage. For homeblog you can use category attribute like this: [homeblog category="CATEGORY-ID-YOU-WANT-TO-SHOW"]
[rt_events limit="4" order="DESC"] Use this shortcode to display events from events plugin.
[button_color url="" content="" target=""] [button_dark url="" content="" target=""] [button_color_donation url="" content="" target=""] Shortcodes for buttons [button_color_arrow icon="fa-arrow-right" url="" content="" target=""] Use icon names from this list http://fontawesome.io/cheatsheet/
[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 5 page templates and one default template. Template „Front Page Template With Slider“ 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). 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-6"> [text* your-name placeholder "Your Name"] [email* your-email placeholder "Your Email Address"] [text* your-subject placeholder "Subject"] </div> <div class="col-sm-6"> [textarea your-message placeholder "Please leave us a message."] [submit "Send"] </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/
3 plugins are bundled with theme: 1. Rt activismtheme functions, 2. Revolution slider, 3. Aqua pagebuilder plugin
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 "revslider_slider_for_import" 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 activismtheme functions Theme's plugin that contains custom post types and shortcodes for theme.
Aqua page builder plugin This plugin is updated and modified for this theme. Official page: https://wordpress.org/plugins/aqua-page-builder/
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/
Polylang plugin plugin For translation, see information about Theme translation above. Official page: https://wordpress.org/plugins/polylang/
Contact form 7 plugin For contact form, see information about contact form above. Official page: https://wordpress.org/plugins/contact-form-7/
Post types order plugin For reordering posts. Official page: https://wordpress.org/plugins/post-types-order/
WP LESS plugin For style.less file activation. If you want to use only style.css you can delete style.less and deinstal this plugin. More about LESS preprocessor: http://lesscss.org/ Official plugin page: https://wordpress.org/plugins/wp-less/
Font Awesome more plugin Official page: https://wordpress.org/plugins/font-awesome-more-icons/
WP Easy Paypal Payment Accept Official page: https://wordpress.org/plugins/wordpress-easy-paypal-payment-or-donation-accept-plugin/
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" widget area add "text widget" and add this code snippet (below) for icons in it and edit it with your links and text. (icon list: http://fontawesome.io/cheatsheet/ ) (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.)
<ul class="socialicons col-lg-12 startAnimation animated" data-animate="fadeInUp"> <li> <a href="LINK TO YOUR FB PAGE"><i class="fa fa-facebook"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-twitter"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-dribbble"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-youtube"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-skype"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-tumblr"></i></a> </li> </ul>
This is code snippet for "header second", procedure the same as for previous widget.
<ul class="socialicons text-right col-lg-12 startAnimation animated" data-animate="fadeInUp"> <li> <a href="LINK TO YOUR FB PAGE"><i class="fa fa-facebook"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-twitter"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-dribbble"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-youtube"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-skype"></i></a> </li> <li> <a href="LINK TO YOUR PAGE"><i class="fa fa-tumblr"></i></a> </li> </ul>
Custom post types in this Theme are: "Page sections", "Parallax sections", "Team" and "Testimonials". "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 and color, 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 can be 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, feature image - for image, excerpt - for info like social icons that appear on roll over team member image (see Theme demo)
In individual team posts all fields listed above will appear except the excerpt. In Team query, that is added in front page via shortcode, everything listed appears except text added in text editor. It appears only in individual team post.
This is code snippet for adding in excerpt that will appear on roll over team member image. (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.)
Team member two <div class="socialiconsteam"> <ul> <li><a title="Facebook" href="link.com">[icon name="facebook"]</a></li> <li><a title="Twitter" href="https://twitter.com">[icon name="twitter"]</a></li> <li><a title="LinkedIn" href="https://linkedin.com">[icon name="pinterest"]</a></li> <li><a title="Google Plus" href="https://google.com">[icon name="google-plus"]</a></li> <li><a title="Tumblr" href="https://tumblr.com">[icon name="tumblr"]</a></li> </ul> </div>
"Testimonials" custom post type can be added in Theme via shortcode [activismtheme_testimonials] (in Theme demo it is added in one of Parallax section posts), more information about shortcodes above.
Individual testimonial posts should not be visible. Testimonial query added via shortcode in theme (in parallax section) will display information from headline and text editor.
Just replace existing one with yours that you can generate at: http://www.favicon-generator.org/
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), owlcarousel.css, owltheme.css 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.
In assets/php there are queries for testimonials, team, and homeblog that are added in theme via shortcodes and metaboxes. 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.