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 or email address: info@hercules-design.com. Thanks so much!
John Doe's Blog is a simple, clean, personal, modern and professional blog ideal for spreading stories. It’s totally responsive so it adapts to your style as well as the device it’s viewed on. It's loaded with great features: unlimited styles support with 10 predefined css styles, widget manager, 15 custom page templates, 8 custom widgets, 60+ shortcodes, features 8 post formats: Standard, Aside, Gallery, Link, Image, Quote, Audio, Video, powerful theme options panel and more.
Theme Features:
As John Doe's Blog is a WordPress theme so the basic requirements are same as that of WordPress itself. Besides WordPress requirements, theme is dependent on the following plugin(s):
Before installing the theme go to Apperance -> Widgets and remove the default widgets from the all sidebars area.
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 JOHNDOEBLOG-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 JOHNDOEBLOG-theme.zip file to any folder on your hard drive.
2. Upload the JOHNDOEBLOG-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 JOHNDOEBLOG 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.
Contact form
Go to Contact, choose contact form. 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.
Adding sample data
Make sure you have removed all default widgets from the sidebars area in the Apperance -> Widgets.
Go to Theme Options and choose Import.
You will see Step 1 - Data Import you can install sample data. Choose johndoesblog.wordpress.2014-01-14.xml file and click UPLOAD FILE AND IMPORT. Step 2 - Select the authors name and click NEXT.
Next in Step 3 Widget Settings Import. Select the file that contains Widget Settings from Sample-data folder file widgets.json and click NEXT. All widgets will appear and then click NEXT.
To enable the menu in the header area go to Appearance -> Menus. In the Manage Location from Header Menu choose Hercules and for Footer Menu choose Footer. Next click Save Changes button.
Restoring defaults settings
You can always restore theme defaults setting. Go to Theme Options, scroll page to the bottom, click RESTORE DEFAULTS and then click SAVE OPTIONS button.
Configuring Instagram Widget
Use online instagram access token generator : http://www.pinceladasdaweb.com.br/instagram/access-token/
Just click on Get Token button, sign in to your instagram account and generate user ID and access token.
And you will get something like this:
Now go to Appearance -> Widgets, add "hercules - Instagram" widget on some widgets area and fill in Instagram user ID, Instagram access token fields.
First off all. We have to add some posts in the About me section.
Next go to Appearance -> Widgets and add TEXT type widget into the Sidebar area.
Paste following code into textarea of the widget:
[aboutme num="2" effect="fade" smooth="true"]
Num value is the number of posts.
Save
To add a private picture go to Theme Options -> Blog -> Private photo Path - upload photo.
With the Widget Manager, you can now decide on which page you want to see the widget or not.
To use the manager go to Apperance -> Widgets, choose some widget and decide on which page you want to see widget:
of for whom:
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.
Gallery post
Gallery 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 Gallery 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. Push the Publish button
About me post
1. Click the About me tab
2. And click the Add New tab
3. Fill in all the required fields (title, content)
4. 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
In the Theme Pages can be created with the help of page templates and you can specify page title and subtitle.
With that done, click the Publish button.
All available icons are presented in the Documentation / Icons / demo.html file.
You can copy directly from there icons codenames and paste them into the template.
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:
[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="" columns="3" rows="2" order_by="date" order="DESC" meta="no" isdate="yes" excerpt_count="25" link="yes" link_text="Read More"]
Description: displays standard and custom posts in table view with configurable amount of columns, rows etc.
Skills
This is example of Skills shortcode:
[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
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.
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]
[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]
[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.
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.
Theme 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 Theme Options menu item.
General
In general section you can edit Body styling, Body Text, headings, enabling search box, NiceScroll, Import/export and breadcrumbs.
Header styling
In Header styling section you can edit header image or color background, header overlay, change header type etc.
Theme styles
This is a manually defined list of stylesheets. You can choose from 10 predefined styles or make your own one by clicking on Create new style option.
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
Choose your prefered font for menu.
Blog
In the blog settings you can set:
Blog grid
Here you can set:
Gallery
Here you can:
In the footer position you can enter 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.
Updates
To use automatic theme update feature just fill in Envato Username, Envato ApiKey fields.
Hercules Options Framework is easy to configure as each field is described in details about their use. It's up to you to explore Theme Options panel and make changes to your website.
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.
Our Theme wouldn't be so great if these great plugins wouldn't exists:
Hercules Design Team