This document covers the installation, set up, and use of this theme and provides answers and solutions to common problems. We encourage you to first read this document thoroughly if you are experiencing any difficulties before contacting our support team.
If you have any questions that are beyond the scope of this document, feel free to ask us via our dedicated help center.
After downloading the theme package open the folder named “spaces-package”, un-zip the folder if it is not already so. Inside the theme package folder 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
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 spaces.zip.
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 Spaces folder into the: wp-content/themes folder.
Once uploaded, activate the theme by heading to the “Themes” menu in the WordPress Dashboard. Locate the Spaces theme and hit “Activate”.
Customizer Options Import
Located inside the
/customizer folder within the package contents, you'll find a spaces-export.dat file. This file contains the live demo's Theme Customizer options.
To import, first install and activate the Customizer Export/Import WordPress plugin, which is available as a free download. After you're successfully running the plugin, head to your Theme Customizer and look for the Export/Import section. Import the
spaces-export.dat file with the uploader within that section and hit "Import".
Find out more on installing and activating plugins.
Premium Theme Installation
If you're looking for WordPress theme installation and setup to look exactly like the live theme demo - then we're here to help. Fast & simple for only $49.
Our in-house team of professional developers will install the theme, upload the demo XML file, and setup your website exactly like the live demo. Frustration free. Complete your purchase of the Premium Installation service by clicking the link above and send us your deliverables.
- Domain name
- FTP information
- WordPress admin credentials
- Theme files or ThemeForest item purchase code
If you have a problem with the theme or found a bug, please let us know via our official 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.
We are happy to help with setup & bugs you may stumble upon though we cannot support CSS customizations.
Spaces 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
- Downloads Template (EDD)
- Fullwidth Downloads Template (EDD)
- EDD Default Template (EDD)
- EDD Form Template (EDD)
- EDD Profile Editor Template (EDD)
- Portfolio Default Template
- Portfolio Carousel Template
- Portfolio Fullscreen Template
- Portfolio Fullwidth Template
- Portfolio Grid Template
- Portfolio Grid Fullwidth Template
- Portfolio Grid Fullwidth Lightbox Template
- Portfolio Masonry Template
- Portfolio Masonry Fullwidth Template
- Portfolio Masonry Lightbox
- Portfolio Masonry Fullwidth Lightbox
- Post Archives Template
- RCP Form Template
- RCP Lost Password Template
- Site Map Template
- Team Members Template
- Under Construction Template
- Woo Template
Most page templates have a solid set of options to output different layouts.
You may elect to display the page title, display the fullwidth media, upload a fullwidth media image, add an image caption, select a page layout (Standard, Fullwidth & Right Sidebar) & adjust the text alignment (left, center & right).
The demo is currently running the
Default Portfolio Template as the site home. To set up the portfolio home page, simply create a page using the “Default 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).
The Default Portfolio template is unique in the fact that it will change according to the selected Portfolio Layout in the Styles & Layouts section of the Theme Customizer. Alternatively, you may use any of the portfolio templates as your home page.
Note that you may select the page in the Theme Customizer.
You may also elect to have your posts on your home page - if preferred. All you would need to do here is select the option from the Static Front Page section 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 & grid featured images!
The recommended size for featured images is
755x480px- though you may choose any height.
Beneath your standard post editor you will see a metabox labled Page Meta Settings. You may opt to display a fullwidth media section below the header by selecting the "Display Fullwidth Media" checkbox. Once selected, you may upload an image in the field directly below, labeled "Fullwidth Image URL".
The recommended fullwidth image size is
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.
Once you've selected your pictures, hit the Create a new gallery button on the bottom left. Lastly, modify the Gallery Settings on the right hand side of the modal. We suggest setting the "Link to" value to none and the "Type" to either tiled mosiac or square tiles. Now hit Insert Gallery.
Other Post Formats
This theme has built in functionality for audio, gallery, link, quote 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 requested content into their respective meta fields.
Spaces has a built in likes functionality, which allows your visitors to show their appreciation for your posts. To enable this, select it in the Theme Customizer > Blog Settings and the theme will display your like counts on the posts index.
Post Content Reveal
Spaces has a built in option to output a reveal area beneath the post content on single blog post pages. To enable this, select the "Enable Post Content Reveal" within the Blog Settings of the Theme Customizer.
About the Author
To display the About the Author block, enable it via the Theme Customizable > Blog Settings. This will output the Author's name, avatar and biography, which are customized within the Author's WordPress User Profile.
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 any of the portfolio templates. These templates will pull your published portfolio posts accordingly. Here's a list of the available templates:
- Portfolio Default
- Portfolio Carousel
- Portfolio Fullscreen
- Portfolio Fullwidth
- Portfolio Grid
- Portfolio Grid Fullwidth
- Portfolio Grid Fullwidth Lightbox
- Portfolio Grid Lightbox
- Portfolio Masonry
- Portfolio Masonry Fullwidth
- Portfolio Masonry Lightbox
- Portfolio Masonry Fullwidth Lightbox
You may use any or all of these templates.
If you are using the Portfolio Default template, you will notice that the Portfolio Layout value (which is edited via the Theme Customizer > Styles & Layouts section) will reflect it's changes. Also, note that if your Portfolio posts are set to the "Default" portfolio layout, then each post will also adapt to this layout selection.
Single Portfolio Layout
You may override each post's individual layout, by changing the Portfolio Layout within the Portfolio Settings metabox (located beneath the post editor). You may select one of the following layout options for each post:
- Gallery Grid
You may also deploy embedded videos & audio post formats within these portfolio layouts (except for the Fullscreen and Grid single post layouts).
Single Portfolio Fullscreen Layout
If you've selected the Fullscreen layout option, you will notice a new metabox appear beneath your Gallery Settings metabox. Here you may elect to use a fade or slide animation for your slider, display the pagination count, select to autoplay the slideshow and set the autoplay time (in milliseconds).
Portfolio Post Formats
In addition to different portfolio gallery laytous, Spaces is also capable of outputting audio and video portfolio posts (embedded - e.g. Vimeo & YouTube). To change the type of portfolio to display, click on the checkboxes under the "Portfolio Format" metabox, located beneath the Portfolio Categories, on the right hand side of your window.
You may mix or match video, audio and gallery posts on the same post.
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.
Portfolio Featured Images
We utilized images with a minimum width of 755px and any height you'd prefer - or even just use squared images.
Portfolio Post Creation
When uploading new posts, there's a couple of steps that you can do. There's countless ways to make your portfoio posts unique to what you need.
- Upload a featured image
- Select a portfolio layout (or leave it default)
- Select the type of portfolio (Gallery, Video, Audio)
- Opt to display the meta content
- Opt which meta to display (Date, Tags, Categories, Views, Client & URL)
- Add a client review
- Choose to enable lightbox functionality
- Upload your media
- Add a fullscreen image (to be used on Fullscreen and Fullwidth templates)
Located within the Theme Customizer you will find a Portfolio Settings section. Here you may elect to display Portfolio likes, enable the Portfolio Sharing modules and select to display the Single Portfolio Loop. In addition to those options, you can adjust the Portfolio Loop by selecting the order in which your posts appear on portfolio templates (Menu Sort Order, Most Recent or Most Popular).
Portfolio Post Meta
If you leave any of these fields blank or unchecked - no meta will be published. This way you can have different meta for each post.
Team Plugin Installation
Spaces requires the installation and activation of the Bean Team plugin in order to enable the team members functionality. Simply follow the instructions from the admin notification to install and activate the plugin.
Alternatively, you will find the plugins listed on the WP Dashboard > Appearance > "Install Plugins" admin page.
Upon a successful upload, you’ll be prompted to activate the plugin. You’ll then see a new "Team" tab in your WordPress Dashboard Sidebar. Creating team member posts is done exactly the same as standard posts.
Creating your Team Page
You need to first create a page using the Team Member template. This template will pull your published team member posts accordingly. It's really that easy.
You may add your team member's job role/position on the team, an external URL (to link to social or personal websites), and a quote that will display upon hovering the team member's profile block.
These meta options are located beneath the team post editor.
Activating the Sidebar
To activate the optional Hidden Sidebar Panel, simply head into the Theme Customizer and look for the Theme Settings section. You'll see the
Enable Hidden Sidebar checkbox there. Once selected, you will find a sidebar widget module load in your Dashboard Widgets page.
You may add as many widgets as you'd like to the Hidden Sidebar widget area, which is now viewable on the front end of your website.
- Flickr Photostream Widget
- Portfolio Widget
- Portfolio Menu Widget
- Portfolio Taxonomy Widget
- Video Embed Widget
Bean Plugin Widgets
The following widgets are provided with our compatible array of free plugins.
- Bean Dribbble Widget
- Bean Tweets Widget
- Bean Instagram Widget
- Bean Social Widget
- Bean 500px 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.
Accessing the Customizer
To access the live Theme Customizer, you may select the Customize button in the admin bar dropdown or select
"Customize" from the Dashboard menu. Note that you must be logged in as a site administrator in order to access the controls.
Name your website, set your Header Tagline (to appear below the logo) and elect a specific logo font/size/height/spacing for your text logo (you may alternatively upload your logo in General Settings.
Enable Retina.js, Bean Framework SEO metaboxes, the Hidden Sidebar Panel, the Header Search functionality and elect to load the custom WooCommerce styles.
Upload your logo, login-logo, favicon & apple touch icon, enter your Twitter username (for sharing modules) & add your Google Analytics script.
Select to display post pagination, post likes, post content reveal and the About the Author block.
Enable the portfolio loop to display on portfolio single views, choose to display portfolio sharing, set the number of portfolio posts to load initially on your portfolio templates, set your portfolio loading order (Menu Sort, Most Recent & Most Popular) & lastly - add a CSS3 filter to your portfolio posts (sepia, grayscale & high saturation).
Note that these filters only function in modern versions of browsers.
Choose to use the default contact form, set your contact form email address, customize the "Send" button text and add a Google Maps code to output on the Contact template.
7. 404 & Coming Soon
Customize your website’s 404 page by uploading a custom 404 image and modifying the text output, and add the date for the coming soon template.
Easily manipulate various CSS styles throughout the theme with the color pickers in this tab. Here you also set your Header Layout (standard or centered) and your Portfolio Layout (Standard, Fullscreen, Fullwidth, Carousel & Gallery Grid). Note that you may override this global option on each individual portfolio post. For example, you may have a Fullscreen slider on one post, and the Gallery Grid layout on another.
You may also select a global alternate theme style to load:
- Style 1 (Mono stylesheet)
- Style 2 (Dark stylesheet)
- Style 3 (Clean stylesheet)
We've built in a font customizer, in which you may choose between over 600 Google Fonts. You may set header, secondary header and body font styles.
Insert your own CSS into this block and it will be applied to your site. This overrides all default styles. Get help learning the art of CSS →
CSS entered in the Custom CSS editor will override all other theme stylesheets. Deleting the styles inputted here will allow the stylesheets display.
To install any of our free plugins, head over to our website and simply download the plugin files. Once you’ve successfully downloaded a 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.
Spaces is compatible with many of our custom developed WordPress Plugins. Head over to our website and download our free plugins now →
- Bean Portfolio
- Bean Shortcodes
- Bean Tweets
- Bean Instagram
- Bean Social
- Bean 500px
- Bean Dribbble
- Bean Pricing Tables
- Bean Registry
This theme is compatible with WooCommerce, a plugin ecosystem for setting up an online shop through your WordPress installation. Once you've downloaded and installed the WooCommerce plugin, you may select the "Enable WooCommerce" checkbox located in the Theme Customizer > Theme Settings. This will trigger the custom CSS and associated assets to load.
We reccommend that you use the included "Woo Template" to output your Account, Cart and Checkout pages.
Please refer to the WooCommerce support forum for any questions related to the functionality of the plugin.
This theme is also compatible with the popular Gravity Forms WordPress plugin. Upon initial installation of the Gravity Forms plugin, you need to first disable the default output css.
Restrict Content Pro
This theme is also compatible with the popular membership/subscription plugin, Restrict Content Pro. Note that this is a paid plugin and does not come packaged in the theme files.
Easy Digital Downloads
Spaces has solidly built in Easy Digital Downloads integration. Set up your online downloads shop within minutes!
To deploy the custom EDD styles, simply check the "Enable EDD" option from within the Theme Customizer > General Settings module. This will load all extra styles located in the inc/edd/style-edd.css stylesheet.
Once you've downloaded, installed and activated EDD, you can set various pages with included template files within Spaces. To set an EDD login form, simply create a blank page using the "EDD Login Form" template. For the checkout page, we reccommend using the "EDD Default" template.
By default, your downloads will appear on the "sitename.com/downloads" domain. You can however use one of our included templates (Downloads or Fullwidth Downloads) to output your downloads as a page, with any URL you'd like.
Mailbag integrates with both MailChimp and Campaign Monitor API’s to provide you with email subscription forms that can be placed into your posts or pages. Simply add your API key, choose a list to subscribe users to in the Mailbag settings, and add the shortcode anywhere you’d like.
We’ve extended Mailbag’s usability by including a Theme Customizer panel, which displays upon the plugin’s activation. You may modify the title & paragraph texts, which will automatically output to your single post view, along with the subscribe field.
Don’t forget to then select your email service (MailChimp or Campaign Monitor).
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.
HD Retina Assets
Spaces has particular @3x CSS located in mobile.css, which utilizes the images appended with @3x ex: firstname.lastname@example.org within the
/assets/images/retina folder on HiDPI screens.
If you'd like to add more @3x assets, simple save your image at 300% (we use Photoshop) and add it to the
/assets/images/retina folder. Then look for the following CSS at the bottom of mobile.css and add your CSS element with a background image pointing to your new image:
You may need to add the
background-sizeattribute to the element if you have not already added it to the standard retina query.
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: ex: email@example.com 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.
If you've requested and entered your theme license key, then you'll automatically be notified of any theme updates as we push them. This is the most effective method for getting updates pushed to you quickly and effienctly. Read more about theme licenses.
Check for Updates
To check your theme version, click the live changelog link below and check the version number at the top of the changelog.txt file:
Relay the changelog version at the top of that changelog.txt file with the version in your WordPress Dashboard > Appearance > Themes section to see if your theme files are up to date.
If you are in need of the update, download the current build from the location you purchased the theme from (either ThemeForest, Creative Market or via your account dashboard) to install the updated theme.
If you have an active license key applied to your theme, you will receive live update notifications to which allows one-click updates directly from your WordPress dashboard.
If you have not customized the original theme files then you may simply drop the updated theme folder contents into the theme folder on your server – which is located in wp-content/themes/spaces.
If you wish to upload the entire updated theme as a separate theme, ensure you:
- Rename the updated theme’s folder (different from the current theme)
- Drop the renamed theme folder into wp-content/themes
- Switch to the new theme via your WordPress Dashboard
If you choose to upload the whole theme and switch to it, you may lose your Theme Customizer data and will have to add those back in.
FTP Selective Updating
On the other hand, if you have customized some files in the core theme contents, you should consider selective updating, which simply means updating only the files that are pointed out in the theme’s changelog.
There are a couple programs out there that will allow you to compare versions of files, in order to catch customizations you may not remember. Some recommended programs are WinMerge (Windows), Kaleidoscope (OSX), and handy GitHub (OSX) & (Windows).
Overall, the safest and cleanest way to update your theme is to leave your currently modified theme on your server/site as is, rename the folder of the newly updated theme, upload the new theme, and modify that to match your original custom work. In this way, if something has gone wrong with the new version, you’re just a few clicks away from getting things back to how they originally were.
Please note that ThemeBeans is not responsible for content loss, database errors and such, which may happen to your WordPress install upon an incorrectly applied theme update.
Locating your Key
Below are the different locations you may purchase our themes and clarifying instructions on locating your license per each.
1. Purchased from ThemeBeans
You should have received an email purchase receipt with your theme license key attached. Be sure to check your spam mailbox, just in case the receipt was filtered on accident. That’s it!
2. Purchased from ThemeForest
Locate your item purchase code from ThemeForest and then complete the license request form. Once you’ve sent us your request, we’ll email you a license key for your verified theme purchase.
Please only submit one request per purchase code. It may take up to 24 hours to process your request and generate your license key.
Below is a graphic depicting how to find your item purchase code:
3. Purchased from Creative Market
Contact our support team with your Order ID (which is located on your purchased product’s invoice. Once again, after we’ve verified your purchase, we’ll email you a license key for your verified theme purchase. Below is a graphic depicting how to find your purchase order ID.
It is important to keep your license up to date in order to continue getting updates for your ThemeBeans WordPress theme and support for any issues you may encounter. Renewing your license grants you access to support and updates for another year, including all updates for bug fixes and feature introductions.
Once you've located your license key you may enter the key on the Theme License admin page, located on your
WP Dashboard > Appearance > Theme License. Once your license key is entered, hit the “Activate” button. Upon a successful activation you’ll see a green “Active” tag next to the input field.
If your key is not applied after hitting the Activate button, simply re-enter the key and try again. Sometimes it takes a few tries to properly establish a connection with the activation server.
Theme license key and update notification support only apply to our WordPress themes running our Bean Framework v2.2 and forward.
Bean Feature Setup
As a quick reference point, you may have noticed the
bean_feature_setup function at the top of your theme’s functions.php file. Within this function there are a few true/false statements – set to activate or deactivate various features and functionality within the theme.
We recommend that after installing the included child theme, activate it and then copy this function into your child functions.php file. This way you can turn off/on features from your the child - and your changes will never be overwritten.
The above is just an example of the
bean_feature_setupfucntion. You should grab the function from your downloaded theme package to copy into your child theme - DON'T use this one.
If you'd like to add another menu location to use in the theme, search for the
bean_theme_setup function in your theme's functions.php file and copy that whole function to your child theme.
bean_theme_setup function you'll see the standard register_nav_menus function. Simply create another copy/paste another line with a unique location identifiers and name. The code below creates two separate menus locations that are selectable via the
WP Dashboard > Appearance > Menu page.
Adding your menu to the theme.
Now that you've created the menu, you can use it in your theme's files. As always, we suggest utilizing a child theme to make file modifications.
The code below is an example of the wp_nav_menu function that displays your created navigation window. There is quite a few parameters associated with this function, so take a look at it's official reference to see all that you can do.
Add Image Sizes
If you'd like to add another image size for your WordPress instance to automatically size for, search for the
bean_theme_setup function in your theme's functions.php file and copy that whole function to your child theme (if you have not already done so).
You'll want to look for
add_image_size within the
bean_theme_setup function and copy/paste a new line in. Below is an example of the
Note that the first numeral value is the image's width and the second is the height. Read more about the parameters of the
add_image_size function on the WordPress reference site.
Using image_size in your theme.
It's pretty simple to utilize your new image size within your theme templates. Here's an example using the above
Note that you will need to regenerate your images if you're trying to create an image size for images already uploaded to your WordPress Media Library.
As part of our v2.0.5 Bean Framework update, we’ve added an option to completely whitelabel the theme framework. Set the
"whitelabel" value to
"true" within the
bean_feature_setup function and the default ThemeBeans favicon, logo and general references to ThemeBeans will be removed.
This is a great addition those developers out there who are customizing ThemeBeans themes for clients. There’s no need to dive in and “rip” out code.
Files & Sources
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.
- style.css primary stylesheet
- style.min.css minified primary stylesheet
- assets/css/mobile.css responsive stylesheet
- assets/css/mobile.min.css minified responsive stylesheet
- assets/styles/style-2/style-2.css dark stylesheet
- assets/styles/style-3/style-3.css clean stylesheet
- woocommerce/style-woo.css WooCommerce stylesheet
- jplayer www.jplayer.org
- responsivecarousel www.basilio.github.com/responsivecarousel
- flexslider www.woothemes.com/flexslider
- fitvids www.fitvidsjs.com
- retina www.retinajs.com
- meanmenu www.github.com/weare2ndfloor/meanMenu
- superslides www.github.com/nicinabox/superslides
- superfish www.users.tpg.com.au/j_birch/plugins/superfish/
- fancybox www.fancyapps.com
Template PSDs and image asset source files are included within the theme's
/sources folder. These files contain the necessary elements for customizing Spaces even further.
Our Focus is to design & craft the most proficient and trustworthy themes and plugins available in the WordPress eco-system.
Our Philisophy is that each product our team builds is thoughtfully executed with a simplistic and intuitive focus, down to the last line of code.
We strive to maintain a strong symbiotic relationship with the core WordPress CMS and our team diligently updates each theme and plugin to ensure seamless update transitions. All in all, we like to keep our products well oiled and running smoothly.
Our latest premium WordPress themes. Each theme in our collection is meticulously crafted to afford the best user experience possible, for novices & developers alike.