BookCard Documentation

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

Pixelwars logo

Thank you for purchasing our theme! If you have a question that this documentation doesn't answer, ask us on our support forums. If you like the theme, please rate it on ThemeForest.

- Pixelwars Team

Support Forums

Sign in to our support forums to ask your question. To open a new topic, you need your Item Purchase Code (where is my purchase code?).

Visit Support Forums

Rate Theme

If you like the theme, you can rate it on your ThemeForest Downloads page.

Rate on ThemeForest

We assume you have basic knowledge of WordPress. In this documentation, you will learn how to install, set up and customize BookCard.

Useful Resources

We've assembled some links to get you started:

Learn WordPress: Level up your WordPress skills.


WordPress Documentation: A variety of resources to help you get the most out of WordPress.


WordPress Support Forums: Community-based Support Forums are a great place to learn, share, and troubleshoot.

Note: The WordPress.org forums don't provide support for commercial themes. For questions about BookCard, please use our support forums.


Free Plugins: The WordPress Plugin Directory is the largest directory of free and open source WordPress plugins. Extend your WordPress experience with plugins.

Install Theme

You can add the theme to your WordPress site in one of the following ways.

Install via Envato Market Plugin

The Envato Market plugin connects your site to your ThemeForest account and installs the themes you purchased.

  • The plugin isn't available on WordPress.org. Download it from the Envato Market page, then install it from Plugins > Add Plugin > Upload Plugin.
  • Go to the "Envato Market" page in your dashboard and connect the plugin to your account with a personal token. The page shows you how to create one.
  • Install and activate the theme from the "Envato Market" page.

The plugin also helps you keep the theme up to date (see the Update section).

Install by Uploading the ZIP File

  • Download the theme package from your ThemeForest account and unzip it. The theme's ZIP file (bookcard.zip) is inside the "Theme/1 - Parent Theme" folder of the theme package, in the folder with the current version number.
  • In your dashboard, go to Appearance > Themes > Add Theme > Upload Theme.
  • Click "Choose File", select the theme's ZIP file, and click "Install Now".
  • When the installation is complete, click "Activate".

Note: The "Theme/1 - Parent Theme" folder also has a "Previous Version" folder, with the ZIP file of the previous theme version. Don't install it on a new site. It is there for sites that already use the theme: if your site has a problem after an update, you can go back to the previous version by installing this file (see the Update section).

Note: Your host limits the size of the files you can upload. You can see this limit under Tools > Site Health > Info > Media Handling ("Max size of an uploaded file"). If the theme's ZIP file is larger than this limit, install the theme with one of the ways below, or ask your hosting provider to increase the limit.

Other Ways to Install a Theme

After Installation

  • After you activate the theme, WordPress shows a notice to install the theme's plugins. Go to Appearance > Install Plugins to install them (see the Plugins section).
  • The theme adds a "Theme Options" item to your dashboard menu, right below "Dashboard" (see the Customization section). Your Dashboard also shows a "Welcome to BookCard" panel with links to Theme Options, the Customizer, the demo import, this documentation and the support forum. You can close the panel, and bring it back from "Screen Options" at the top of the Dashboard.
  • To make your site look like the demo, import the demo content (see the Demo Import section).
  • This theme uses custom image sizes. If you already have images in your Media Library, install and activate the Regenerate Thumbnails plugin, then run it once from Tools > Regenerate Thumbnails.

Child Theme

A child theme inherits the functionality and styling of the parent theme. If you want to change the theme's code, use the child theme: your changes are kept when you update the parent theme (see the Update section).

  • The child theme's ZIP file (bookcard-child.zip) is inside the "Theme/2 - Child Theme" folder of the theme package.
  • Install the parent theme first, as described above. Keep it installed, because the child theme needs it.
  • Then install the child theme's ZIP file the same way and activate the child theme.

This theme is coded to high standards to ensure seamless compatibility with plugins.

Theme Plugins

The theme's features, like the card, the portfolio, the contact form and the shortcodes, are built into the theme, so you don't need an extra plugin for them. Go to Appearance > Install Plugins to install the recommended plugins. All of them are free plugins from WordPress.org:

Import Demo Data

Importing demo data (posts, pages, theme settings, etc.) is the quickest and easiest way to set up your new theme. It allows you to simply edit everything instead of creating content and layouts from scratch.

System Requirements

Before you import the demo, make sure your server meets our system requirements (WordPress and PHP versions, and PHP limits such as memory and upload size). You can check your current values under Tools > Site Health > Info > Server. If you are not sure whether your server meets them, contact your hosting provider.

Import Methods

First, go to Appearance > Install Plugins, and install and activate the plugins listed there. Then choose one of the following methods. A low upload size limit on your server can stop the import. In this case, you need to increase it; see this article for how to do it.

Method 1: One-Click Import (Recommended)
  • Go to Appearance > Import Demo Data, choose "Demo Content" and import it. You can also open this page with the "Import Demo Content" button of the "Welcome to BookCard" panel on your Dashboard.
  • This imports the pages, posts and portfolio items of the demo with their images, the menu, and the widgets of the "Blog Sidebar". The settings in Theme Options, like the card pages, the cover images and the skins, aren't part of the demo. Set them after the import (see After the Import below).
Method 2: Manual Import

Use this method if the one-click import doesn't work on your server. The files are in the "Sample Data" folder of the theme package. If the theme has more than one demo, each demo has its own folder.

  • Plugins: Install and activate the plugins used on the demo site (see the Plugins section).
  • Content: Go to Tools > Import. Under "WordPress", click "Install Now" (if the importer isn't installed yet), then "Run Importer". Choose the "01 - All content (all parts).xml" file in the "Sample Data" folder and import it. Check "Download and import file attachments" to import the images too. The other files in the folder have the same content in parts (posts, pages and portfolio items), if you only need some of it.
  • Widgets: Install and activate the Widget Importer & Exporter plugin. Go to Tools > Widget Importer & Exporter and import the "widgets.wie" file. You can find it in the theme's ZIP file, in the "bookcard/admin/demo-data" folder.
  • Settings: Then set up the card, the homepage and the menu (see After the Import below).

After the Import

The import doesn't change your settings. To make your site look like the demo, set these yourself:

  • Card pages: Go to Theme Options > Pages. Select "FRONT COVER" as the "Front Cover Page", "RESUME" as the "Resume Page", "CONTACT" as the "Contact Page" and "PORTFOLIO" as the "Portfolio Page", and save changes (see the The Card section).
  • Homepage: Go to Settings > Reading. Under "Your homepage displays", choose "A static page", select "Home" as the homepage and "Blog" as the posts page, and save changes. The "Home" page uses the "Homepage" template, which shows the card (see the Homepage section).
  • Menu: Go to Appearance > Menus. In the "Manage Locations" tab, select the imported menu ("Custom Menu") and save changes. Its "Resume", "Portfolio" and "Contact" items are custom links to the demo site. Remove them and add your "RESUME", "PORTFOLIO" and "CONTACT" pages instead (see the Menu section).
  • Contact form: Edit the "CONTACT" page and enter your email address in the contact form shortcode (see Contact Page).
  • Cover images and logo: Choose your cover images in Theme Options > Cover, and your logo in Theme Options > General (see Cover and Style).

Permalinks are the permanent URLs to your individual pages and blog posts, as well as your category and tag archives. A permalink is the web address used to link to your content.

  • Go to Settings > Permalinks page.
  • Set the "Post name" option as permalink structure.
  • Save changes.

For more information

The settings of this theme are in two places: most of them are in Theme Options, and the fonts and the blog settings are in the Customizer.

Theme Options

Go to Theme Options in your dashboard menu, right below "Dashboard". The settings are grouped in tabs on the left, and each setting has a short help text under it. Click "Save Changes" in the right column to save the settings of the open tab.

  • General: Your logo (text or image), the title and the tagline shown on the front cover and in the header, and where the Theme Options item sits in the dashboard menu ("Menu Position").
  • Cover: The front cover image and the back cover image of the card (see Cover and Style).
  • Pages: The pages shown on the panels of the card, and the position of the Portfolio page's content (see Card Pages).
  • Style: The skins of the front cover and the inner pages, the paper texture of the card and the background of the site (see Cover and Style).
  • Animation: The classic layout, the scrollbars of the card, the animations of the pages and portfolio items, and the size of the texts on the front cover.
  • Portfolio: Open portfolio items inside the card or on their own page (see the Portfolio section).
  • Blog: Show your latest blog posts at the end of the Resume page (see Resume Page).
  • Social: An X (Twitter) box at the bottom of the front cover.
  • Login: The logo on the login page of your site and its link.
  • Custom Code: Your own CSS ("Custom CSS"), and links to your own stylesheets and scripts ("External Stylesheets" and "External Scripts"), like tracking codes.
  • Sidebars: Create and delete widget areas (see the Sidebar section).
  • Site Health: What WordPress's Site Health page (Tools > Site Health) checks, why it matters for the theme, and how to copy your site info when you ask for support.

Customizer

Go to Appearance > Customize. While you change the settings, you can see the changes live on your website.

  • Fonts: The fonts of the text logo, the tagline ("Text Slogan Font"), the page titles, the content and the "OPEN" button on the front cover. You can choose from the Google Fonts.
  • Blog and Single Post: Excerpts and pagination on the blog page, and related posts, tags and post navigation on single posts (see the Posts section).
  • Sidebar: Show or hide the sidebar on the blog page and on single posts (see the Posts section).

Custom CSS and Code Changes

To add small style changes, use Appearance > Customize > Additional CSS, or the "Custom CSS" field in Theme Options > Custom Code. For changes in the theme's code, use the child theme, so that your changes are kept when you update the theme (see the Installation and Update sections).

For more information

Widgets are independent sections of content that can be placed into widgetized areas.

This theme uses the widgets that come with WordPress, like Text, Custom HTML, Recent Posts, Categories and Search, and the widgets of your plugins. It doesn't add widgets of its own.

  1. Go to Appearance > Widgets.
  2. Drag and drop widgets to widget areas (see the Sidebar section).
  3. Save each widget by clicking its "Save" button.

You can also add widgets in Appearance > Customize > Widgets, with a live preview.

Pages are similar to posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest pages under other pages by making one the "Parent" of the other, creating a group of pages.

Settings Sidebar

When editing a page/post in the WordPress editor, you will find a Settings sidebar on the right-hand side of the screen. This panel contains various options and settings related to the page, such as:

  • Featured Image: Set the main image that represents this page.
  • Template: Select which page template to use.
  • Discussion: Enable or disable comments for the page.

These settings control how the page is displayed. You can find more information about the Settings sidebar in this article.

The theme also adds a "Sidebar" box to the settings sidebar of pages (see Page Sidebar below).

Create a Page

  1. Go to Pages > Add Page.
  2. Enter title.
  3. Add body text.
  4. Set featured image (optional).
  5. Select a template. (see page templates below)
  6. Publish your page.

Page Template

You can assign a custom template to any page by editing it in the WordPress admin area. To select a custom page template, open the Template dropdown in the settings sidebar.

  • Default Template: WordPress comes with a built-in Default template, which displays the page content using your theme's standard layout. You can use this template for basic pages.
  • Custom Templates: This theme includes custom page templates, each designed for a specific layout. The name of each template clearly indicates how the page content will be displayed. So you can easily understand what kind of layout it provides before applying it.

The theme's page templates:

  • Homepage: Shows the card, with the pages you selected in Theme Options > Pages on its panels (see the Homepage and The Card sections).

Other pages use the Default Template. Write their content with blocks, and with the theme's shortcodes (see the Shortcodes section).

Page Sidebar

Some page templates include a sidebar area that can display widgets such as recent posts, categories, or custom content.

By default, pages have no sidebar. To show one on a page, select it in the "Sidebar" box of the page: "Page Sidebar", "Blog Sidebar", "Post Sidebar", or a widget area you created in Theme Options > Sidebars (see the Sidebar section). The pages shown on the card and the page with the "Homepage" template have no sidebar.

After selecting a sidebar, go to Appearance > Widgets and add any widgets you want to the sidebar you chose for that page (see the Widgets section).

Managing Pages

Managing pages is very similar to managing posts, and the screens can be customized in the same way. You can also perform the same types of actions, including narrowing the list by using the filters, acting on a page using the action links that appear when you hover over a row, or using the Bulk actions menu to edit the metadata for multiple pages at once.

Learn more about Managing Pages.

Useful Resources

Learn how to get the most out of the WordPress block editor when publishing your content.


What Your Homepage Displays

WordPress allows you to choose what your homepage displays. You can use a classic blog page showing your latest posts, or you can assign a static page. If you don't want a blog page on your site, you can set a static homepage only. Creating a blog page is optional. To set a static homepage, simply create (or choose) a page and assign it as the Homepage in Settings > Reading.

Note: Like the demo site, your homepage should show the card. The card is the page that uses the theme's "Homepage" template. If you import the demo, select its "Home" page as your homepage (see After the Import).

Create a Homepage

  • Go to Pages > Add Page.
  • Enter a title, like "Home". Leave the content empty: the card shows the pages you select in Theme Options > Pages, not the content of this page.
  • In the page settings sidebar, set "Template" to "Homepage".
  • Publish your page.

Then select this page as your homepage (see below) and set up the panels of the card (see the The Card section). Use only one page with the "Homepage" template.

Reading Settings

  • Go to Settings > Reading.
  • Under "Your homepage displays", choose "A static page".
  • Select your page as the "Homepage". If you also want a blog page, create an empty page (for example "Blog") and select it as the "Posts page".
  • Save changes.

Learn more about Reading Settings

How the Card Works

Your homepage shows your site as a folded card. The card has four panels:

  • Home: The front cover, with your logo or title, your tagline, the captions of the Front Cover Page and the "OPEN" ribbon that opens the card. When you have blog posts, the front cover also shows your latest post ("Latest From The Blog") with an "All Posts" button to your posts page.
  • Resume: The inside of the front cover.
  • Portfolio: The middle panel, with your portfolio items (see the Portfolio section).
  • Contact: The right panel.

The navigation at the top of the card switches between the panels. Each panel has its own address: the address of the card followed by "#/home", "#/resume", "#/portfolio" or "#/contact".

On large screens, the card opens and folds in 3D. On screens narrower than 960 px and on Android devices, the theme uses the classic layout instead: a flat page that shows one panel at a time. To use the classic layout on every device, check "Activate Classic Layout" in Theme Options > Animation.

Card Pages

The content of each panel comes from a page:

  1. Go to Pages > Add Page and create a page for each panel, for example "FRONT COVER", "RESUME", "PORTFOLIO" and "CONTACT". Write their content with the theme's shortcodes (see below and the Shortcodes section).
  2. Go to Theme Options > Pages.
  3. Select your pages as the "Front Cover Page", "Resume Page", "Contact Page" and "Portfolio Page".
  4. Click "Save Changes".

The titles of the Resume, Portfolio and Contact pages are the headings of their panels. The four pages don't have a page of their own on your site: when a visitor opens one of them, for example from your menu, the card opens at its panel (see the Menu section).

Add each shortcode in a "Shortcode" block, like the pages of the demo. You can also add the shortcodes with the shortcode generator of the "Classic" block (see the Shortcodes section).

Tip: The demo content has these four pages with the shortcodes of the demo site. Import it and edit the pages (see the Demo Import section).

Front Cover Page

The front cover shows your logo or title and your tagline (Theme Options > General), and below them the content of the Front Cover Page. Use the cover_caption shortcode for the captions: its title is shown small, and the text after it large.

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

The texts on the front cover are sized to the width of the cover. To make them larger or smaller, change "Cover Title Size", "Cover Tagline Size", "Cover Caption Size" and "Cover Caption Sub Size" in Theme Options > Animation: a higher number makes the text smaller.

To add an X (Twitter) box with a link to your profile at the bottom of the front cover, fill in the fields in Theme Options > Social.

Resume Page

The Resume panel shows the content of the Resume Page. The demo builds it with these shortcodes (see the Shortcodes section for all of their options):

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

[section_caption title="EMPLOYMENT"]

[history_group]
[history_unit date="since 2011"]
<h4>Lead UX Designer</h4>
<h5>Apple Inc.</h5>
Worked in so many projects for best clients around the world.
[/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="70"]jQuery[/skill_unit]
[/skill_group]

[section_caption title="TESTIMONIALS"]

[testimonial_group]
[testimonial image_url="" image_alt="Albert Einstein" name="Albert Einstein" position="CEO / Gravity Inc."]He is a great and hardworking guy.[/testimonial]
[/testimonial_group]

[section_caption title="SERVICES"]

[service_group]
[service icon="icon-laptop" title="Web Design"]I design super cool websites.[/service]
[service icon="icon-tablet" title="Mobile Development"]I can develop iOS and Android apps.[/service]
[/service_group]

To show your latest blog posts at the end of the Resume panel, go to Theme Options > Blog and choose a style in "Blog Posts on Resume Page": "History style", "Testimonial style" or "Service style". "Number of Posts to Show" sets how many posts are listed (10 by default).

Contact Page

The Contact panel shows the content of the Contact Page. The demo builds it with social icons, a letter with your contact details and a stamp image, and a contact form:

Please feel free to contact me about anything.

[section_caption title="LET'S SOCIALIZE"]

[social_icons]
[social_icon type="facebook" title="" url="https://www.facebook.com/username"]
[social_icon type="linkedin" title="" url="https://www.linkedin.com/in/username"]
[social_icon type="github" title="" url="https://github.com/username"]
[/social_icons]

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

[contact_form_wrap]
[letter_wrap]
[letter_info]
<h4>Johnny Doe</h4>
<em>johnny@example.com</em>
- Planet Earth
[/letter_info]
[stamp alt="Johnny Doe" url=""]
[/letter_wrap]
[contact_form to="yourname@example.com" captcha="yes"]
[/contact_form_wrap]
  • to="": (required) The email address that receives the messages. Without it, the form can't send messages.
  • captcha="": yes adds a simple math question to the form against spam.
  • url="" (stamp): The URL of the stamp image (Media > Library, "File URL").

The form sends the messages through WordPress, with your site name as the sender. When you reply, your reply goes to the visitor's email address. If the messages don't arrive, install an SMTP plugin, like WP Mail SMTP, or ask your hosting provider whether your server can send email.

To show a map, add a "Custom HTML" block and paste the embed code of your map, for example from Google Maps ("Share" > "Embed a map"), into a map shortcode:

[map]<iframe src="https://www.google.com/maps/embed?pb=..."></iframe>[/map]

Cover and Style

  • Theme Options > General: Choose a text logo or an image logo. For a text logo, choose its source: the site title in Settings > General, the title of the Front Cover Page, or your own text ("Theme Site Title"). The tagline comes from Settings > General, or from your own text ("Theme Tagline").
  • Theme Options > Cover: The "Front Cover Image" is the background of the front cover, and also the background of the header on your blog and other pages. Use a large portrait photo. The "Back Cover Image" is shown on the right panel of the opened card, in the 3D layout only.
  • Theme Options > Style: "Cover Style" and "Inner Pages Style" are design presets for the front cover and for the inner pages. "Paper Background" is the texture of the card ("Clean" means no texture), and "Site Background" is the texture around the card.
  • Theme Options > Animation: The animation of the panels in the classic layout, the animations that open and close portfolio items, and whether the scrollbars of the card are always visible.
  • Appearance > Customize > Fonts: The fonts of the card and of your other pages (see the Customization section).

Here, you will find the information you need to create a blog post. Once you have created your blog post, you can publish it on your blog page. Blog posts have a title, body text, and associated metadata, and they are part of the chronological blog stream. Posts are categorized and tagged, but can not have a hierarchy. Post categories can have a hierarchy. You can nest categories under other categories by making one the "Parent" of the other, creating a group of categories.

If you have any questions about blog page and blog posts, feel free to reach out to us on our support forum. We are happy to assist you!

Let your creativity flow and craft engaging blog posts to share. This will enhance the value of your website and also help it rank higher in search engines.

Settings Sidebar

When editing a page/post in the WordPress editor, you will find a Settings sidebar on the right-hand side of the screen. This panel contains various options and settings related to the page, such as:

  • Featured Image: Set the main image that represents this page.
  • Template: Select which page template to use.
  • Discussion: Enable or disable comments for the page.

These settings control how the page is displayed. You can find more information about the Settings sidebar in this article.

Theme Boxes

The theme doesn't add boxes to posts. Pages have a "Sidebar" box (see the Pages section), and portfolio items have a "Details" box (see the Portfolio section).

Create a Blog Page

Creating a blog page in WordPress is simple, and you can do it in just a few steps. Here's how (see also the Homepage section):

  1. In the left-hand menu, go to Pages > Add Page.
  2. Enter a title for your page, such as "Blog".
  3. Leave the content area blank (WordPress will automatically display your blog posts here).
  4. Click "Publish" to save the page.
  5. Go to Settings > Reading in the dashboard. (Learn more about Reading Settings)
  6. Under "Your homepage displays", select "A static page".
  7. Set your "Homepage" to the page you want as your front page.
  8. Set your "Posts page" to the "Blog" page you just created.
  9. Click "Save Changes".
  10. Go to Appearance > Menus.
  11. Select the "Blog" page and add it to your navigation menu.
  12. Click "Save Menu".

Now, whenever you publish a new blog post, it will automatically appear on your blog page. Happy blogging!

Post Categories

You can use categories to define sections of your site and group related posts. The default category is "Uncategorized" until you change it in the WordPress Writing settings.

Post Tags

You can assign keywords to your posts using tags. Unlike categories, tags have no hierarchy, meaning there's no relationship from one tag to another.

Create a Blog Post

  1. Go to Posts > Add Post.
  2. Enter a title, write your content, and add images.
  3. Set featured image.
  4. Choose a "Category" and "Tags" for better organization.
  5. Choose an appropriate "Format". (see formats below)
  6. Click the "Publish" button to make your post live.

Post Formats

The Post Formats feature in WordPress allows you to use different styles and layouts for various types of content. This feature helps your theme make posts more dynamic and user-friendly.

How to Use Post Formats

On the post edit screen, you can choose the format of a blog post. To do this, open the edit screen of a post and locate the "Format" option in the settings sidebar on the right-hand side.

Note: You can change the post format of an already published post at any time. Simply edit the post and select a different "Format" from the options. WordPress will automatically adjust the layout based on the new format, ensuring that your content remains visually appealing.

Supported Post Formats

WordPress provides a variety of Post Formats, each designed for specific types of content. When creating a post, you can enhance its layout using the WordPress Block Editor.

In the block inserter menu, you will find suitable blocks for each post format. For example, the "Gallery" format supports the "Gallery" block, and the "Video" format supports the "Video" block. To quickly find the right block for a format, simply type the format name (e.g., "Image," "Quote," or "Video") into the block search field. WordPress will automatically suggest the most relevant block for your post format.

This theme supports the following WordPress Post Formats:

  • Standard: Used for classic blog posts. It may include a title, content, and a featured image. Suggested Block: Paragraph, Heading, Image, List.
  • Gallery: Used for posts containing multiple images. Suggested Block: Gallery, Columns.
  • Image: Designed for posts that focus on a large image. Suggested Block: Image, Cover.
  • Video: Ideal for video content. Supports embedded videos from platforms like YouTube and Vimeo. Suggested Block: Video, Embed.
  • Audio: Ideal for audio files, podcasts, or music sharing. Upload an audio file through the "Media Library" or embed it using an embed code. Suggested Block: Audio, Embed.
  • Aside: Suitable for short, informal content or announcements. Suggested Block: Paragraph, Pullquote.
  • Status: Short status updates, similar to social media posts. Suggested Block: Paragraph, Quote.
  • Quote: Highlights a quote, usually displayed with special typography. Suggested Block: Quote, Pullquote.
  • Link: Highlights a single external link. Suggested Block: Button, Paragraph with a Hyperlink.
  • Chat: Formats text to resemble a conversation or chat log. Suggested Block: Paragraph. (See below example)

Example for Chat format

JOHN: Hey there

MARY: Aye, matey!

JOHN: Huh?

Blog Sidebar and Post Sidebar

Sidebars allow you to display additional content alongside your main blog page and individual posts. This can include widgets such as recent posts, categories, search bars, social media links, and advertisements.

Enabling the Sidebars

The sidebars are turned on by default. To check:

  1. Go to Appearance > Customize > Sidebar.
  2. Set "Blog Sidebar" and "Post Sidebar" to "Yes".
  3. Click "Publish".

Then go to Appearance > Widgets and add widgets to the "Blog Sidebar" and "Post Sidebar" widget areas (see the Widgets section). When the "Post Sidebar" is empty, single posts show the "Blog Sidebar".

Blog Settings

  • Appearance > Customize > Blog: "Automatic Excerpt" shows a short excerpt of each post on the blog page instead of the full post (by default only for the posts in the standard format), and "Excerpt Length" sets its length. "Blog Navigation" chooses between "Older/Newer Links" and "Numbered Pagination".
  • Appearance > Customize > Single Post: Related posts (with their order and number), tags and the links to the previous and next posts on single posts.

Your latest post is also shown on the front cover of the card, and you can list your latest posts on the Resume panel (see the The Card section).

Managing Posts

Hovering over a row in the posts list will display action links that allow you to manage your post. You can perform the following actions:

  • Edit takes you to the editing screen for that post. You can also reach that screen by clicking on the post title.
  • Quick Edit provides inline access to the metadata of your post, allowing you to update post details without leaving this screen.
  • Trash removes your post from this list and places it in the Trash, from which you can permanently delete it.
  • Preview will show you what your draft post will look like if you publish it. View will take you to your live site to view the post. Which link is available depends on your post's status.

Learn more about Managing Posts, Categories and Tags.

Useful Resources

Learn how to get the most out of the WordPress block editor when publishing your content.


The portfolio is built into the theme, so you don't need a plugin for it. You can see the "Portfolio" menu in your dashboard. Your portfolio items are shown on the Portfolio panel of the card.

Portfolio Menu

  • All: All your portfolio items in a list. They are listed by date, and the Portfolio panel shows them in the same order. To change the order, change the publish date of an item.
  • Add New: Create a new portfolio item (see below).
  • Departments: Group your portfolio items. The departments appear as filters on the Portfolio panel.

Create a Portfolio Item

  1. Go to Portfolio > Add New.
  2. Enter a title and set a featured image. The featured image is the thumbnail of the item on the Portfolio panel.
  3. Choose a department in the "Departments" box.
  4. In the "Details" box, choose the "Type" of the item (see below). Choose the "Thumbnail Size": "1x" fills half of the portfolio grid, and "2x" most of it. Use a featured image at least 400 px wide for "1x", and 800 px wide for "2x". You can also write a "Short Description", which is shown under the title of the item.
  5. Publish your portfolio item.

Portfolio Item Types

The "Type" option decides what happens when a visitor clicks the item on the Portfolio panel:

  • Standard: Opens the item on its own page, inside the card (see Portfolio Options below). Write the content of the item in the editor.
  • Lightbox Featured Image: Opens the featured image in a lightbox.
  • Lightbox Gallery: Opens a gallery in a lightbox. Add one pf_lightbox_image shortcode for each image to the content of the item.
  • Lightbox Video: Opens a video in a lightbox. Add a pf_lightbox_video shortcode to the content of the item.
  • Lightbox Audio: Opens an audio in a lightbox. Add a pf_lightbox_audio shortcode to the content of the item.
  • Direct URL: Opens the address you enter in the "Direct URL" field. Check "Open link in new tab" to open it in a new tab.

The editor of portfolio items has an "Insert Shortcode" button in its toolbar, which adds these shortcodes for you (see the Shortcodes section).

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

[pf_lightbox_video title="" url=""]

[pf_lightbox_audio title="" url=""]


first_image="" ... yes for the first image of the gallery (the image shown first). Leave it out for the others.
title="" ... (optional) The title shown in the lightbox.
url="" ... pf_lightbox_image: The URL of the image (Media > Library, "File URL").
           pf_lightbox_video: The embed URL of the video, like https://player.vimeo.com/video/37254322 or https://www.youtube.com/embed/(video ID).
           pf_lightbox_audio: The embed URL of a SoundCloud track (the "src" address in SoundCloud's embed code).

Portfolio Panel

The Portfolio panel of the card shows all your portfolio items, with the departments as filters at the top. Its heading is the title of the page you selected as the "Portfolio Page" in Theme Options > Pages (see Card Pages).

You can also add content to that page, for example an introduction. By default, it is shown below the portfolio items. To show it above them, set "Portfolio Page Content Position" to "Top" in Theme Options > Pages.

Portfolio Options

  • Theme Options > Portfolio: With "Open Items Inside the Card" set to "Yes" (the default), Standard items open inside the card. With "No", each opens on its own page. Lightbox and Direct URL items aren't affected.
  • Theme Options > Animation: "Portfolio Item Open Animation" and "Portfolio Item Close Animation" are the animations of the items that open inside the card.

On the page of a portfolio item, the arrows open the next and previous items, and the "close" button returns to the Portfolio panel of the card.

The shortcodes are built into the theme, so you don't need a plugin for them. The pages of the card on the demo site are built with them (see the The Card section).

How to Add a Shortcode

  • Shortcode block: In the block editor, add a "Shortcode" block and paste your shortcode into it. The pages of the demo are built this way.
  • Shortcode generator: In the block editor, add a "Classic" block and click the "Insert Shortcode" button in its toolbar. Choose a shortcode, fill in its fields and insert it. In the editor of portfolio items, the button is in the editor's own toolbar.

Some shortcodes work together: a wrapper shortcode (like history_group) holds item shortcodes (like history_unit). Keep them together as in the examples below.

All Shortcodes

row, column

[row]
[column width="6" offset=""]Content here.[/column]
[column width="6" offset=""]Content here.[/column]
[/row]


width="" ... 1-12. The widths of the columns in a row add up to 12.
offset="" ... (optional) 1-12. An empty space before the column.

cover_caption

[cover_caption title="I AM FROM"]EARTH[/cover_caption]


title="" ... The small text of the caption. The text between the tags is shown large.

For the Front Cover Page (see Front Cover Page).

section_caption

[section_caption title="EMPLOYMENT"]

A heading for a section of a page, like "EMPLOYMENT" or "SKILLS" on the Resume page.

about_text, label

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

about_text shows an introduction in a larger, centered text. label highlights a few words in a text.

history_group, history_unit

[history_group]
[history_unit date="since 2011"]
<h4>Position</h4>
<h5>Company</h5>
Description.
[/history_unit]
[history_unit date="2007 - 2011"]
<h4>Position</h4>
<h5>Company</h5>
Description.
[/history_unit]
[/history_group]


date="" ... The time period, like "2007 - 2011" or "since 2011".

For your work experience and education. Write the position as a Heading 4 and the company or school as a Heading 5.

skill_group, skill_unit

[skill_group]
[skill_unit percent="100"]HTML5[/skill_unit]
[skill_unit percent="70"]jQuery[/skill_unit]
[/skill_group]


percent="" ... 0-100. The length of the bar.

testimonial_group, testimonial

[testimonial_group]
[testimonial image_url="" image_alt="" image_link="" name="Albert Einstein" position="CEO / Gravity Inc."]Text of the testimonial.[/testimonial]
[testimonial image_url="" image_alt="" image_link="" name="Walter White" position="Chemist / Freelancer"]Text of the testimonial.[/testimonial]
[/testimonial_group]


image_url="" ... The URL of the photo (Media > Library, "File URL").
image_alt="" ... A short description of the photo.
image_link="" ... (optional) A link for the photo.

service_group, service

[service_group]
[service icon="icon-laptop" title="Web Design"]Description of the service.[/service]
[service icon="icon-tablet" title="Mobile Development"]Description of the service.[/service]
[service icon="icon-globe" title="Social Media"]Description of the service.[/service]
[/service_group]

icon="" is the name of a Font Awesome 3 icon, like icon-laptop. The theme includes Font Awesome 3.0, so the icons added in later versions aren't available.

button

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


url="" ... The address the button opens.
new_tab="" ... (optional) yes opens the address in a new tab.
align_center="" ... (optional) yes centers the button.

tags, tag

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

social_icons, social_icon

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


type="" ... behance, blogger, digg, dribbble, facebook, flickr, github, instagram, lastfm, linkedin, pinterest, rss, skype, tumblr, twitter (X), vimeo, wordpress, youtube
title="" ... (optional) The text shown when the mouse is over the icon.

contact_form_wrap, letter_wrap, letter_info, stamp, contact_form

[contact_form_wrap]
[letter_wrap]
[letter_info]
<h4>Your Name</h4>
<em>Your email address</em>
Your address or position.
[/letter_info]
[stamp alt="" url=""]
[/letter_wrap]
[contact_form to="" captcha=""]
[/contact_form_wrap]

A contact form next to a letter with your contact details and a stamp image. You can also use contact_form alone. See Contact Page for its options and how the messages are sent.

map

[map]<iframe src="https://www.google.com/maps/embed?pb=..."></iframe>[/map]

Paste the embed code of your map into a "Custom HTML" block, inside the map shortcode.

image, divider

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

[divider]


src="" ... The URL of the image (Media > Library, "File URL").
width="", height="" ... (optional) The size of the image in pixels.

divider adds a horizontal line.

portfolio_field

[portfolio_field]Description of the project.[/portfolio_field]

Use it in the content of Standard portfolio items (see the Portfolio section).

pf_lightbox_image, pf_lightbox_video, pf_lightbox_audio

See "Portfolio Item Types" in the Portfolio section.

Translate the Theme

All texts of the theme are translatable. You can translate them into your language with a plugin (Loco Translate) or with a desktop editor (Poedit).

The theme includes a template file that contains all of its texts: bookcard.pot, in the "languages" folder of the theme. You can also use translation to change the theme's English texts. For example, category archives show the title Browsing Category. You can create an "English (United States)" translation and change this title to something like Posts under Category.

Important: Don't save your translation files in the theme folder. Theme updates replace the whole theme folder, so your translations would be deleted. Save them in one of the folders described below, which theme updates don't touch.

With Loco Translate (Recommended)

  • Install and activate the Loco Translate plugin.
  • Go to Loco Translate > Themes and select BookCard.
  • Click "New language" and choose your language.
  • For the location, choose "Custom" (wp-content/languages/loco/themes/). If you don't see this option, create that folder first.
  • Click "Start translating", translate the texts, and click "Save".

With Poedit

  • Open the bookcard.pot file in Poedit, create a new translation for your language, and translate the texts.
  • Save the translation. Poedit saves a .po file and also creates a .mo file, which is the file WordPress uses.
  • Name the files with the theme name and your language code, like bookcard-de_DE.po and bookcard-de_DE.mo for German. Then upload them to the "wp-content/languages/themes/" folder.

Set Your Site Language

Go to Settings > General and choose your language in "Site Language". Your translation appears on the site only when the site language matches it.

Multilingual Sites

To publish your content (posts, pages, and menus) in more than one language, use a multilingual plugin. For the theme's own texts, most of these plugins use the theme's translation files, so translate the theme first as described above.

A backup is a copy of your site that you can go back to if something goes wrong, like a failed update, a broken plugin or a hacked site. Keep recent backups, and keep at least one copy outside your server.

What to Back Up

A full backup has two parts. You need both to restore your site:

  • Files: Your WordPress files, especially the "wp-content" folder (themes, plugins and uploaded images) and the "wp-config.php" file.
  • Database: Your posts, pages, comments, menus, widgets and settings, including the Customizer settings.

When to Back Up

  • Before you update the theme, plugins or WordPress (see the Update section).
  • Before you import the demo content into a site that already has content (see the Demo Import section).
  • Before big changes, like switching to another theme or editing the theme's files.
  • Regularly: daily or weekly, depending on how often your site changes.

How to Back Up

  • Hosting backups: Many hosting providers back up your site automatically. Check your hosting control panel or ask your hosting provider how often they back up and how long they keep the backups.
  • Backup plugin: The free UpdraftPlus plugin backs up your files and database on a schedule. It can also send the backups to cloud storage like Google Drive or Dropbox.

Keep copies outside your server (in cloud storage or on your computer), so you can restore your site even if your server has a problem. See WordPress Backups to learn more.

Restore a Backup

Restore your site with the same tool you used to back it up. In UpdraftPlus, go to Settings > UpdraftPlus Backups, find the backup in the list of existing backups and click "Restore". For hosting backups, use your hosting control panel or ask your hosting provider.

Note: From time to time, check that your backups work, for example by restoring one on a test site.

Before You Update

  • Back up your site: Make a full backup of your site (files and database) before you update. See the Backups section.
  • Translations: An update replaces the whole theme folder. If you saved translation files in the theme's "languages" folder, back them up first, because the update deletes them. To avoid this, keep your translations outside the theme folder: Loco Translate can save them in a protected folder (wp-content/languages/loco/) that theme updates don't touch. See the Translation section.
  • Code changes: Changes made directly in the theme files are lost when you update. Make your code changes in the child theme instead (see the Installation section). If you use the child theme, update only the parent theme. The child theme stays as it is.

Update Your Theme

Choose one of the following ways. With the Envato Market plugin, you don't need to download anything. For the other two ways, download the new theme package from your ThemeForest account and unzip it. The theme file to upload (bookcard.zip) is inside the "Theme/1 - Parent Theme" folder of the package, in the folder with the new version number.

Note: The "Theme/1 - Parent Theme" folder also has a "Previous Version" folder, with the ZIP file of the previous theme version. If your site has a problem after an update, you can go back to the previous version: install this file the same way, via WordPress or via FTP.

Update Your Theme via Envato Market Plugin

The Envato Market plugin connects your site to your ThemeForest account. WordPress can then check for updates of the themes you purchased and install them.

  • The plugin isn't available on WordPress.org. Download it from the Envato Market page, then install it from Plugins > Add Plugin > Upload Plugin.
  • Go to the "Envato Market" page in your dashboard and connect the plugin to your account with a personal token. The page shows you how to create one.
  • When a new version is available, update the theme from the "Envato Market" page or from Dashboard > Updates.

Update Your Theme via WordPress

  • Go to Appearance > Themes > Add Theme > Upload Theme.
  • Click "Choose File", select the new bookcard.zip file, and click "Install Now".
  • WordPress sees that the theme is already installed and shows the current and the uploaded versions. Click "Replace installed with uploaded".

You don't need to activate another theme or delete the current one first. Switching to another theme and back can mix up your menu locations and widgets.

Note: If your host doesn't allow uploading large files, update the theme via FTP.

Update Your Theme via FTP

You can upload files to your site with an FTP client or with the file manager in your hosting control panel. See Updating WordPress using FTP to learn more about both.

  • Unzip the new bookcard.zip file on your computer to get the new "bookcard" theme folder.
  • Upload the new theme folder into "/wp-content/themes/" with a temporary name, like "bookcard-new".
  • Rename the current "bookcard" folder to "bookcard-old", then rename "bookcard-new" to "bookcard".
  • Check your site. If everything works, delete the "bookcard-old" folder.

Note: Don't upload the new folder over the old one. Files that were removed in the new version would stay on your server.

Update Theme Plugins

The theme doesn't come with plugins of its own. The plugins it recommends (see the Plugins section) come from WordPress.org, so you can update them like your other plugins, in Dashboard > Updates or on the Plugins page.

Update WordPress

Keep WordPress up to date, because new versions include security fixes (see the Security section). Before you update to a new major version of WordPress, make a backup and check whether a theme update for the new version is available. You can find your theme's page on ThemeForest in the Pixelwars portfolio.

If you prefer to start major updates yourself, go to Dashboard > Updates and click "Switch to automatic updates for maintenance and security releases only". Maintenance and security releases will still be installed automatically. Don't postpone major updates for long.

Security Recommendations

Using a WordPress site securely is essential for protecting your website from potential threats. Here are some key security recommendations:

Keep WordPress, Themes & Plugins Updated

Always keep WordPress, themes, and plugins updated to the latest versions to prevent security vulnerabilities. See the Update section to learn how to update the theme.

Download Themes & Plugins From Official Sources Only

Download the theme and its updates only from your ThemeForest account or through the Envato Market plugin (see the Update section). Download plugins only from WordPress.org or from their developers' websites. Never use "nulled" (pirated) copies of themes or plugins: they often contain hidden malicious code that can give attackers control of your site.

Remove Unused Themes & Plugins

Delete the themes and plugins you don't use. Deactivated themes and plugins still stay on your server, and a security flaw in them can still put your site at risk. Don't delete the parent theme if you use its child theme, and keep one default WordPress theme (like Twenty Twenty-Five) as a fallback.

Keep PHP Up to Date

WordPress runs on PHP, and old PHP versions no longer receive security fixes. You can see your PHP version under Tools > Site Health > Info > Server. If it is no longer a supported version, ask your hosting provider to switch to a newer one. Before switching, update WordPress, your theme, and your plugins.

Avoid the "admin" Username

Don't use "admin" or other easy-to-guess usernames. WordPress doesn't let you change a username, so if your site has an "admin" account, create a new administrator account with a unique username, log in with it, and delete the old account. When WordPress asks what should be done with the content owned by that user, choose "Attribute all content to another user" and select your new account. Otherwise, all posts and pages of the old account will be deleted.

Use Strong Passwords

Ensure that you use complex passwords for your admin panel, database, and hosting account. Consider using a password manager. Don't re-use the same password on different services, especially if you are using the same username.

Use SSL Certificate (HTTPS)

Ensure your website uses HTTPS with an SSL certificate. Most hosting providers offer free SSL via Let's Encrypt. Once your site opens with https://, go to Settings > General and change both "WordPress Address (URL)" and "Site Address (URL)" to start with https://. See HTTPS for WordPress for more details.

Install a Security Plugin

Use a security plugin like Wordfence, Kadence Security (formerly iThemes Security), or Sucuri Security to add extra protection layers. Important: If you decide to use a security plugin, make sure to activate only one at a time. Running multiple security plugins simultaneously may cause conflicts and errors.

Limit Login Attempts

Prevent brute-force attacks by limiting the number of failed login attempts. Wordfence and Kadence Security include this feature. If you don't use one of them, you can use a plugin like Limit Login Attempts Security (formerly Limit Login Attempts Reloaded).

Enable Two-Factor Authentication (2FA)

For additional security, enable 2FA for your WordPress login to prevent unauthorized access. With 2FA, you enter a one-time code from an app on your phone after your password. WordPress doesn't include 2FA by default. Wordfence and Kadence Security include this feature. If you don't use one of them, you can use the Two Factor plugin.

Backup Your Website Regularly

Use a backup plugin like UpdraftPlus or your hosting provider's backup service to prevent data loss (see the Backups section).

By following these security measures, you can significantly reduce the risk of attacks and keep your WordPress site safe.