BookCard Documentation

Overview of the theme, its contents, and how to get started with the theme

Introductiona quick introduction

created: May 2013

by Pixelwars

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, you can sign in to our support forums with your purchase code. And please rate the theme on ThemeForest if you liked it. Thanks so much!

- Pixelwars Team

Support Forums

Any questions that are beyond the scope of this help file, use support forums.

Visit Support Forums

Follow Us

Follow us on ThemeForest and don't miss new upcoming premium themes.

Follow us on ThemeForest

Rate Theme

If you liked the theme you can rate it on ThemeForest in your downloads menu.

Rate on ThemeForest

Getting Startedthings to know before get started

We assume you have basic knowledge of WordPress. In this doc you will learn how to setup, use and customize the theme. For information in regard to use the WordPress, please see the online manual of WordPress.

WordPress Settingsimportant

Administration > Settings:


Permalink Settings: Select "Post name" option.

Reading Settings: Select "Your latest posts" option.

Installinstallation

Find the zipped theme file under Theme folder.

Go to Appearance > Themes > Install Themes > Upload.

Select your zipped theme file and install it. Activate the theme after installation completed.

Dummy Datademo content

Go to Tools > Import > WordPress:

WordPress might offer you to install the "WordPress Importer" plugin, if you haven't installed it before do it now.

Once you've installed "WordPress Importer" plugin, browse to the folder "Dummy Data" in your downloaded package, select dummy data file and upload it.

Important: Go to Appearance > Theme Options > Pages. Select the pages to show in which part of the theme.

Now edit the content what you want ( pages and portfolio items ).

Pagesdefault and custom pages

Create Default Page

  • Go to: Pages > Add New,
  • Enter title for page,
  • Publish page,
  • Go to: Appearance > Menus,
  • Add page to menu,
  • Save menu.

Create Blog Page

  • Go to: Pages > Add New,
  • Enter title for blog page,
  • Publish page,
  • Go to: Settings > Reading,
  • Assign blog page as "Posts page".
  • Save changes,
  • Go to: Appearance > Menus,
  • Add blog page to menu,
  • Save menu.

Create Homepage

This theme has custom page template "Homepage" you can use for front page that has additional features and custom layout. You’ll see it in the Template dropdown menu in Page Attributes box.

  • Go to: Pages > Add New,
  • Enter title for homepage,
  • Select "Homepage" template from Page Attributes box,
  • Publish page,
  • Go to: Settings > Reading,
  • Assign homepage as "Front page",
  • Save changes,
  • Go to: Appearance > Menus,
  • Add homepage to menu,
  • Save menu.

Create Inner Pages

Inner pages are for Homepage template.

  1. Front Cover Page
  2. Resume Page
  3. Portfolio Page
  4. Contact Page

Inner Pages Content


Front Cover Page

Create a new page. Create your content with shortcodes.

Important: Select this page from Theme Options > Pages > Front Cover Page.

Demo Content:

[cover_caption title="I AM FROM"]EARTH[/cover_caption]
[cover_caption title="I CREATE"]HTML5 websites[/cover_caption]
[cover_caption title="I LIKE"]minimaltistic design[/cover_caption]
[cover_caption title="FREELANCE"]Available[/cover_caption]

Resume Page

Create a new page. Create your content with shortcodes.

Important: Select this page from Theme Options > Pages > Resume Page.

Demo Content:

[about_text]I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.[/about_text]

[section_caption title="EMPLOYMENT"]

[history_group]

[history_unit date="since 2011"]

Lead UX Designer

Apple Inc.

Worked in so many projects for best clients around the world and i get so many experiences based on my job.

[/history_unit]

[history_unit date="2007 - 2011"]

Level Designer

Crytek Inc.

Also i have designed levels of some cool games everyone plays.

[/history_unit]

[history_unit date="2002 - 2007"]

Web Developer

Creative Agency

Worked in so many projects for best clients around the world.

[/history_unit]

[/history_group]

[section_caption title="EDUCATION"]

[history_group]

[history_unit date="2000 - 2002"]

Phd Computer Science

MIT

Studied Phd. in MIT on Computer Science.

[/history_unit]

[history_unit date="1996 - 2000"]

Physics

Princeton University

I get my Bachelor Degree in Princeton University.

[/history_unit]

[/history_group]

[button align_center="yes" new_tab="" text="DOWNLOAD CV" url="#"]

[section_caption title="DEVELOPMENT SKILLS"]

[skill_group]

[skill_unit percent="100"]HTML5[/skill_unit]

[skill_unit percent="50"]CSS3[/skill_unit]

[skill_unit percent="70"]jQuery[/skill_unit]

[skill_unit percent="100"]WordPress[/skill_unit]

[/skill_group]

[section_caption title="DESIGN SKILLS"]

[skill_group]

[skill_unit percent="90"]Fireworks[/skill_unit]

[skill_unit percent="60"]Photoshop[/skill_unit]

[skill_unit percent="40"]Illustrator[/skill_unit]

[/skill_group]

[section_caption title="TESTIMONIALS"]

[testimonial_group]

[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-01.jpg" image_alt="Albert Einstein" name="Albert Einstein" position="CEO / Gravity Inc."]He is a great and hardworking guy. I am so proud of i have him as my asistant. He helped me so much.[/testimonial]

[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-02.jpg" image_alt="Walter White" name="Walter White" position="Chemist / Freelancer"]He was a great co-worker and a friend. I would't be where i am without his support.[/testimonial]

[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-03.jpg" image_alt="Dexter Morgan" name="Dexter Morgan" position="Lab Geek / Miami Metro"]He is ok.[/testimonial]

[/testimonial_group]

[section_caption title="SERVICES"]

[service_group]

[service icon="icon-laptop" title="Web Design"]I design super cool websites. It is a long established fact that a reader will be distracted by the readable content.[/service]

[service icon="icon-tablet" title="Mobile Development"]I can develop iOS and Android apps. It is a long established fact that a reader will be distracted by the readable content.[/service]

[service icon="icon-globe" title="Social Media"]I am a social media expert. It is a long established fact that a reader will be distracted by the readable content.[/service]

[/service_group]

Contact Page

Create a new page. Create your content with shortcodes.

Important: Select this page from Theme Options > Pages > Contact Page.

Demo Content:

Please feel free to contact me about anything.

[section_caption title="LET'S SOCIALIZE"]

[social_icons]
[social_icon type="facebook" title="" url="#"]
[social_icon type="twitter" title="" url="#"]
[social_icon type="linkedin" title="" url="#"]
[social_icon type="google" title="" url="#"]
[social_icon type="pinterest" title="" url="#"]
[social_icon type="github" title="" url="#"]
[social_icon type="behance" title="" url="#"]
[social_icon type="dribbble" title="" url="#"]
[/social_icons]

[section_caption title="DROP ME A LINE!"]

[contact_form_wrap]
   [letter_wrap]
      [letter_info]
	Johhny Doe
	johhny@gmail.com
	- Planet Earth
      [/letter_info]
      [stamp alt="Johnny Doe" url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/04/stamp-image.png"]
   [/letter_wrap]
   [contact_form to="yourname@yourmail.com"]
[/contact_form_wrap]

Portfolio Page

Create a new page.

Important: Select this page from Theme Options > Pages > Portfolio Page.

Blogposts

Blog Pages


Regular Blog Page

Check out Pages > Blog Page section.


Blog in Inner Pages

Display the latest posts under the resume page. Activate it from Theme Options > Blog.

Portfolio (portfolio items)works, projects etc.

Portfoio Item Types:

  1. Standard
  2. Lightbox Featured Image
  3. Lightbox Gallery
  4. Lightbox Video
  5. Lightbox Audio
  6. Direct URL

To create a portfolio item go to Portfolio > Add New.

Firstly set a featured image and fill the other fields.

Don't forget to select the portfoio item type from Details box.


Portfoio Item Types

Standard: Single viewing.

Lightbox Featured Image: Show the Featured Image in lightbox.

Lightbox Gallery: Show many images in lightbox with shortcodes. Upload your images to the Media Library, copy image File URL and use in the shortcode.

Shortcode: [pf_lightbox_image]

[pf_lightbox_image first_image="" title="" url=""]

first_image="" ... yes or do not use.

url="" ... Upload your image to the Media Library, copy image File URL ( not browser address bar ) and use in this parameter.

Example:

[pf_lightbox_image first_image="yes" title="Image 1 Title" url="image-1-url"]
[pf_lightbox_image title="Image 2 Title" url="image-2-url"]
[pf_lightbox_image title="Image 3 Title" url="image-3-url"]

Example:

[pf_lightbox_image first_image="yes" title="Octopus is dangerous!" url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/lightbox-02.jpg"]
[pf_lightbox_image url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/lightbox-04.jpg"]
[pf_lightbox_image title="Dog have dreams" url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/lightbox-03.jpg"]

Lightbox Video: Show video in lightbox with shortcode. (Vimeo, YouTube etc.)

Shortcode: [pf_lightbox_video]

[pf_lightbox_video title="" url=""]

url="" ... video embed url, not watch url (Vimeo, YouTube etc.)

Example:

[pf_lightbox_video title="Paper by FiftyThree" url="http://player.vimeo.com/video/37254322?badge=0&color=ffffff"]

Lightbox Audio: Show audio in lightbox with shortcode. (SoundCloud)

Shortcode: [pf_lightbox_audio]

[pf_lightbox_audio title="" url=""]

url="" ... SoundCloud embed url.

Example:

[pf_lightbox_audio title="Soundcloud embed" url="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F207988&"]

Direct URL: Put your link to the input.

Shortcode Generatorcreate shortcodes easily

Use "Insert Shortcode" button to add a shortcode to the content editor easily.


Shortcodeseasy way to create content

Grid

Grid system based on 12 columns. So the parameter width="12" means 100% in a row (full width).

=================================================================================================

[row]
	Put your column shortcode(s) here.
[/row]

Example:

[row]
	[column width="6"]
		Put your content here.
	[/column]
	[column width="6"]
		Put your content here.
	[/column]
[/row]

=================================================================================================

[column width="" offset=""]
	Put your content here.
[/column]

width="" ... (required) 1..12

offset="" ... 1..12 or do not use

Example:

[column width="12"]
	[row]
		[column width="6"]
			Put your content here.
		[/column]
		[column width="6"]
			Put your content here.
		[/column]
	[/row]
[/column]

=================================================================================================

Front Cover Captions

[cover_caption title=""]Description here.[/cover_caption]

Example:

[cover_caption title="I AM FROM"]EARTH[/cover_caption]
[cover_caption title="I CREATE"]HTML5 websites[/cover_caption]
[cover_caption title="I LIKE"]minimaltistic design[/cover_caption]
[cover_caption title="FREELANCE"]Available[/cover_caption]

Section Captions

[section_caption title=""]

Example:

[section_caption title="EMPLOYMENT"]

[section_caption title="EDUCATION"]

[section_caption title="DEVELOPMENT SKILLS"]

Tags

[tags]
	[tag text=""]
	[tag text=""]
	[tag text=""]
[/tags]

Example:

[tags]
	[tag text="HTML5"]
	[tag text="CSS"]
	[tag text="jQuery"]
[/tags]

Google Map

Important: Don't forget to switch the Text tab of the content editor before adding this shortcode.

[map]put your google map iframe code here[/map]

Example:

[map]
<iframe src="https://maps.google.com/maps?source=s_q&f=q&hl=en&geocode=&q=little+italy&aq=&sll=36.558188,-86.709595&sspn=3.878053,8.453979&ie=UTF8&hq=&hnear=Little+Italy,+New+York&t=p&ll=40.84706,-73.125&spn=6.647611,26.367188&z=5&output=embed"></iframe>
[/map]

Social Media Icons

[social_icons]
	[social_icon type="" title="" url=""]
	[social_icon type="" title="" url=""]
	[social_icon type="" title="" url=""]
[/social_icons]

type="" ... facebook, twitter, linkedin, google, pinterest, github, behance, dribbble, instagram, lastfm, vimeo, forrst, skype, picassa, youtube, flickr, tumblr, blogger, delicious, digg, friendfeed, wordpress, rss

Example:

[social_icons]
	[social_icon type="facebook" url="http://www.facebook.com/username"]
	[social_icon type="twitter" url="http://twitter.com/username"]
[/social_icons]

Contact Form

[contact_form_wrap]
	[letter_wrap]
		[letter_info]
			Name. (Heading 4)
			Email. (Paragraph)
			Position. (Paragraph)
		[/letter_info]
		[stamp alt="" url=""]
	[/letter_wrap]
	[contact_form captcha="no" to=""]
[/contact_form_wrap]

url="" ... upload your image to the Media Library, copy the image url and use in the shortcode.

to="" ... enter which email address will be sent from contact form.

captcha="yes" ... yes or no

Buttons

[button align_center="" new_tab="" text="" url=""]

align_center="" ... yes or do not use

new_tab="" ... yes or do not use

History Groups

[history_group]
	[history_unit date=""]
		Position. (Heading 4)
		Company name. (Heading 5)
		Description. (Paragraph)
	[/history_unit]
	[history_unit date=""]
		Position. (Heading 4)
		Company name. (Heading 5)
		Description. (Paragraph)
	[/history_unit]
[/history_group]

date="" ... your working time.

Skill Groups

[skill_group]
	[skill_unit percent=""]Skill name here[/skill_unit]
	[skill_unit percent=""]Skill name here[/skill_unit]
	[skill_unit percent=""]Skill name here[/skill_unit]
[/skill_group]

percent="" ... 100, 90, 80, 70 etc.

Testimonials

[testimonial_group]
	[testimonial image_link="" image_url="" image_alt="" name="" position=""]Description here.[/testimonial]
	[testimonial image_link="" image_url="" image_alt="" name="" position=""]Description here.[/testimonial]
	[testimonial image_link="" image_url="" image_alt="" name="" position=""]Description here.[/testimonial]
[/testimonial_group]

image_url="" ... Upload your image to the Media Library, copy the image File URL ( not the browser address bar ) and use it in this parameter.

image_link="" ... A direct link for the testimonial image. (Optional).

Example:

[testimonial_group]
	[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-01.jpg" image_alt="Albert Einstein" name="Albert Einstein" position="CEO / Gravity Inc."]He is a great and hardworking guy. I am so proud of i have him as my asistant. He helped me so much.[/testimonial]
	[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-02.jpg" image_alt="Walter White" name="Walter White" position="Chemist / Freelancer"]He was a great co-worker and a friend. I would not be where i am without his support.[/testimonial]
	[testimonial image_url="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/testo-03.jpg" image_alt="Dexter Morgan" name="Dexter Morgan" position="Lab Geek / Miami Metro"]He is ok.[/testimonial]
[/testimonial_group]

Services

[service_group]
	[service icon="" title=""]Description here.[/service]
	[service icon="" title=""]Description here.[/service]
	[service icon="" title=""]Description here.[/service]
[/service_group]

icon="" ... icon-laptop, icon-tablet, icon-globe. ===> MORE ICONS <===

=================================================================================================

Example:

[service_group]
	[service icon="icon-laptop" title="Web Design"]I design super cool websites. It is a long established fact that a reader will be distracted by the readable content.[/service]
	[service icon="icon-tablet" title="Mobile Development"]I can develop iOS and Android apps. It is a long established fact that a reader will be distracted by the readable content.[/service]
	[service icon="icon-globe" title="Social Media"]I am a social media expert. It is a long established fact that a reader will be distracted by the readable content.[/service]
[/service_group]

Portfolio Shortcodes

Read the Portfolio section firstly.

=================================================================================================

Portfolio Item Type: Lightbox Video

[pf_lightbox_video title="" url=""]

url="" ... video embed url, not watch url ( Vimeo, YouTube etc. ).

=================================================================================================

Portfolio Item Type: Lightbox Audio

[pf_lightbox_audio title="" url=""]

url="" ... a SoundCloud embed url.

Example:
 
[pf_lightbox_audio title="Soundcloud embed" url="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F207988&"]

=================================================================================================

Portfolio Item Type: Lightbox Gallery

[pf_lightbox_image first_image="" title="" url=""]

first_image="" ... yes or do not use.

url="" ... Upload your image to the Media Library, copy image File URL ( not browser address bar ) and use in this parameter.

Example:

[pf_lightbox_image first_image="yes" title="Image 1 Title" url="image-1-url"]
[pf_lightbox_image title="Image 2 Title" url="image-2-url"]
[pf_lightbox_image title="Image 3 Title" url="image-3-url"]

=================================================================================================

Others

=================================================================================================

[divider]

=================================================================================================

[label]Text here.[/label]

Example:

I am a [label]theoretical physicist[/label] developed the general theory of relativity.

=================================================================================================

[about_text]Description text here.[/about_text]

Example: Use with [label] shortcode

[about_text]I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.[/about_text]

=================================================================================================

[portfolio_field]
	Portfolio stuff here.
[/portfolio_field]

Note: Use this shortcode for portfolio single content ( Portfolio Item Type: Standard ).

=================================================================================================

[image src="" alt="" title="" width="" height=""]

src="" ... (required) upload your image to the Media Library, copy the image url and use in the shortcode.

Example:

[image alt="Happy Bear" src="http://themes.pixelwars.org/bookcard-wp/wp-content/uploads/2013/05/single-05.jpg"]

=================================================================================================

Theme Optionstheme settings

This theme has a customized settings panel for further customization. For every option, it has a description on its right.

Go to Appearance > Theme Options.

Live Customizertheme customizer

This theme supports the live theme customizer for custom font options.

Go to Appearance > Themes > Customize.


Default Fonts

Text Logo Font: Alfa Slab One

Text Slogan Font: Nixie One

Page Title Font: Arvo

Content Font: Lato

Localizationtranslation

This theme is ready for localization. We have made every string translate able with the text domain "bookcard", use Codestyling Localization plugin or Poedit editor.

The translation files are located under languages folder in the theme folder.


How to use Codestyling Localization plugin?

  1. Install and activate the plugin,
  2. Go to Tools > Localization > Themes,
  3. Find your native language in the flag list which must be bold text or click Add New Language button to add new one,
  4. Firstly click Rescan button and scan the theme files then click Edit button,
  5. All translate able strings will be displayed in the table,
  6. Every string has Edit link in the opposite of it to translate,
  7. Finally click generate-mo file button at the top side of the page.

Disable CommentsComments Off

Every post/page has a "Quick Edit" link when you hover in the editing list. Click it to open "QUICK EDIT" menu then uncheck the "Allow Comments" option.

Creditsthanks to creator of this great files