John Doe's Blog

Clean & Personal WordPress Blog 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 or email address: info@hercules-design.com. Thanks so much!

Introduction

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.

 

Features

Theme Features:

Requirements

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

Theme installation

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.

Setting up the 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.

Setting up the Theme

Adding sample data

Make sure you have removed all default widgets from the sidebars area in the Apperance -> Widgets.

To activate the Import / Export function go to Theme Options -> General -> Import/export set on "Yes"


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.
 

Main Menu

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

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.

About me

 

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.

Widget manager

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:

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.

 

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

Pages

In the 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.

 

Icons

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.

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:

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

Note, you can use this shortcode only with following Page Templates: Page with Wide Content, Page with Wide Content Without Title



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.


 

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 Options Panel

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


Navigation


Choose your prefered font for menu.


Blog


In the blog settings you can set:

 

Social Networks


Blog grid


Here you can set:

Gallery


Here you can:


Footer


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.

 

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.

 

Our Theme wouldn't be so great if these great plugins wouldn't exists:

 

Hercules Design Team