Candidates - Political and Activism WordPress Theme

Theme Documentation


Introduction

Thank you for purchase!

- This is documentation for "Candidates - Political and Activism WordPress Theme". Documentation consists of sections. Every section explains specific part of theme or functionality. List of sections is in left side of screen.

- If you are new to WordPress, it is recommended to read official WordPress documentation first.

- Please read theme documentation and follow instructions for demo theme content setup.

- Use search (ctrl+f keyboard shortcut to find specific words on page).

- If you have questions please send message here using account that you purchased theme with to confirm purchase.

- Before asking for support please read more about general support for themes and item support policy.

Demo theme content setup

Steps for demo theme content setup
1.
Unzip main_file.zip that you downloaded, find „candidates.zip“ and „candidates-child.zip“ files and uplad it to WordPress dashboard.
2.
In WordPress dashboard go to appearance/themes and activate theme „Candidates“.

3.
Install and activate all recommended and required theme’s plugins

When plugin's instalation and activation is finished you will see new post types (left dashboard side) for team, galleries, testimonials etc.

4.
Go to tools/import and import demo.xml file.

Demo.xml file is in "main_file.zip/demo_content" folder.

Image placeholders (blurred images) will appear instead of images. Theme demo images are not included in download. That is explained in theme description on Themeforest. Please add your images instead of placeholders.


5.
Go to appearance/menus and set demo content menu. Mark menu location: "Default multipage menu".
6.
Go to appearance/customize and set static page (front page) for home page

Set other theme options as well. More about theme options you can read in section "theme options".


8.
To set slider, click on "Revolution slider" in dashboard and upload revslider1.zip file that contains demo slider content. revsolider1.zip file is in main_file.zip/demo_content/revslider1.zip

Official plugin page: http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
More details in "slider revolution" section.

9.
To install widgets install this plugin: https://sr.wordpress.org/plugins/widget-importer-exporter/ and upload widgets.wie file from demo_content folder.
10.
Installation is finished. For more details and functions please see sections list in left side of screen.

Posts

- Posts are default WordPress functionality.

- When single post is open, excerpt field should be visible. If you don't see it, activate it in screen options (button that appears in top right side of screen when single post is open). Click on "screen options" and mark checkbox "excerpt". Excerpt field is useful for adding short text that will appear in posts short outputs like e.g. post boxes on demo homepage instead of text from text editor. It will also appear in search result instead of text from text editor. If excerpt is left blank, text from text editor will appear. Excerpt is available in following posts: post, icons one, icons carousel two, gallery filter.

- This theme has 2 additional custom options for single posts:

a) Option for add/remove sidebar from post (this option appears in all other custom post types as well).

b) Option for title background image (this option appears in all other custom post types as well).

General information about custom post types

All custom post types have default WordPress fields. That includes: title, text editor, featured image and some of them have excerpt field as well. All of them, except testimonials and multiscroll, have single post pages visible. Testimonials and multiscroll do not have single post pages visible to avoid duplicated content (bad for SEO). Most of custom post types have additional fields and most of the time, additional fields are used to appear in custom post loops added with shortcodes (page builder elements) in pages.

Team

About single team post.

- Team is theme specific custom post type. (code for team and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has 3 same custom options like default single posts (option for sidebar, and option for title background image).

- It has 2 more custom options for "team member function" and for "team member icon".

- This is code snipped from "team member icons" field (if you imported demo.xml file, the code is already there):

<ul class="wrapper100percent" style="padding: 0;">
<li>&­shy;<a href="#"><i class="fa fa-facebook icon">&­shy;</i></a>&­shy;</li>
<li>&­shy;<a href="#"><i class="fa fa-twitter icon">&­shy;</i></a>&­shy;</li>
<li>&­shy;<a href="#"><i class="fa fa-linkedin icon">&­shy;</i></a>&­shy;</li>
<li>&­shy;<a href="#"><i class="fa fa-youtube icon">&­shy;</i></a>&­shy;</li>
</ul>

- Customize it. Instead of # add your URL, list of icons is here: http://fontawesome.io/icons/

- Code should be added in "text" tab. See screenshot above.

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How all team posts can appear on specific pages?

- To have team posts carousel appears on pages, use page builder element "team shortcode RT" and it's settings.

Gallery simple

About single "gallery simple" post.

- "Gallery simple" is theme specific custom post type. (code for "gallery simple" and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has same custom options like default single posts (option for sidebar, option for title background image).

- It has 1 more custom option named "gallery image icons".

- This is code snipped from "gallery image icons" field (if you imported demo.xml file, the code is already there): (UPDATE from version 1.2.0 - Use second example code snippet.)

<div class="maskinner"><a href="#" data-elementor-lightbox-slideshow="yes" data-lightbox="example-set">­<i class="glyphicon glyphicon-search"></i>­</a>­<a href="#">­<i class="glyphicon glyphicon-arrow-right"></i> </a></div>

- Customize it. Instead of # add absolute URL for image from "media" tab in dashboard, list of icons is here: http://getbootstrap.com/components/#glyphicons

- Code should be added in "text" tab. See screenshot above.

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How all "gallery simple" posts can appear on specific pages?

- To have "gallery simple" posts appear on pages, use page builder element "gallery simple shortcode RT" and it's settings.

Icons one

About single "icons one" post.

- "Icons one" is theme specific custom post type. (code for "icons one" and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has same custom options like default single posts (option for sidebar and option for title background image).

- It has 1 more custom option named "icon carousel icon code snippet".

- It has excerpt field. Read about excerpt in "posts" section.

- This is code snipped from "icon carousel icon code snippet" field (if you imported demo.xml file, the code is already there):

<span class="glyphicon glyphicon-list"></span>

- Customize it. Icon name can be changed, list of icons is here: http://getbootstrap.com/components/#glyphicons

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How all "icons one" posts can appear on specific pages?

- To have "icons one" posts appear on pages, use page builder element "icons one shortcode RT" and it's settings.

Icons carousel two

About single "icons carousel two" post.

- "icons carousel two" is theme specific custom post type. (code for "icons carousel two" and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has same custom options like default single posts (option for sidebar and option for title background image).

- It has 1 more custom option named "icon carousel icon code snippet".

- It has excerpt field. Read about excerpt in "posts" section.

- This is code snipped from "icon carousel icon code snippet" field (if you imported demo.xml file, the code is already there):

<span class="glyphicon glyphicon-briefcase"></span>

- Customize it. Icon name can be changed, list of icons is here: http://getbootstrap.com/components/#glyphicons

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How "icons carousel two" all posts can appear on specific pages?

- To have "icons carousel two" posts appear on pages, use page builder element "icons carousel two shortcode RT" and it's settings.

Testimonials

About single testimonials post.

- Testimonials is theme specific custom post type. (code for testimonials and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has fields for title, text editor and featured image.

- It has no single post available.

How all testimonials posts can appear on specific pages?

- To have testimonials posts appear on pages, use page builder element "testimonials shortcode RT" and it's settings.

Gallery filter

About single "gallery filter" post.

- "gallery filter" is theme specific custom post type. (code for "gallery filter" and other custom post types is in rt-candidates-theme-functions plugin, that is bundled with theme).

- It has same custom options like default single posts (option for sidebar and option for title background image).

- It has 1 more custom option named "Gallery image icons".

- It has excerpt field. Read about excerpt in "posts" section.

- It has category field. Every category is one link in filtering menu.

- This is code snipped from "gallery image icons" field (if you imported demo.xml file, the code is already there): (UPDATE from version 1.2.0 - Use second example code snippet.)

<div class="maskinner"><a href="#" data-elementor-lightbox-slideshow="yes" data-lightbox="example-set">­<i class="glyphicon glyphicon-search"></i>­</a>­<a href="#">­<i class="glyphicon glyphicon-arrow-right"></i> </a></div>

- Customize it. Instead of # add absolute URL for image from "media" tab in dashboard, list of icons is here: http://getbootstrap.com/components/#glyphicons

- Code should be added in "text" tab. See screenshot above.

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How "gallery filter" all posts can appear on specific pages?

- To have "gallery filter" posts appear on pages, use page builder element "gallery filter shortcode RT" and it's settings.

Events

About single events post.

- Events is custom post type created by Events Calendar plugin. More information in official plugin's page: https://sr.wordpress.org/plugins/the-events-calendar/

About events calendar settings
It is recommended to have "boxed page no headline" set for events template.
How all events posts can appear on specific pages?

- To have events posts appear on pages, use page builder's element "events list shortcode RT" or "events timeline shortcode RT" and it's settings. Events posts can be displayed using page templates as well. More about page templates in section "pages and page templates."

Menu

Theme has 1 custom menu location. Theme's custom menu location:
- Default multipage menu (multipage website).
When demo.xml is imported, custom menu is imported as well. You only need to assign it. See image for details and section "demo theme content setup".

Contact form

Everything related to contact is achieved with Contact form 7 plugin. This is official plugin page: https://sr.wordpress.org/plugins/contact-form-7/
This is code for contact form styling:

<div class="col-sm-8 col-sm-push-2"> <div class="col-sm-12"> [text* your-name placeholder "Your Name (required)"] </div> <div class="col-sm-12"> [email* your-email placeholder "Your Email Address (required)"] </div> <div class="col-sm-12"> [text* your-subject placeholder "Subject (required)"] </div> <div class="col-sm-12"> [textarea your-message placeholder "Please leave us a message."] [submit "Send"] </div></div>

Pages and page templates

Every page has option for set single page menu instead of default menu and list of page templates. Some of page templates will display only blog posts or events post if set. See screenshot:

Theme options

All theme options are in appearance/customize. Options for logo, title background etc...

Elementor page builder

This is official plugin page: https://elementor.com

Slider Revolution

This is official plugin page: https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
This is premium plugin and it is bundled with theme. Plugin documentation is bundled with theme as well in "documentation" folder.
Import revslider1.zip file in "import slider" (see screenshot). When it is imported and demo.xml file is imported as well, slider should appear on homepage. If there are issues, click on "slider revolution/embed slider", copy slider's shortcode, and paste it in page where you want slider to appear. See screenshot (and setup video from min 4.00).

Code snippets (social icons)

This is code snippet for social icons box.

<section class="wrapper100percent section3" style="text-align: center;"> <div class="col-md-12 socialicons-big"> <h2 style="color: white; font-size: 30px;margin-bottom: 25px;">Be social!</h2> <ul class="socialicons"> <li> <a href="#"><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> </div> </section>

Add it in page using page bulder element "raw code". Or add it in "text" tab in text editor.

- Customize it. Instead of # add your URL, list of icons is here: http://fontawesome.io/icons/

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.


- This is code snippet for text in text box homepage.
<div class="textblock"> <h2 style="text-align: center; font-family: domine;"><strong><span style="color: #f5f5fa;">Candidates</span></strong></h2> <h3 style="text-align: center; margin-bottom: 25px;"><span style="color: #f5f5fa;">political & activism WordPress theme.</span></h3> <p style="text-align: center;"><strong><span style="color: #f5f5fa;">Proecessitatibus mei an, choro mediocr itatem no vis. Vide congue nonumy nec id, dicat feugait mei no. Brute corrumpit contentiones sit ex, usu no clita iudico civibus. No has delenit perfect lorem ipsum dolor.</span></strong></p> </div>

Plugins

Slider revolution premium plugin, bundled with theme. https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380

Rt Candidates Theme Functions plugin - theme functions and custom post types plugin, bundled with theme.

Elementor page builder free plugin. https://fuc.wordpress.org/plugins/elementor/

Meta boxes free plugin. https://wordpress.org/plugins/meta-box/

Contact form 7 free plugin. https://sr.wordpress.org/plugins/contact-form-7/

Events calendar free plugin. https://sr.wordpress.org/plugins/the-events-calendar/

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

Video lightbox free plugin. https://wordpress.org/plugins/wp-video-lightbox/

Widgets

- Widgets are default WordPress feature. To find widgets go to appearance/widgets in dashboard. Official WordPress documentation: https://codex.wordpress.org/WordPress_Widgets
- Theme has 5 widget areas. Two in header, three in footer.
- This is code snippet for social icons in header. Should be added in text widget in "header first" widget area.
<a href="skype:...?call"> <i class="fa fa-phone"> <span>Phone: (232) 235 23 55</span></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-youtube"></i></a>
- Add your url's instead of #.
- This is icon list: http://fontawesome.io/icons/ . - This is code snippet for address in footer:
<ul class="address-custom-widget "> <li><i class="fa fa-location-arrow"></i>NYC, Example Street, 592</li> <li><i class="fa fa-clock-o"></i> Working Time </li> <li class="address-custom-widget-li2">Monday - Friday:<span> 10:00-17:00</span></li> <li><i class="fa fa-envelope"></i> Contact</li> <li><a href="mailto:name@email.com">candidates@candidates.com</a></li> </ul>

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How to set permalinks

- Permalinks are in dashboard/settings/permalinks.
- It is recommended to have this permalinks structure (see screenshot):
- If you get "404 page no found" error when trying to open page or post, after theme switch or plugin deactivation it is recommended to "reset permalins".
How to reset permalinks?
- Set permalinks to default (plain) and click button "save changes".
- Set permalinks to "post name" and click button "save changes".
- Done.

Child theme

- Basic child theme for this theme is in main_file.zip.
- Official WordPress documentation about Child themes: https://codex.wordpress.org/Child_Themes
- It is recommended to activate child theme if you make code customizations and to copy/paste all files from parent theme which have custom changes in code in child theme.

How to change color

- It is recommended to use child theme and style.less file to change color.
Steps for color change
a) Activate Child theme.
b) Install and activate this plugin: https://sr.wordpress.org/plugins/wp-less/.
c) Go to "appearance/customize/add style.less file" and mark second checkbox "add style.less file" (this will add style.less file in theme).
d) Open style.less file from child theme in your hosting C-panel or via FTP.
e) In that file find HEX code for color and replace it with HEX code for color you want to have on site.
f) Save changes. New color should appear on site.

g - optional) 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 child theme style.less file, paste into editor and convert into css code. Then, open child theme style.css file and copy/paste converted css code from compiler into it. (don't delete anything that is in child theme css file, the links and comments). After this, wp-less plugin can be (and should be) deactivated and style.less file removed from site in "appearance/customize".

- There will probably be parts of site where color is added via page builder element so it will need to be changed manually in that page builder element.

- 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

- In theme demo site, colors assigned to these color variables are: @first-color - dark blue, @second-color - red, @third-color - gray.

- to change HEX code to RGBA code go to this site: http://hex2rgba.devoth.com/

Theme translation

Theme has pot file included, that means text strings in dashboard can be translated. Activate translation plugin (can use Polylang, tested with theme). https://wordpress.org/plugins/polylang/ Check if "languages" tab in settings appears. In theme folder "languages" default pot file is included. To translate text strings in theme, please rename candidates.pot file to "language code" for language you want to translate in, for example if you translate to Portugales language code is "pt_BR" so candidates.pot should be renamed to "pt_BR.po". Then open the file with Poedit and translate text strings. 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

How to reorder posts

- Install and activate this plugin: https://wordpress.org/plugins/post-types-order/
- It adds "reorder posts" button for all posts and custom post types and you can manually reorder them.

Favicon

Upload favicon in appearance/customize/site identity/site icon. Official documentation: https://codex.wordpress.org/Creating_a_Favicon

Sources and credits

TGM plugin activation https://github.com/thomasgriffin/TGM-Plugin-Activation
Meta boxes https://wordpress.org/plugins/meta-box/
Slider Revolution plugin,
Bootstrap css framework,
Font Awesome font icons,
Flickity.js,
Isotope.js,
Google fonts,
Elementor plugin,
Events Calendar plugin,
jQuery.js,
free WordPress plugins listed above,
Demo images credit
Video: https://www.youtube.com/watch?v=Ftkz7x3kcJE
https://videohive.net/item/political-news/11043311

Images are not included for download. Images are slightly transformed to fit design. Images and icons credit: Photodune, Dreamstime, http://flaticon.com/
https://unsplash.com/bchild311
https://unsplash.com/gabrielssantiago
https://unsplash.com/matthewwiebe
https://unsplash.com/linalitvina
https://unsplash.com/jonottosson
https://unsplash.com/flenjoore
https://unsplash.com/@jonflobrant
http://photodune.net/item/abstract-background-of-shopping-mall/9911074?s_rank=150
http://www.dreamstime.com/royalty-free-stock-photos-happy-smart-business-man-image25795058
http://photodune.net/item/old-glory/9250918
http://photodune.net/item/flag-usa/10785646
http://photodune.net/item/your-vote-counts/5677242
http://photodune.net/item/speaker-at-conference-and-presentation/12360032
http://photodune.net/item/composition-of-diverse-people-smiling/7810590
http://photodune.net/item/business-woman-leading-a-team/445889
http://photodune.net/item/posing-people/365090
go to top

Copyright RayoflightThemes.com 2016.