48
Backer WordPress Theme By KrownThemes - www.krownthemes.com This is a complete guide to help you manage the installation and setup of your new theme. Thank you for purchasing this theme. I hope that you’ll find it easy to use and customize and really wish it will suit your needs. Please read this manual, because it covers almost all the aspects needed for you to know before installing & running the theme. If you have questions that are not answered here, please go to the support system, where you’re questions will be answered: http://rubenbristian.ticksy.com Please verify the FAQ before posting! If you like the theme, please show your appreciation by taking the time to rate it. 1

Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

  • Upload
    lyliem

  • View
    233

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

This is a complete guide to help you manage

the installation and setup of your new theme.

Thank you for purchasing this theme. I hope that you’ll find it easy to use and

customize and really wish it will suit your needs. Please read this manual,

because it covers almost all the aspects needed for you to know before

installing & running the theme.

If you have questions that are not answered here, please go to the support

system, where you’re questions will be answered:

http://rubenbristian.ticksy.com

Please verify the FAQ before posting!

If you like the theme, please show your appreciation by taking the time to rate it.

1

Page 2: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1. Getting started

To install this theme you must have a working version of WordPress already

installed. For information in regard to installing the WordPress platform,

please see the WordPress Codex -

http://codex.wordpress.org/Installing_WordPress

If you’re looking for a starting point in learning WordPress, check out

the awesome video tutorials from WP101: http://zfer.us/feGIQ (affiliate link)

1.1. Installing the theme

After you finish setting up your WordPress installation, you have to install this

theme. You can do it in two ways:

● FTP Upload: Unzip the “backer-theme.zip” file and upload the

contents into the /wp-content/themes folder on your server.

● Wordpress Upload: Navigate to Appearance > Add New Themes >

Upload. Go to browser, and select the zipped theme folder. Hit “Install

Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance >

Themes and activate your chosen theme. After the theme is activated, you

have to install the required plugins one by one in order for the theme to

properly work.

2

Page 3: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.2. Installing the plugins

After activating the theme, you will be prompted to install a couple of plugins

required by the theme:

● IgnitionDeck - this is base crowdfunding plugin - the crowdfunding

functionality is based on this plugin (though this is only the free version,

but more on this later).

● Revolution Slider - this is the the awesome layered slider which can be

used anywhere in the theme. Read the documentation for it here!

● Krown Shortcodes - this is the shortcodes generator. If you want

awesome shortcodes (columns, buttons, accordions, etc.) like in the

preview, this is what you’ll need to use. You are also free to use this

plugin in absolutely any other themes you may wish.

● oAuth Twitter Feed for Developers - this isn’t a critical plugin, but it is

needed if you want to use the twitter widget anywhere in your website.

More about how to work with it later on.

If you do not see the notice to install these plugins or miss it somehow, you can

go to Appearance > Install Plugins and you’ll see the full list there.

3

Page 4: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

Back on the IgnitionDeck plugin, as you might have already know, this plugin

comes in more than one version, each with it’s own price and set of features.

Go here to learn about the different versions and purchase the one which suits

your needs: http://ignitiondeck.com/id/ignitiondeck-pricing/

Also, here are more recommended plugins for various tasks:

● Contact Form 7 - free custom forms

● Codestyling Localization - theme & plugins easy translation

● Search & Replace - database search & replacement tools

● Duplicate Post - clones any post, page or custom post type

Note that these are third party plugin so no support will be given for it. The

same goes for the other plugins installed with this theme. Of course, if you find

some bugs i will try to cope with the original authors and provide useful

updates, but no support will be given about how to use or modify or use these

plugins.

4

Page 5: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.3. Customizing the theme

After activating the theme, you will notice that a new submenu item

appeared, under Appearance and it is called Customize. If you click on it you

will be taken to the WordPress customizer, a tool which will allow you to

modify the looks and feel of your website.

1.3.1. Logo

You can upload your logo, which can be of any size. You need to also upload a

double sized logo for retina displays and a favicon. If you do not do this, the

theme’s logo will appear on retina displays and the favicon will be also the

theme’s. Make sure that you also complete the logo’s size correctly (in px).

1.3.2. Navigation

In this section you can change the theme’s main menu.

1.3.3. Blog

Choose the default layout for the blog, single post, search and archives pages.

1.3.4. Footer

The footer can be either full (with large widget areas) or minimal (with only

one small stripe). In this section you can choose it’s style and also how many

widget areas should be active in the large footer.

5

Page 6: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.3.5. Colors

You have sevent colors to change in this theme. Here’s what they represent:

● main color - is the most used color in the theme (for buttons, links,

certain highlights, hover elements, etc.)

● menu main color - is the color that will be used for all menu links

(hover) and submenu background (again, just on hover)

● menu login links color - is the color that will be used for the

dashboard related links in the menu (login, logout, sign in, dashboard)

● minor color - this color is only used in the sliders navigation arrows

● small pie normal color - this is the regular color for the pies in small

widgets and projects grid

● large pie normal color - this is the regular color for the pie in the

single project sidebar

● pie successful color - this is the color that any pie has when the project

is funded

1.3.6. Typography

The last section of the customizer holds two fields for custom fonts. These are

all Google Fonts. Please note that because Google changes it’s fonts on a

regular basis, not all of the fonts you see on Google may be included here.

The fonts used in the online theme preview are Montserray (for headings) &

Raleway (for body). We also use some custom CSS lines of code to enhance the

typography using these two specific font families.

Paste this code in the proper place for custom CSS if you’re using these fonts.

6

Page 7: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

body { letter-spacing: 0.3px; } h1, h2, h3, h4, h5, h6, .ignitiondeck.id-creatorprofile .id-creator-name, #custom-header .cta a, .krown-tabs .titles li h5, #content .memberdeck .dashboardmenu li a, .ignitiondeck .id-product-days, .ignitiondeck .id-product-days-to-go, .krown-button, .krown-pie .value, .krown-id-item li span, .id-widget .id-progress-raised, .id-widget .id-product-total, .id-widget .id-product-days, .ignitiondeck.id-mini .id-product-days, .id-level-title { letter-spacing: 0; }

Whenever you make a change you’ll see the actual website refresh with the

changes you do. Make sure that when you’re done, you hit the Save & Publish

button. After this, you can close the customizer.

7

Page 8: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.4. More Theme Options

Other than these options which apply to the styling of the theme, you have

another set of options, which don’t affect the style, but the functionality, and

you should do a quick look there. You can find a new menu item under

Appearance > Theme Options.

1.4.1. Analytics

Inside this section you should paste your Google Analytics code. If you do use

these, please don’t forget to enable them first, otherwise not all page clicks

will be triggered, even if you have your code placed.

1.4.2. Custom CSS

If you have any css rules that you may want to add to the website, this is the

place to add them. However, if you want to do extensive modifications, i

suggest that you go with a child theme, because it’s better. But more on this

later. If you don’t have more than 100 lines of code you can paste them here.

1.4.3. Custom Sidebars

In this area you can define as many unique sidebars as you want. Please

remember that you have to give a unique lowercase id (only letters, no

spaces) to each sidebar in order for it to work properly.

8

Page 9: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.4.4. Comments

The theme allows to use comments both in pages & posts along with the

portfolio post type. Make sure that you enable them from this area but also

enable them from WordPress.

1.4.5. Admin

Here you have a field for the replacement of the administrator login logo. Just

make sure that you will respect the size written there and you can replace the

theme’s login logo with your own brand or the client’s.

1.4.6. Updates

This is the place where you can configure auto updates by inserting your

marketplace username and API key. Note that this might not work on all

installations though (it’s an experimental feature).

Make sure that you are always UP TO DATE!! If the automatic updates

don’t work you should either check the theme version once a month or

so on it’s ThemeForest page or follow me on twitter to learn about

updates.

More about updating: http://rubenbristian.ticksy.com/ticket/131324/

9

Page 10: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.5. Setting up the homepage

To set up your homepage, you first have to create a basic page, or any page

template(about page templates later). After you decide what page do you

want to use, go to Settings > Reading and in the Front page displays choose A

static page, then select your just created page.

Also, please don’t select anything for your Posts page, otherwise your blog

will not work!

Next, you should setup your permalinks to look pretty. Please go to Settings >

Permalinks, choose the Custom Structure, and use this:

/%category%/%postname%/

READ THIS about permalinks on Windows Servers!

10

Page 11: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.6. Setting up the menu

The final step before you can start working with the new theme is to create

your menu. This theme uses WordPress 3.0 Custom Menus, so it will be really

easy.

Go to Appearance > Menus and you will see a panel where you can create

new menus. Create one, add your created pages to it(from the left side panels)

and save it. After this, in the left side you have a drop down box where you can

select the Primary Navigation. Choose your newly created menu, hit “Save”

and you’re all set.

11

Page 12: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.7. Widget areas

This theme has nine widget areas. One is for the blog sidebars, one is for the

dashboard sidebar (IgnitionDeck Commerce feature), one is for the

IgnitionDeck sidebar (used on ID archives pages) and six are for the footer. Go

to Appearance > Widgets and you’ll see them. Also, remember that all

shortcodes can be used as a widget.

To do this, just insert a text widget in any sidebar and paste the shortcode

which you want. For example, this is how the online demo’s footer’s bottom

second widget area is set up:

[krown_social twitter="#" facebook="#" linkedin="#" gplus="#"]

12

Page 13: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

1.8. Using the import file

There is an xml import file in the download (backer-import.xml), which can be

used to achieve a near example of the online demo. Please note that the

images which you see online will not be available when you do the import,

since they’re copyrighted.

This is a great starting point for your website, as you’ll be able to delete

everything at any time and only keep what you need, that start from there!

Please note that this import is not perfect and it might fail sometimes, but it’s a

good solution if you can’t or don’t know where to get started.

Make sure that you have the IgnitionDeck plugin installed and activated

before doing the import!

Also, please wait around 5-15min for the importer to be finished!

To use it, go to Tools > Import > WordPress and upload the xml file, choose to

import everything, hit the button and wait.

If you have questions about different aspects of the theme, please check the

theme’s FAQ on the support system: http://rubenbristian.ticksy.com/faq/1705.

13

Page 14: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

For a quick theme setup video guide

check out this link:

https://www.screenr.com/090N

14

Page 15: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

2. Adding content

2.1. Adding Posts

These are the default steps that you need to do in order to add a blog post:

1. Go to Posts > Add New

2. Enter a title and some content.

3. Select a post category.

4. Add some relevant tags.

5. Add a featured image (should be large, because this is how it is disabled in

the theme - width is at 880-1140px depending on the blog layout.

6. Insert all of your remaining content in the content area. You can have

images, paragraphs, etc..

7. Write a few words excerpt(it is good for search results and SEO to have an

excerpt, no matter what kind of content do you have in your post).

8. Hit “Publish” and you’re all done.

15

Page 16: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

2.2. Adding Pages

The process of adding pages is quite similar to adding posts:

1. Go to Pages > Add New

2. Enter a title and some content.

3. Select a page template or leave the default(more on this just after).

4. Select a layout for the page. Each page can have a custom sidebar or not.

5. Choose a page subtitle (optional).

6. Write a few words excerpt(it is good for search results and SEO to have an

excerpt, no matter what kind of content do you have in your page).

7. Hit “Publish” and you’re all done.

16

Page 17: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

2.3. Page Templates

As you might already noticed, there are a few Page Templates available for you

to use. Each template will configure your page to look and act in a different

way.

2.3.1. Default Template

This is the default template and it outputs exactly the content of the page,

without any modifications.

2.3.2. Archives

This is a page which displays all of your archives(it might be good for SEO to

have it and also for users in order to give them a broader perspective over

your blog).

2.3.3. Blog

This page outputs all the posts that you have in your blog. It uses a classic

format with all the posts one below the other. This works best for large blogs

with lots of posts.

2.3.4. Contact

This one has a map available in it. Note that the content (contact form) still

needs to be added separately (via shortcodes), but this page template is the

17

Page 18: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

starting point for any contact page. The map is configured in the Map Options

and each field is properly detailed, so you shouldn’t have any issues with this.

2.3.5. Sitemap

Similar to the archives template, this one displays a sitemap with the pages of

your website. It is good for SEO to have such a page and maybe put a link to it

in the footer.

2.3.6. Slider

This page gives you the ability to use either an image, some CTA boxes, or an

instance of the Revolution Slider as the header. If you’ll use the image, you

simply have to set up a custom height and upload an image that will appear at

the top. If you use the slider, just paste it’s shortcode (the height will be the

one set in the slider). If you’ll use CTA header you’ll have the possibility to add

one or two CTA elements into the header. Each one has some text on it, a

button which gets you somewhere and an image as a background. Use this to

make clear call to actions on pages.

18

Page 19: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

3. Shortcodes & Widgets

3.1. Shortcodes

This theme has 15 shortcodes available (except the WordPress default

shortcodes), each with it’s own purpose of giving you the right tools to create

awesome content with ease! Shortcodes can be used anywhere in the theme.

You should use the Shortcodes Generator to insert shortcodes, but these can

also be added manually (as detailed before).

3.1.1. Accordion

[krown_accordion type="accordion" size="large" opened="1"] [krown_accordion_section title="Title"] Content for a section goes here! [/krown_accordion_section] [/krown_accordion] This is the accordion shortcode and it is composed from several sections, as

you see above (there’s only one section in the example above, but of course

you can add as many as you want). Properties:

● type - it can be either an accordion or a toggle. An accordion has only a

19

Page 20: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

section opened at one time, while the toggle can allow all the sections to

be opened or closed.

● opened - you can choose what section you want to be opened by default

(-1 means that the accordion will be initially closed)

● size - it can either be small or large, with a small difference in style

3.1.2. Alert Message

[krown_alert type="error"]

This adds an alert box. It has four types available: error, success, info and

notice.

3.1.3. Buttons

[krown_button size="medium" style="dar" label="Label" target="_self" href="#"]

This adds a special button. Properties:

● size - the size, which can be small, medium or large

● style - the style, which can be dark, color or empty

● label - the label of the button

● target - the target, which can be _self (the same window), _blank (new

window), _parent or _top

● href - any valid url, don’t forget the protocol (http(s)://)

20

Page 21: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

3.1.4. Columns

[krown_column width="1/3" el_position="first"] Your content here! [/krown_column]

This is how columns are made within the theme. Don’t forget to close the

shortcode once you’ve put your content inside it. Properties:

● width - possible values are: 1/3, 1/2, 1/4, 2/3, 3/4, 1/1

● el_position - please be sure that you mark the first or last element (or

both if you have a full width column) in a row by using this property,

otherwise your layout will break apart.

3.1.5. Contact Form

[krown_form label_name="Name" label_email="Email" label_subject="Subject" label_message="Message" label_send="Send" email="[email protected]" success="Success Message" error="Error Message"]

This is a basic contact form, which can be used in a larger or a smaller

container. It is protected against spam and it also uses the wp_mail() function,

so if your hosting provider doesn’t support the php mail() function, you can

use a plugin like: http://wordpress.org/extend/plugins/wp-smtp/

It has several label properties, which basically control the labels adjacent to

the proper field. These are label_name, label_email, label_subject,

label_message & label_send. There is also the email field (see above if the

form doesn’t work - also, try with a basic mail address if the email address

associated with your domain doesn’t work out of the box). And there are two

other properties to be displayed when a message was send (success) and

21

Page 22: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

when the fields are not properly completed (error).

3.1.6. Flickr Feed

[krown_flickr id="0524" no="6"]

As the title suggests, it is a basic feed from a user’s latest flickr stream. The no

sets the number of images, while the id is the id of album, which can be taken

from here: http://idgettr.com/

3.1.7. Icons

[krown_icon size="small" type="name" color="red" break="float"]

It simply adds an icon to your design. There are three sizes available (tiny,

small, medium & large) and the color can be any css color name or css color

value. The break property can be either float or break, meaning the way the

icon will wrap against the text. A floating icon will wrap, while a breaking icon

will stand on top of the text. For a full list of icons names see this.

3.1.8. Posts Grid

[krown_latest_posts no="6"]

A really simple shortcode that will show up most recent blog posts in the form

of a simple grid. It has only one property (no), which controls the number of

posts shown.

22

Page 23: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

3.1.9. Projects Grid

[project_grid category="" author="" orderby="days_left" order="ASC" max="8" visible="3" style="carousel"]

This is not an original shortcode actually, but a refreshment of the

IgnitionDeck grid shortcode. The difference between this and the original

shortcode is that this one offers much more options for filtering and display. It

also uses a custom grid design, so you won’t be able to use your own decks or

skins in it - the concept of the project thumbnails is definitive. Properties:

● category - project categories to display (write the ids here). If you want

more than one category in a grid, separate them by a single comma (ex:

3,4,5). If not defined or blank, projects from all categories will be seen.

● author - write the author’s slug - only one author can be added per grid

● orderby - the actual ordering system. Possible values are:

○ date - orders projects by creation date.

○ title - orders projects alphabetically.

○ days_left - orders by remaining days on project. Att! Expired

projects (0 days left) will be shown first if ordering is done in

desceding mode.

○ funds_raised - orders by funds (amount of money) raised by the

project.

○ percent_raised - orders by the funding percentage (doesn’t have

anything to do with the actual amount of money) of the project.

○ featured - shows featured projects.

● order - the direction of the ordering. Can either be ASC or DESC

● max - the number of projects that will appear in the grid

● style - there are two possible styles for the shortcode: grid & carousel.

The grid will display the projects in a regular masonry grid, while the

23

Page 24: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

carousel will only display a certain amount of projects and will give the

user navigation arrows for displaying more.

● visible - if you are using the carousel style, you can set a number of

visible projects which will be shown at a time. This number needs to be

lower than the max number of projects (for the navigation arrows to

appear). For example, if you insert the shortcode inside a full width

column, you should set this at 4, but if you insert the shortcode inside a

3/4 column, you should set the number of visible items at 3.

3.1.10. Promo Box

[krown_box el_class="light-1"] Your content inside here [/krown_box]

It’s basically a boxed content shortcode, with any kind of content inside. The

el_class property holds the style of the box, which can be light-1, light-2, dark

or color.

3.1.11. Section

[krown_section background="#fff"] Your content inside here [/krown_section]

This shortcode should be used to insert a full width section inside a certain

page template (don’t use it with sidebars). The background property can

hold any CSS color, or even a full declaration such as url(path-to-image)

no-repeat 0 0 red for example.

3.1.12. Social Icons

[krown_social twitter="http://twitter.com/yourprofile/"

24

Page 25: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

facebook="http://facebook.com/yourprofile/" target="_blank"]

This is simply a list of social icons with links to your social profiles. Each new

attribute represents an url, and these are the possible values: twitter,

facebook, dribbble, vimeo, linkedin, behance, pinterest, delicious, digg, youtube,

cloud, github, flickr, gplus, tumblr, stumbleupon, lastfm, evernote, picasa,

googlecircles, skype, mail, rss. All these social icons are available for use in this

theme.

Don’t forget the target property which can be either _blank (opens links in

new windows) or _self (opens links in the same window, default).

3.1.13. Tabs

[krown_tabs] [krown_tabs_section title="Title" icon="name"] Content for a section goes here! [/krown_tabs_section] [/krown_tabs]

This one’s similar with the accordion shortcode, but it doesn’t have other

properties, then the content. You can add as many tabs as you wish.

There are also two custom classes which can be added to the tabs shortcode, in

order to improve it. These are:

● fade - changes the tabs animation from a slide to a fade one

● responsive-on - makes the tabs responsive, giving them an additional

menu which will pop up on smaller displays. Use them like this:

25

Page 26: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

[krown_tabs el_class="fade responsive-on"] ...

3.14. Twitter Feed

[krown_twitter user="yourusername" name="Your name" avatar="http://absolute_url_to_an_image.jpg" text_reply="Reply" text_retweet="Retweet" text_favorite="Favorite"]

A simple twitter feed widget. The widget is simple, but the process of using it

is a bit complicated because of twitter and their recent API changes. The thing

is, you can’t display twitter feeds on your site now without an API key. But it’s

not impossible to get this key either... If you go to Settings > Twitter Feed

Auth you’ll notice some weird fields. Those are the fields that you actually

need to complete and if you give a read to the description you’ll understand

what you have to do. I’ve found this discussion on the Twitter forums and i

thought that it’s a good resource on this topic:

https://dev.twitter.com/discussions/631

CUSTOM CLASS

Each shortcode has another property available, called el_class. This property

adds a unique class set by you to the element, so that you can modify it’s style

easily and properly through css. For example:

[krown_box el_class="my-class"] Your content inside here [/krown_box]

Will add a my-class to the promo box DOM container, so you can target it

through CSS selectors, like this: .my-class

26

Page 27: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

MORE SHORTCODES

3.1.15. Widget Areas

If you want to use a certain widget area anywhere in the page (for example, if

you want to insert the IgnitionDeck categories in the homepage), there is a

shortcode which does this. Use it with the custom sidebars that you create in

the theme options. But do not use the widget to replace actual sidebars - this is

just to insert small widgets in various parts of your website.

[krown_widget_area id="unique-sidebar-id"]

3.1.16. Gallery

The gallery shortcode is a basic WordPress shortcode which in this theme

translates into a slideshow. So the basic styling of the default shortcode will

not work in this theme (such as columns or captions). But you can still order

items, add only some pictures, by ids, etc..

3.1.17. Self Hosted Video & Audio

Just as you add a video or an audio file to any page, you can now add full

media playlists as content. When inserting media, along with the old gallery

button you can now see two other buttons, which will guide you through an

easy way to add the playlists on your pages.

27

Page 28: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

3.1.18. Video / audio playlists

Just as you add a video or an audio file to any page, you can now add full

media playlists as content. When inserting media, along with the old gallery

button you can now see two other buttons, which will guide you through an

easy way to add the playlists on your pages.

3.1.19. Lightboxes

To create a ligthbox gallery use WordPress galleries and configure the gallery

exactly like you wish. To create a lightbox image, simply put an image linked

to the large version and it will transform into a lightbox.

To create an iframe which loads an iframe or use a button to open an image

into a lightbox, use these codes:

A. Iframe wrapped in a thumbnail

<a class="fancybox-thumb fancybox left" href="//player.vimeo.com/video/90480436?title=0&amp;byline=0&amp;portrait=0&amp;color=e5493a" data-fancybox-type="iframe"><img alt="" src="http://yourwebsite.com/path_to_thumbnail_img.jpg" /></a>

B. Iframe wrapped in a button

<a class="krown-button small empty fancybox" href="//player.vimeo.com/video/90480436?title=0&amp;byline=0&amp;portrait=0&amp;color=e5493a" data-fancybox-type="iframe">Your Label</a>

28

Page 29: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

C. Iframe wrapped in a text link

<a data-fancybox-type="iframe" class="fancybox" href="//player.vimeo.com/video/90444206?title=0&amp;byline=0&amp;portrait=0&amp;color=e5493a">Your Text</a>

D. Image wrapped in a button

<a class="fancybox" class="krown-button small empty fancybox" href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

E. Image wrapped in a text link

<a class="fancybox" href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>

Using this method above you can use the ligthbox exactly as you wish. These

are the available options.

Make sure than when embedding content from video sites and such, you only

take the href or src from the embedding code. Don’t put everything in there!

29

Page 30: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

4. IgnitionDeck Integraion

As you know already, the IgnitionDeck plugin comes in four different versions.

This theme supports them all, and the following guide will get you through all

steps require for integrating each version of the plugin.

Keep in mind that this is not an extensive document for the plugin itself,

because it already offers one here: http://ignitiondeck.com/id/documentation/.

Make sure to read it in order to familiarize yourself with it before using the

theme.

4.1. Free (basic) version - getting started

To get started you need to install the free version of the plugin first (you

should be prompted to do this when activating the theme). If not, go to

Appearance > Install Plugins and you’ll see the list of plugins that need to be

installed.

After you install the plugin you should see a new menu called IgnitionDeck in

the sidebar. Go there and you’ll be asked to register an account with them

before continuing. The steps are easy and intuitive. After you enter your

details wait a bit and the plugin will be activated. After activation, a new

menu item called IDCF will appear in the sidebar. If you go there you’ll see

some other settings, like a place to enter a license key (more on this later),

30

Page 31: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

some project settings and a place to add/view/edit orders.

For now, let’s leave all of these and create our first project. To do this go to

Projects > Add New Project and do what you would do when creating any

other page or post. Insert a title, write some content, add an optional page

subtitle, then hit Publish. When viewing the project created you should see the

title, the project sidebar and some content.

Now go back to the project editor and let’s take each panel and see what it

does.

4.1.1. Project Categories

The categories will be shown in the project grid, so it’s important to add

categories here. They are added like tags, but you should add them instead of

tags or normal categories. Write your categories in the Project Categories

panel and you’ll be able to later use them in various ways.

4.1.2. Featured

This option marks the project as featured. There will be no visual changes, but

if you plan to have something like a “featured projects” widget on your

homepage for example, you should mark featured projects using this panel

and order them by featured in the grid shortcode that you’ll insert there.

4.1.3. Project URL

This should remain to the Current Project Page, but if you want to make the

project to link to a different page when opened, you should use this window.

31

Page 32: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

These are all on the right side. On the left side you’ll see a big Project

panel with all kinds of settings. Most of them have a little question mark

near the title explaining what they do, but i’ll comment on a few below.

4.1.4. Project Type

Sets the type of the project. Projects that are level based require different

levels and the users are limited to only pledge what you ask them to, while

“pledge what you want” projects can have any amount inserted in there. If

you’re using only the free version of the plugin (which doesn’t have user

ordering available) you may be better with simple projects like this (without

levels), since it will be much easier for you to add orders.

4.1.5. Project Name

Projects should have a name for the plugin’s sake. The theme doesn’t use

this name set here anywhere - it uses the regular title you set when

creating the project! The value might be deprecated in future versions of

the plugins as well, but for now, just duplicate the title here.

4.1.6. Short Description

This description will only appear in the projects grid, nowhere else.

4.1.7. Long Description

If you are starting from scratch with this plugin, do not use this field. Leave

32

Page 33: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

it blank and insert your content the regular WordPress way, in the default

content area. If you do insert content here however, it will still appear in the

project page, below the actual content area. This is useful for those of you who

were already using the plugin and have their content here. Don’t worry, the

content will appear, nothing will go missing.

4.1.8. Video

If you insert a video, it will appear at the top of the project page. Please note

that adding videos will disable the project image/gallery. So if you want to

have a video at the top, you should add images or galleries in the content area,

using WordPress ways (add media, shortcodes, etc.). If you want an image or a

slider at the top of the project you shouldn’t add a video here and only insert

the video in the content area (again, WordPress allows you to do this easily -

refer to shortcodes section of the manual).

4.1.9. Main Project Image

Will appear in the project’s grid, as the project thumbnail. It should have at

least 840px in width or larger, because it will also be used as the project

image (at the top of the project - if you do not use a video). The theme will

resize the image for thumbnails perfect sizes automatically without distorting

(cropping) the image, so you won’t have to worry about thumbnails.

4.1.10. Project Reward Levels

Here you need to add the pledge levels for the project. Even a “pledge

what you want” project requires at least one level. Leave the price blank if

33

Page 34: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

this is the case, but otherwise fill your values there. At this moment, both

short and long description of each level should be the same. It might

change in the feature, but for now, just have the same text in both fields.

4.1.11. Additional Images

If you add additional images (and don’t have a video of course), they will

appear in the form of a slider at the top of the project. If you have a video,

these won’t appear anywhere.

4.1.12. FAQs / Project Updates

If you write anything here, it will appear in a new tab in the project page.

A final note on comments - these can be disabled from each page individually

(there’s a tick box to allow comments at the bottom of the editor), or you can

disable them globally from the Theme Options.

Make sure that you also complete all the other fields that were not detailed

above.

-

When you’re done, Update the project and see what’s changed based on your

input. You should also see some levels if you selected the level based project

type. However, you’ll notice that you cannot do anything with them - also,

there is no support button. This is because the free version of the plugin

doesn’t allow users to support your projects like this. You’ll have to add orders

34

Page 35: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

yourself.

Adding orders

As already explained, since the free version of the plugin doesn’t allow for

users to pledge to projects, orders need to be added manually. For this, simply

go to ICDF > Orders and hit Add Order. You’ll get a list of details which you need

to complete (only status and project details are required), and if you add an

order for the project we’ve created earlier, you’ll should see it reflected in the

project sidebar on the right side.

Now, if you are using and want to keep on using the free version of the plugin,

it would be useful to put a PayPal donation plugin on each project’s page and

let users manually transfer you funds, after which you can add each order like

explained above to have your project progress in terms of percentage, funds

raised and pledgers. This is just an idea - you can use the theme & plugin

however you desire.

Projects grid

To test the grid, create a new page and insert the grid shortcode in it (as

instructed in the shortcodes section of the manual). You’ll see the custom grid

with the project that you already created.

Custom Widgets

35

Page 36: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

The theme also comes with three custom widgets for IgnitionDeck, widgets

that you can use with the free version of the theme. To see them, go to

Appearance > Widgets.

● IgnitionDeck Categories - this widget can be used to show a list of all

project categories. To use it in a page (not a sidebar), simply use the

widget area shortcode.

● IgnitionDeck Search - this widget can be used to create a dedicated

search form, which will only go through projects, not anything else.

Author Profile

You’ll notice that each project has an author in the sidebar. This is the actual

profile of the author who created the project. To edit authors information, go

to the Users menu in the sidebar.

If you want to display social icons but you don’t have the Enterprise version of

the plugin, please use the social links shortcode in the description box.

If you want to hide the author box in the sidebar (in case there’s only one

author or for any other reason), paste this custom CSS code in the proper place

from Theme Options:

#project-sidebar .separator, #project-p-author {display: none;} #project-sidebar .id-widget .level-binding:first-child {border-top: none;}

36

Page 37: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

4.2. Regular version ($79 list price)

To install the basic version you have to purchase a copy first, then activate it in

the IDCF settings panel. After you activate your copy of the plugin, you’ll see

that many other panels have appeared in this page.

You have payment settings, deck builder and custom project settings as new

panels that are available to use. If you also go back to your first project you’ll

see that the support button appears and that users can now put pledges on

your projects.

For this purpose, a general pledge page should be created. Simply create a

new page, set it as a default purchase page in the IDCF > Project Settings and

in the content area of the desired page insert the pledge form shortcode (you

can also insert any other content, give it a sidebar, etc., but the pledge form

shortcode is the most important part):

[project_purchase_form]

You can also set a default thank you page here, a page on which users that give

money to your cause will be redirected after the payment process is complete.

Anyway, if you now go back to your project and support it in any way, you

should be redirected to the default pledge page.

If this doesn’t work, you may have to EDIT the project and UPDATE it

(don’t do any changes, just update it to make sure that it works fine).

37

Page 38: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

This is the main change from the free version - you can now let users pledge

and manage various payment methods.

One other extra thing is the IgnitionDeck Project Widget, which allows you

to add a custom widget in any widget area. It will have the theme’s design, so

do not try to use custom skins because they will not work (obviously, the

theme has a certain style and if custom skins would be used this would defeat

the purpose of a custom theme).

The new deck builder is also available now, which allows you to create

custom decks with various information in them.

All other shortcodes are available and much more, but you can read about all

of these changes in the plugin’s original documentation.

38

Page 39: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

4.3. IgnitionDeck Commerce & Enterprise

Both versions are supported and style exists for both, so you’ll have no issues

in making the theme work with these..

If you want to have products and an interesting commerce platform with good

integration for the plugin, use the IgnitionDeck Commerce plugin.

If you want to give your users ability to create projects on your site, use the

enterprise version. You don’t need to use the Commerce features if you don’t

want to - IgnitionDeck Enterprise works perfectly fine with legacy checkout.

Again, check the original plugin’s documentation to learn how to use these two

products.

One small note on something that’s part of the theme - in the moment you

install and activate IgnitionDeck Commerce/Enterprise plugin, the

login/dashboard menu items will automatically appear.

39

Page 40: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5. Tips & Tricks

This short chapter covers some tips & tricks that you can do in order to make

the site look and run better.

5.1. Child Theme

A WordPress child theme is a theme that inherits the functionality of another

theme, called the parent theme. Child theme allows you to modify, or add to the

functionality of that parent theme. A child theme is the safest and easiest way to

modify an existing theme, whether you want to make a few tiny changes or

extensive changes. Instead of modifying the theme files directly, you can create a

child theme and override within.

This theme already comes with a child theme (backer-child-theme), in which

you have some comments about the replaceable functions and also a second

portfolio post type definition (which you can duplicate as many times as you

wish).

You can read more about child themes here.

40

Page 41: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.2. Install plugins for caching and security

To make your theme run faster you can install a plugin like W3 Total Cache &

Better WP Security which will pump up your site and protect it from hackers.

41

Page 42: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.3. Make your site run faster

5.3.1. Get a good hosting

You may not think that this is important, but if you want your site to display

really fast you need to get a good hosting. This is the first step in having a fast

site, which also translates into more views, which also translates into a better

SEO, which finally translates into more sales. (affiliate links below)

There are three hosting companies which i recommend:

● Media Temple: http://mediatemple.net - if you want a premium

WordPress hosting which is easy to manage and works pretty well, this

is a good choice to host your website on.

● A Small Orange: http://asmallorange.com - this is another good

hosting company, which i’m currently using to host my theme demos on.

If you bought this theme you probably liked the speed as well, so i

highly recommend ASO to host your themes on (especially the Cloud

VPS option).

● WPEngine: http://wpengine.com - definitely not as cheap as the two

examples above, but if you really want an incredibly fast website and

absolutely no headaches in managing it, WPEngine is the way to go.

With it you don’t have to worry about security, caching, updates, etc.

Everything is handled by a great theme of professionals ready to help

you with everything. You just need to care about your content.

42

Page 43: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.3.2. Optimize images

Always optimize/compress your jpeg images before uploading them to the

server. Large images should be compressed at around 90% image quality and

you should also try to limit the use of lossless image files (uncompressed pngs).

5.3.3. Use a caching plugin

I can’t recommend enough the necessity go good caching. If you use a

managed hosting such as WPEngine you don’t need this. But if you are using

ASO or MT or any other hosting you need to cache your content. For this

purpose, i recommend W3 Total Cache! It’s a great and easy to use plugin,

and with only a bit of work you can double your site’s speed.

See this ticket for more info on how to configure this plugin:

http://rubenbristian.ticksy.com/ticket/119133

43

Page 44: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.4. SEO Advices

The theme is built in a way to be SEO friendly, by emphasizing titles with

heading tags, having the content before anything else, stripping out useless

content, fast loading, setting titles in the header for better crawling, etc..

All these help.. But you have to remember that Content is King! So you

shouldn’t blame the theme because your website doesn’t appear in search

engines. You should always focus on providing good content and in this way,

your website will definitely look great in search engines.

Also, you should always install a popular SEO plugin which will make the

most of keywords and descriptions..

I suggest using Yoast for SEO.

44

Page 45: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.5. Translating the theme

This theme is localized, which means it can easily be translated in your own

language. There are various methods to do a simple translate or create a

website in multiple languages, so just use the one which works best for you.

5.5.1. Simple translate

1. Download and install http://www.poedit.net/

2. Go to /wp-content/themes/backer/lang/ and open default.po file.

3. In the window that appears you have all the strings that were used in this

theme, so you just need to go through them and write a translation.

4. When you’re done go to File > Save as and save your translation in a *.po

file.

5. You should name your file pt_LANG. It’s just a naming convension.

6. When you’re done translating open wp-config.php from your WordPress

root folder and replace this line:

define ('WPLANG', ''); with define ('WPLANG', 'pt_LANG');

Let’s take a practical example. If you are using WordPress in spanish, your .po

file should be called es_ES.po and the WordPress language should be defined

like (‘WPLANG’, ‘es_ES’).

If you’re not familiar with the application listed above, there’s a cool plugin

which does the hard part for you. Just install it and you’ll be able to edit the

language directly from the WordPress dashboard, without touching a single

external file: http://wordpress.org/plugins/codestyling-localization/

45

Page 46: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.5.2. Multilanguage

If you’re looking for having a website in two or more languages, i suggest two

plugins:

● qTranslate - this is a free and easy to use plugin, but it has some

limitations. You cannot translate meta fields with it. This theme uses

meta fields only in the contact page template, so if you can bypass this

somehow, go for it.

● WPML (affiliate link) - this is a more powerful plugin, with the option to

edit meta fields as well. The only downside is that it’s a commercial

plugin, so it costs a bit. Being a commercial plugin though, it comes with

support from the authors.

46

Page 47: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

5.6. Custom work

Please remember that WordPress themes are purchased as-is. If you want to

make changes to the theme, changes that require custom editing or the

addition of new features, you should hire a freelancer to help you out. I

suggest using Elto, which is a marketplace specialized in tweaking

themes.

47

Page 48: Backer WordPress Theme - Krown Themes | Amazing & …krownthemes.com/help/backer/backer-manual.pdf · Backer WordPress Theme ... Duplicate Post - clones any post, page or custom post

Backer WordPress Theme By KrownThemes - www.krownthemes.com

Again, thank you for purchasing this theme!

If you have questions that are not answered here, please go to the support

system, where you’re questions will be answered:

http://rubenbristian.ticksy.com

48