“Election ” Documentation by “Softwebmedia”
“Election”
Created: 5th July 2014
By: Softwebebmedia
Thank you for purchasing the theme. We hope you find our work to your liking. We always welcome feedback and suggestions so don't hesitate to leave me comments. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form - HERE. If you are happy with the theme, please take a moment to rate it on the ThemeForest website.
Table of Contents
- Theme Installation and Import Demo content
- Customizer
- Create Home page with Revolution Slider
- Gallery / Portfolio Setup
- Blog Page Setup
- Pages
- Add multiple sidebars
- CSS files
- Shortcodes
- Photoshop fils
- Default Images Width and Height (Retina and Non-retina)
- How to Use Child theme and Filters to
- WPML Plugin Setup
- Sources and Credits
1. Theme Installation:
You can install theme with two ways:
(1) Using WordPress Theme Upload
- Login to your WordPress admin.
- In the "Appearance" menu click, "Themes"
- At the top of the page click, “Install Theme” tab.
- At the top of this page click, "Upload" link and then click on "Browse" button.
- Select the zipped theme file (election.zip) and click "Install Now"
- After installation you will receive the message, "Theme Installed successfully."
- Click the link "Activate"
(2) Uploading by FTP
- Login to your FTP server and navigate to your WordPress themes directory.
Normally this would be "wp-content/themes" - Extract the files from the zipped theme.
- Copy the folder "election" to your themes directory.
- After the files finish uploading, login to your WordPress admin.
- In the "Appearance" menu click "Themes"
- Click "Activate" for the theme "Election"
- Install and Activate all necessary plugins ---------------------------------------------------------------
- After theme activation you will get plugin installation notice.
- This theme has three inbuilt plugins: "Revolution SLider", "Ultra Content Elements" and "Multiple Sidebar" - install and activate these plugins.
- Other plugins like "Regenerate Thumbnails"and "WP Retina 2x" you can install from WordPress plugin website.
- After activation of all plugin you can start demo webiste content import.
Note: Plugin Activation step is REQUIRED before importing demo website content.
- Import Demo content ------------------------------------------------------------------------------------------------
- Login to your WordPress admin.
- In the "Tools" menu click, "Import"
- Select "WordPress" for import and install WP importer plugin.
- Activate the plugin and run the importer.
- Browse "demo-election.xml" file from theme's "demoXML" folder and upload it.
- On the next screen, check the checkbox "Download and import file attachments".
- Click "Submit".
2. Theme Customizer
Theme has lots of custom options and you can set them with live preview with Customizer.
Go to Admin and Click on "Customizer" tab on left sidebar menu. You will see theme preview with custom options.
Below are details of all options with description.
- Options Details
- General Set Boxed or Full Width Layout, Add Google Analytical code, On/Off - search icon, cart icon, go top arrow, breadcrumbs, comments
- Logo Add logo standard and retina image with background color
- Styling Site skin colors, boxed layout background image, pre-loader settings
-
Header
- Set header page title background color with opacity
- Set header background image with parallax scroll effect
- Set header height -
Main Navigation
- Enable/Disable sticky menu
- Set navigation section backgroud with opacity
- Set donate button colors
- Set activate link arrow color and add icon names of each links -
Fonts
- Activate/Deactivate google fonts
- Enable/Disable sub sets of google fonts - cyrillic, greek,vietnamese characters
- Set font size for body, top navigation, top bar small navigation, page title, side bar widget itle, footer widget title, footer text, small footer text, blog post title, heading h1,h2,h3,h4,h5,h6 -
Footer
- Set footer column
- Enable/Disable large and small footer
- Set footer primary and secondary background colors with background image
- Set small footer background image with opacity
- Add copyright text in small footer
-
Blog
- Set blog pages like archives, categories, author, tags. etc. default layout
- Set blog display style - standard, full width, grid.
- Enable/Disable excerpt
- Set blog pagination style - standard, next previous, infinite scroll
- Set multiple featured images for post type gallery.
- Exclude categories from blog by adding category ids.
- Enable/Disable blog single page featured images/videos, about author box, post comments, featured image lightbox.
- Set blog single page header title with URL
- Enable/Disable author bio in author page
-
Portfolio
- Add portfolio page title with url to display in breadcrumb section.
- Enable/Disable portfolio single page comments. - Favicon Add favicon images for standard and high resolution devices. You can generate .ico image from this website.
- Social Media Icons Display social media icon in top bar right side - beside search icon.
- Image height Set image height for portfolio and blog pages.
- Error 404 Add error page image with text and image content.
- Custom CSS Javascripts You can use this section to add quick css and javascripts for minor changes. Please use custom.css for major portions css changes.
- The Event Calendar Plugin Set evant main page layout with or without sidebar.
- Widgets Add blog and footer section widgets
3. Create Home page with Revolution Slider
- Install Revolution slider plugin and create responsive or full width sliders from plugin's admin page.
- You can import demo website text file from "revolution-slider-demo-content" folder's "demo-site-revolution-slider.txt" file. CSS files is also included so you can replace caption.css with demo css.
- After adding slides, create new page and select "Revolution Slider" from "Header Options" metabox dropdown below editor box.
- Select dropdown - full width or responsive and add shortcode in "Add Slider Shortcode" meta field. (view below screenshot)
- Publish the page
Set "Home" page as Front page
- In the "Settings" menu click, "Reading"
- Set front page display as per below screenshot.
- Save front page settings and refresh home page.
4. Gallery / Portfolio Setup
Part 1
- Login to your WordPress admin.
- In the "Portfolio" menu click, "Add New"
- If you have more than one portfolio types then you can seperate it by making severals portfolio categories.
- Give page title of portfolio item. Upload project image from "Add Portfolio Image" box on right sidebar. Add portfolio short description from "Excerpt" box below "Add Media Details" box. Add long description in WYSIWYG editor box to display in single page of portfolio item (optional).
- If you want to display video in portfolio item, then select "Video" from project type dropdown menu.
- You can re-arrange portfolio items by drag and drop option from "Sort Portfolio Items" page.
Part 2
- In the "Pages" menu click, "Add New"
- Select "Portfolio Page" template from page attributes box on right sidebar
- "Portfolio Page Options" : Select portfolio type and column. Hide any specific category, select portfolio column and portfolio type, give pagination to display number of posts in one page.
- Publish the page
Part 3
- In the "Admin" left menu, click - "Customizer" tab
- Click on “Portfolio” tab.
- Set portfolio single page breadcrumbs portfolio page title-url and comments display on/off as per your website requirement.
5. Blog Page Setup
Blog Page
- Create category(ies) and add some posts.
- In the "Pages" menu click, "Add New"
- Select Blog templage from page attributes box on right sidebar
- Publish the page
Blog as Home page
- Create category(ies) and add some posts.
- In the "Settings" menu click, "Reading"
- Set front page display as per below screenshot.
- Save front page settings and refresh home page.
Blog Settings
- In the "Admin" left menu, click - "Customizer" tab
- Click on “Blog” tab.
- Set blog settings as per your website requirement.
6. Pages
Testimonials Page
- In the "Testimonials" menu click, "Add New"
- Add client name in page title box and client testimonial in WYSIWYG editor. If you want to add client image then upload it from "Featured Image" box on right sidebar.
- Add client position or city name, company or website name and website url from "Testimonials Options" meta box.
- Now create new page with title "Testimonials" and select page template "Testimonials" from dropdown menu of "Page Attributes" box on right sidebar. (see below screenshots for all these steps)
- Select Testimonials display column and pagination from metabox below editor box.
Error 404 Page

- In the "Admin" left menu, click - "Customizer" tab
- Click on “Error 404” tab.
- Give Error 404 page title, description and upload error image.
7. Add Multiple Sidebars
- In the "Appearance" menu click, "Multiple Sidebars"
- Create sidebar by click on "Add Sidebar" button.
- In the "Pages" menu click, "Add New"
- Enter page title and select sidebar from "Sidebar" metabox at bottom area.
- Publish the page.
- In the "Appearance" menu click, "Widgets"
- Drag and drop widgets in page sidebar ( right side bottom area ) and refresh frontend page to see sidebar.

8. CSS files
In this theme below css files are used for frontend pages.
- style.css - Default wordpress css file which has theme description.
- global.css - This file has all global stye names.
- layout.css - This is a layout css file which controls theme structure - header, menu, sidebar, content, footer etc.
- prettyphoto.css - This css file is used for image lightbox effect.
- responsive.css - This css is used to make theme responsive with media queries.
- retina.css - This css is used for retina background settings for ipad, iphone.
- custom.css - Use this css file to add any custom changes and take backup before updating latest theme version.
- plugin-fix.css - This css is used for fixing plugins style like shortcodes, slider, widget etc.
- swm-woocommerce.css - This css is used to customize woocommerce plugin.
- tribe-events.css - This css is used to customize the event calendar plugin.
- style.css and custom.css are added in main theme folder.
- global.css, layout.css, responive.css, retina.css, plugin-fix.css and swm-woocommerce.css files are added in "election/css/" folder.
- tribe-events.css file is added in "election/tribe-events/" folder
- prettyphoto.css file is added in"election/js/prettyPhoto/css/" folder.
We suggest you to install and activate child theme and use "child-theme-style.css" file to add custom styles.
If you add custom styles in main theme then it will remove when you delete current version and upload latest version OR
you have to take backup each time before uploading latest theme version so child theme is better solution to keep your custom changes forever.
9. Shortcodes
- Click on Shortcode icon in WYSIWYG tinymce editor (see beside screenshot)
- Click on shortcode name, select/enter required field for selected shortcode in popup.
- Click on "Insert Shortcode" button.
10. Photoshop Files
We have included below PSD files in the theme :
- Layout
- Logo
- Logo Retina
- Social Icons
- Social Icons Retina
- 404 Page
- 404 Page Retina
11. Images Width and Height
Note: You can change portfolio and blog sections image heights from Admin > Customizer > Image Height section.Non-Retina/Standard Images Width and Height
- Width Height
- Logo 300px 118px
- Home Page full width revolution slider ( height is flexible-any size) 1920px 600px
- Portfolio 2 Column 534px 310px
- Portfolio 3 Column 401px 250px
- Portfolio 4 Column 401px 250px
- Portfolio single page revolution slider ( height is flexible-any size) 1100px 450px
- Team Members 689px 689px
- Contact us support team 105px 105px
- 404 Error image 535px 356px
- Blog Post images with sidebar ( height is flexible-any size) 800px 400px
- Blog Post image with grid style ( height is flexible-any size) 540px 335px
- Blog Post images with fullwidth ( height is flexible-any size) 1100px 500px
- Advertise Widget 125px 125px
- Testimonials page Client 48px 48px
- WooCommerce Catalog Images 690px Auto/Blank
- WooCommerce Single Product Image 690px Auto/Blank
- WooCommerce Product Thumbnails 430px Auto/Blank
Retina Images Width and Height
Theme has custom script for below sections which auto crop images in standard non-retina size. You can make theme retina ready by uploading below sections images as per width and height and then generate retina images with "WP Retina 2X" wordpress plugin.
- Width Height
- Portfolio 2 Column 1068px 620px
- Portfolio 3 Column 802px 500px
- Portfolio 4 Column 802px 500px
- Blog Post images with sidebar 1600px 800px
- Blog Post image with grid style 1080px 670px
- Blog Post images with fullwidth 2200px 1000px
- Testimonials page Client 96px 96px
Retina Images Width and Height for remaining sections
Other sections like team members, advertise, services images etc. requires manual work to make it retina ready.
For example, you want to create team member images retina ready which has size 401x401 then you have to create two images
- First non-retina image with 401x401 size and
second retina image with 802x802 size ( double size of non-retina image width and height ) - add "@2x" after each retina image name. like as per above example
- Non retina image name : team-member.jpg
Retina image name : team-member@2x.jpg
12. How to Use Child theme and Filters to
You can edit functions.php file from admin > apperance > editor > click "Theme Function" ( functions.php ) text on right sidebar. Add your custom functions, filters for theme customization.
1. Change blog post list "Read more" text
Copy and paste below code in child theme's function.php file.
function myname_blog_readmore() {
$output = '';
if ( get_theme_mod('swm_show_excerpt',1) == 1 ) {
$output = '<a href="'.get_permalink().'" class="p_continue_reading">' . __('Read more','swmtranslate') . ' <i class="fa fa-chevron-right"></i></a>';
}
return $output;
}
add_filter('swm_post_read_more','myname_blog_readmore');
Change "Read more" to any text and update the file to see new text in front end blog post list.
2. Hide Post Date
Copy and paste below code in child theme's function.php file.
function myname_post_date() {
$output = '';
$output .= '<div class="swm_post_date">';
$output .= '<div class="p_date">';
$output .= '<a href="'.get_permalink().'" title="'.__('Comments','swmtranslate').'">';
$output .= "<span class='p_day'>".get_the_date('d')."</span>";
$output .= "<span class='p_month'>".get_the_date('M')."</span>";
$output .= '</a>';
$output .= '</div>';
$output .= '<div class="p_comments">';
$output .= '<a href="'.get_permalink().'" title="'.__('Comments','swmtranslate').'">'.get_comments_number().'</a>';
$output .= '<small class="p_comment_arrow"></small>';
$output .= '</div>';
$output .= '</div>';
return $output;
}
add_filter('swm_post_date','myname_post_date');
Change above code as per your requirement and update the file to see new text in front end.
3. Edit post metas
Copy and paste below code in child theme's function.php file.
function myname_post_metas() {
$output = '';
$output .= '<div class="swm_post_meta">';
$output .= '<ul>';
// display author name start
$output .= '<li class="f_user"><a href="'.get_author_posts_url( get_the_author_meta( 'ID' )).'">'.get_the_author().'</a></li>';
// display author name end
// display category names start
$swm_meta_cats = get_the_category();
$swm_meta_cat_list = array();;
if($swm_meta_cats){
$output .= '<li class="f_folder">';
foreach($swm_meta_cats as $category) {
$swm_meta_cat_list[] = '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( 'View all posts in %s', 'swmtranslate' ), $category->name ) ) . '">'.$category->cat_name.'</a>';
}
$output .= implode(', ', $swm_meta_cat_list);
$output .= '</li>';
}
// display category names end
// display tags start
if ( get_the_tag_list() ) {
$output .= '<li class="f_tags">'.get_the_tag_list('',', ','').'</li>';
}
// display tags end
$output .= '</ul>';
$output .= '</div>';
return $output;
}
add_filter('swm_post_metas','myname_post_metas');
Change above code as per your requirement and update the file to see new text in front end.
4. Change "Next" and "Previous" pagination text
Copy and paste below code in child theme's function.php file.
function myname_next_prev_links() {
$output = '';
$output .= '<div class="alignleft post-prev">';
$output .= get_previous_posts_link('← '. __( 'Previous', 'swmtranslate' ) );
$output .= '</div>';
$output .= '<div class="alignright post-next">';
$output .= get_next_posts_link( __( 'Next', 'swmtranslate' ) .' →');
$output .= '</div>';
return $output;
}
add_filter('swm_next_prev_links','myname_next_prev_links');
Change "Next" and "Previous" to any text and update the file to see new text in front end.
5. Search page "No result" text
Copy and paste below code in child theme's function.php file.
function myname_search_page_form() {
global $wp_query;
$output = '';
$output .= '<div class="search_page_form">';
$output .= '<h4>' . __('No Results Found for "', 'swmtranslate') . get_search_query() . '"</h4>';
$output .= "<p>" . __(' We\'re sorry, but the page you requested could not be found. Try refining your search, or use the navigation above to locate the post.', 'swmtranslate') . "</p>";
$output .= '</div>';
return $output;
}
add_filter('swm_search_page_form','myname_search_page_form');
Change text in above code and update the file to see new text in front end.
6. Change gallery list "Read more" text
Copy and paste below code in child theme's function.php file.
function myname_gallery_readmore() {
$output = '';
if ( get_theme_mod('swm_show_excerpt',1) == 1 ) {
$output = '<a href="'.get_permalink().'" class="p_continue_reading">' . __('Read more','swmtranslate') . ' <i class="fa fa-chevron-right"></i></a>';
}
return $output;
}
add_filter('swm_portfolio_read_more','myname_gallery_readmore');
Change "Read more" to any text and update the file to see new text in front end gallery list.
13. WPML plugin
Plugin Setup
- You have to purchase latest version of WPML plugin from wpml.org website. You will also require "String Translation" and "Translation Management" plugin for best use of WPML plugin.
- Download, install and activate WPML,String Translation and Translation Management plugins.
- Go to Admin > WPNL > Languages page to start initial steps which are self-explanatory. Set default languages,language menu location etc. ( You can view more information from this page : http://wpml.org/documentation/getting-started-guide/)
Translate Page/Post Content
- Create new page. Enter title
- Add content and "publish" the page.
- After publish you will find "Language" box on right sidebar with different sections. Go to "Translate Yourself" section and click on "Plus" icon to create another language page of this page. Add title, content and publish this page. You can create as many language as you require like this step.
- Go to frontend of this page and use language switcher to view example page translation with different languages.

Custom Post Types
You can translate custom posts from admin > WPML > Translation Management > Multilingual Content Setup > Custom Posts > Select "Translate" radio box and save it. And same way below this section you can translate custom texonomies.
Theme Customizer
You can translate customizer section text like footer copyright text from string translation page. You have to first scan all theme content from admin > WPML > Theme and plugin localization > Strings in the theme section. After scannin, go to "String Translation" page and enter keyword ( like "copyright") in search box to find copyright content.
14. Sources and Credits
We have used the following images, icons, plugins and javascripts as listed.
Once again, thank you so much for purchasing this theme. As we said at the beginning, We'd be glad to help if you have any questions. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Thank you 
