Basil

Contents

1. Demo Import

2. Homepage Customization / Widgets

3. Basil Recipe Slider

4. Theme Customizations / Colors

5. Cooked / Cooked Pro Installation

6. Cooked / Cooked Pro Documentation

7. Translation & Text Changes

8. Common Questions

9. Product Customizations

10. Updating Themes via FTP

1. Demo Import

Before running the demo import, please be sure of the following:

  1. The Basil theme is installed and active.
  2. The Cooked and Cooked Pro plugins are installed and active.
  3. Enable the taxonomies you want to use from the Recipes > Settings panel. These include Categories, Cuisines, etc.
  4. Install and activate WooCommerce if you plan on including a store with your site.

Now, download the import file here: https://boxy.d.pr/sHbKAy

  1. From your admin page, go to Tools > Import and choose WordPress. Install the plugin if you haven't already.
  2. Click "Run Importer".
  3. Choose the "basil-wordpress.xml" file (from the link above).
  4. Click "Upload file and import".
  5. Choose a user to assign posts to. Probably yourself.
  6. Check the "Download and import file attachments" checkbox.
  7. Click "Submit".

Now give it time. This will take a while. Get up and make some coffee. If you come back and see errors, here's what you might find.

  1. Errors pertaining to failed imports for recipes or products might mean that you do not have WooCommerce or Cooked installed and active. I warned you!
  2. If you decided you DON'T need a store or even the recipes, you can ignore these warnings.

Some issues that can happen:

  1. The import just doesn't work. You can try the import again but DO NOT check the "Download and import file attachments" checkbox this time. None of the media will be imported, but the content should come in.
  2. The import worked, but no images came through. This is just an unfortunate result of the default WordPress Import tool being pretty bad. There's really nothing that can be done other than a full database migration from my demo site. I can do this for you but need to charge for my time. The cost for a DB migration (on fresh sites only) is $25. Shoot me a ticket if you would like this service.

2. Homepage Customization / Widgets

Creating / Editing the Homepage

The homepage is different than other pages because it supports a unique set of widgets built just for it. Follow this guide to create your homepage:

  1. Create a page, call it "Homepage" or whatever sounds good.
  2. Go to Settings > Reading and then choose "A static page" radio option.
  3. 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).

Now you have a homepage. You can add content to this page just like any other page, but using the Homepage Widgets, you can add some homepage-only content:

  1. Go to Appearance > Customize and make sure you're viewing your homepage.
  2. In the tabs on the left, click the Widgets tab.
  3. Click Homepage Content.
  4. Click the Add a Widget button.
  5. From the list, choose one of the "Homepage" labeled widgets. They include:


    1. Homepage - Blog Posts
    2. Homepage - Content Columns
    3. Homepage - Parallax
    4. Homepage - Recipes

Each widget has it's own unique properties to adjust, have fun! If you're looking for the Recipe Slider, that is something found in the page settings (you can add a recipe slider to any page). You can learn more about that from here: https://boxystudio.ticksy.com/article/13970/

3. Basil Recipe Slider

Every page can have a recipe slider at the top. When you're editing a page, you will see a block below the editor called Basil Page Settings. Follow this guide to create your slider:

  1. From the Top Content field, choose Recipe Slider.
  2. Give your slider a Title and Subheading. Both of these are optional!
  3. In the Add Recipes field, start typing the name of a recipe and it should pop up, just hit enter to choose it and keep typing to add more.
  4. Once all of your recipes are in there, update the page and check it out!


4. Theme Customizations / Colors

If you want to make small or large changes to the theme's look and/or functionality, you can do so from the Appearance > Customize screen. This is the WordPress Customizer.


Logo, Site Name, Etc.

The first tab in the customizer is the Site Identity tab. This is where you can upload and set your logo as well as the tiny favicon that shows up in the browser tab at the top. Just click Change Logo to change your logo, add your Site Title and Tagline, and set your favicon from the Change image button at the bottom.

Theme Settings

The second tab is the Theme Settings tab. This is where almost everything else is customized. Most of these items are straight-forward but here are a few tips:

General: Simple stuff here, you can set the site layout from Full width to Boxed, choose your button style and disable responsive css if needed.

Recipe Slider: All of the options here let you customize the global settings for what the recipe slider looks like. You will most likely only use this slider on the homepage or at the root of your recipes page, but it does affect ALL recipe sliders. Just keep that in mind.

Header: From here you can choose your header height and choose what you want to display in the upper right. You can hide/show a search box (recipes or WordPress), and hide/show the Cooked profile buttons. More on user profiles this in the Cooked article here.

Footer: Choose the content for your footer, both on the left side and the right.

Typography: You can set your default font size at the top, and then adjust for each heading type below that.

Pages & Posts: You can set a default Page/Post layout from here. Hide/show the page/post titles, hide/show the breadcrumbs, choose a featured image style, etc. These are the global settings, but you can adjust these for each page you create from the edit screen.

WooCommerce: If you have WooCommerce installed, you will see this tab with a few layout and color options. To get more WooCommerce color controls, install and activate the WooCommerce Colors add-on.

Socials: This is where you would add all of your social profile links. These will show up in the navigation bar or footer, if you choose to put them there.

Theme Colors

The Colors tab will let you adjust all of the different colors found throughout the theme. Lots of options, but all straight-forward. Just click and pick a new color or paste in a HEX code manually.

5. Cooked / Cooked Pro Installation

Both Cooked and Cooked Pro are prepackaged with Basil.

Installing Cooked & Cooked Pro

  1. After installing and activating the Basil theme, head over to Appearance > Install Plugins.
  2. From there you should see both the Cooked and Cooked Pro plugins.
  3. Follow the on-screen links to install and activate both plugins.

Cooked Pro License

With your Basil purchase, you also get a one-year Cooked Pro license! Here's what you need to do:

  1. Click on the following link to add Cooked Pro to your cart: http://cooked.pro/?edd_action=add_to_cart&download_id=23
  2. On the Checkout page, you should see a message at the top that asks you to verify your Basil purchase.
  3. Click the green Verify Basil Purchase with Envato button to verify your purchase.
  4. If you've purchased Basil within the last year, you will have a 100% discount code applied to your Cooked Pro purchase.
  5. Complete the purchase and a Cooked Pro license code will be emailed to you!
  6. Enter this license code into the Recipes > Settings > License tab and you're all set!

6. Cooked / Cooked Pro Documentation

All Cooked and Cooked Pro documentation can be found here:

https://docs.cooked.pro/

7. 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;
}

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

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