Humble

Business & Portfolio Theme

Created: 2011/09/25
latest Update: 2011/09/25
By: Karim Hossenbux

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post a comment on ThemeForest theme page. Thanks so much!

Installation

Unzip the content of your template zip file and upload the humble folder to your themes directory.
Change the CHMOD to 755 or 777 (depending on your server) the cache folder and its content.
Go to Appearances and activate your Humble template from your WordPress Admin Panel.
Go to Theme Options and click one time on Save Options button on the bottom right.
Go to Permalinks from WordPress Settings and use /%postname%/ custom permalinks for example (recommended).
Read carefully this documentation file to know how to setup your website with Humble theme.

Configuration

Humble theme is really complete, the Theme Options panel is really clear and easy to configure.

General Settings

1. Logo

Upload an image, then just click on Use This Image button to set it as your logo. (300px max recommended)

2. Background

The background you'll setup here will be use on all your website. If you want to apply a different background on a special page or post, we'll see how to do it further in this documentation.

Select a color, upload an image and then setup the repeating, position and attachment value.

3. Tagline

As you saw on the live preview on the left on the slider you have 2 big title for the tagline of your website. If you're interested into SEO, the first one is the H1 tag, and the second one is H2.

To have the red dot effect like the one the live preview, just put a dot into a span tag. Like this :

<span>.</span>

4. Breadcrumb

Activate or Deactivate this function to show the breadcrumb.

5. Post meta

Activate or Deactivate this function to show the date or the author name.

6. 404 error message

Write something for the 404 page.

7. Google analytics

Put here the script from Google analytics to track your visits.

That's it, all the basic configuration you need to do is done. For the other tab options (CSS, Font, Images Size, Slider, Portfolio and Footer), you'll find the explanation near the field as a comment… It's really easy!

Add a Portfolio Item

Go to Portfolio from the WordPress menu and then click on Add New.
Put your Title as usual and a short description in the metabox if needed (between 60 or 70 words.)
Assign it to a Category.
Upload your images by using the WordPress uploader. If you want to have the same effect as the one on the live preview, use the image shortcode to insert them. Remember that you can set the width of your portfolio item page in the Theme Options: Normal (with sidebar) or Fullwidth.
Set a Featured Image to have a thumb image preview.

Create the Portfolio Page

Go to Page from the WordPress menu and then click on Add New.
Put Portfolio in the title field.
Select the number of column you want from the metabox below the content writer
Select Portfolio in the template select list
Save it, and done!

Add a Slide Image

Go to Slide from the WordPress menu and then click on Add New.
Put your Title as usual.
Upload your image by using the metabox below the content writer.
Put a link or caption if needed

Don't forget to configure and choose your slider from the Theme Options! Get a try to the exclusive Polaroid Slider :)

Create the Homepage

Go to Page from the WordPress menu and then click on Add New.
Put Homepage for example in the title field.
Select Homepage in the template select list
Use lots of shortcode to have it clean and save it!
Go to Settings > Reading
for the front page displays select A static page and then select the homepage you just created from the select list named Front Page.
Click on Save Changes.

Here's the shortcode I used for my homepage on the live preview: (Don't forget to change the url of all images)

[tabs]
	[tab title="Control the slider" description="Custom your homepage the way you want! It's really flexible and easy to use. The Humble template offers you options to have an unique page layout!" image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_lab.png"]
		[one_third]
		<h6>Slider setting</h6>
		Change all the slider settings from your Theme Options. Lots of options are available to edit your template as you wish.
		[/one_third]
		[two_third_last]
		[image width="590" height="150"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/nivo-setting.png[/image]
		[/two_third_last]
		[one_third]
		<h6>Bonus for slider</h6>
		We add for you the ability to choose a texture that will overlay your slider images. Start enhance your slider today!		
		[/one_third]
		[two_third_last]
		[image width="590" height="150"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/nivo-texture.png[/image]
		[/two_third_last]
	[/tab]
	[tab title="Custom the background" description="The Theme Options let you set every background you want. All CSS attributes have been added so you don't touch a single line of code." image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_teeshirt.png"]
		[one_third]
		<h6>Background settings</h6>
		<p>How it works? Choose a color, upload a background image, set the "repeat", "position" and "attachment" option you want from the Theme Options... and Voila!</p>
		<p>You want on custom post or page with a special background? Easy! Just choose different settings for your background from the metabox while you're creating the post or page.</p>
		[/one_third]
		[two_third_last]
		[image width="590" height="350"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/background-setting.png[/image]		
		[/two_third_last]
	[/tab]
	[tab title="CSS without coding" description="Change your CSS settings from the Theme Options without editing the style.css. It has never been so easy to custom your template!" image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_time.png"]
		[one_third]
		<h6>CSS settings</h6>
		We put all the main options in the panel to allow you or your client can change easily everything. 
		[/one_third]
		[two_third_last]
		[image width="590" height="400"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/css-setting.png[/image]		
		[/two_third_last]
	[/tab]
[/tabs]

Shortcode

For more details and live example + code go here : http://karimhossenbux.com/lab/humble/shortcode/

Here's a list of shortcode you can use:

Tabs for the homepage:

[tabs]
	[tab title="Title" description="Some content to bla bla bla" image="http://url.to/the_icon.png"]
		//Some content (use short code for example!)
	[/tab]
	[tab title="Title" description="Some content to bla bla bla" image="http://url.to/the_icon.png"]
		//Some content (use short code for example!)
	[/tab]
	[tab title="Title" description="Some content to bla bla bla" image="http://url.to/the_icon.png"]
		//Some content (use short code for example!)
	[/tab]
[/tabs]

Columns :

// 2 Columns
[one_half]...[/one_half]
[one_half_last]...[/one_half_last]

// 3 Columns
[one_third]...[/one_third]
[one_third]...[/one_third]
[one_third_last]...[/one_third_last]

// 4 Columns
[one_fourth]...[/one_fourth]
[one_fourth]...[/one_fourth]
[one_fourth]...[/one_fourth]
[one_fourth_last]...[/one_fourth_last]

// 5 Columns
[one_fifth]...[/one_fifth]
[one_fifth]...[/one_fifth]
[one_fifth]...[/one_fifth]
[one_fifth]...[/one_fifth]
[one_fifth_last]...[/one_fifth_last]

// 6 Columns
[one_sixth]...[/one_sixth]
[one_sixth]...[/one_sixth]
[one_sixth]...[/one_sixth]
[one_sixth]...[/one_sixth]
[one_sixth]...[/one_sixth]
[one_sixth_last]...[/one_sixth_last]

Blockquote:

[blockquote align="left"]This is a block quote with align left.[/blockquote]

Author quotation:

[blockquote author="Name"]The quote here…[/blockquote]

Dropcap:

[dropcap1]L[/dropcap1]orem ipsum…
[dropcap2]L[/dropcap2]orem ipsum...
[dropcap3]L[/dropcap3]orem ipsum...

Code and pre:

[code]
//some code here
[/code]

[pre]
//Some stuff here
[/pre]

Highlight:

[highlight]text to hightlight[/highlight]
[highlight type="blue"]text to hightlight in blue[/highlight]

//Possible color: "red" (default), "blue", "green", "yellow" or "dark".

Checklist:

[list style="attach"]

	Lorem
	Lorem
	Lorem
		
[/list]

//Style parameters values : "attach", "delete", "go", "help", "info", "plus", "star-mini", "star",
"tick", "tag-bleu", "tag-green", "tag-pink", "tag-purple", "tag-red", or "tag-yellow".

Buttons:

[button color="white"]White[/button]
[button color="grey"]Grey[/button]
[button color="black"]Black[/button]
[button color="red"]Red[/button]
[button color="blue"]Blue[/button]
[button color="green"]Green[/button]
[button color="yellow"]Yellow[/button]
[button color="orange"]Orange[/button]
[button color="purple"]Purple[/button]
[button color="pink"]Pink[/button]

Notice message:

[info]This is a info box[/info]
[notice]This is a notice box[/notice]
[error]This is a error box[/error]
[success]This is a success box[/success]

Images:

[image size="small" lightbox="true"]http://url.to/image.jpg[/image]
[image size="medium" lightbox="true"]http://url.to/image.jpg[/image]
[image size="large"]http://url.to/image.jpg[/image]
[image size="large"]http://url.to/image.jpg[/image]

Gallery:
```
[gallery link="file"]
```

Video:

[video type="vimeo" clip_id="27246366"]
[video type="youtube" clip_id="_OBlgSz8sSM"]

Map:

//Default size
[googlemap src="http://maps.google..."]
//Custom size
[googlemap width="200" height="200" src="http://maps.google..."]

Blog posts:

[blog number="1"]
//or
[blog number="1" readmore="true"]
//or
[blog number="1" excerpt="false"]
/or
[blog posts="POST_ID"]

Portfolio:

[portfolio number="1" format="fullwidth"]
//or
[portfolio posts="POST_ID" format="fullwidth"]
//or
[portfolio number="2" col="2" format="fullwidth"]
//or
[portfolio number="3" col="3" format="fullwidth"]
//or
[portfolio number="4" col="4" format="fullwidth"]

Background on post/page

If you want to do this step, we assume that your already configure the default background settings for the whole website. The following is step to do if you want to have a unique background on a post, page or portfolio item.

When you creating a post, page or portfolio item, go the metabox under the content writer named Background options
Just choose a color if needed and upload an image…
You can change the repeat, position and attachment options too!
Save everything and Voila!

Contact page

Configure the Contact tab from the Theme Options: Address, Phone number and Google map Shortcode.
Install the Plugin Contact Form 7 from the plugin menu or by uploading to the ftp manually.
Go to Page from the WordPress menu and then click on Add new.
Name the Page Contact for example and select the contact template.
Save it and done!

Widget

You have 5 custom widgets included in the Humble themes.

All you need to do is to drag them as usual into the wanted sidebar.

Here's the name of the Widgets :

Humble - Flickr Photos (Show your photo streams from Flickr)
Humble - Latest Tweets (Show your latest tweets from twitter)
Humble - Social Links (Link to your social profile - fit best in the footer)
Humble - Recent Posts (Show the Recents Posts your made)
Humble - Sub Page Navigation (Link to the sub page if reading a parent/child page.)