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:
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.
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.
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”.
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
We utilized 400px width (non-retina) by any height for the demo's featured images.
When uploading new posts, there's a couple of steps that you can do.
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).
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.
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.
If you utilize our framework widget area generator, you can create alternative widget areas to replace areas on conditional pages.
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.
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: 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.
Easily manipulate various CSS elements throughout the theme with the color pickers in this tab.
Insert your own CSS into this block and it will be applied to your website. This overrides all default styles located throughout the theme.
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: firstname.lastname@example.org 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.
Wonder has the following templates built into the theme and can be applied by creating and saving a page in WordPress.
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.