Krative.

This is the theme help documentation file. Please search this before contacting the Bean Support Center. Note that we do not support theme customizations beyond it's original functionality & appearance.

Live Theme Demo View on ThemeForest

1. Getting Started

A bit on getting started with your WordPress project, package files & the Bean Support Center.

1.1 Included Files

After downloading the theme package open the folder named “Krative Package (Version)” and un-zip the folder, if it is not already so. Inside the package you will find the following files:

  • Help
  • Licensing
  • PSD
  • Sources
  • Theme
    • krative
    • krative.zip
    • krative-child.zip

1.2 Theme Installation

To install your brand new WordPress theme (that you’ve already downloaded and un-packed) you have two primary options: FTP or WordPress Upload. Learn a bit more on each below in Sections 1.3 and 1.4.

1.3 WordPress Upload

To upload through your WordPress Dashboard, select “Appearance” and then “Themes” (located on the Dashboard sidebar). Next, select the “Install Themes” tab at the top of the page and then select the “Upload” link, right above the search field. Choose your file and select “Install Now”. Once the theme is fully uploaded and installed, click “Activate” to activate the WordPress theme.

Note: The theme files will be stored on your server in the following location: /wp-content/themes/

When uploading your theme through the Dashboard, please ensure you are uploading the theme .zip file, not the entire package you downloaded. In this case, you will be uploading krative.zip. If you upload the wrong file (the package) you will get an error stating “Error: missing style.css stylesheet.”

1.4 FTP Upload

To manually upload your new WordPress theme, login with your credentials to your website and locate the wp-content folder in your WordPress install files. Upload the un-zipped Krative folder into the: wp-content/themes folder.

Note: Again, please ensure you are uploading the un-zipped theme folder, not the entire package downloaded.

Once uploaded, activate the theme by heading to the “Themes” menu in the WordPress Dashboard. Locate the Krative theme and hit “Activate”.

1.5 Bean Support Center

If you’re a problem with the theme or found a bug please let us know on the Bean Support Center. We take pride in our customer support and we will do what we can to assist you. It is impossible to test every plugin developed for WordPress and unfortunately there are a good number that pose issues to many themes in general. If you are experiencing a theme issue, please first turn off all third party plugins to see if the problem persists. If so, we will be glad to help.

We are happy to help with setup & bugs you may stumble upon though we cannot support CSS customizations.

2. Plugin Compatibility

Bundled and free downloadable plugins to enhance your new theme even more.

2.1 Krative Slider & Bean Team Plugins

Upon installing and activating Krative, you will see two admin notifications on your WordPress dashboard - one of which is to activate the bundled Krative Slider & Team Plugins that we built specifically for Krative. Follow the instructions to fully install and activate the plugin. If you do not have the plugin installed, you will be unable to create home template slides for the home page of your WordPress Install.

2.2 Other Compatible Plugins

This theme is compatible with just about the full array of ThemeBeans developed WordPress Plugins. To download the free plugins, head to http://themebeans.com/plugins and grab a few.

3. General Setup

A bit on setting up your home page and site navigation throughout the theme.

3.1 Home Page Template

The demo is currently running the Home Template as the site home. You can opt to use the blog as the home page but remember that the fullwidth slider only appears on the home template by default.

This template utilizes widget areas in the Widget Dashboard of your WordPress Install to display content. There’s more info on the home template in Section 4 of this documentation.

To set up the home page template, simply create a page using the “Home Template” and publish it. Then in the WordPress Dashboard > General > Reading settings - you must set your Posts page, which will be the default blogroll page, and your home page (the page you just created).

3.2 Navigation Menus

To set up your site navigation, head to the “Appearance” tab from the dashboard sidebar and then “Menus”. Cick on the “Create a new Menu” near the top to create a new menu.

After saving, you can add the menus via the Theme Customizer to set the Primary Navigation, Drop In Navigation, Footer Navigation and Sidebar Navigation. Each of these navigation elements are persistent throughout the theme and should be added (see below).

4. The Home Template

How the home template works and the extensive customization options provided.

4.1 Widget Areas

The Krative Home Template is an extensive template created to provide some neat customization options in order to really make your Krative install unique. We went with a Widget Area builder, to create this functional and simple environment for you to built out your template.

The template utilities five widget areas, all of which display below the home slider. We’ve custom built quite a few widgets that can be dragged and dropped into different widget areas in order to achieve the look you prefer.

Alternatively, you leave a widget area empty - it will not display on the home template... just in case you only want to add a couple widgets.

4.2 Available Home Widgets

The following widgets can all be placed within the Home Template Widget Areas (aptly named Home Section 1 - 5) and accessible via the Dashboard > Appearance > Widgets tab of your WordPress Install. Each of these widgets has custom CSS to ensure it looks and performs great on the Home Template.

  • Home Call to Action Widget
  • Home Recent Posts Widget
  • Home Recent Portfolios Widget
  • Home Clients Widget
  • Home Stats Widget
  • Home Intro Widget
  • Home Testimonials Widget
  • Skills Widget
  • Dribbble Shots Widget
  • Bean Tweets Widget (via the Bean Tweets Plugin)

As you can tell, there’s quite a few ways to change up the home of your website. On top of all these widgets, you may rearrange them in any fashion you’d prefer.

4.3 Slider Customization Options

The home template slider has a couple options, which are enabled through the Theme Customizer (WP Dashboard > Appearance > Customize).

A. Hide Slider Arrows - elect to disable the left/right arrows.

B. Hide Slider Admin Edit Button - elect to disable the slide edit button (which is only viewable by logged in administrators.

C. Adjust Slide Animation Speed - adjust the speed of the fade or slide effect.

D. Adjust Slide Rotation Speed - adjust the milliseconds in between each slide transition.

E. Slider Height Override - add a height attribute, to cut off extending slides, if you’d prefer.

F. Loading Container Height - select the initial height of the loading area allowed by the slide. The initial height of the first slide is recommended.

G. Slide Animation Options - select either a fade or slide animation option for your home slider. Slide is recommended if you have multiple heights for your slider.

H. Randomize Slides - add a touch of flare to your site by randomizing the order in which the home slides appear upon every page refresh.

5. The Home Slider

How to add and built slides for the home page template with the Krative Slider Plugin.

5.1 Plugin Activation

As mentioned in the Plugin Compatibility section, Krative requires the installation and activation of the Krative Slider Plugin - in order to add and customize slides for your Home Template.Simply follow the instructions from the admin notification to install and activate the plugin. Upon a successful activation, you will see a “Slides” sidebar link added to your WordPress Dashboard.

5.2 Creating Home Slides

The home template slides are created the same exact way you would create pages and posts in WordPress. From the WordPress Dashboard, click on the Slides > Add New Slide link. Here you may add in headers, text, video embeds and even shortcode buttons.

5.3 Custom Slide Backgrounds

If you so desire to, you may choose a difference background color for each slide, or even upload an image background (both full width and patterns are allowed). You’ll see the “Customize Slide Background” meta field beneath the WordPress editor - where you are currently adding your slide content (see below).

6. The Blog

A few tips on creating your blog page, blog setup and standard post publishing in our theme.

6.1 Adding a Blog Post

From within your WordPress Dashboard, navigate to the “Posts” tab (located in the Dashboard sidebar) and click on “Add New”. Select the post format on the right sidebar and the format specific meta fields will appear below the editor.

6.2 Gallery Post Format

You will find a meta box located under the publishing box to the right of your post editor. This meta box is used to select alternate post types to publish to your blogroll. To publish a gallery post format, upload as many photos as you’d prefer into the media uploader and DO NOT click “Insert into Post”. If you do, it will also insert the images into your post content.

Recommended size for featured images is 677px by 450px - though you may choose any height you'd prefer.

6.3 Other Post Formats

This theme has built in functionality for both audio and video post formats. To use them, again you would select them from the “Format” meta box beneath the “Publish” meta box - then insert the audio mp3 or video files/embed code into their respective meta fields.

6.4 Custom Excerpts

This theme utilizes post excerpt within certain post formats (appears as the light gray sub heading beneath images). To add post excepts, first ensure you have the “Excerpt” checkbox selected from the “Screen Options” tab at the very top-right of your WordPress Post Editor view. This will enable the except meta box to display beneath the post editor.

6.5 Display Post Tags

To display the post tags beneath the post on the single view pages, head to the Theme Customizer and select “Blog Settings.” Then check the “Show Single Post Tags” selection box.

6.6 Post Sharing

There are Twitter, Facebook, & Google Plus coded buttons. To display them, head to the Theme Customizer and select “Blog Settings.” Check the “Show Single Post Social Sharing” selection box and you will see them populate. Don’t forget to enter your Twitter Username into the field below for the Twitter Share button (ex: ThemeBeans).

7. The Portfolio

Setting up your theme’s portfolio using the Bean Portfolio Post Type Plugin (FREE).

7.1 Plugin Installation

To install the plugin, head over to our website and simply download the free Bean Portfolios Plugin. Once you’ve successfully downloaded the zip file, head to your WordPress Dashboard and select “Plugins > Add New > Upload.” Add the zipped file in the field there and click “Upload.”

Upon a successful upload, you’ll be prompted to activate the plugin. You’ll then see a new “Portfolio” tab in your WordPress Dashboard Sidebar.Creating portfolio posts is done exactly the same as standard posts. To create a gallery, just add more images via the Media Uploader - in the same fashion as the gallery posts.

7.2 Creating your Portfolio Page

You need to first create a page using the Portfolio 2 Column, Portfolio 2 Column with Filter, Portfolio 3 Column or Portfolio 3 Column with Filter templates. These templates will check that you have the Bean Portfolio Post Type Plugin activated and will pull your portfolio posts.

7.3 Featured Images

We recommend 316px width x 210px height (non-retina) for our grid system featured images (on the portfolio templates and Home Recent Portfolios Widget).

7.4 Adding Media

To add media to Krative, there are two options. The first is to simply utilize the “Add Media” button above the portfolio post editor.

Secondly (and preferred if you’d like to visually view the images uploaded straight from the post editor view), is to use the “Browse & Upload” button in the Gallery Settings meta box beneath the Portfolio Entry Meta meta box. After clicking the button simply upload your images and press the “Insert into Post” button to attach the image to the portfolio post.

7.5 Portfolio Post Meta

Add specific meta to each portfolio post via the Portfolio Entry Meta meta box, located beneath the Portfolio post editor. You may display the client, url, url text, categories & the publish date. If you leave any of these fields blank - no meta will be published. This way you can have different meta for each post if need be.

7.6 Portfolio Post Excerpt

To display the bold text under the portfolio images (slideshow or gallery) simply add text in the “Excerpt” meta box, located at the bottom of your portfolio post edit view. If you’re unable to find the meta box, select “Screen Options” from the top right of your screen and select the “Excerpt” checkbox to show the meta field on the screen.

7.7 Displaying Different Portfolios

Built into this theme is the ability to section off categories in order to display different portfolios per page. The theme does this by default - you just need find your category post. To find this navigate to your WP Dashboard, then to the Portfolio > Portfolio Categories tab. In the Portfolio Categories menu you may select “view” from the list of links that appear when you hover over a category. Alternatively you may simply click on a category in one of the portfolio templates.

8. Theme Widgets

An overview of the included widgets and how to’s on managing the widget areas throughout this theme.

8.1 Included Widgets

Krative has the following widgets provided in the theme package:

  • Dribbble Shots Widget
  • Flickr Photos Widget
  • Newsletter Widget
  • Skills Widget
  • Home Clients Widget
  • Home Intro Widget
  • Home Call to Action Widget
  • Home Recent Posts Widget
  • Home Stats Widget
  • Home Testimonials Widget

This theme is compatible with the Bean Tweets & Bean Instagram Plugins, which generate widgets.

8.2 Using the Widgets

To employ a widget, simply go to your Widgets editor (located in your WordPress Dashboard in the “Appearance” menu) and drag your widgets into the specified widget areas.

8.3 Widget Area Generator

There is currently 1 widget area built into the theme base, although if you utilize our framework widget area generator, you can create alternative widget areas to replace current areas on certain pages, posts or even tags.

To create a widget area, locate the Widget Area Manager on the WordPress Dashboard, under the “Appearance” tab. Once you are in the generator, select “Add New”. Next, simply name the widget area, select the conditions, select the current widget area to replace, then hit “Publish”.

Return to your Widgets editor and you will find your new widget area has automatically been added and is currently following the conditions you have set. Add your alternative widgets here and you will see them change based on the conditions (templates, pages, ect.) that you chose.

9. Theme Customizer

A few tid-bits concerning your new theme’s powerful Theme Options Panel and the neat functionality behind it.

9.1 Accessing the Options

There are a couple ways to get to the Theme Customizer. You can select the “Customize” button in the admin bar (beneath your site title) or select “Customize” from the Dashboard menu.

9.2 The Options

A. Site Title & Tagline: Set your site title and the tagline that appears on the sub header (optional).

B. General Settings:Upload your login-logo, logo, retina logo, favicon & apple touch icon, enter the footer copyright text & add your Google Analytics script.

C. Theme Options:Enable retina.js (which adds retina to any image uploaded with an @2x appended to the file name in the same directory), enable the hidden sidebar panel, enable the drop in header, enable the page sub header (contains the breadcrumbs and the site tagline). You may also set a Global Footer Widget Area - which is a select field for you to choose the widget area from the home page to show on the footer of all other templates.

D. Home Template:In this section you can manipulate parts of the home template to really customize Krative to fit your needs. You may randomize the home slides (which add a randomize effect to the slide order on each page load), select to hide the slider navigation arrows and the slider admin edit link. On top of those customization options, you may modify the slideshow rotation speed, the animation speed (fade in or slide speed), set a height override and loading container height (which should be the height of your first slide). Lastly you may choose between a Fade and Slide animation. Note that the fade animation does not work as effectively when your slides are multiple heights.

E. Portfolio: Select to display the Global Widget Area (selectable via the “Theme Options” tab) on your portfolio pages as well as to display your related portfolio posts. You can also customize the “Filter” text on your filterable portfolio templates & the “Some Related Work” title text on the single portfolio views. Lastly, you should select the primary portfolio page for the theme breadcrumbs. You can also elect a CSS3 Filter to apply to all your website images (grayscale, sepia & high saturation) to create a unique look instantly.

F. Blog Settings: Select to display post tags, select to show the social sharing buttons and select to display the “About the Author” block.

G. Colors: Easily manipulate various CSS elements throughout the theme with the color pickers in this tab.

H. 404 & Coming Soon Pages: Customize your website’s 404 text and enter the year, month & date for the Coming Soon Template (if you’re using it). You can also choose to animate the colors of the Coming Soon Template background - which pulls the colors from the primary color.

I. Custom CSS: Customize your website even more with this tab. Add in any CSS attributes and values to add to your website. These styles are appended in the header of your website.

10. Team Members

Setting up your theme’s team members page using the Bean Team Plugin (included in Krative).

10.1 Plugin Installation

To install the plugin, follow the installation instructions provided upon initial activation of the theme as first mentioned in Section 2 of this documentation.

10.2 Creating your Team Page

You need to first create a page using the Team Member template. This template will check that you have the Bean Team Plugin activated and will pull your published team member posts.

10.3 Featured Images

We recommend 316px width x 316px height (non-retina) for our grid system featured images.

11. Retina Displays

This theme is fully compliant with retina standards to look sharp on any display.

11.1 Image Asset Customization

Each graphical asset has an associated retina image that should be modified when customizing assets in this theme. You will find these retina assets in their respective image locations, in the “retina” folders.

Additionally, if the image size has changed, the background-size property of the associated class in /assets/css/mobile.css must be modified to reflect those changes.

11.2 Retina.js

This theme is retina.js ready - which means that any image will be replaced by a retina image if you’ve uploaded one into the same directory & have appended the “@2x” to the end. Example: logo@2x.png will replace logo.png

12. Files & Sources

This is dedicated to the theme templates, javascript files and other sources for our theme.

12.1 Theme Template

  • Archives Template
  • Coming Soon Template
  • Default Template
  • Home Template
  • Portfolio 2 Column Template
  • Portfolio 3 Column Template
  • Portfolio 2 Column with Filter Template
  • Portfolio 3 Column with Filter Template
  • Team Members Template

12.2 CSS Files

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.

  • Style.css (Primary Stylesheet)
  • Mobile.css (Responsive Stylesheet)
  • Framework.css (Framework Stylesheet)

12.3 Javascript Sources

These are the various attribution inks to the Javascript files included or modified to work with in this theme.

  • Jplayer  www.jplayer.org 
  • View.js www.finegoodsmarket.com/view
  • Isotope www.isotope.metafizzy.co
  • Flexislider www.woothemes.com/flexslider
  • Auto Height www.github.com/alexdunphy/flexible-textareas
  • Modernizr Custom Build www.modernizr.com