eBookie WP Documentation


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please open a ticket describing your problem here. If you send an email with your problem you will be redirected to forum. Thanks so much!


Current Version: 1.1.0
WP Compatibility 3.5+
Created: 2013-04-23
Modified: 2012-05-10

Info: Only theme instalation is described. You need to have WordPress uploaded to your server, inastalled and working properly. If you need help installing WordPress, server or database setup etc. please visit this guide.

Upload via WordPress

This is the preffered method of instalation. Follow instructions below to install theme in your WP instalation.

  1. Unzip archive file that you have downloaded from themeforest. Inside you will find the ebookie-wp-X.X.X zip archive. The X.X.X will be the number of current version.
  2. In WordPress login to your armin panel. Go to Appearance Themes Install Themes Upload
  3. Follow instructions on screen: Choose the ebookie-wp zip archive and click Install Now button.
  4. Wait untill theme is uploaded. You will see Theme installed successfully message
  5. Go to Appearance Themes and click Activate below the new uploaded theme.

Upload Via FTP

If for some reason you cannot get the first method to work use this method instead (use only if necessary)

  1. Unzip archive file that you have downloaded from themeforest. Inside you will find the ebookie-wp-X.X.X zip archive. The X.X.X will be the number of current version. Unzip it to a folder with the same name.
  2. Use FTP program to log into your FTP account
  3. Browse to wp-content/themes
  4. Upload unzipped folder (not zip archive, but unzipped folder)
  5. In WordPress login to your armin panel. Go to Appearance Themes
  6. Under the new uploaded theme hit Activate link

Installed Theme

Warning: These settings are necessary for theme to work properly. Read it carefully and set it as said below.

Setting the Permalinks

  1. Go to Settings Permalinks.
  2. In Permalink Settings change the permalink structure from Default to Post Name

Setting Single Page and Blog

Info: To set the setting below you need to have a single page and a blog page ready. You can import the Demo Content to get them ready or you can set them up manualy. Both of these actions are described later in this documentation.
  1. Go to Settings Reading.
  2. In the Front page displays select A static page
  3. For the Front Page select ONE PAGE (how to create a ONE PAGE is described later in the Setting up First Pages section or you can have it imported with the Demo Content)
  4. For the Post Page select Blog (how to create a Blog page is described later in the Setting up First Pages sectionor you can have it imported with the Demo Content)

Info: XML demo content file is located in your downloaded ebookie-wp-theme zip archive. After unzipping the archive you can find it in the Demo Content folder. It is a one XML file. Demo content does not contain images and photos.

If you would like to get started fast a good idea is to import the Demo Content. It will provide you the content used in the demo page making your site look almost identical like the demo page. That will make your job easier as you will not have to set up everything by yourself but you will be provided with content that you will just have to modify/change.

To import Demo Content go to Tools Import WordPress. You will be asked to install a plugin. Click Install Now button. After the instalation is complete click Activate Plugin & Run Importer link (you can also get to the importer via Tools Import WordPress).

Choose the ebookie-content.xml file and click Upload file and import button. On the next screen you can asign (or create) authors to pages and posts. After you are done click Submit button.

After import is complete you will have one unnecessary page - Sample Page that was created by wordpress instalation. Simply open it and delete/move to trash.


Info: If you imported the Demo Content you do not have to set up those two pages - they have been imported with the Demo Content.

You need a page for the book (called later the ONE PAGE) and a page for the Blog (if you are going to use Blog, called the Blog Page). To create them go to Pages Add New. Name the page Blog. You don't have to add content but you can write for example Blog page just for your own protection (if no blog posts are present this content will show instead of blog posts). The last thing is to set the Page Attributes Order. The Page order is used in this theme to control the order of pages in the menu. In this example we want to have blog on the last position so lets set the order to very high numer. You can of course insert any number you want (for example 10) but when you then start to create other pages and you create more than 10 pages and you still want to have blog on the last position you will have to increase this number. Setting it to few hundreds will make it stay always on the last position in the menu. On the right side there is a Page Attributes panel. In the Order box insert a high number for example 666 and click Publish button. See image below.


Blog page


Do the same for the book/product one page. Go to Pages Add New. Name it ONE PAGE. It is important to name it like that because the theme searches this page on a slug basis. Theme is set to ignore this page in the menu. It only is there to act as a container for the next pages. For your own convinience you should set the Page Order to 0. Leave the content area blank.


First go to Apperance Menus. In the Menu name input field write a name - for example ebookie - and click Create Menu. On the right in Theme Location Panel select from list your menu you have just created and click Save. You can use this menu to add any other links that are not connected with the "one-page" design or blog - for example an external link you your other page. "One-page" links in the menu and blog link are not created in this menu. Top menu links are created automatically when a page is created. Go to Pages. For this example I will assume you didn't imported demo content and you are creating everything from scratch. After going through the Setting up First Pages (if you haven't done this got to this part of documentation - just above - and do it) you should have this:




As said before avery page becomes a link in the top menu. This has one exception - ONE PAGE. This page is only a container for other pages and does not appear in the menu. Because of that now you should have only one item in the menu - Blog




Lets add our first page. It will introduce our book to the reader and will be the first "showcase" for it. Go to Pages Add New. Enter the title for the page - the title will become link name. For this example I will just call it Book. We will create some real content later. For now we are just creating menu item. For the order enter 1. This will mean that this menu item will appear as first link (also it's content which we will add later will be at the top of page). At the end enter a link anchor. Link anchor can be set to anything you want. When you set it you can then use this set anchor in any tag or element to scroll to this element. To do that simply use the anchor as an ID for that element.

Heads up! Some of the anchors for sections are predefined for your convinience. You do not have to set the ID for it but just set the Link anchor in the right panel.

  • Hero Area -> link-features
  • Chapters -> link-chapters
  • Download Free Sample -> link-sample
  • Reviews (open flip book) -> link-open-book
  • Pricing Tables -> link-tables

For example if you are inserting pricing tables you are using the shortcode [pricing_tables]. This shortcode not only acts as a container but also as the anchor. The only thing to set here is to use link-tables in the Link anchor panel.




After you are done with all the settings you can of course add content. After you are done click Publish button. Go to your site. You should now have a new link in your menu.





Lets go back to our first created page - Book. We will create a "hero area" here. We will show the book image, write the title and briefly describe the book and add few call to action buttons.

Inserting Book Image

First we will create the container for the hero area. Use shortcode [hero_area] to do that. Put images, text and buttons inside it.


[hero_area]
    
[/hero_area]
Click Add Media and upload a file of your book. In the ATTACHMENT DISPLAY SETTINGS (on the right after uploading image) change Link to to None and Size to Full Size. Go to the Advanced Image Settings and in CSS Class box set the class to book-image. You can also add this class manualy in the code.

<img class="book-image" alt="book" src="http://www.your-page/image.png" width="285" height="300" />

Adding content

Adding content: In this theme adding p tags automatically by WordPress is disabled. If you create paragraphs use TinyMCE plugin or just add class="p" to any p tag. In other case it might get removed when switching between visual and text editor.


<h1>This is the title.</h1>
<h3>This is the subtitle.</h3>
<p class="p">Here we have the paragraph. Remember to add come class to it.</p>

Creating Buttons

To create a button use [button] shortcode. You can specify its color by adding green, blue or black color attribute. The link attribute will specify button destination - for example a paypal link for payment.



[button color="green" link="http://link-here.com"]eBook $19<sup>99</sup>[/button]

Small Info Text

Sometime you need to inform user about something for example that you book comes with a gift or perhaps the price doesn't include Taxes. You can use [small_text] shortcode for this.



[small_text]
you can find more details about each version below
[/small_text]

Quotes in eBookie theme are full width areas whare you can insert a quote from you book or for example a short testiomonial from your readers showing off how much they like your book.

Creating Quote

Create a quote by using [quote] shortcode. You can add by attribute to display author of quote.

Quotes take up 100% of browser space. Create them outside of any toher containers like rows, columns or specified areas like [hero_area] etc.


[quote]“Would love to see more books like this”[/quote]
[quote by="John Doe"]“Best thing I have read in my entire life”[/quote]

Quote

This is the place to describe your book, what people will learn from it etc.

Features container

All features should be closed within a [features] shortcode


You have a left and right feature. Left feature will have the title on the left and image on the right and in the right feature it will be the opposite. Inside features container insert [feature_left] or [feature_right] shortcode.

Each feature by default contains an short title/name, a description and an image. To insert a title/name add name attribute.

To add an image add the image attribute. Place the coursor between the apostrophes and click Add media button. Choose or upload image and click Insert into page button. Image will be inserted. The description of this feature goes between the opening and closign [feature_left] shortcode.



[features] Content goes here [/features]
[feature_left] Description goes here [/feature_left]

[feature_right] Description goes here [/feature_right]
[features name='Learn new <em>exciting</em> things.'] Content goes here [/features]
[features name='Learn new <em>exciting<em> things.' image='<img src="http://image-url.com/image.png" width="220" height="160" />'] Description goes here [/features]

Creating Chapters

First create chapters container by inserting [chapters] container



Create a row for chapters [row]. Remember to close it by [/row]



Now inside the rpw create individual chapters - up to 3 for a row. To do that use [chapter] shortcode. Add attributes number - you can use it for chapter number, page number etc. Attribute title is for title. Attribute info is for description.



Place a cursor between opening and closing [chapter] shortcode an hit Add media button. Upload or choose file. In the ATTACHMENT DISPLAY SETTINGS set Link to Media file and size to Full size so when the image is clisked it shows the original size of this image.

Now just add a class="gallery-item" to the a tag to trigger the gallery.



[chapters]
[/chapters]
[chapters][row]
[/row][/chapters]
[chapters][row]
[chapter number="Chapter One" title="Title goes here" info="Description goes here"]
[/chapter]
[/row][/chapters]
[chapters][row]
[chapter number="Chapter One" name="Title goes here" info="Description goes here"]
<a class="gallery-item" href="http://site.com/preview-image.png"><img src="http://site.com/preview-image.png" /></a>
[/chapter]
[/row][/chapters]

Download Area

For this area first you need a [section]. Inside it add a [download_sample] shortcode. Inside just add a short description - h3. We'll follow it here by a [small text] just to add some info. Finish it by adding a button (how to create a button is described higher in this documentation). In the link attribute jsut add a link to your uploaded media file.



[section][download_sample]
<h3>You can also download a free sample of this amazing book:</h3>
[small_text]sample contains PDF version[/small_text]
[button color="green" link="#"]Download free sample[/button]
[/download_sample][/section]

Creating flip book

Here we are using this for reviews, but you can add any content you want inside - for example images, texe tand download buttons.

Create a container for the book [open_book]. You can put some content inside it before you actualy insert the flip book. Create it by inserting [book_pages] shortcode.

Each page is created by one ul tag. You can put any content inside but for this example we will use it for quotes about the book. Create two pages by inserting two ul tags. Unserting more thatn two ul tags will automaticaly create more pages that will be avaialable by flipping book pages.

Create a li elements containing a blockquote. You can also add a cite if you want to show who wrote this review. As said above you can add anything you want so for example you can throw in a link to the site where the review was given like Amazon etc.



[open_book]
[book_pages]
Book pages goes here
[/book_pages]                          
[/open_book]
[open_book][book_pages]
<ul>Content goes hare</ul>
<ul>Content goes hare</ul>
[/book_pages][/open_book]
<ul><li> 
<blockquote>
Quote goes here
</blockquote>
<cite>by John Doe</cite>
</li></ul>

Creating pricing tables

First you need a container for pricing tables - [pricing_tables]. Inside insert a [row]. Now you can start creating tables.

Start by dividing the row on how many tables you will nedd. For example if you need two tables insert two [half] shotcodes. If you need three insert three [third] shortcodes and if four - 4 [quarter] shortcodes. In this example I will use 3 tables (please note that I will only show one for the example)

Now for each table you need a table header, body and button. First add a [table_header] shortcode. Specify its color, name and and price. Attributes for those thigs are color, name, info, dollars, cents. Colors you can pick from are green, blue and black. This will be the same colors you will be able to choose from for the button later on.



For table body use [table body] shortcode. Inside it create an unordered list ul. Each of list items li you will create inside will be one position in the table. Don't forget to close the table body with a [/table_body]. In this example I am also adding the icons. You can find the full list of icons on Twitter Bootstrap documentation.





Finally add a [table_button] and spacify its color and link. Button name goes between opening and closing shortcode tag.



[pricing_tables][row]
[/row][/pricing_tables]
[pricing_tables][row]
[third] Table goes here [/third]
[/row][/pricing_tables]
[pricing_tables][row]
[third]
[table_header color="green" name="eBook" info="just the digital version" dollars="19" cents="99"]
[/third]
[/row][/pricing_tables]
[pricing_tables][row][third]
[table_header color="green" name="eBook" info="just the digital version" dollars="19" cents="99"]
[table_body]
<ul>
  <li><i class="icon-file"></i><em>PDF</em> digital version<li>
</ul>
[/table_body][/third][/row][/pricing_tables]
[pricing_tables][row][third]
[table_header color="green" name="eBook" info="just the digital version" dollars="19" cents="99"]
[table_body]<ul>
  <li><i class="icon-file"></i><em>PDF</em> digital version<li>
</ul>[/table_body]
[table_button color="green" link="#"]order now[/table_button]                  
[/third][/row][/pricing_tables]




Social Media Icons

Setting social media icons in eBookie is simple. Just go to the Social Links menu and tick the options for icons you want to display. After that just add a link to you social page and you are done.

We have links for most used media - Twitter, Facebook and Google+. Also an email icon is here. You do not have to use all of them. If you do not widh fo example Google+ just do not check the Display Google+ Link box and it will not appear. Simple as that. After you are don click Save & Publish button at the top of the page.

Author Bio

Author photo and signature

You can also set an author photo or signature. Simply check the box for each of them that you want to use and click the select a file link to upload a photo or signature or drag and drop the photo/signature image on it. After you are don click Save & Publish button at the top of the page.

Author Bio

Background, Text, Links, Header and Footer Colors

You can set colors for five main areas of this theme. From top to bottom you can:

  • Background Color - this should be clear. Sets background color. Note that by default a background image is set so you might want to delete it befor you can see the changes as the image overlays the color. How to delete background image is described below.
  • Primary Color - Sets Borders, Heading, Links, background for mobile navigation etc. color
  • Secondary Color - Sets header and footer color
  • Text Color - nothing to explain here ;)
  • Hover Color - this is for mouse over effects. This color will show when you hover (mouse over) a link, button, icon etc.
Author Bio

Background Image

You can set an image as a background. Click on the no image dropdown. You will see three options:

  • Upload New - Click select a file and browse your PC for images to upload them or just drag and drop images you want to upload on the selected field.
  • Uploaded - Here you will find background images you have uploaded. You can quickly switch between them and see which fits best.
  • Default - You can choose here the default - light gray - background
Author Bio

Post Format: Standard. Setting Featured image.

On every post you create you have post formats on the left to choose from. A Standard post format is for a normal blog post - like an image and text. You also have Quote, Link and Gallery post formats which we'll describe later on. In the theme you can also have Videos but no special post format is needed. Use standard post format for embeding videos. Just remember that if you want to insert an image that will be a featured image and will act as a link to this post you have that option in the right bottom of the screen. Also please remember that you can set featured image for any post format you wish.

Featured image Post formats

Post Format: Quote

This is used to insert a quote. For example a quote about the book or from the book. Select the Quote format from panel on the right. In the content area you should use blockquote fot the actual quote and cite for quote author.



<blockquote>Only one thing is impossible for God: To find any sense in any copyright law on the planet.
<cite><a href="http://site.com">Mark Twain</a></cite></blockquote>                        

Post Format: Link

Link is very similar to quote. Just select Link on the right panel and in the content area add a link with an a tag.



<a href="http://make.wordpress.org/themes" title="The WordPress Theme Review Team Website">The WordPress Theme Review Team Website</a>                     

Post Format: Gallery

Gallery is a little different. Check Gallery format and insert gallery. Choose or upload files via Wordpress Add Media button. Choose Create Gallery select files and click Create a new gallery. After that choose the number of images per row. Now the important part. From the Link to dropdown choose Attachment file and then again switch back to Media File. This is a known bug in WP. If you do not do that WP will not insert the link="file" attribute - which is needed. You can also add it manualy. Click Insert gallery



[gallery columns="4" link="file" ids="1164,1165,1166,1167"]                    

YouTube and Vimeo embed

To embed a video use a shortcode [video_embed] with a link attribute to the video. That works both for Vimeo and Youtube. Use the standard post format for this.



[video_embed link="http://www.youtube.com/embed/SKVcQnyEIT8"]