Hercules

Portfolio & Business WordPress Theme

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!

Introduction

Hercules is a clean, minimalistic and responsive WordPress theme for your portfolio or business. Hercules adapts to your style as well as the device it’s viewed on. It's loaded with great features: unlimited styles support, 15 custom page templates, 7 custom widgets, 100 shortcodes, 8 post formats: Standard, Aside, Gallery, Link, Image, Quote, Audio, Video, responsive sliders, animated circular and rectangular progress bars, 500 + Google Fonts, advanced admin panel and much more!

Features

Theme Features:

Requirements

As Hercules is a WordPress theme so the basic requirements are same as that of WordPress itself. Besides WordPress requirements, Hercules theme is dependent on the following plugin(s):

Theme installation

There are two ways to install the theme: via the admin panel of WordPress or via FTP.

Upload via WordPress admin:

Installation steps are basically very easy.

1. Login to your WordPress admin panel (add /wp-admin after your domain name in the browser address bar).

2. Now go to Appearance > Themes > Install Themes.

3. Click the Upload link

4. And upload your Hercules-theme.zip file

5. When the upload is complete you need to Activate the theme. Click the Activate theme link.

 

Upload via ftp:

1. Unzip the Hercules-theme.zip file to any folder on your hard drive.

2. Upload the Hercules-theme folder to the server (to the /wp-content/themes/ directory).

3. Login to your WordPress admin panel (add /wp-admin after your domain name in the browser address bar).

4. Now go to Appearance > Themes.

5. In Available Themes section find Hercules and activate it by clicking Activate button.

 

After activating the theme you will see massage: This theme requires the following plugins: Contact Form 7 and Oauth twitter feed for developers. Click Begin installing plugins. And install this two plugins.

Setting up the plugins

Twitter Feed Auth

Go to Settings Twitter Feed Auth and fill in the following inputs these data:

Twitter Application Consumer Key:

J1XX0859xPV5La3MGWBQg


Twitter Application Consumer Secret:

pS7cy1E5V3Xg4uxU8WYBPKSCXZNsgp3v0ekv0pvoW4


Account Access Token:

1405145641-bpXX7ErgoBwuKHmPp7vgluGGNHsm7UGkZyqhgWK


Account Access Token Secret:

5HwHHvSEnQ9xGhk7PqqlXwXpYKWoqbUNSqlq5UzlSLA


Cache Duration (Default 3600):

1000


Twitter Feed Screen Name*: Insert your Twitter Feed Screen Name

 

Contact form

To have contact exactly like in the demo go to Contact, choose contact form and in the Form field paste this code:

<div class="span12">
<div class="span3">
[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email"]
[text your-subject placeholder "Subject"]</div>
<div class="span9">[textarea your-message 40x5 placeholder "Your Message"]</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
[submit id:send-button class:btn class:btn-large class:pull-right "Send"]
</div>
</div>


and Save. At the top you will see shortcode similar to this:

[contact-form-7 id="1482" title="Contact form 1"]

Copy it and paste in the Pages -> Contact.

Setting up the Theme

Adding sample data

Go to Apperance -> Widgets and remove the default widgets from the sidebars area.
Go to hercules Options and choose Import. You will see Step 1 Widget Settings Import. Select the file that contains Widget Settings from Sample-data folder file widgets-data.json and click SHOW WIDGET SETTINGS. All widgets will appear and then click IMPORT SETTINGS.
Next in Step 2 Data Import you can install sample data. Choose hercules.wordpress.2013-07-20.xml  file and click UPLOAD FILE AND IMPORT. Select the authors name and click IMPORT DATA. And then click FINISH.

Main Menu

To enable the menu in the header area go to Appearance -> Menus. In the Theme Location in Header Menu choose Hercules and for Footer Menu choose Hercules. Next click Save Menu button.

 

Restoring defaults settings

If you see that fonts or something else is different than in demo page go to hercules Options. Scroll to the bottom of the page, click RESTORE DEFAULTS and then click SAVE OPTIONS button.

 

Main and blog page

To set the first page like in demo go to Settings -> Reading and in the Front page displays section choose a A static page (select below) radio button and from the Front page Select menu choose Home or Home 2. Save changes.

 

Posts

Categories



Review the following article for more information on adding categories: http://codex.wordpress.org/Manage_Categories_SubPanel
1. Click the Post tab
2. Click Categories for blog posts
3. Type in the name of your new category
4. Click the Add New Category button


Creating a Blog post



1. Click the Posts tab and click the Add New tab
2. Type in your post content. For more info on adding posts, please check the following link http://codex.wordpress.org/Posts_Add_New_SubPanel
3. Click the Publish button


Post Formats



Review the following link for more info about post formats: http://codex.wordpress.org/Post_Formats
1. Click the Post tab.
2. You can choose post format, click radio button in Format box.
Options settings will appear below the post editor.

Below you can see the list of available post formats:
Standard Post Format, Aside Post Format, Gallery Post Format, Link Post Format, Image, Post Format, Quote Post Format, Audio Post Format, Video Post Format.


Slider

Slides are essentially custom post types http://codex.wordpress.org/Post_Types#Custom_Types which means that they are different from common posts, such as blog posts, portfolio posts etc. That allows us to manage the content of the site really easy.
Creating, a slider post:
1. Click the Slides tab
2. And now click the Add New tab
3. Insert your slide title.
4. Upload your image with the help of the Featured Image option (click the Set featured image link)
5. You can use the following fields for your slides:
- Headline - Input your headline for slide (HTML tags are allowed).
- Headline effect - Select your Headline animation type
- Headline position - Enter a percentage of the distance from the top edge of the slider. Enter only number without a percent sign.
- Caption - Input your caption for slide (HTML tags are allowed).
- Caption location - Select your Caption location
- Caption effect - Select your Caption animation type
- Caption position - Enter a percentage of the distance from the top edge of the slider. Enter only number without a percent sign.
- Button effect - Select your Button animation type
- Button position - Enter a percentage of the distance from the top edge of the slider. Enter only number without a percent sign.
- URL - Input the slide URL (can be external link)
6. And click the Publish button

 

Portfolio post



Portfolio items are essentially custom post types http://codex.wordpress.org/Post_Types#Custom_Types. which means that they are different from common posts, such as blog posts, portfolio posts etc. That allows us to manage the content of the site really easy.
1. Click the Portfolio tab and now the Add New one
2. Fill in all the required fields (title, content)
3. Upload your image with the help of the Featured Image option (click the Set featured image link)
4. Choose desired Portfolio Format and fill additional fields.:
- Image - default gallery post format. Displays only featured image.
- Slideshow - project gallery is displayed as a slideshow. It can contain unlimited number of images uploaded and attached to the post.
- Grid Gallery - post images are displayed as a gallery. Can contain unlimited number of images uploaded and attached to the post.
- Video - selecting this post type you can embed video from any video hosting (YouTube, Vimeo etc.).
- Audio - selecting this post type you can embed your audio link.
Fields:
- Subtitle - Input subtitle for the project.
- Client - Input project owner name.
- Info - Additional info for this portfolio item.
- URL - Input the project URL (external link)
- Featured - Show project on the main page.
5. Enable the lightbox or not.
6. Push the Publish button

 

Testimonials post



1. Click the Testimonial tab
2. And click the Add New tab
3. Fill in all the required fields (title, content)
4. Upload your image with the help of the Featured Image option (click the Set featured image link)
5. You can fill additional fields for testimonial:
- Name - author's name
- URL - author's link
- Info - author's additional info
6. Hit the Publish button

 

FAQs post



1. Click the FAQs tab
2. And now the Add New button
3. It is a question/answer type of post, the title of the post is the question and the content is the answer.
4. Click Publish


Team post



1. Click the Our Team tab and now the Add New button
2. Fill in all the required fields (title, content)
3. Upload your image with the help of the Featured Image option (click the Set featured image link)
4. Fill in additional fields:
- Position - position of the person.
- Facebook URL, Twitter URL, Flickr URL, Linkedin URL, Googleplus URL, Pinterest URL, Skype URL or Email
5. Click Publish


Portfolio page



Portfolio pages can be created with the help of page templates
1. Click the Pages tab
2. Click the Add New tab
3. Type in your page name, for example Portfolio page
4. Select your page template ( Filterable Portfolio 2 cols, Filterable Portfolio 3 cols or Filterable Portfolio 4 cols in the Page Attributes drop-down menu)
5. Click the Publish button

Pages

In the Hercules Theme Pages can be created with the help of page templates and you can specify page title and subtitle.

  1. Type in your page name, for example About us
  2. Select your page template
  3. Enter page title
  4. Enter page subtitle

With that done, click the Publish button.

 

Shortcode

The Theme comes with many custom shortcodes you can use to spice up your content. Shortcode is a powerful content building tool http://codex.wordpress.org/Shortcode.
Shortcodes are easy to use. First please make sure that the editing mode is set to Visual
Then please click the button for the shortcodes. And then please select the shortcode you want to insert.
Shortcodes are available on every page from editor. To add shortcode click button on WYSIWYG.

 

Below you will find a description of the main shortcodes:

 

Heading entrance
This is example of heading entrance shortcode like on home page:

[heading_entrance title="Latest news" text="We’ve shared the same vision since our inception in 1999 to offer fully
integrated solutions to the smartest and most demanding clients in the world"]



Description: displays heading and intro text.

   
Post Grid
This is example of post grid shortcode like on home page:

[posts_grid type="post" columns="3" rows="1" order_by="date" order="DESC" meta="no" isdate="yes" excerpt_count="12" link="yes" link_text="Read More"]



Description: displays standard and custom posts in table view with configurable amount of columns, rows etc.

 

Services grid
This is example of services grid shortcode like on home page:

[services_grid columns="3" rows="1" order_by="date" order="DESC" icon_align="center" icon_color="#000000" icon_size="icon-9x"]



Description: displays specified amount of Services custom post type posts.

 

Skills
This is example of Skills shortcode like on home page:

[skills value="75" title="Creativity" fontsize="25px" fontstyle="normal" size="200" bgcolor="#ffffff" fgcolor="#69bdff" donutwidth="17"]



Description: used to display an circular indicator of some process completion

 

Recent Testimonials
This is example of Recent Testimonials shortcode like on home page:

[recenttesti num="3" thumb="false" excerpt_count="30" effect="slide" smooth="false" directnav="false" custom_class="text-center"]



Description: displays specified amount of Testimonials custom post type posts, includes the ability to show/hide posts images, manage words count and effect.

 

Clientslist
This is example of Clientslist shortcode like on home page:

[clientslist num="7" width="180"]



Description: displays specified amount of images from Testimonials custom post type posts.

 

Columns

Widerow shortcode

[widerow customclass=""] Your Content... [/widerow]


Using: 

[widerow customclass=""][row_fluid][span12] Your Content... [/span12][/row_fluid] [/widerow]


Description: allows you to use the entire width of the browser and custom class.

Note, you can use this shortcode only with following Page Templates: About us, Contact Page, Filterable Portfolio 2 cols, Filterable Portfolio 3 cols, Filterable Portfolio 4 cols, Home Page With Slideshow, Home Page with Portfolio 4 Cols, Page with Wide Content



Grid Columns (span1-12)

[span#] [/span#]


Description: used for forming of structural grid elements, where # – a number from 1 to 12, which defines element width.
    

[row]
[span6] Your Content... [/span6]
[span6] Your Content... [/span6]
[/row]
Note, while forming a grid you should “wrap” grid elements into [row] shortcode:
Fluid Columns (one_half, one_third…)

   
[one_half] [/one_half]

Description: used for forming of structural grid elements, grid elements width is delineated with %.

[row_fluid]
[five_sixth] Your content... [/five_sixth]
[one_sixth] Your content... [/one_sixth]
[/row_fluid]
Note, while forming a fluid grid you should “wrap” grid elements into [row_fluid] shortcode:
Multiple Columns (75% / 25% etc.)
[row]
[span8] Your content... [/span8]
[span4] Your content... [/span4]
[/row]


Multiple Columns shortcodes used to simplify content forming by inserting the most used grid variants.

 

Carousel

This is example of Carousel shortcode like on Home2 page:


 

[carousel title="" num="5" type="portfolio" thumb="true" istitle="true" thumb_width="390" thumb_height="250" more_text_single="Read More" excerpt_count="13" date="yes" author="no" max_items="3" navigation="yes" scrolling="no"]


Description: displays the posts in carousel view, has various additional options.

 

OurStaff grid

[ourstaff_grid columns="3" rows="2" order_by="date" order="DESC" thumb_width="300" thumb_height="300" custom_class="post-circle"]


Description: displays specified amount of Out Team custom post type posts, includes the ability to show/hide posts images and manage columns, rows, thumb width, height etc.

 

Audio

[audio type="mp3" file="#" title="Title"]


Description: used to insert audio content.

 

Video

[video m4v="#" ogv="#" width="400" height="300"]


Description: used to insert video content, which can be loaded from the off-site services (youtube, vimeo) or from your website (self hosted).

 

Accordion

[accordions] [accordion title="title1" visible="yes"] tab content [/accordion] [accordion title="title2"] another content tab [/accordion] [/accordions]

 

Description: used to display an accordion – fold up panels with titles.

 

Tabs

[tabs tab1="Title #1" tab2="Title #2" tab3="Title #3"] [tab1] Tab 1 content... [/tab1] [tab2] Tab 2 content... [/tab2] [tab3] Tab 3 content... [/tab3] [/tabs]


Description: used to display content arranged into tabs. Tabs may contain static and dynamic content.
 

Table

[table td1="#" td2="Title" td3="Value"] [td1] 1 [/td1] [td2] some title 1 [/td2] [td3] some value 1 [/td3] [/table]


Description: used to display a table.



Progress bar

[progressbar value="96" label="Photoshop"]


Description: used to display an indicator of some process completion.
 

 

Google Map


This is example of Google Map shortcode like on Contact page:

[map latitude="40.713224" longitude="-74.001224" height="450px" zoom="16" saturation="20" title="Hercules Design" hue="#28a0ff"]


Description: used to display Google map. To make the shortcode work you need to insert latitude, longitude, height, zoom.

Hercules Options Panel

Hercules currently uses Hercules Options framework, which is easy, intuitive and beautiful theme options framework based on Options Framework  developed by Devine Price on GPLv2 licence.
To access Theme Framework simply click on Hercules Options menu item.



General


In general section you can edit Body styling, Header background color, Body Text, headings, Displaying search box and breadcrumbs.


Theme styles


This is a manually defined list of stylesheets


Logo & favicon


Select whether you want your main logo to be an image or text. If you select 'image' you can put in the image url in the next option, and if you select 'text' your Site Title will be shown instead.
- Logo Typography - Choose your prefered font for menu
- Site tagline - Write Your Site tagline.
- Upload or Enter the direct path to your logo or favicon image


Navigation


Choose your prefered font for menu.


Slider settings


In the slider settings you can:
- Select your animation type
- Select alignment of the slides
- Set Slideshow easing
- Set Number of columns
- Set Number of rows
- Set Pause time (ms).
- Set Height of the slideshow in px or in %.
- Set Animation speed (ms).
- Enter the text of the button. Leave it blank if you don't want to show the button.
- Change the headline text color.
- Change the caption text color.
- Set to animate slider automatically
- Display pagination
- Display next & prev navigation?
- Set Slider loader type


Blog


In the blog settings you can set:
- Blog Title - your Blog Title used on Blog page
- Related Posts Title - your Title used on Single Post page for related posts.
- Sidebar position - you can select the position for the sidebar(right or left)
- Blog image size - the Image size (Normal size or Large size) for the Blog page
- Single post image size - the image size (Normal size or Large size) for the single post page
- Enable Meta for blog posts? - display meta for posts
- Enable excerpt for blog posts? - display excerpt for posts
- The text before the author's name - Enter Your text before the author's name that appears in the list of articles.
- Enable post author for blog posts? - Enable or Disable post author name for blog posts.


Portfolio


Here you can set:
- Filter items by category or tags.
- Enable or Disable title for portfolio posts
- Enable or Disable excerpt for portfolio posts.
- Excerpt length (words).
- Portfolio Thumb Width
- Portfolio Thumb Height.
- Enable or Disable button for portfolio posts
- Change the layout mode
- Portfolio items amount for Portfolio 2 columns template.
- Portfolio items amount for Portfolio 3 columns template.
- Portfolio items amount for Portfolio 4 columns template.
- Amount of featured portfolio items on homepage.


SEO


Todays search engine trends require that each website to be SEO (Search Engine Optimized) compatible. SEO customization can be done in easy way and you can put different meta keywords and description on all post/pages. Go to Hercules Options -> SEO and fill in the inputs.


Footer


In the footer position you can e nter text used in the right side of the footer. You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer. Enable or disable footer menu. Change footer menu typography.

Hercules Options Framework is easy to configure as each field is described in details about their use. It's up to you to explore Hercules Options and make changes to your website.

Final thought

Once again, thank you so much for purchasing our Theme. As we said at the beginning, we'd be glad to help yoiu if you have any questions relating to this theme.

 

Hercules wouldn't be so great if these great plugins wouldn't exists:

 

Hercules Design Team