Introduction

Biopic is a minimalist, elegant and responsive vCard wordpress theme which is suitable for using it as a vcard, small personal portfolios, photographers, wedding journals etc. It works on all devices from desktop to tablets to smartphones. It is not just a responsive theme but as well as an adaptive theme because it hides the blog sidebar when viewed on a smartphone.

It also supports a regular blog pages e.g. main blog page, category and single page unlike other vcard themes here on themeforest.net which doesn't even support a regular blog.

It has been developed keeping in view the basic principles of SEO optimized wordpress theme i.e. to use H1 for page headings and placement of page/post data before the sidebar data even. Also you can set the site keywords, description and author meta tags' values from the Options Panel.

The theme options panel is powered by Envato's official theme options plugin OptionTree.

Features

Salient features of Biopic theme are:

  • Responsive layout
  • Minimalist design
  • Localization ready
  • Blog support
  • Filterable Portfolio
  • Custom post type for portfolio
  • Shortcodes for skill and education & jobs
  • Latest tweets widget
  • Contact form
  • Sample data and theme options (OptionTree Plugin) setup files included
  • Well documented
  • Dedicated supported

Requirements

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

  • OptionTree - Used for theme options panel. This is Envato's official theme options plugin.

Theme Setup

This guide assumes that you already know how to setup WordPress and have some knowledge of using a FTP client software (you can use open source FileZilla) to upload files to a website.

1 - Uploading and Activing Biopic Theme:

Once you download the Biopic theme zip file then unzip it and you will see the following folders in the unzipped package:

  • data - Contains the OptionTree and dummy data of the live preview
  • help - contains the help files which you are ready right now :)
  • LIcensing - Contains Licensing text files. Read them before using the theme.
  • biopic - This is the actual theme folder containing all the theme files and need to be uploaded to the themes folder in your WordPress website.

Follow the instructions below to upload Biopic theme folder to your WordPress website and active it:

  • Connect to your website via ftp software.
  • Browse to themes (wordpress-folder-on-your-website->wp-content->themes) folder on your website via ftp.
  • Transfer the biopic folder inside the themes folder on your website via ftp.
  • Once all the files are transferred successfully, then login into wp-admin of your WordPress enabled website.
  • Go to Appearance->Themes section where you will see the thumbnail of Biopic theme along with other themes.
  • Click on Activate link
  • Now browse your website in a browser tab/window and you will see Biopic theme in action. If you don't get any error then you have successfully uploaded and activated the Biopic theme.
  • Read the rest of the sections below to configure and add data to your website

2 - Installing required plugins:

As mentioned above in the "Requirements" section that Biopic theme is dependent on the following plugin(s):

  • OptionTree - Used for theme options panel. This is Envato's official theme options plugin.

To install the required plugins perform the following steps:

  • Go to Plugins page in WordPress admin panel
  • Click Add New
  • In the Search field type the name of the plugin e.g. OptionTree
  • WordPress will search the plugins database on wordpress.org and will show the results in a tabular format
  • Click Install Now link button below OptionTree plugin and click OK to confirm the installation
  • After WordPress installs the plugin then click on Activate Plugin link button to activate the plugin
  • Repeat the steps 1-6 for installing additional plugins

3 - Theme Options Panel Setup:

Most of the functionality of the Biopic theme is driven by the options you set via the OptionTree Theme Options panel. In order to create all the necessary theme options you have to import the theme options xml file provided within the data folder of the Biopic theme zip package. Do the following to setup theme options for the Biopic theme in the Option Tree:

  • Go to OptionTree->Settings menu option in WordPress admin panel
  • Click on Import tab
  • Click on Upload button which will open the File Upload dialog window
  • Browse to the folder where you have unziped the Biopic theme's zip file.
  • Double click the data folder
  • Select theme-options.xml file and click on Open button of the File Upload dialog window
  • Now click on the Import XML button to the right of Upload button
  • Upon sucessful import of the theme-options.xml file you will see options grouped into different tabs in the OptionTree's Theme Options section.
  • Fill in the options data or see instructions below to import sample theme options data and preview the website. For some of the options you will have to add pages, posts etc. You can add dummy data of the live preview by following the instructions in the "Adding Sample Data" section.

You can quickly add sample theme options data by doing the following:

  • Go to data folder where you have unziped the biopic package zip file
  • Open theme-options-data.txt in a simple text editor software application
  • Select all the data and copy it
  • Now go to OptionTree->Settings menu option and the click on Import tab
  • Paste the copied data under the Theme Options Data textarea and click Import Data button

4 - Adding Sample Data:

Biopic theme package comes with sample data including pages, posts, menus etc. Which you can import into your website to quickly setup Biopic theme on your WordPress website. Follow the instructions below to import the sample data file into your WordPress website.

  • Go to Tools->Import menu option in WordPress admin panel
  • Click on WordPress which will open a lightbox window with information for the "WordPress Importer" plugin
  • Click on Install Now button
  • Once the plugin is installed then click on "Activate Plugin & Run Importer" link button
  • Click on Browse button which will open the File Upload dialog window
  • Browse to the folder where you have unziped the Biopic theme's zip file.
  • Double click the data folder
  • Select biopic-theme-demo-data.xml file and click on Open button of the File Upload dialog window
  • Now click on the Upload file and import button
  • In the next screen for the Assign Authors section choose admin or to which ever user you want to assign the imported data
  • Click Submit button to complete the import process
  • Upon successful import of the Biopic theme's demo data, you should be able to see pages, posts, menus etc. in the corresponding sections.

5 - Adding Main Menu:

The main menu (see screenshot below) has some special requirements in order to make the menu work exactly as in the live preview.

The 5 menu items (Profile, Resume, Portfolio, Blog and Contact) included in the live preview require custom css classes applied to them. The page names/labels can be different than the ones you see in the live preview but the custom css class needs to be exactly the same in order to associate the icons with the menu items. The custom css classes required are following:

  • profile for the Profile menu item
  • resume for the Resume menu item
  • portfolio for the Portfolio menu item
  • blog for the Blog menu item
  • contact for Contact menu item

For example if you want to use menu name Bio for the Profile menu name then you can use Bio label for the first menu item but want to show the same profile icon then you still have to set custom css class of profile to that menu item. See the illustration below for the instructions that how you can assign custom css classes to menu items.

Note: If you want to use a different icon for a specific menu item, let's say you want to add a new page to list your clients so you name you page as "Clients" and want to add the corresponding page in the main-menu then you will have to follow the instructions below:

  • Create a new Page by going to going to Pages section and clicking on Add New button.
  • Once the new page is published then see the path in the browser address and notice the value of the new page which should be something like post=xx, where xx is the id of the new page (See an example below). Write down the id of the new page.



  • Upload two icons for normal and hover/selected states using Media section in wp-admin and note the paths of the icons (see example below).





  • Now go to OptionTree->Options and scroll to the bottom of options in the General tab
  • Copy the following code and append at the bottom of css code in the Custom CSS textarea.

    nav li.page-XYZ a > span {
    background: url(http://themes.themebakers.com/biopic/wp-content/uploads/2012/05/shortcode-icon.png) no-repeat 9px 8px;
    }
    
    nav li.current-menu-item.page-XYZ a > span {
    background: url(http://themes.themebakers.com/biopic/wp-content/uploads/2012/05/shortcode-active-icon.png) no-repeat 12px 10px;
    padding-left:38px;
    }


  • Replace the paths of the icons and also replace the XYZ with the id of the page as explained above.
  • Click on "Save All Changes" to save the theme options.
  • Go to Appearance->Menus section and add your new page to the main-menu
  • Click "Save Menu" and preview the website to see the new menu item with its own custom icons in action

6 - Using Sidebars

Biopic comes with 3 built-in sidebars but you can make unlimited sidebars by duplicating the built-in sidebars. The 3 sidebars are:

  • Profile Sidebar
  • Blog Sidebar
  • Contact Sidebar

All sidebars are widget ready so you can place as many widgets on them as you want.
Note: If you place too many widgets on the profile sidebar then the content will be pushed down so don't place a widget or widgets which will take too much vertical space.

6 - Using Widgets:

Biopic is packed with 3 built-in widgets and supports css styling for many built-in widgets. Read the Widgets section to familiarize yourself with custom widgets.

You can add a widget to a sidebar or a widget ready area by dragging the titlebar of a widget from "Available Widgets" section and dropping it on a sidebar or widgetized area. For example if you want to display blog categories on the blog sidebar then follow the steps below:

  • Go to Appearance->Widgets section
  • Expand the Blog Sidebar by clicking on the title of the blog sidebar.
  • Drag Categories widget from the "Available Widgets section from the left and place it on blog sidebar area
  • Set the options of the Categories widget
  • Click Save and see the Blog Page in your website to see the categories widget in action in blog sidebar

7 - Using Shortcodes:

Biopic comes with 3 custom shortcodes. You can either use the shortcode button when adding/editing a page/post in visual mode or you can use the samples from the Shortcodes reference below. If you use the shortcode button in the visual mode then upon selection of a shortcode will insert a shortcode with dummy data so it's essential that you read the Shortcodes section to understand the parameters of all shortcodes.

Shortcodes

Biopic theme is packed with 3 shortcodes which can be used to insert data like skills, education and jobs. The shortcode in visual mode in WordPress editor allows you to insert shortcodes with dumy data so it's important that you understand the working of the shortcodes in this section. Each shortcode is explained with parameters and an example.

skills

skills is just a wrapper shortcode to wrap individaul skill shortcodes.

Parameters:

  • No parameters

skill

skill shortcode can be used to add a skill to your resume.

Parameters:

  • title - title of the skill
  • experience - a number indicating your skill level for a particular skill
  • maxexperience - the maximum skill level you can have for a particular skill

Example:

[skills][skill title="WordPress" experience="7" maxexperience="7"]Sed sapien urna, auctor et accumsan[/skill][skill title="HTML5 & CSS3" experience="6" maxexperience="7"]Sed sapien urna, auctor et accumsan ut.[/skill][/skills]

edujob

edujob is just a wrapper shortcode to wrap individaul education and jobs shortcodes.

Parameters:

None

edujobitem

edujobitem shortcode can be used to add a education and jobs to your resume.

Parameters:

  • title - title of the skill
  • period - duration of a degree/course or a job

Example:

[edujob][edujobitem title="Masters degree" period="Jan 1996 - Dec 2001"]University of studies, country, city[/edujobitem][edujobitem title="Bachelors degree" period="Jan 2001 - Dec 2004"]University of studies, country, city[/edujobitem][/edujob]

tabs

tabs only inserts the tabs interface and requires use of tabscontent and tabcontent shortcodes to insert a complete tabs interface with content in page, post or even in widget ready areas.

Parameters:

  • tabs - Accepts titles of tabs separated by comma

tabscontent

This is just a wrapper shortcode for the actual tab content blocks.

Parameters:

None

tabcontent

A tab's content can be added using tabcontent shortcode which requires an id matching the title of the corresponding title of a tab.

Parameters:

  • id - It must match the title of the corresponding tab title.
  • class - This is an option parameter. You must use this for the first tab to make it active and show it's content.

Example:

[tabs tabs="Tab1,Tab2,Tab3"]
[tabscontent]
[tabcontent id="tab1" class="active"]Tab 1 content goes here[/tabcontent]
[tabcontent id="tab2"]Tab 2 content goes here[/tabcontent]
[tabcontent id="tab3"]Tab 3 content goes here[/tabcontent]
[/tabscontent]

accordion

Accordian shortcode allows you to show a vertical accordian. It requires accordiontab shortcode to complete it's functionality.

Parameters:

  • id - An optional parameter to assign a unique id to an accordian.

accordiontab

This shortcode is required to complete the functionality of the accordion shortcode by adding sections to accordion.

Parameters:

  • title - Title of the accordion tab.

Example:

[accordion id="optional-id"]
[accordiontab title="Tab 1"]Tab 1 content goes here[/accordiontab]
[accordiontab title="Tab 2"]Tab 2 content goes here[/accordiontab]
[accordiontab title="Tab 3"]Tab 3 content goes here[/accordiontab]
[/accordion]

toggle

Adds a toggle interface element to a page.

Parameters:

  • title - Title of the toggle element
  • active - An optional parameter with possible values of "true" or "false". If set to true then the toggle element will be shown in expanded style by default.

Example:

[toggle title="Toggle Title"]Toggle content goes here[/ toggle]

list

list shortcode can be used to show unordered lists with following 3 bullet styles.

  • arrow
  • arrowhead
  • dash

Parameters:

  • type - Determines type of list. Default value is "arrow" if you omit the type parameter.

Example:

[list type="arrow"]
< ul>
	< li>Test 1
	< li>Test 2
	< li>Test 3
< /ul>
[/list]

button

button can be used to show a squared or rounded, a small or big button.

Parameters:

  • label - Label of the button
  • link - Link of the button
  • size - size of the button either small or large
  • shape - Determines shape of the button i.e. either squared or rounded. Acceptable values are "default" for a rounded shape button and "square" for a square shape button.

Examples:

[button label="Click Me" link="http://google.com"]
[button label="Click Me" link="http://google.com" shape="round"]

alert

Alert shortcode can be used to show alerts of various types. Each alert type is represented by a specific type of icon. Following is list of alerts:

  • warning
  • notice
  • success
  • error
  • info
  • standard - a generic message without an icon

Parameters:

  • type - Use this parameter to specify the type of alert. Omit it to show a generic alert message as default value is "standard".

Examples:

[alert type="warning"]alert content goes here[/alert]
[alert]this is a standard alert[/alert]

blockquote

A very simple shortcode to show text in a blockquote. You can even use WordPress editor's built-in blockquote button but using the blockquote shortcode you can specify the name of a person.

Parameters:

  • author - An optional parameter to show name of person below the quote.

Example:

[blockquote author="John Doe"]Sed sed leo sit amet elit sagittis fermentum. Nulla posuere commodo erat. Nam ac nunc ipsum, id espara tincidunt orci. Quisque adipiscing molestie dolor, ut congue sem porta et.[/blockquote]

video

Video shortcode can be used to embed a youtube or vimeo video into a page or post.

Parameters:

  • id - This is the id of the youtube or vimeo video. For example in youtube embed url http://www.youtube.com/embed/044BLsDCucc the id of the video is 044BLsDCucc.
  • type - Either youtube or vimeo.
  • width - Width of the video
  • height - Height of the video

Example:

[video id="044BLsDCucc" width="560" height="315" type="youtube"]

gmap

Google maps can be added to a page/post using gmap shortcode. In order to add a Google map to your site, you need to get an apikey.

Parameters:

  • apikey - apikey for your website.
  • address - address on the Google map which will be shown to user on load and marker will be displayed on that address.
  • html - html text which will be displayed in the popup.
  • zoom - zoom level of the map.
  • width - width of the map.
  • height - height of the map.
  • latitude - optional latitude value of the address.
  • longitude - optional longitude value of the address.
  • maptype - type of map to show. Possible values are HYBRID, SATELLITE, ROADMAP and TERRAIN
  • popup - whether to show popup on load or not.
  • scrollwheel - whether to enable mousewheel scrolling or not. Acceptable values are "true" and "false".

Example:

[gmap latitude="0" longitude="0" width="100%" height="400px" maptype="ROADMAP" zoom="14" popup="true", popup="Sydney, Australia", address="Sydney, Australia"]

Widgets

Biopic theme comes with 3 custom widgets besides the built-in widgets of the WordPress. Biopic also provides css styling for some of the built-in widgets which include Custom Menu, Categories, Recent Posts, Recent Comments, Archives, Search, Archives, Text, Meta and Links.

Biopic Twitter Tweets

This widget can be used to show latest twitter tweets from a specific twitter account.

Options:

  • Title
  • Twitter ID
  • Number of Tweets
  • Link Text

Biopic Flickr Photo Stream

This widget can be used to show a flickr photo stream from a user/group account.

Options:

  • Title
  • Flickr ID
  • Stream Type - user or group
  • Display Type - latest or random
  • Number of Thumbs to Show
  • Link Text

Biopic Recent Work

This widget can be used to show latest work in a sidebar/widgetized-area.

Options:

  • Title
  • Portfolio Page - Drop down with all pages to choose from
  • Number of Projects

Using Google Maps and Analytics

Maps

In order to use gmap shortcode you need to get an API Key from google and set that API Key as the value of "Google Maps API Key" in the Google Maps and Google Analytics Settings tab of the Theme Options panel in OptionTree. You can get a Google Maps API Key at https://code.google.com/apis/console/. You will need a google account if you don't have one already.

Analytics

You can get Google Analytics code for your website by going to http://www.google.com/analytics/. Again you will need to sign up for a Google account if you don't have one. You can read the articles regarding Google Analytics at http://support.google.com/googleanalytics/bin/topic.py?hl=en&topic=10976. Once you get the Google Analytics code then copy it and paste it in the Google Maps and Google Analytics Settings tab of the Theme Options panel in OptionTree.

Though providing support for products at Envato is optional but we believe in customer satisfaction so we provide support for all of our products for the following:

  • Bug fixes
  • Paid customization (our minimum hourly rate is $40/hr)

In order to provide quick and speedy support, you are advised either to post a comment on the relevant product page or contact us via contact form at our profile page on envato marketplaces so that we can verify your purchase of our product for which you need help and we will be back to you asap.

Note: Besides selling products at envato marketplaces, we also provide following services:

  • Custom website design and development
  • Wordpress themes and plugins development
  • Mobile optimized websites
  • Facebook Applications

We love working on exciting and challenging projects so if you have a project or an exciting idea then you can reach us at support@themebakers.com. You are also recommended to follow us on twitter at http://twitter.com/themebakers for new product releases and updates on existing products or like our facebook page at http://www.facebook.com/ThemeBakers.