Crate

The help guide for Crate WordPress theme by ThemeBeans.

Included Files

After downloading the theme package open the folder named “Crate Package (Version)” and un-zip the folder, if it is not already so. Inside the package you will find the following files:

  • Help
  • Licensing
  • PSD
  • Sources
  • Theme
    • crate
    • crate.zip
    • crate-child

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

Once uploaded, activate the theme by heading to the “Themes” menu in the WordPress Dashboard. Locate the Crate 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.

Latest Posts as Home

The first step is to set your home page as your latest posts in WordPress. To do this, head back into your WordPress Dashboard and from the sidebar links, hover on “General Settings” and click on “Reading”. Choose to have your front page displayed as “Latest Posts” and save.

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!

Other Post Formats

This theme has built in functionality for many other alternative post formats: audio,video, aside, quote, link and lightbox image formats. To use them, again you would select them from the Format meta box beneath the Publish box.

Alternate Post Meta

Crate has an additional meta sections which displays the author, comments, view count, reading time, word count, likes & tags. To display this alternate post meta simply select the Blog Settings section from the Theme Customizer and check the various checkboxes to select which meta you'd like to output.

Changing the Post Author

To change the post author - which is a default WordPress functionality - select the “Author” checkbox from the “Screen Options” tab, located at the top right of the WordPress editor.

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. You also have the option to make the post image appear in a randomized fashion via a check box below the uploader.

Included Widgets

  • Dribbble Shots Widget
  • Flickr Photostream Widget
  • Video Embed 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 500px 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

Site Title & Tagline: Set your site title and the tagline.

Theme Settings: Enable Retina.js, Bean Framework SEO metaboxes, sliding sidebar panel and enable the "Back to Top" feature.

General Settings: Upload your logo/login logo/favicon/apple touch icon, footer copyright text and even add your analytics script.

Blog Settings: Here you may choose to show post tags, post categories, likes, view count, reading time, and comment count. You can also easily customize the more tag value.

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

Customization

Background: Change up the theme's background by simply selecting an alternate color or uploading an image.

Custom Styles: Easily manipulate the theme accent color CSS elements throughout the theme with the color picker 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.

These colors will override all other theme stylesheets. Deleting the color inputted will allow the stylesheets display.

CSS3 Filter Options

Within the Custom Styles section of the Theme Customizer, you'll find a select field to set an optional CSS3 Filter value (grayscale, sepia & high saturation). If activated, your posts will default with the selected filter active, and upon hover reveal the actual color values.

Note that these filters only function in modern versions of browsers. In our live demo we are utilizing the Grayscale (Black & White) filter.

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.

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

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

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

  • Post Archives Template
  • Site Map Template
  • Default Template
  • Contact 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

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. Flexslider - www.woothemes.com/flexslider
  • 3. Fancybox - www.fancyapps.com/fancybox
  • 4. Fitvids - www.fitvidsjs.com
  • 5. Superfish.JS - www.users.tpg.com.au/j_birch/plugins/superfish