Getting StartedBack to Top

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.

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 wp-content/themes location.

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

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 Emma folder into the: wp-content/themes folder.

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

Customizer Options Import

Located inside the /customizer folder within the package contents, you'll find a designer-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 designer-export.dat file with the uploader and hit "Import".

Theme Setup Service

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

Get the advanced Theme Setup service →

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 Theme Setup service by clicking the link above and send us your deliverables.

Theme Support

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.

Initial SetupBack to Top

Home Template

To set up the Home 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 index page, and your home page (the page you just created).

Alternatively, you may select the page in the Theme Customizer.

The Home Template is unique in the fact that it draws up to five different sections of content, which are based on pages you create, simply by adding them via the Home Settings section of the Theme Customizer.

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.

Dedicated Mobile Menu

To enable your custom mobile menu, simply create a new menu, save, and assign it to the Mobile Navigation menu location.

The Blog

To create a new 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!

TemplatesBack to Top

Included Templates

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

Page Featured Images

Emma includes support for page featured images. You can add featured images via the Featured Image meta module, located below the Publish and Page Attributes metaboxes, on the right side of your page editor.

Template Settings

On each page you'll see a Template Settings metabox, located below the page content editor. This metabox includes the options to display the page title, enable the parallax animations, insert a header tagline and to select the page layout (Content Left, Content Right & Fullwidth).

Tagline Animation

We've added in a neat animated typing effect that can be used in the header tagline textarea. Below is an example of the animation code deployed throughout the Emma demo. Simply add this to the Header Tagline textarea within the "Template Settings" metabox (located beneath the page editor), and swap out the text, add more <b> elements and such.

You can work the code however preferred, as long as you have the correct <span> wrap, with <b> elements within it.

HomeBack to Top

Home Template

To set up the Home Template, simply create a page using the Portfolio Template and publish it. Don't forget to install and activate the Bean Portfolio plugin, which is available as a free download. Find out more on installing and activating plugins.

After installing the plugin and creating your page using the Portfolio Template, head to the WordPress Dashboard > General > Reading Settings admin page. 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 front page and posts page in the Theme Customizer.

BlogBack to Top

Blog Setup

You may elect to have your posts on your home page. All you need to do here is select the option from the "Static Front Page" section in the Theme Customizer after you've created a blank page that you may use for the blog.

To create a new 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 a featured image.

Post Formats

Emma sports both standard and audio post formats. To change your post format, select your desired format from the Format metabox, located beneath the Publish metabox to the right of your post editor.

Once you've selected a post format, you'll find additional metaboxs appear below your post editor. You will include the neccessary information for your post type and hit "Publish".

JetPack Galleries

Emma has a couple built-in compatibilties with some modules of the JetPack plugin. Once you've installed and signed in with a WordPress accout, you may turn on/off various elements.

Creating a Gallery

To create a gallery, click on the Add Media button above the page or post editor. Then click on Create Gallery, which is located at the top left. You may now select as many pictures as you'd like to be included in the tiled gallery.

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.

ContactBack to Top

Contact Template

To set up the Contact Template, simply create a page using the "Contact" template and publish it. Within the Theme Customizer you'll find a Contact section, which includes settings for the optional Google Map section and optional page links added to the content.

Adding link blocks to your contact page is super simple. Just head to the Theme Customizer, Contact, Options section and select the pages you'd like to link to.

Adding a Google Map

Emma utilizes the free Google Maps Builder WordPress plugin to add an optional fullscreen Google Map to the contact template. On top of that, we've added built-in integration with Snazzy Maps to create truly unique Google Map themes that look absolutely breathtaking.

Once you've installed and activated the plugin(s), simple create a map within the Google Maps dashboard menu item.

Then, simply head to the Theme Customizer > Contact > Google Map section and add the map's shortcode to the "Map Shortcode" input field (ex: [google_maps id="222"]).

The map shortcode is located to the right of the Edit Map page, above the "Publish" button.

You may also add your address, to be input in the center of the Google Map. Above is an example of an address added. Be sure to add the neccessary break element - <br/> - to the end of each line.

CustomizerBack to Top

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.

Customizer Options

1. Title

Set your site title and the tagline.

2. General

Within the General panel there are four sections. Located within the Analytics section is where you would add a custom analytics tracking script. Upload the logo, login logo, favicon, apple touch icon in the Branding section. Enable social sharing and add your Twitter username in the Social Sharing section, and lastly - customize the footer copyright and colophon text in the Footer section.

3. Blog

Enable the post views and category meta options and customize the WordPress more link value (ex: Continue Reading).

4. Portfolio

Enable the portfolio flyout, flyout sorting, pagniation, portfolio parallax, loop overlays and choose to display the loop categories. There's also an option to add a CSS3 Filter to the portfolio loop (grayscale, sepia & high saturation). Also set your single portfolio Call to Action settings by customizing the button text and the form output.

5. Contact

Set your contact form email address, add your Google Map code, map address and custom contact links.

Customizer Styles

1. Background

Change up the theme's background by selecting an alternate color.

2. Styles

Easily manipulate the theme accent color CSS elements throughout the theme with the color picker in this tab.

3. CSS3 Filter Options

Within the Portfolio > Options section of the Theme Customizer, you'll find a select field to set an optional Portfolio CSS3 Filter value (grayscale, sepia & high saturation). If activated, your portfolio template will default with the selected filter active.

Note that these filters only function in modern versions of browsers.

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

PluginsBack to Top

Plugin Installation

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.

ThemeBeans Plugins

Emma is compatible with many of our custom developed WordPress Plugins. Head over to our website and download our free plugins now →

Google Maps Builder

Google Maps Builder isn't just another Google Maps plugin. It's built from the ground up to be the easiest, most intuitive and fastest Google Maps plugin for WordPress. Visually build powerful customized Google Maps to use on your WordPress site quickly and easily without ever having to touch a bit of code.

Learn how to add a Google Map to the contact template →

Snazzy Maps

Snazzy Maps adds styles to your existing Google Maps with the click of a button. Use this plugin to style up your Google Maps as in the Emma theme demo.

WooCommerce

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 upload and install the included Emma Child: WordPress theme, located in the designer-package/theme folder This will trigger the custom CSS and associated assets to load.

We reccommend that you use the included "Woo Template" located within the Emma WooCommerce Child theme to output your Account, Cart and Checkout pages.

Once you're up and running, simply add your products via the Products dashboard link. These will output your shop items in the same layout as the portfolio template.

RetinaBack to Top

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.

Additionally, if the image size has changed, the background-size property of the associated class in /style.css must be modified to reflect those changes. You can find this in the Retina CSS section at the very bottom of the main stylesheet.

HD Retina Assets

Emma has particular @3x CSS located in mobile.css, which utilizes the images appended with @3x ex: sprite@3x.png 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-size attribute to the element if you have not already added it to the standard retina query.

Retina Logo

Easily retina-fy your logo simply by uploading an image with "@2x" appened to the file name. For example, upload an image named logo@2x.png (that is twice the size you would like it to be on the site) and it'll automatically have it's width divided by two.

UpdatingBack to Top

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:

View the Emma theme changelog →

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.

FTP Updating

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

If you wish to upload the entire updated theme as a separate theme, ensure you:

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

Recommended

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.

Theme LicenseBack to Top

It’s strongly recommended that you add your theme’s license key from within the License section of the WordPress Customizer. By adding your key, you will activate the remote theme updates and have access to our support team.

You can find your theme’s license key by checking your purchase receipt or signing in to your ThemeBeans account. If you purchased the theme from ThemeForest, you may request your license key here. You’ll need your ThemeForest purchase code handy.

Copy this key and navigate to the Customizer License Control located within the WordPress Dashboard > Customizer > Theme License section. Enter your license key and hit activate.

You'll see a "Verified" report upon a successful activation. If the license does not activate, please refresh and try again.

Please note that licenses are only given for Charmed Pro - not the free version.

What is the license key for?

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.

Without a valid theme license, you will be unable to get support and auto-update notifications will not function.

If your key is not activated after hitting the Activate button, simply refresh the Customizer and try again. Sometimes it takes a second try to properly establish a connection with the activation server.

What if my license key has expired?

After a year, license keys may be renewed. You will get a renewal notification on your WordPress dashboard if your license is about to expire, or has in fact expired.

DevelopersBack to Top

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.

Within the 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 add_image_size function.

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

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.