The help guide for Wonder WordPress theme by ThemeBeans.

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

WordPress Upload

To upload through your Dashboard, select “Appearance” and then “Themes”. 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.

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

When uploading your theme with the installer, please ensure you are uploading the theme .zip file, not the entire package you downloaded. In this case, you will be uploading wonder.zip.

Bean Help Center

If you’re a problem with the theme or found a bug please let us know on the Bean Help Center. We take pride in our customer support and we will do what we can to assist you.

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.

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.

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

Bean Plugins

This theme is compatible with many of our custom developed WordPress Plugins. Head over and Download our Bean Plugins.

It is rather important to set your theme menu in the WordPress Dashboard. To do this, locate the Menu options by selecting the “Appearance” tab from the dashboard sidebar and then “Menus”.

Once you’re viewing the Menus, create a new menu and save it. After you’ve saved the menu, you can add it to a menu via the Menu Settings, below the Menu Structure area. Add your pages and links to the menu you just created in the Menu Structure area.

If you’re theme menu does not accurately display in mobile view, the error most likely is caused by the unselected menu here.

Portfolio Home Page

The demo is currently running the Portfolio Filtered Template as the site home. 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 page in the Theme Customizer

Add 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. Don't forget to upload your featured image!

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

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.

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. Don’t forget to enter your Twitter username (e.g. ThemeBeans) into the "Twitter Username" field below.

Gallery Post Format

To publish a gallery post format select "Gallery" from the Post Format metabox. You will notice a "Gallery Post Format Settings" metabox appear below the post editor. Upload your images in this metabox here, NOT the Add Media button above the post editor.

You can add images from your media library, upload new media and rearrange the images as you wish.

There's also an option to make the post images appear in a randomized fashion via a check box below the uploader.

Post Pagination

This theme is packaged with single post navigation. To trigger the pagination, simply head to the Theme Customizer, Blog Settings and select the "Display Single Pagination" checkbox.

Custom Excerpt

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.

Display Post Tags

To display the post tags beneath the post on the single post views, head to the Theme Customizer, Blog Settings - then select the “Enable Single Post Tags” checkbox.

Blog Sidebar Layout

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.

Plugin Installation

To install the plugin, head over to our website and simply download the free Bean Portfolio 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.

Creating your Portfolio Page

You need to first create a page using the “Portfolio” or "Portfolio Filtered" template. These templates notice that you have the Bean Portfolio Plugin activated and will pull your published portfolio posts accordingly.

Portfolio Post Formats

Wonder is capable of displaying stacked images (utilizing View.js lightbox effects), slideshows, default stacked images, audio posts, and video portfolio posts (hosted and embedded). To change the type of portfolio to display, click on the select field for "Portfolio Type" in the Portfolio Meta Settings, located beneath the post editor.

Portfolio Gallery Images

If you have selected Gallery Portfolio, the Gallery Post Format Settings will appear below. Here you will add in your images to the post's gallery by clicking the "Browse & Upload" button. You have the capability to rearrange, caption, add more and remove images from the popup modal that appears. Just remember to hit "Save Gallery" and you're all set.

Recommended size for gallery images is a 1050px width by any height.

Portfolio Featured Images

We utilized 400px width (non-retina) by any height for the demo's featured images.

Portfolio Post Creation

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

Portfolio Categories

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

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.

Included Widgets

  • Dribbble Shots Widget
  • Flickr Photostream Widget
  • Newsletter Widget
  • Portfolio Widget
  • Portfolio Menu Widget
  • Portfolio Taxonomy Widget
  • Video Widget

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.

Bean Plugin Widgets

The following widgets are provided with our compatible array of plugins. Download them all.

  • Bean Tweets Widget
  • Bean Instagram Widget
  • Bean Social Widget
  • Bean Pricing Tables Widget

Custom Widget Areas

If you utilize our framework widget area generator, you can create alternative widget areas to replace areas on conditional pages.

Widget Area Generator

To create a widget area, locate the "Widget Areas" link on the WordPress Dashboard, under the “Appearance” tab. Once you are in the manager, select “Add New”. Next, name the widget area, choose your conditions, select the current widget area to replace, then hit “Publish”.

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

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.

Theme Settings

Theme Settings: Enable Retina.js, Bean Framework SEO metaboxes, sticky navigation, header overlay & opt to display the header tagline globally.

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

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

Blog Settings: 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).

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

Contact Template: Set your contact form email address and customize the "Send" button text.

404 Error Page: Customize your website’s 404 page, and coming soon template.

Custom Styles

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

Custom CSS

Insert your own CSS into this block and it will be applied to your website. This overrides all default styles located throughout the theme.

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.


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

WordPress will modify the asset name of any identically named uploads. Make sure your retina assets are the named identically - with "@2x" appended.

Included Templates

Wonder has the following templates built into the theme and can be applied by creating and saving a page in WordPress.

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

Included Stylesheets

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

  • 1. style.css - Primary stylesheet
  • 2. assets/css/mobile.css - Responsive stylesheet
  • 3. assets/css/framework.css - Framework stylesheet

Included Javascript

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

  • 1. jPlayer - www.jplayer.org
  • 2. Isotope - www.isotope.metafizzy.co
  • 3. Flexslider - www.woothemes.com/flexslider
  • 4. View.js - www.finegoodsmarket.com/view