“Activism WordPress Theme” Documentation by “Rayoflightthemes.com”

“Activism - Political Activism WordPress Theme”

Created: 09/22/2014 m/d/y
By: Rayoflightthemes

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!

Table of Contents

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

Steps for Theme set-up - top

Gutenberg update -tips - top

Theme version 1.2.8 and rt-activismtheme-functions plugin version 2.4 brings improved Gutenberg comparibility. If you already purchased theme before it is strongly recommended, before you update it, to import new demo version and start to use Gutenberg instead of old page builder. For new customers - it is recommended to use only Gutenberg editor, not old page builder. New demo file that you can upload, contains content ONLY for Gutenberg editor.

All custom post types (gallery, team etc) now have custom Gutenberg blocks that you can add in Gutenberg editor.

Atomic blocks plugin is strongly recommended to be used with this theme version for creating full width container (AB container custom block). You can also use AB space and button blocks from Atomic blocks plugin. Tip - Do not use "classic" Gutenberg block inside AB container it can crash down.

Few tips - there are 3 classes that can be added in "additional css" field in Gutenberg blocks if needed:

1. whitetext - add this in columns where you want text to appear white.

2. fix for bottom space for ab container - add this if AB container creates space at bottom of it

3. ab-block-container-content-fix - add this if AB container should have full width inner container (eg. used for slider)

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

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 in style.less file:

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

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, 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

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.

Be sure that "Aqua page builder" plugin is activated and go to appearance/page builder.

Theme's pagebuilder is based on Aqua page builder but it is updated and modified for this Theme.

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.

Shortcodes - top

[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/

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 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:

Theme translation - top

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

Contact form - top

Make sure contact form plugin is activated and add this code snippet in contact form:
<div class="col-sm-6">
[text* your-name placeholder "Your Name"] 
[email* your-email placeholder "Your Email Address"]
[text* your-subject placeholder "Subject"] 
<div class="col-sm-6">
[textarea your-message placeholder "Please leave us a message."]
[submit "Send"]

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.

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:


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/

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" 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">
<a href="LINK TO YOUR FB PAGE"><i class="fa fa-facebook">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-twitter">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-linkedin">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-dribbble">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-youtube">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-skype">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-tumblr">­</i></a>

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">
<a href="LINK TO YOUR FB PAGE"><i class="fa fa-facebook">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-twitter">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-linkedin">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-dribbble">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-youtube">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-skype">­</i></a>
<a href="LINK TO YOUR PAGE"><i class="fa fa-tumblr">­</i></a>

Custom post types - team, parallax sections, testimonials, page sections - top

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.

Page sections

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


Add posts in testimonials custom post type. One post is for one testimonial that will appear in slider as one slide (see Theme demo) In headline add name and in text editor add text for testimonial.

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

How to change favicon - top

Just replace existing one with yours that you can generate at: http://www.favicon-generator.org/

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), owlcarousel.css, owltheme.css 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

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.

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.


Go To Table of Contents