Contents

1. Cooked / Cooked Pro Documentation

2. Social APIs Setup Guide

3. Creating the Staff Page

4. Creating a Slider

5. Custom Fields

6. Theme Setup Guide

7. WooCommerce Setup Guide

8. Installation & Setup Guide

9. Using the Menu Builder

10. Creating a Slider

11. Updating Themes via FTP

12. Common Questions

13. Custom Calendars

14. Add-On: Payments with WooCommerce

15. Custom Time Slots

16. Shortcodes

17. Plugin Installation

18. Theme Setup Guide

19. Creating Feature Blocks

20. Admin Appointment Creation/Cancellation

21. Basil Recipe Slider

22. Homepage Customization / Widgets

23. Theme Customizations / Colors

24. Translation & Text Changes

25. Actions & Filters (developers)

26. Plugin Installation

27. Product Customizations

28. Updating Visual Composer

29. Add-On: Front-End Agents

30. Default Time Slots

31. Demo Import

32. Custom Sidebars

33. Add-On: Calendar Feeds

34. Cooked / Cooked Pro Installation

1. Cooked / Cooked Pro Documentation

All Cooked and Cooked Pro documentation can be found here:

https://docs.cooked.pro/

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

3. Creating the Staff Page

Adding a Staff Member Page with Groups

If you want to organize your staff members (People) by groups, you can follow the directions here:

  1. When you create a staff member, be sure to add them to a group by using the Groups taxonomy on to the right of the editor window.
  2. Then go to the Theme Options panel (Appearance > Theme Options) and then go to the General Styling tab. From there, scroll down and find the checkbox to "Split up Staff page into groups.":
  3. Then create a page called "Staff" (or whatever you'd like) and choose the "Staff" template:

Ordering the Groups

You can use the group slugs to order them. Edit your group names from the Staff > Groups page and change the slug names to have numbers in the order you want them in. So something like this:

1-first-group-name

2-second-group-name

3-last-group-name

Your users never see these slugs but it will make them display in the correct order on the Staff page.

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

5. Custom Fields

Booked allows you to create any number of Custom Fields to collect additional information when your customers are booking appointments.

Head over to the Appointments > Settings panel and then click on the Custom Fields tab. You can add custom fields to your custom calendars or just to the "Default" calendar. Each item can also be set as required if needed.

  1. Single Line Text: A simple text field for collecting text.
  2. Paragraph Text: A paragraph text field for collecting large chunks of text.
  3. Checkboxes/Radio Buttons: Add checkboxes and/or radio buttons as single or multiple options.
  4. Dropdown: Add a select dropdown to choose a single option.
  5. Text Content: Add custom text/html to your booking form.

6. 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. Feature Circles — A great piece of content for a homepage. You first need to create these feature circles from the Feature Circles > Add New menu option. Then, you'll see those feature circles show up in the dropdowns in this section of the Page Settings panel.
  3. 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).
  4. 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.
  5. Featured Sermon — This will allow you to display a featured sermon right on any page, complete with audio player.
  6. 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.
  7. 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).
  8. Event Countdown — This section will display an event of your choosing, complete with a countdown
  9. 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.
  10. 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
  11. 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.

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

7. WooCommerce Setup Guide

Installing WooCommerce

  1. First, you'll need to install WooCommerce on your site. To do this follow the instructions here: http://docs.woothemes.com/document/installing-uninstalling-woocommerce/
  2. Once WooCommerce is installed, it will ask if you want to install the pages. You should go ahead and do this as it cuts out a few minutes of work for you.
  3. Now you're ready to start adding products. Just follow the handy guides here: http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

WooCommerce Settings

This theme comes packaged with full WooCommerce support. However you may need to make a few tweaks to get it looking the way you'd want it to look:

  1. Products Per Page — By default WooCommerce shows the "Posts Per Page" for the product pages. However, if you have a full-width shop there are 8 products per row. The recipe page shows 3 products per row. This can make things look bad. To fix this, just go to Appearance > Customize and then to the WooCommerce tab to change this.
  2. Custom Sidebars — You'll probably want to put a custom WooCommerce sidebar on the shop templates. This theme doesn't come with many sidebars, however you can install the supported Custom Sidebars plugin to activate this feature.
    1. Install the Custom Sidebars plugin by downloading here: https://wordpress.org/plugins/custom-sidebars/ — or install it from the Plugins > Add New screen.
    2. Once you activate the plugin, simply go to the Appearance > Widgets page and add a custom sidebar and call it whatever you'd like. In this example, it's "WooCommerce Sidebar".
    3. Once the sidebar is created, open it up and click the "Edit" button in the lower right.
    4. Then, check the box that says "Advanced - Edit custom wrapper code".
    5. In those fields, you'll want to put the following:
    6. Now you have a working Custom Sidebar to use anywhere!
  3. Full, Right Sidebar, Left Sidebar WooCommerce Pages — It might be somewhat confusing to set this up, but it's actually quite simple. Every page is full-width by default. However, if you scroll down to the Boxy Page Builder, add the block called Page Content and edit the fields there, you can customize the page.

8. Installation & Setup Guide

Install the Booked Plugin

  1. First things first, go to Plugins > Add New.
  2. Upload the booked.zip plugin file and activate the Booked plugin.
  3. Yep, that's it! For more help with installing plugins, take a look at this quick guide.

Create a Profile Page (Registered Booking only)

If you would like your customers to be able to manage their own appointments and edit their profile, you'll want to create a profile page. Note: You can skip this if you're going to use Booked in "Guest Booking" mode.

  1. Create a page and give it a title. "Profile" works, but it can be whatever you want it to be.
  2. Add the [booked-profile] shortcode to the page so your users can log in to view their profile.
  3. You'll probably want to redirect your users to this page upon booking, so go into the Settings panel and choose "
  4. You're done!

WordPress Date/Time Settings

One of the first things you'll want to take care of is to setup your Date/Time settings within WordPress. These settings control some aspects of Booked. Head over to Settings > General to set your Timezone, Date Format, Time Format, and the Week Starts On settings. Booked uses all of them.


The Booked Settings Panel

Head on over to the Appointments > Settings page to familiarize yourself with the settings panel for Booked.

GENERAL SETTINGS

  1. Booking Type - You can choose between "Registered" and "Guest" booking. Registered allows your customers to book appointments under their own user account. The bonus here is that you can create a Profile page for them to manage their appointments (see above). Guest booking simply asks for a Name and Email Address to book an appointment. No user is created.
  2. Appointment Booking Redirect -There are three options here:
    1. No Redirect - This will simply reload the appointment list dynamically and leave them on the current page.
    2. Auto-Detect Profile Page - This will find the page you put the [booked-profile] shortcode on and redirect them there after booking. This only works with Registered booking.
    3. Choose a Specific Page - This allows you to specify any page your site to redirect to. Great for simple Thank You pages or anything else you might want to display after booking.
  3. Login Redirect - When using the [booked-login] anywhere else but the Profile page, you can tell Booked where to redirect them. Either back to the same page or some other page. This is useful if you're hiding the appointment booking calendar from non-logged in users and want to include a login form on the page.
  4. Custom Login Tab Content - If you want to include some text (HTML allowed) above the login form fields, you can do that by using this field. This text will only display up on the login tab.
  5. Time Slot Intervals - This allows you to set the intervals needed when creating your time slots. If your time slots are fairly detailed, then you would want to reduce this to something like 5 minutes. This will not affect anything except for the administrative forms you use to add new time slots.
  6. Appointment Buffer - If you want to prevent your customers from booking appointments too close to the current date/time, you can set an appointment buffer. For example, a 24-hour appointment buffer window would prevent users from booking appointments less than a day in advance.
  7. Prevent Appointments Before/After Date - These two date picker options will allow you to globally block out appointments either before a date, after a date, or both.
  8. Cancellation Buffer - If you want to prevent your customers from cancelling appointments too close to the current date/time, you can set the cancellation buffer. For example, a 24-hour buffer window would prevent users from cancelling appointments less than a day in advance.
  9. Appointment Limit - This option is used to limit the number of active appointments a user can book at a time. This does not include past appointments, only upcoming ones.
  10. New Appointment Default - By default appointments must be approved when customers request them. However, if you want them to be automatically approved, you can set this option to "Approve Immediately".
  11. Display Options - This series of checkboxes lets you control the front-end display. You can hide many of the items if needed.
  12. Other Options - A few more checkboxes for customization.
  13. Front-End Color Settings - These color pickers allow you to customize the look of your front-end calendars, profile, and appointment lists.

EMAIL NOTIFICATIONS

All emails can be turned off one by one by simply removing the content of the email in the fields. If nothing is there then no email is sent. All emails have special tokens you can use in place of actual content. This content is placed into the email when it gets sent. The tokens are listed above each email form.

Customer Emails

  1. Appointment Reminders - Set up your appointment reminder interval and then customize the content of the emails to be sent to administrators or booking agents.
  2. Registration - This is the email that is sent to your new users, welcoming them to your website.
  3. Appointment Confirmation - This email is sent to the user when they book an appointment as a confirmation that the appointment has been submitted.
  4. Appointment Approval - This is the email that is sent to the user when their appointment is approved.
  5. Appointment Cancellation - This is the email that is sent to the user if their appointment is cancelled by the website admin.

Administrative Emails

  1. Appointment Reminders - Set up your appointment reminder interval and then customize the content of the emails to be sent to administrators or booking agents.
  2. New Appointment Request - This email is sent to the admin user when a new appointment is created and is now in the pending list.
  3. Appointment Cancellation - This email is sent to the admin user when a customer cancels an appointment from their profile.

Email Settings

  1. Logo Image - Upload your own logo or email banner to customize the look of your notification emails.
  2. Default Notification Email - This is where emails will be sent if nothing is set on the individual calendar.

TIME SLOTS

Please see the time slots documentation for this part.

CUSTOM TIME SLOTS

Please see the custom time slots documentation for this part.

CUSTOM FIELDS

Please see the custom fields documentation for this part.

EXPORT

You can export your appointment data using this tab. Simply select from the available export options and then click the Export Appointments button to export them all as a CSV file.

SHORTCODES

This tab is a useful reference tab to see all of the available shortcodes, including the shortcodes to display your custom calendars. Please see the custom calendars documentation and/or the shortcodes documentation for more information.

9. 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!

10. 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!

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:


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

13. Custom Calendars

Booked allows you to create calendars for each service you offer. Each calendar can have its own default time slots, custom time slots and custom fields. This makes it incredibly powerful for business that offer different services on different days or times.

If you only offer a single service and do not need different calendars, you can stick with the "Default" calendar. Otherwise, you'll want to head over to the Appointments > Calendars section to add your calendars.

Once you have your calendars created, you can then head back to the Settings page and create time slots and custom fields for each calendar. Keep in mind two things:

  1. If you do not add calendar specific time slots or custom fields, that calendar will use the "Default" ones instead. If you do NOT want this to happen, you need to either remove the default time slots and fields, or create ones for the calendar.
  2. Each calendar can be assigned to either an Administrator or Booking Agent user. If assigned, then all notifications and calendar access will be specific to that user. Administrators can still see all of the calendars, but Booking Agents can only see calendars they are assigned to.

As an example regarding the first point:
If you have two services that share the same time slots but have different custom fields, you could create time slots under the "Default" calendar, and then leave the calendars blank. Add some custom fields to each calendar, and you're all set. They will both use the same time slot settings, but have different custom fields.

Displaying your calendars:
Each calendar uses the same [booked-calendar] shortcode, but you must add its ID as the "calendar" field. So for example, if your calendar ID is 123, your shortcode would look like this:

[booked-calendar calendar="123"]

More shortcode examples here: Shortcodes

14. Add-On: Payments with WooCommerce

After installing and activating the Payments with WooCommerce add-on for Booked, you may see a message to install WooCommerce (if you don't have it installed already). Be sure to install WooCommerce before using this plugin.

Creating a Product for Booked

To create a new product, simply go to Products > Add Product.

  1. Give this new product a name. For example, if you have different packages for your bookings, you could call the first one Bronze Package.
  2. A description isn't necessary so you can skip the content area.
  3. Go right to the Product Data section below the editor (if you don't see it, check the box from the Screen Options panel at the top right) and check the box next to "Booked Appointment Service" and then provide a price for this product:

  4. These are the only three (3) required pieces of information. However, you can add attributes and variable pricing if needed (see the Attributes/Variable Pricing section below).

Adding a Product to the Booking Form

Once you have a few products added (in this example we added a Bronze, Silver and Gold package), go the Appointments > Settings panel and head over to the Custom Fields tab there.

  1. Click the "+ Paid Service Selector" button to use the new product selection field:


  2. Give this option a name, such as "Choose a Booking Package":


  3. Click the "+ Booked Appointment Service" button to add a WooCommerce product as an option. Add all of the choices you need for this specific dropdown:


  4. Save the custom fields and you're ready for paid appointments!

Attributes/Variable Pricing

In some cases you might have products with options that change the pricing of the appointment. For this, you would use WooCommerce's attributes and variable pricing. Please read up on how to create these from here: http://docs.woothemes.com/document/variable-product/

What Happens Next?

  1. A visitor will book an appointment. During this process, they will choose a product (and options if available) and submit the form to book the appointment.
  2. The appointment will be saved as "Awaiting Payment". The time slot will be filled for now.
  3. If you have your appointments set to auto-approve, then it will be approved at this point.
  4. The customer will be taken directly to checkout to pay for the appointment.
  5. Once paid, the appointment will be marked as "Paid".
  6. If the customer leaves the checkout process at any point, they can come back to pay later from their Profile page. If they never pay, the appointment stays forever as Awaiting Payment, which bring us to ...

Appointment Cleanup Options

If you head over to Appointments > Payment Options, you will see the options to enable Auto-Cleanup and a selection of schedule choices. This is highly recommended. If appointments are chosen but not paid for, they will stay in your calendar forever unless you manually remove them. To avoid this, you can enable the auto-cleanup feature at a set interval of your choosing.

15. Custom Time Slots

Adding Custom Time Slots

  1. Go to the Booked Settings panel and then go to the Custom Time Slots tab.
  2. Click the "Add Date(s)" button.
  3. Choose the calendar you want to use (if applicable).
  4. Choose the Start Date.
  5. If this is a one day setting, you can leave the End Date blank. If this is a date range, choose the End Date.
  6. To add a single time slot, click the "+ Single Time Slot" button. To bulk add time slots, click the "+ Bulk Time Slots" button.
  7. For single time slots, you'll choose how many available appointments for this time slot and then you'll choose the start and end times. Alternatively, you can check the "All day" checkbox to make this an all day time slot.
  8. To add bulk time slots, choose how many available appointments there are, choose a start and end time for the entire span of your day, choose the time between each slot if you need a 10 minute break for example. Then choose the interval for the time slots to be entered.

Adding Vacation/Closed Dates

  1. Go to the Booked Settings panel and then go to the Custom Time Slots tab.
  2. Click the "Add Date(s)" button.
  3. Choose the calendar you want to use (if applicable).
  4. Choose the Start Date.
  5. If this is a one day setting, you can leave the End Date blank. If this is a date range, choose the End Date.
  6. Check the "Disable appointments" checkbox to make this a vacation/closed date.
  7. That's it

16. Shortcodes

There are a number of shortcodes included to display specific content anywhere on your website. Let's start with the booking calendar/list.


Booked Calendar:

The [booked-calendar] shortcode displays the booking calendar (or single day) for your users to book appointments.

[booked-calendar]

Style:
This attribute let's you choose between the default calendar view or a single day "list" view.
[booked-calendar style="list"]

Switcher:
This attribute let's you display the "switcher" to swith between calendars on the front-end:
[booked-calendar switcher="true"]

Year, Month, and/or Day:
Use these attributes to display a specific "year" and/or "month". You can also add a "day" attribute when using the "list" style (see above).
[booked-calendar year="2016" month="3" day="15"]

Calendar:
Use the "calendar" attribute to display a specific calendar (if you have any created). Otherwise, Booked will simply display the default calendar. You must use the Calendar's ID (you can find calendar-specific shortcodes on the Settings screen).
[booked-calendar calendar="2"]

Size:
This attribute let's you change the size from the default full size to the "small" size if needed. This is good for calendars that are displayed in narrow areas.
[booked-calendar size="small"]

Members Only:
This attribute will hide the appointment calendar from non-logged-in users. This is great to use in conjunction with the Profile shortcode (below) to display a login form on a page, and then when the user logs in it will show them the profile page as well as a booking calendar.
[booked-calendar members-only="true"]


Booked Profile:

[booked-profile]

Use this shortcode on the page you're using for the profile view. This only works with "Registered Booking".


Booked Login Form:

[booked-login]

By default, this login form will show up in the profile shortcode for non-logged-in users. However, if you want to display the login form somewhere else, you can use this shortcode to display it.


Booked Appointments:

[booked-appointments]

If the need arises, you can use this shortcode to display the currently logged in user's upcoming appointments in a simple list view. This will only show upcoming appointments and nothing else. Good for sidebar widgets, etc.

17. 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!

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

19. 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!

20. Admin Appointment Creation/Cancellation

Appointment Creation

Your customers can book their own appointments from the front-end, but if you need to add an appointment from the administrative side, you can create appointments quickly and easily using the appointment calendar on the backend.

  1. Go to the Appointments > Settings page.
  2. You will see a big calendar. Find and click on the day for which you want to book the appointment.
  3. Find the time slot and click the "New Appointment..." button.
  4. If this is a current customer, you can simply search and select them from the user dropdown.
  5. If this is a new customer, you can quickly add them as a new user by using the registration fields. The first name and email are the only required fields.
  6. When the appointment is booked, the user will get an email welcoming them to the site (with a username/password) as well as a appointment confirmation email. These emails can be customized/turned off from the Booked Settings panel.

Appointment Cancellation

To cancel someone's appointment, simply find the appointment on the calendar and click the X next to their name in the time slot from which you want to remove them.

21. 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!


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

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

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

25. Actions & Filters (developers)

Booked Front-End Filters

Booked Front-End Actions

Booked Admin Filters

Booked Admin Actions

26. Plugin Installation

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

INCLUDED PLUGINS

  1. Forgiven Add-Ons: This will add the Blur Sliders and Feature Circles functionality.
  2. Church Theme Content: This will add the church-related functionality like sermons, events, and staff members. To get recurring events, you will need this add-on: http://churchthemes.com/plugins/custom-recurring-events/
  3. Envira Gallery: This adds the awesome Envira gallery builder functionality.
  4. Slider Revolution: This adds this amazing Slider Revolution functionality to build out very dynamic sliders.
  5. Soliloquy Slider: This adds more awesome slider functionality to build simple sliders.
  6. Visual Composer: This adds the amazing drag & drop page builder functionality to your site.

SUPPORTED PLUGINS

  1. WooCommerce: This plugin will add powerful eCommerce functionality to your website.
  2. 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.
  3. 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.

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!

27. 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!

28. 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!

29. Add-On: Front-End Agents

After installing and activating the Front-End Agents add-on for Booked, everything is fairly automated. There are no settings (yet) to apply. It simply converts the Profile pages of logged in Booking Agents (or admins) into the front-end agent view.

<?php echo '<img src="'.CP_PLUGIN_URL.'/css/images/default_thumbnail.png">'; ?>

Create a Profile Page (if you don't have one already)

To create the profile page, simply create a page and call it Profile (or whatever you'd like) and then place the following shortcode on the page:

[booked-profile]

Visit the Profile Page

Now that you have a Profile page, visit this page as a logged in Booking Agent or Administrator. You will see three tabs:

  1. Upcoming Appointments — These are the appointments in your assigned calendars that are upcoming. You can view and/or cancel them from this tab.
  2. Pending Appointments — These are appointments that were submitted but not approved yet. You can view, approve, and/or cancel them from this tab.
  3. Appointment History — This is where all of your past appointments will end up. You can view and/or delete them from this tab.

30. Default Time Slots

Setting your default time slots is at the heart of the Booked plugin. Each day is given default time slots. For example, if your business is open Monday – Friday from 8:00am – 4:00pm and you have 2 employees available every hour, you would create 2 times slots every hour from 8–4, Monday – Friday.

BULK TIME SLOT ENTRY

To quickly add a bunch of time slots, you can use the Bulk time slot entry option:

  1. Click "Add..." at the top of the day you're adding time slots to.
  2. Switch to the "Bulk" tab.
  3. Add a "Title" for these time slots if needed (optional).
  4. For the "Start time...", select "8:00am".
  5. For the "End time...", select "4:00pm".
  6. Leave the next dropdown as "Every 1 hour" to set your time slots every hour.
  7. Choose "2 time slots" as the last option, and then click "Add".
  8. Your available time slots for that day will then be added and your customers can start booking appointments!

SINGLE TIME SLOT ENTRY

Alternatively, you can add a single time slot to any day/time:

  1. Click "Add..." at the top of the day you're adding time slots to.
  2. Add a "Title" for these time slots if needed (optional).
  3. Choose a "Start time" and "End time" and then select how many time slots you want to add.
  4. Click "Add" and that time slot entry will be added as a default for that day.

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

32. Custom Sidebars

You'll probably want to put a custom sidebar on some areas of your site. These areas may include the Homepage or WooCommerce pages. This theme doesn't come with many sidebars, however you can install the supported Custom Sidebars plugin to activate this feature.

Note: You must follow these instructions or your custom sidebars might not look right!

  1. Install the Custom Sidebars plugin by downloading here: https://wordpress.org/plugins/custom-sidebars/ — or install it from the Plugins > Add New screen.
  2. Once you activate the plugin, simply go to the Appearance > Widgets page and add a custom sidebar and call it whatever you'd like. In this example, it's "WooCommerce Sidebar".
  3. Once the sidebar is created, open it up and click the "Edit" button in the lower right.

  4. Then, check the box that says "Advanced - Edit custom wrapper code":

  5. In those fields, you'll want to put the following:
    1. Before Title: <h3>
    2. After Title: </h3>
    3. Before Widget: <div class="widget">
    4. After Widget: </div>
  6. Now you have a working Custom Sidebar to use anywhere!

33. Add-On: Calendar Feeds

After installing and activating the Calendar Feeds add-on for Booked, you will see a new sub-menu item called "Calendar Feeds" under the "Appointments" menu. Click on that to access the URLs you can use to setup the feeds in your favorite calendar application.


Google Calendar

When viewing your calendar, look on the left side of the screen for the "Other Calendars" section. To the right of the title is a small arrow icon. Click that, and then click the "Add by URL" option:

Copy and paste in the feed URL you've chosen from the Booked settings screen. Click the "Add Calendar" button and your appointments will start to automatically load in and sync whenever a new one is added via your website.


Apple Calendar

With the calendar application open, go to "File > New Calendar Subscription...":

Copy and paste in the feed URL you've chosen from the Booked settings screen. Click the "Subscribe" button and your appointments will start to automatically load in and sync whenever a new one is added via your website.


Outlook

From the Tools menu select Account Settings. Click on the Internet Calendars tab. Click on the New button. Type or paste the Calendar Feed URL and then click Add.

In the Subscription Options dialog box, you can optionally rename the calendar.

34. 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!