Grille

The help guide for Grille WordPress theme by ThemeBeans.

Included Files

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

  • Demo XML
  • Help
  • Licensing
  • PSD
  • Sources
  • Theme
    • Grille
    • Grille.zip
    • Grille-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 grille.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 Grille folder into the: wp-content/themes folder.

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

WooCommerce Integration

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.

Once you're up and running, simply add your products via the Products dashboard link. These will output your shop items in a masonry layout, with the WooCommerce specific templates being utilized.

Please refer to the WooCommerce support forum for any questions related to the functionality of the plugin.

Easy Digital Downloads

This theme is compatible with Easy Digital Downloads, a plugin ecosystem for selling digital goods through your WordPress install. Once you've downloaded and installed the EDD Plugin, you may select the "Enable EDD" checkbox located in the Theme Customizer > Theme Settings. This will trigger the custom CSS and associated assets to load.

Once you're up and running, simply click the Add Download button on every post/page and insert your download link into the content area.

Please refer to the Easy Digital Downloads support forum for any questions related to the functionality of the plugin as a whole.

Gravity Forms Integration

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.

From your WP Dashboard, locate “Forms > Settings > General Settings”, and then find the “Output CSS” radio button option (right below the Support License Key text field). Set this variable to “No” so that the custom styling within the theme is pulled, instead of the default Gravity form styles.

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.

Dedicated Mobile Menu

Grille has a special dedicated mobile menu, labeled "Mobile Menu". If you add create and add menu items to this menu, then it will display in lieu of your default menu.

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

Blog Home Page

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!

Recommended size for featured images is 940px by 530px - though you may choose any height

Grid Featured Images

Beneath your standard post editor (on Blog Posts only) you will see a metabox intended for your grid featured image to be uploaded within. As a fallback, your post featured image will be used, but we do recommend using a grid featured image. The recommended grid featured image size is 600x740px and 600x600px (for that neat stacked look).

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.

Post Likes

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

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.

Blog Posts Filter

To display the posts filter, simply select the "Display Posts Filter" via the Theme Customizer > Blog Settings section and the post categories will populate in the header.

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

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.

Comments Text

On larger screens you will notice a text area next to the theme comments on your single post views. This text is customizable in the Theme Customizer > Blog Settings.

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

Grille is capable of displaying stacked images, slideshows, audio posts, and video portfolio posts (hosted and embedded - e.g. Vimeo & YouTube). 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 1320px width by any height.

Portfolio Featured Images

We utilized a combination of 600x740px and 600x600px images demo's featured images, but you could use 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.

  • Upload a featured image
  • Select the type of Portfolio (Gallery, Video, Audio)
  • Opt which meta to display (Date, Tags, Categories, Views)
  • 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.

Portfolio Post Meta

Add specific meta to each portfolio post via the Portfolio Meta Settings metabox, located beneath the Portfolio Post Editor. You may select the portfolio type (Gallery, Video, Audio), client, url, categories, tags, views & the publish date.

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.

Included Widgets

  • Dribbble Shots Widget
  • Flickr Photostream 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

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.

Custom Styles

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

Custom CSS

Insert your own CSS into the fullscreen CSS editing field by clicking the Custom CSS Editor button in the Theme Customizer header. This code will be applied to your website & will override all other default styles located throughout the theme.

Theme Settings

Site Title & Tagline:Name your website, set your 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.

Theme Settings: Enable Retina.js, Bean Framework SEO metaboxes, and elect to load the custom Easy Digital Downloads styles.

General Settings: Upload your logo, login-logo, favicon & apple touch icon, enter the footer alternate text, footer copyright text & add your Google Analytics script.

Background: Select a custom background color or upload an image.

Portfolio Settings:Enable the portfolio loop to display on portfolio single views, choose to display portfolio sharing, enter your associated Twitter handle, set the number of portfolio posts to load initially on your portfolio templates & lastly - add a CSS3 filter to your posts/portfolio (sepia, grayscale & high saturation).

Blog Settings: Select to display post pagination, post likes, tags and the post filter. Also set your post excerpt word count and customize the comment form text.

Contact Template: Set your contact form email address, elect to hide the required asterisks and customize the "Send" button text.

404 Error & Coming Soon: Customize your website’s 404 page, and coming soon template.

Theme Typography

We've built in a font customizer, in which you may choose between over 600 Google fonts. There are individual sliders for the sizes, line height and letter spacing for each of the headers and the body font 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.

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

Grille 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
  • Mixed Posts Template
  • Portfolio Template
  • Portfolio Filtered Template
  • Post Archives Template
  • Under Construction Template
  • Woo 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. Fitvids - www.fitvidsjs.com
  • 5. Retina.JS - www.retinajs.com