“Blank” Documentation by “WiThemes” v2.0

“Blank”

Created: 07/07/2013
By: WiThemes
Email: Our Themeforest Contact
Support: WiThemes' Support

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket at our support desk. Thanks so much!

Table of Contents

  1. Installing Theme
  2. Quick Setup
  3. Theme Options
  4. Post Options and Post Formats
  5. Shortcodes
  6. Setting Up About and Contact page
  7. Setting Up Portfolio
  8. Widgets
  9. Translation
  10. CSS and Javascript
  11. Credits

A) Installing Theme - top

Before using this theme, you have to install Wordpress. To install Wordpress, just follow instructions in the Wordpress Codex: Installing Wordpress

To install Blank theme, there are 2 ways:

IMPORTANT NOTE: If your site content is empty (no posts, no pages), you have nothing to do. But if your site have posts, you have to use plugin Regenerate Thumbnails or Ajax thumbnail rebuild to generate necessary thumbnails for Blank theme. (Install and use this plugin after installing Blank)

B) Quick Setup - top

For quick setup, we included an XML demo file in the theme package. After unzip the theme package downloaded from Themeforest, please looking for a file named demo.xml. To import demo data, please follow the following steps:

  1. In Dashboard, navigate to Tools » Import
  2. Select and install Wordpress Importer.
  3. Select and upload file demo.xml above.
  4. Navigate to Appearance » Menus, select the newly created menu and assign it to "Primary Menu" location.

IMPORTANT NOTE: If you want to get all projects / portfolio in demo data, you must install Wi:Portfolio plugin before importing data.

C) Theme Options - top

Navigate to Appearance » Theme Options to customize your theme. All options are clear and interpreted very detail in the option panel.

Backup Options

This section is used to backup your settings to reuse when you need. After saving data, click the button Backup Options. When you need to restore the last backup, click Restore Options.

D) Post Options and Post Formats - top

Each Post has a custom option panel named Post Options. If it's not showing, check the Screen Options (on the top right). Post options are designed mainly for post formats. In each post, you need to care about options of the post format you intend to use.

1/ Layout

Layout: There are 2 layouts: fullwidth or medium (halfwidth) for blog displaying purpose. If you ignore this option, layout will be taken from Theme Options.

Display content or excerpt?

Blog Thumbnail Crop: Select Yes if you want to display featured image of this post in fixed width/height on the blog. Select No otherwise.

2/ Featured image crop?

If choose crop, featured image will be fixed in height (770x420px). If choose nocrop, featured image will be auto height (770px in width and height depends on each image proportion).

3/ Audio / Video options

There is only 2 options: Media Code and Seft-hosted Media URL.

Media code is common for both Video and Audio format. Here you can paste YouTube / Vimeo / DailyMotion / Hulu / Soundcloud URL. Note: Do not paste embed code or video ID, just URL.

With Seft-hosted media URL, please paste your video/audio file URL here. Example:

NOTE: If your post format ware video and you're using self-hosted video, then your featured image will become video placeholder image. You can remove featured image if you do not want so.

4/ Link format options

This part is very obvious. Link text will be the post title.

5/ Quote format options

Quote author name is obvious. Quote format has 2 versions: light and "dark". In the light version, do not check to Colored Background in the post options.

6/ Gallery format options

If you publish post in gallery format, it'll take all images attached to the post to create gallery (featured image is always the first image). In gallery options, you can decide which element to show / hide, which animation effect to use (slide or fade), auto play slider or not.

The only hard part of gallery options is Smooth height. For example, if you have 2 images of size 600x500 and 600x400. If you set check smooth height, then slider height will be 500 when first image is visible and 400 when the second is visible. Otherwise, the slider height will be fixed 500px (max height of all images in the slider).

E) Shortcodes - top

Blank has 14 shortcodes: column, progress, gmap, icon, dropcap, button, list, br, clear, hr, spacer, video, soundcloud, highlight.

1/ Column shortcode

Column shortcode is used to layout page. There are 2 parameters:

  1. size: (required) 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6. You need to specify size of the column.
  2. last: true or false. Determine last column or not. If you forget this param, your columns won't display correctly.
[column size="1/2"]CONTENT GOES HERE[/column]
[column size="1/2" last="true"]CONTENT GOES HERE[/column]

2/ Progress shortcode

Progress shortcode is used to display skills. 5 params:

  1. percent: (required) A number between 0 and 100.
  2. name: (required) The skill to display. Eg: Design, Art, Music...
  3. color: (optional) Color of the bar. If not set, it will take the primary color.
  4. thickness: (optional) The thickness of circle. Default 15px.
  5. size: (optional) Width and height of circle. Default is 150px.
[progress percent="90" name="Design Skill" color="#222" thickness="5" size="120"]

3/ Google map shortcode

Google shortcode is used to display maps, of course ;). 5 params:

  1. address: (required) Address you want to display.
  2. height: Height of the map, default is 400px. (width is always 100%. If you want a smaller map, contain it by a column shortcode)
  3. marker: true or false. Show marker or not. Default is false.
  4. info: The infobox content you want to display. Eg: 1400 NewYork, USA.
  5. open_info: true or false. Show the infobox initially. Default: false
[gmap address="1400 Newyork" height="320" marker="true" info="My Address: 1400 Newyork" open_info="true"]

4/ Icon shortcode

Intended to display social icons. 5 params:

  1. icon: The icon you want to display. Social icons include: facebook, twitter, google-plus, linkedin, tumblr, pinterest, youtube, skype, instagram, delicious, reddit, stumbleupon, wordpress, joomla, blogger, vimeo, yahoo, flickr, picasa, deviantart, github, stackoverflow, xing, flattr, foursquare, paypal, yelp, soundcloud, lastfm, lanyrd, dribbble, forrst, steam, behance, mixi, weibo, renren, evernote, dropbox, bitbucket, trello, vk.

    Other icons you can found at Awesome font
  2. link: URL you want to link to. Eg: http://themeforest.net
  3. target: _self or _blank. Choose _blank if you want to open link in a new window/tab.
  4. title: Title of the icon.
  5. tooltip: true or false. Set true if you want to enable tooltip on this icon.
[icon icon="twitter" link="http://twitter.com/withemes" target="_blank" title="My Twitter" tooltip="true"]

5/ Dropcap

There is no params, just use it. Unfortunately, we have only 24 letters can be used for dropcap. This font does not have letter J and U.

[dropcap]L[/dropcap]orem ipsum dolor...

6/ Button

There're 5 params:

  1. icon: Which icon to use with button. It's optional.
  2. link: Which page this button link to.
  3. target: As above, _self or _blank. Default is _self.
  4. style: 1, 2 or 3. There're 3 styles for button.
  5. lightbox: true or false. Use lightbox or not. If true, URL of button should be an image.
[button icon="music" style="2" link="http://themeforest.net/user/withemes" target="_blank" lightbox="false"]

7/ List

This shortcode is used to style lists. There is only 1 param.

  1. type: plus, minus, hash, star.
[list type="star"]
YOUR LIST GOES HERE
[/list]

8/ Highlight

This shortcode is used to emphasize text. There is only 1 param:

  1. type: 1 or 2. There are 2 types.
At vero eos et accusamus et [highlight style="2"]iusto odio dignissimos[/highlight] ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores

9/ Video and Soundcloud

The same as standard embed shortcode but [wivideo] and [soundcloud] shortcodes make your video/audio responsive.

[wivideo]https://vimeo.com/65629901[/wivideo]
[soundcloud]https://soundcloud.com/neo-light/network-23-34-03[/soundcloud]

Important Note: With Wordpress 3.6, [video] becomes a native (built in) shortcode. So we have to change [video] shortcode to [wivideo]. Please update your posts if you're using Wordpress 3.6.

10/ Br, clear, hr, spacer

Usage is obvious.

11/ Iconbox

There are 2 params:

  1. icon: Choose any icon in this list
  2. title: Title of the iconbox. Default: None

12/ Recent work

This shortcode is used to display your portfolio (recent works). There are 6 params:

  1. number: Number of item want to show. Default is 9.
  2. column: Display portfolio in 2, 3 or 4 columns. Default is 3.
  3. crop: Crop thumbnail or not? "true" or "false". Default is "true".
  4. excerpt: Display excerpt or not. Default is "true".
  5. excerpt length: An integer. Default: 20.
  6. filter: Show portfolio filter or not? "true" or "false". Default is "true".
  7. categories: category IDs, separated by commas.
  8. exclude_categories: IDs of categories you want to exclude, separated by commas.

13/ Recent posts

This shortcode is used to display blog recent posts. There are 2 params:

  1. number: Number of posts you want to show. Default is 3.
  2. excerpt length: An integer. Default: 14.

F) Setting Up About and Contact page - top

About and Contact page use a little shortcode: [column], [progress], [gmap]. If you don't know how to use shortcodes, learn about it here

1/ About page

Please paste following code into your HTML Editor, not Visual Editor.

2/ Contact Page

Contact Page use Contact form 7 plugin which is included in the theme package. You need to activate this plugin before using it. If you haven't installed yet, navigate to Appearance » Install Plugins and install it. Learn how to use Contact form 7, please to to Plugin page

G) Setting Up Portfolio - top

You need to install Wi-Portfolio plugin to deal with portfolio. This plugin has been included in your download package.

To create portfolio page, just simple create a new page, then select page template is Portfolio. Publish the page and see all your projects there.

We have several options for Portfolio page

  1. Number of projects to show: obvious. Default is 9.
  2. Number of columns: 2, 3 or 4 columns. Default is 3.
  3. Crop thumbnail? If you choose yes, your portfolio thumbnail image will keep proportion 16 : 10. If you choose no, your portfolio thumbnail image will fixed in width and auto height.
  4. Display portfolio excerpt? Obvious
  5. Excerpt length: Obvious
  6. Include Categories: category IDs, separated by commas
  7. Exclude Categories: category IDs, separated by commas

H) Widgets - top

Blank includes "Display Tweets" widget plugin in the theme package with NEWEST Twitter API v1.1. To use it, check this post. For other widgets, you can use them easily!

I) Translation - top

Blank includes a *pot file in wp-content/themes/blank/languages/ directory. Open it with some Translation software, say POEdit. Translate all words you need and save 2 files *po and *mo as suitable names. For example, if you want to translate to Germany, save your files as de_DE.po and de_DE.mo. See Wordpress in your language for more details about file name.

Open file wp-config.php in your Wordpress root folder and looking for the line define('WPLANG', ''); Replace '' by the language you want. See Installing WordPress in Your Language for more details.

Example: If your language you want to translate was French. Following these steps:

  1. Open file wp-config.php in your Wordpress root folder. You need FTP Software or some file manager to do this. Look for the line define('WPLANG', ''); and rewrite as define('WPLANG', 'fr_FR');. If your language is German, It should be define('WPLANG', 'de_DE');.
  2. In to your theme, rename default.po and default.mo to fr_FR.po and fr_FR.mo.
  3. Open fr_FR.po with POEdit and start editing. Try to save and see the translating in action.

J) CSS and Javascript - top

CSS files are included in the following order:

Javascript files include:

K) Credits - top

I've used the following images, icons, fonts or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.

Best Regards, WiThemes

Go To Table of Contents