Wonder.

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 a theme'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 “Wonder Package (Version)” and un-zip the folder, if it is not already so. Inside the package you will find the following files:

  • Help
  • Licensing
  • Sources
  • Theme
    • wonder
    • wonder.zip
    • wonder-child.zip

1.2 Installation Options

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 wonder.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 Wonder 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 Wonder theme and hit “Activate”.

1.5 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.

1.6 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. The Home Page

Initial set-up procedures to get your website’s home page running and theme menus.

2.1 Portfolio Home Page

The demo is currently running the Portfolio Template as the site home. You can opt to use your blog as the home, or even a separate page. To set up the portfolio home page, simply create a page using the “Portfolio Template” and publish it. Then in the WordPress Dashboard > General > Reading settings - you must set your Posts page, which will be the default index page, and your home page (the page you just created).

Alternatively, you may select the pages (after you have created them) in the Theme Customizer, as demonstrated in the screenshot below.

2.2 Navigation Menu

To set up your site navigation, head to the “Appearance” tab from the dashboard sidebar and then “Menus”. Click 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. This navigation element is persistent throughout the theme and should be added.

3. The Blog

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

3.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.

3.2 Gallery Post Format

To publish a gallery post format, upload as many photos as you’d prefer into the media uploader and DO NOT set a post featured image. If you do, it will override the gallery slideshow. Here's a video tutorial on uploading media. There is also an additional media uploader located at the bottom of the post editor.

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

3.3 Other Post Formats

This theme also has built in functionality for audio, video, quote and link 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 (for audio/video posts).

3.4 Custom Excerpts

This theme automatically applies a cut off function (almost like the default WordPress excerpt function after 25 words. You can adjust the excerpt word count via the Theme Customizer > Blog Options.

3.5 Post Sharing

There are Twitter, Facebook, Google Plus & Pinterest coded buttons added to single views of the theme posts. To display them, head to the Theme Customizer and select “Blog Options.” Check the “Display Single Sharing Buttons” selection box and you will see them populate.

3.6 Post Pagination

This theme is pre-built with post-to-post navigation. Enable the pagination via the "Blog Options" in the Theme Customizer. They will display below the post on the single views.

3.7 Index/Blog Sidebar Switcher

Change the look of your index/blog pages instantly with the "Blog Sidebar Switcher" in the "Blog Options" of the Theme Customizer. You can opt for a left, right & even no sidebar, all without a line of code.

4. The Portfolio

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

4.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.

4.2 Creating your Portfolio Page

You need to first create a page using the “Portfolio” template. This template notices that you have the Bean Portfolio Plugin activated and will pull your published portfolio posts.

4.3 Featured Images

We utilized 400px width (non-retina) by any height for our grid system.

4.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.

4.5 Portfolio Post Meta

Add specific meta to each portfolio post via the Portfolio Entry Meta metabox, located beneath the Portfolio post editor. You may display the portfolio type, background color, accent color, client, url, 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.

4.6 Post Creation Overview

When uploading new posts, there's a couple of steps that you can do.

  • Upload a Featured Image
  • Select the type of Portfolio (Gallery, Slideshow, Video, Audio)
  • Select a background color for your media
  • Select an accent color for your post
  • Opt which meta you'd prefer to display
  • Upload your media

4.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.

You can also set a description for your categories, in order to display beneath the portfolio title. You can locate this in the Portfolio > Portfolio Categories > Edit (on the portfolio category).

5. Theme Widgets

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

5.1 Included Widgets

Wonder has the following widgets provided in the theme package:

  • Dribbble Shots Widget
  • Flickr Photos Widget
  • Newsletter Widget

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

5.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.

5.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.

6. Theme Customizer

An overview of the theme’s powerful Theme Customizer and the neat functionality behind it.

6.1 Accessing the Customizer

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

6.2 The Options

A. Theme Options: Enable Retina.js, the sticky navigation, header overlay & opt to display the header tagline globally.

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

C. Footer Settings: Elect to display the footer container and enter your footer text in the provided textarea.

D. Portfolio Settings: Set a post count for the portfolio template, select to randomize your posts on page load, enable a "New" tag for your portfolio posts and choose to display portfolio pagination/related posts. Also, select to hide the portfolio overlay & lastly - add a CSS3 filter to your posts/portfolio (sepia, grayscale & high saturation).

E. Contact Template:Elect to use the default contact template, add your contact form email address and customize the submit button text.

F. Blog Options: Select to display post pagination, select to show the social sharing button, set your post excerpt word count and choose your sidebar layout (left, right, none).

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

H. Background Image: Set a background image (full or repeating) within this tab.

I. 404 / Coming Soon: Customize your website’s 404 page, and coming soon template.

J. 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.

7. Retina Displays

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

7.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.

7.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

8. Files & Sources

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

8.1 Theme Template

  • Archives Template
  • Default Template
  • Contact Template
  • Coming Soon Template
  • Portfolio Template
  • Under Construction Template

8.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)

8.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
  • Retina.JS www.retinajs.com