Espresso

Contents

1. Common Questions

2. Theme Setup Guide

3. Plugin Installation

4. Creating Feature Blocks

5. Creating a Slider

6. Using the Menu Builder

7. Social APIs Setup Guide

8. Updating Visual Composer

9. Product Customizations

10. Translation & Text Changes

11. Updating Themes via FTP

1. Common Questions

1. How can I add an "unclickable" link to my menu?

Using the Appearance > Menus admin page, simply add a link from the Link panel on the left. Set the URL to "#" and give the title whatever name you'd like. Note that this will make the page jump to the top when clicked unless you add some custom Javascript to prevent that.

2. On mobile, I can't click on my parent dropdown items. How can I fix that?

Using the Appearance > Menus admin page, you need to create a new menu JUST for mobile devices. This menu should have "unclickable" items (see #1 above) as the dropdown parent items, and then regular menu items under those. Then you would need to assign this new menu to the Mobile Menu spot.

3. Why am I getting 404 (page not found) errors on my pages/posts?

Most likely this is a permalinks issue:

  1. Go to Settings > Permalinks and set them to something other than Default.
  2. Be sure your .htaccess file is writeable (777) and click Save. This should fix any permalink issues related to the theme.

4. I uploaded and activated the theme, but it says it's missing the stylesheet?

Unzip the file you got from ThemeForest first. It contains documentation, a license file, probably some other things and most importantly—the theme files that you need to upload. You need to upload this theme zip file, not the main zip file you downloaded from ThemeForest.

2. Theme Setup Guide

Now that you have the theme installed and active, it's time to decide how you want to set up the theme for the first time. There are two options:

  1. Leave it as is and setup the theme from scratch. This option is the easy one, you just need to create a homepage and then go through the Theme Options panel to setup the theme look & feel however you'd like. To create your homepage, please see the Creating a Homepage section below.
  2. Install the demo content. This option involves installing the XML demo content via the WordPress import tool and then going through the Theme Options panel to setup the theme look & feel however you'd like. To import the demo content, please see the Importing the Demo Content section below. Please note that you'll want to take a look through the Creating a Homepage section as well, particularly near the end where you choose your Front Page from the Settings > Reading panel.

Importing the Demo Content

This theme comes with a folder called XML Demo Content. It contains a number of importable files. Each one is named appropriately but some are different than others. To import this content, you need to:

  1. Go to Tools > Import and choose WordPress.
  2. Install and activate the WordPress Import plugin if it isn't there yet.
  3. You can now choose an import file to use from the WordPress Import folder

Here are the different content types and what you need to know about each:

Other types of import files:

Creating a Homepage / Page

The first thing you'll want to do is create yourself a homepage. One thing to note is that the homepage is just like any other page, you're just creating it in such a way that it looks more like a homepage than a regular page. This could include a slider at the top, some upcoming events and recent blog posts down the middle, and maybe some custom homepage widgets at the bottom. So to get started, let's take a look at all of the page settings that are available to use and how it works.

Each page you create includes a number of blocks you can choose or not choose to use. You can also set the order of each of these blocks throughout the pages you create. These blocks include:

  1. Slider — This block will always be at the top of the page if you choose to use it. If you have some Garnish Sliders or Slider Revolution sliders created, they will show up in the dropdown for you to choose. If you choose to use a Garnish slider, it will give you options for auto-cycling the slider.
  2. Page Content — This is the actual content of the page. You may or may not need to use this on the homepage. If you don't add anything to the content area, then this won't show up at all (including the page title and breadcrumbs). If you do add page content, you can choose to hide the title and/or breadcrumbs (a useful option for the homepage).
  3. Sidebar Layout — The sidebar will only show up if the Page Content also does. You can choose to show a sidebar (left or right) or to show no sidebar (and leave the page content full width). You can also choose which sidebar widget area to use on this particular page.
  4. Feature Blocks — A great piece of content for a homepage, the feature blocks can be 1, 2 or 3 blocks of content to a section on the page. You first need to create these feature blocks from the Feature Blocks > Add New menu option (be sure to set a featured image on each). Then, you'll see those feature blocks show up in the dropdowns in this section of the Page Settings panel.
  5. Recent Posts — This will display recent Posts from a category (or all categories) of your choosing. You can choose to display posts in groups of 3.
  6. Upcoming Events — This section will display upcoming events in two different style options. You can choose to display them similarly to the recent posts section in groups of 3. Or you can choose to display a custom Weekly Schedule view that will allow your visitors to view the upcoming events in a cool, ajax-powered schedule view (note that this section only shows up if you have The Events Calendar plugin installed).
  7. Parallax Zone — More of a visual feature, this will allow you to create a section of text that has an image background. The image will scroll slightly slower than the rest of the page, giving it a parallax effect. This section is recommended for blocks of text that are quick snippets of information.
  8. Page Widgets — Along with the ability to add widgets to a sidebar and the footer, you can add page widgets to individual pages. You can choose between 1, 2 and 3 columns and choose a widget area for each column.
  9. Recent Tweets — You can add this block only after you've filled out the appropriate fields in the Theme Options panel. With the Twitter API information, this section won't work

Once you have your homepage built out, you need to tell WordPress:

  1. Go to Settings > Reading and then choose "A static page" radio option.
  2. Then in the dropdowns below, select your homepage and blog posts page (If you have one created. If not, create a page called Blog and choose it here).

3. Plugin Installation

There are several plugins included with this theme and some that are supported:

INCLUDED PLUGINS

  1. Espresso Add-Ons: This will add the Sliders, Feature Blocks and Menu Builder functionality.
  2. Envira Gallery: This adds the awesome Envira gallery builder functionality.
  3. Slider Revolution: This adds this amazing Slider Revolution functionality to build out very dynamic sliders.
  4. Visual Composer: This adds the amazing drag & drop page builder functionality to your site.

SUPPORTED PLUGINS

  1. The Events Calendar: This adds all of the event-powered functionality to the theme. Please note, in order to get additional features like recurring events, special views, etc. you need to purchase and install Events Calendar Pro from Tribe.
  2. WooCommerce: This plugin will add powerful eCommerce functionality to your website.
  3. Contact Form 7 & Gravity Forms: These plugins will add awesome form building functionality to your site. Gravity Forms is far more powerful but it is a premium plugin that you would need to purchase separately at the Gravity Forms website.

To install and activate the plugins, you should see a message at the top of your WordPress Dashboard that asks you to do so, You can click on the buttons there to get started. If you don't see this banner at the top, just go to Appearance > Install Plugins to get to the same place. Just go through and install the plugins you need and activate them. It's that simple!

4. Creating Feature Blocks

Note: This doesn't include documentation on how to build a slider with the Slider Revolution plugin. Please refer to their documentation for questions about building those sliders.

Create your first Feature Block

  1. Go to Feature Block > Add New Block.
  2. Give your block a title. The title shows up in the block itself and in the dropdown for selecting which Feature Blocks to display.
  3. Give your block some text content, optionally add a button with some text, a URL and an icon (if desired).
  4. If you want an image to show up in your feature block, you'll need to click the "Set featured image" link on the right in the Featured Image panel. Choose/upload an image and click the "Set featured image" button in the popup window to set it.
  5. Publish your Feature Block!

Adding to a Page

Now that you have one or more feature block(s) created, you can very easily them to a page of your choice. Just edit or create a new page and scroll down below the page content window. You will see a big "Page Settings" panel there. Look for the section called "Feature Block Layout".

You can choose to display 1, 2, or 3 feature blocks. Just choose the option you want to use and then select a feature block for each column. Update/publish the page and you're all set!

5. Creating a Slider

Note: This doesn't include documentation on how to build a slider with the Slider Revolution plugin. Please refer to their documentation for questions about building those sliders.

Create a Slider

  1. Go to Sliders > Add New.
  2. Give your slider a title to refer to when choosing a slider.
  3. Click the arrow on the right side of the first slide to pop open the settings panel.
  4. Give the slide a title, some content and choose an image from your Media Library or upload a new one using the Select Image button on the right. You can then optionally add a custom button to the slide by filling out the bottom two fields.
  5. You can then add more slides by clicking the Add Slide button at the bottom.
  6. Publish/Update your slider.

Add a Slider to a Page

Now that you have a slider created, you can very easily add it to a page of your choice. Just edit or create a new page and scroll down below the page content window. You will see a big "Page Settings" panel there. The very first option is the slider you want to display on the page. Choose the slider you want to display and update your page. That's it!

6. Using the Menu Builder

Once you're ready to start creating some food item menus for your restaurant website, you can use Boxy's exclusive Menu Builder.


Create Some Labels (optional)

This is definitely optional, but highly recommended if you want to call out some of your items in specific ways (new, spicy, vegetarian, etc.).

  1. First, let's head on over to the Menu Builder > Menu Item Labels screen.
  2. From this screen you can start adding some item labels. Just fill out the information on the left side and choose a color for each label. The "Name" field is the only required field, but a color is also recommended for differentiation.

Create Some Labels (optional)

  1. Let's head on over to the Menu Builder > Add New.
  2. Very similar to building a slider, you simply give the menu a title and then start adding some menu items.
  3. Each menu item can have a title, subtitle, description, price, image and an item label. The ONLY required field is the title, but it is suggested that you make use of at least some of the other fields to give it a nice, descriptive look.
  4. Once you're done with the menu, just click Publish/Update to save it.

Displaying a Menu

You may have noticed that when you create a new menu, it includes a custom shortcode listed above the menu builder.

  1. Copy that shortcode snippet.
  2. Paste the shortcode anywhere that you want the menu to show up. You can paste it within columns (using Visual Composer) or just right on any page in between your content.
  3. That's it!

7. Social APIs Setup Guide

For Twitter, here's what you need to do:

  1. Go to https://dev.twitter.com/apps/new and log in, if necessary
  2. Supply the necessary required fields, accept the Terms of Service, and solve the CAPTCHA. Callback URL field may be left empty
  3. Submit the form
  4. On the next screen scroll down to Your access token section and click the Create my access token button
  5. Copy the following fields: Access token, Access token secret, Consumer key, Consumer secret to the below fields

And for Facebook, here are the steps:

  1. Click here to create a new Facebook app.
  2. Click the green + Create new app button at the top right.
  3. In the popup window, enter a Display Name and choose a Category. Then click Create App.
  4. Fill in the required captcha and click Submit.
  5. On the next page, click the Settings tab on the left.
  6. Click the + Add Platform button under the fields.
  7. Choose Website and enter the URL of the website where Cooked is installed. Click Save Changes.
  8. Enter the same URL in the App Domains field above. Click Save Changes again.
  9. Now you can copy and paste the App ID at the top into the field on this page.

8. Updating Visual Composer

You can update Visual Composer by following these steps:

  1. Deactivate Visual Composer.
  2. Delete Visual Composer completely (don't worry, you won't lose anything).
  3. Go to Appearance > Install Plugins.
  4. Reinstall Visual Composer from this list. This will download the most recent file I have in my repository. This isn't IMMEDIATELY updated when a new version is released. I usually update my repository within a few days of new versions being released.
  5. Go to Plugins and reactivate the Visual Composer version you just reinstalled.

And that should do it!

9. Product Customizations

Customizations are not covered under support. This includes code changes, design changes, customization guidance, etc. We also do not provide a customization service at this time. However, we've partnered with the awesome folks over at WP Kraken, who can help get you what you need for sure. Check em' out!

10. Translation & Text Changes

Our products come with a language file that needs to be translated in order for it to display a different language. The easiest way to translate it is to install a great plugin like Loco Translate and do it via the WordPress admin panel:  http://wordpress.org/plugins/loco-translate/


Full Language Translating

  1. Once you have Loco Translate installed, head over to the main Loco Translate screen by going to Loco Translate > [Plugins] or [Themes] (depending on what you're translating).
  2. Find the theme/plugin in the list and click it, then click the [+ New Language] link above the list.
  3. If you see a "Template Missing" message, simply click "Skip Template".
  4. Choose the language for this translation from the dropdown.
  5. IMPORTANT: Make sure you choose the third radio button (System) in the next section. (languages/plugins or languages/themes) before clicking Start Translating. If you do not, then your translation file will be gone if/when you update the theme or plugin.
  6. Now, on the next page, you can simply go through and add/edit your translations by clicking on each string and adding the translation in the bottom box.
  7. When you're done, simply click "Save".
  8. Be sure that WordPress is set to use the same language you've translated from Settings > General (look for the language dropdown at the bottom).

The POEdit Method

You can use software like POEdit (  http://www.poedit.net/download.php) to translate the *.po file that's included with the theme or plugin. Just remember to put your translated files into the appropriate folder listed above and remember to update your translations when there's an update.

More information on translation can be found here as well: http://codex.wordpress.org/Installing_WordPress_in_Your_Language


Simple Text Changes

Sometimes you just need to change some of the text, from English to English. In this case, you could either create a second "English" translation file following the same directions above, or better yet, just add some custom code to your theme's functions.php file or create a custom single-file plugin that does this for you. In the following example, this code will change the "Search..." text in a search bar to say "Find..." instead:

add_filter( 'gettext', 'my_custom_text_changes', 20, 3 );
function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Search...' :
            $translated_text = 'Find...';
        break;
    }
    return $translated_text;
}

As mentioned, you can open up your theme's functions.php file and add this code. Or a better method would be to create a simple single-file plugin that will allow you to add code like this without messing with the theme files (which might get overwritten when updating). The following is the code needed to create a very simple plugin. To create this yourself, go to your /wp-content/plugins/ folder on your server and add a file called my-custom-code.php (it can be named whatever you want). Then add the following code to that file:

<?php
/*
Plugin Name: My Awesome Customizations
*/
add_filter( 'gettext', 'my_custom_text_changes', 20, 3 );
function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Search...' :
            $translated_text = 'Find...';
        break;
    }
    return $translated_text;
}
?>

Save the file, and then go onto your WordPress admin's plugins page. Find the plugin called "My Awesome Customizations" and activate it. That's it!

Also, to add more than one translation, you can add more case/break statements. Here's what that would look like if you wanted to change a custom post type called "recipes" to "books" in several locations (this will require changes to probably many more "cases", but this is an example. A developer might be needed for additional work:

function my_custom_text_changes( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Recipe' :
            $translated_text = 'Book';
        break;
        case 'Recipes' :
            $translated_text = 'Books';
        break;
        case 'recipe' :
            $translated_text = 'book';
        break;
        case 'recipes' :
            $translated_text = 'books';
        break;
    }
    return $translated_text;
}

11. Updating Themes via FTP

Sometimes you need to install a theme manually. Here's the best and safest way to do that:

  1. Download the theme's zip file and unzip it.
  2. You should see the /theme/ folder (where theme is the name of the theme)
  3. Rename this folder to /theme-new/.
  4. Log in via FTP to your site and go to the /wp-content/themes/ directory.
  5. Upload the /theme-new/ folder into this directory.
  6. Now you should have both the /theme/ and /theme-new/ directories.
  7. Rename /theme/ to /theme-old/
  8. Rename /theme-new/ to /theme/
  9. Now test the site and make sure everything is working.
  10. When all is well, you can safely delete the /theme-old/ directory.

Keep in mind that "theme" in this case would be the name of the theme, so for an example with the Espresso theme: