× New documentation and articles can be found here. Please have a look.

Bellevue Documentation

  1. Looking for guides and more documentation?

    1. Download Theme
    2. Articles: https://themovation.ticksy.com/articles/10115/
    3. Video tutorials http://bellevuetheme.com/tutorials/
    4. FAQ: http://bellevuetheme.com/faq/
    5. Helpful Plugins: http://bellevuetheme.com/add-ons-plugins/
    6. Documentation: http://docs.themovation.com/bellevue/
    7. Changelog: https://themeforest.net/item/bellevue-hotel-bed-breakfast-booking-theme/12482898#item-description__changelog
    8. If you are still having issues, please let us know, we can help. https://themovation.ticksy.com

v1.3

Last Update: Dec 5, 2016
View on ThemeForest

01 - Getting Started

To install this theme you must have a working version of WordPress. For instructions on how to install and setup WordPress please see the WordPress website. http://codex.wordpress.org/Installing_WordPress

  1. Installation

    To install the theme you must upload the theme file package and then activate it inside the WordPress Admin area. Sign in and download from ThemeForest. Choose 'Installable WordPress File Only'

    Themes can be uploaded in two ways:

    1. WordPress Upload: Once you are logged into your WordPress site navigate to Appearance > Themes > and click on the Install Themes tab. Next click on Upload and then Browse..., and select the zipped theme file. Click "Install Now" and the theme will be uploaded and installed.
    2. Manual FTP: Using an FTP program, upload only the unzipped theme folder (not the .zip file or all of the folders) into the /wp-content/themes/ folder on your website server.

    Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and click activate below your newly uploaded theme. Next, follow the setup instructions below.

    Having issues? Check out this help article from Envato.

  2. Setup

    Once activated, you will need to follow the on-screen instructions with regards to Required and Optional Plugins. It's highly recommended to install ALL required and optional plugins for the best user experience.

    1. If you missed the activation setup step, you can always check to see the current setup progress under Appearance > Theme Activation

  3. Demo Content

    This theme includes an activation steps which will walk you through the process of importing content, widget and forms. Look under Appearance / Theme Activatoin and follow the steps 1, 2 and 3.

    Included in this theme package are files of sample data that you can import to quickly and easily have your site look very similar to the demo site. Importing these files will add posts, pages, comments, custom fields, navigation menu content, categories, tags, widgets, and forms to your new website.

    Importing Content

    1. Locate on of the sample content file Bellevue-demo-content.xml, in the theme package. It's in a folder called demo content. There is one import that works for all demos. It's the same import for all.
    2. From the WordPress dashboard, go to Tools > Import and click WordPress.
    3. If you have not installed the Import Plugin yet, you will be prompted to do so.
    4. After you activate the plugin, select the demo content file from your theme package and follow the instructions.
    5. Maks sure to check checkbox 'Import Attachments​' during install process.

    Importing Widgets

    1. Locate the sample content file bellevue-demo-widget-content.wie, in the theme package. It's in a folder called demo content.
    2. From the WordPress dashboard, go to Tools > Widget Importer & Exporter and click Choose File, (find import .wie file) then click Import Widgets and follow the instructions.
    3. If you have not installed the Widget Importer & Exporter Plugin yet, you will need to do so. You can always go back to the setup process to install it under Appearance > Theme Activation. You can also find a direct link here.

    Importing Forms

    1. Locate the sample content file bellevue-formidable-custom-forms.xml, in the theme package. It's in a folder called demo content.
    2. From the WordPress dashboard, go to Formidable > Import / Export and click Choose File, (find import .xml file) then click Upload file and import.
    3. If you have not installed the Widget Importer & Exporter Plugin yet, you will need to do so. You can always go back to the setup process to install it under Appearance > Theme Activation. You can also find a direct link here.

02 - Theme Options

  1. Theme Options Panel

    The Theme Options panel is the best place to start for all your site wide settings. You will find this via Appearance > Theme Options.

    1. General Tab | Favicon, Logo with Retina Support, Navigation Margin Adjustment, Custom CSS, Google Analytics
    2. Colors Tab | Primary and Accent color pickers.
    3. Typography & Fonts | Body, Menu and Heading sizes, font family and colors. Add any Google Font here.

      Rustic / Chalet
      Google Font Name / Font Family : 'Josefin Sans', sans-serif
      Google Font URL : http://fonts.googleapis.com/css?family=Josefin+Sans:400,600
      (save changes)
      Headings Font > font-family > Josefin Sans
      Headings Font > font-weight > Bold
      (save changes)

      Lakeshore / Cabin
      Google Font Name / Font Family : 'Josefin Sans', sans-serif
      Google Font URL : http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700
      (save changes)
      Headings Font > font-family > Josefin Sans
      Headings Font > font-weight > Bold
      (save changes)

      Parksville / Countryside
      Google Font Name / Font Family : 'Arvo', serif
      Google Font URL : http://fonts.googleapis.com/css?family=Arvo:400
      (save changes)
      Headings Font > font-family > Arvo
      Headings Font > font-weight > Normal
      (save changes)

      Long Beach / Beachhouse
      Google Font Name / Font Family : 'Raleway', sans-serif
      Google Font URL : http://fonts.googleapis.com/css?family=Raleway:400,700,600
      (save changes)
      Headings Font > font-family > Raleway
      (save changes)

      Yaletown / Guesthouse
      Google Font Name / Font Family : 'Spinnaker', sans-serif
      Google Font URL : http://fonts.googleapis.com/css?family=Spinnaker
      (save changes)
      Headings Font > font-family > Spinnaker
      (save changes)

    4. Busienss Info | Add your Social Media Accounts, Payments Accented, and Contact Details.
    5. Site Layout | Sticky Header, Transparent Header, Full Width or Boxed Layout, Site Background Options (Boxed Layout Only), and Automatic Retina Creation option.
    6. Footer | Copyright, Credit, Footer Widgets, and Footer Logo
    7. Slider | Various Slider Options and Settings
    8. Header & Sidebar | General Settings for Blog, Search, 404 etc
    9. Rooms | Rooms Options (Rooms Home, Custom Permalink / slug, AddThis, Icons, Navigation Control.
    10. Top Navigation | Show / Hide Top Navigation, add custom text message and top mini icon blocks.

    Accent Button

    • Create your navigation Menu under Appearance > Menus
    • On the left side, click Links, and add a new menu item.
    • Go to the top and click Screen Options. Ensure the box is checked for CSS Classes.
    • In the menu item you want to have the accent border, click the down arrow next to Custom and insert the class 'th-accent'

    Automatic Retina Creation

    • (Appearance > Theme Options > Site Layout) - This option is disabled by default to reduce server load. You can safely enable this before you start uploading images. Essentially you are telling the theme to automatically make a retina version of every image you upload, if it's at a high enough resolution. (The exception is the logo which is handled separately) When you initially upload images via WordPress Media Library, you may notice a lag in processing time for Retina, but your visitors will not notice any additional performance lag.

    One-Page Site Option

    • In Bellevue, you have the option to setup your site as a traditional multi page site, or as a one-page site. In the one-page style, you can still include links to other sections as well, such as the blog.
    1. If you'd like your site to be One Page style, when building your site just add all of your meta boxes and content onto one page. In each meta box, on the Display tab you'll see a field in which to add an Anchor. You can put in any text you like, without spaces. For example: aboutus
    2. Once you have that in place, you can create your navigation Menu under Appearance > Menus
    3. On the left side, click Links, and input the URL to your page, including you anchor with a hashtag before it, ie: http://www.yourdomain.com/home/#aboutus
    4. The Link Text field is for the text you'd like to show up as the link, ie: About Us
    5. Once all your links are added, go to the top and click Screen Options. Ensure the box is checked for CSS Classes.
    6. In each of your one-page links, click the down arrow next to Custom and insert the class 'th-anchor'
    7. For the first link only (likely Home) insert a second class 'th-anchor-top' so the field should read 'th-anchor th-anchor-top'

03 - Content Blocks (aka Meta Boxes)

Content Blocks, also known as Meta Boxes are designed to help make adding and maintaining content very easy. There are many things you can do with Content blocks. You add, sort and edit them on the page edit screen.

  1. Meta Box Builder

    1. Every page has a Meta Box Builder Meta Box where you can do things like, adding, sorting and multiplying Meta Boxes.

    Sorting

    1. You can sort Content Blocks using the Sort Tab under the Meta Box Builder. Drag and Drop your order and update page to save changes.

    Quantity / Multiple Meta Boxes of the same type

    1. Use the Quantity tab under the Meta Box Builder to add multiple Meta Boxes of the same type.

    Show & Hide

    1. Check the display checkbox under the Display Tab on any Content Block to Show or Hide that Content from display. Content is saved but will be hidden from display.
    2. To permanently remove a Content Block from the Edit Screen, use the Meta Box Builder under the Meta Boxes tab. Careful! Make sure to uncheck the display checkbox(s) of the meta box youa are removing from the edit screen before permanently removing via Meta Box Builder 'Meta Boxes' tab..

    Other Options

    1. Most Content Blocks come with additional options to help you achieve the perfect look. Header, Background, Animation, Borders and Padding tabs are accessible below the display tab. Check em out.

    Where do I Add Content?

    The Short answer is under the Admin Menu > Bellevue.

    Use "Groups" under Admin Menu > Bellevue > Groups to group content you would like to display together.

    Also see: Adding Content to a Meta Box and Ordering Content for Display

    1. Accordions
      Admin Menu > Bellevue > Accordions
    2. Brands
      Admin Menu > Bellevue > Brands
    3. FAQs
      Admin Menu > Bellevue > FAQs
    4. Featured
      Admin Menu > Bellevue > Featured
    5. Pricing Plans
      Admin Menu > Bellevue > Pricing Plans
    6. Sliders
      Admin Menu > Bellevue > Sliders
    7. Teams
      Admin Menu > Bellevue > Teams
    8. Testimonials
      Admin Menu > Bellevue > Testimonials
    9. Thumbnail Sliders
      Admin Menu > Bellevue > Thumbnail Sliders
    10. Tours
      Admin Menu > Bellevue > Tours
    11. Service Blocks
      Admin Menu > Bellevue > Service Blocks

    Adding Content to a Meta Box

    Reference your (custom post type) content inside any of the meta boxes. Some of the meta boxes don't require a custom post type, you can add content directly inside the meta box.

    Example: Adding content to a Service Block Meta Box. You can add content by selecting individually or by groups. You can also change the order by setting here.

    Ordering Content for Display

    Content inside a meta box can be set to be output by date or by drag and drop order.

    Drag and Drop - you must have the 'Simple Page Ordering' plugin installed and activated for this option to work.

    Example: Drag and Drop content order of Service Block Custom Post Types.

    #1 - Click on 'Sort by Order'

    #2 - Drag and Drop your content (it will auto save)

    By Date - Content will be output by published date.

    Types

    Content blocks provide an easy way to add and management content. Changing the sort order is a breeze. Virtually every content block supports, a header, background, parallax, animation, padding, and borders in addition to the specific content layouts below.

    1. Accordion aka collapse boxes - Build collapsible content blocks easily. Supports title, full HTML, icons and buttons.
    2. Brands - Create an in-line list of logos. Supports links.
    3. Call to Action - Add a call to action statement with button. You can use a standard, ghost style, or call to action button.
    4. Content Editor - Add this meta box to make it so that you can control the output of the WordPress content editor in the same way as the other meta boxes: change the order, hide it, or add anchor text to link to the section for a one-page site.


    5. Conversion Form - Add a Formidable form easily to convert more leads.
    6. FAQ - Build a list of Frequently Ask Questions. Supports full HTML
    7. Features - Ideal for featuring a product or service with an image. Supports image, title, text and link.
    8. HTML - Full HTML with TinyMCE
    9. Map - Easily create a Google Map with Marker. Option to replace page header or use in-line with content.
    10. Master Slider - Ideal for adding a Master Slider Shortcode to the top of a page.
    11. Pricing Plans - Service or product pricing tables. Supports title, price, price per, pricing details, button text, button link, most popular switch.
    12. Rooms - Ideal for displaying a collection of rooms anywhere on a page.
    13. Service Block - Highlight your services with an icon, title and text. Includes two main styles: vertical and horizontal alignment. Horizontal supports 1 column, 2 column, and 3 column with an image as the middle column.
    14. Service Block Split - Service Block 50/50 split with an HTML content block that can be set to either left or right.
    15. Showcase - Ideal for detailed showcase of a product or service. Main image can be aligned left, right, or center. Supports featured image, title, full HTML, unlimited bullets below which include icon, title, text and link.
    16. Slider - Flexslider that supports, title, subtitle, button text, button link, image, image link, background, and form shortcode.
    17. Team - Build your team with this content block. Supports name, title, bio, photo, social icons and links.
    18. Testimonials - Supports name, title, quote and photo.
    19. Thumbnail Slider - Thumbnail carousel. Includes two main styles: horizontal and vertical. Supports images, title, subtitle, and link.
    20. Tour - Great for displaying features of a product or service. Main image can be aligned left, right, or center. Supports title, full HTML, button text, button link, and image.
    21. WP Booking System - Ideal for adding the WP Booking System Calendar to your pages.

        Use the metabox to add a new calendar to your page. I'll need a shortcode to display the calendar. You can generate your shortcode usint the short code generator in the content area and then copy and paste it back in to the calendar metabox.

        Here are some examples:

        • Display just the availability calendar (no form)
          [wpbs id="1" form="no-form" title="no" legend="yes" start="1" display="1" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="no" weeknumbers="no"]

        • Display the availability calendar and reservation form
          [wpbs id="1" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no"]

        • Support for WooCommerce
          Add in a wooproductid="458v" in to the shortcode where the number if the product ID for this calendar.
          [wpbs id="1" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no" wooproductid="458"]

04 - Rooms

Each room should be organized into a Room Type (or tag) but it's not required. First you add a rooms and then you display them as part of a group / collection, using the rooms template or rooms meta box. Organizing rooms into groups or collections makes it easier for you to display.

  1. Adding Rooms

    Add new rooms via Admin Menu > Rooms > Add New.

    1. Title
    2. Description (content editor / wysiwyg)
    3. Excerpt - If used, this will override what is displayed on the rooms collection hover
    4. Featured Image - Displayed as the thumbnail on the Rooms collection.
    5. Room Options Meta Box
    6. Show Room Type Icon
    7. Alternative Thunbmail Image
    8. Enable Lightbox on Rooms

  2. Creating a Rooms page

    A great and quick option to display a collection of rooms on a page.

    1. Add a new Page and choose 'Rooms - Standard' from the Template Dropdown inside the Page Attributes Meta Box.
    2. Configure Settings inside the 'Rooms Options' meta box.
    3. Show Rooms Filter Bar - if you want to allow visitors to sort by room type.
    4. Filter by Room Type - Will display rooms that belong to one or more Room Types that you choose.
    5. Rooms Per page
    6. Number of Columns to Show
    7. Order By - Date or Drag and Drop. (see how drag and drops works here)
    8. Save Changes

  3. Adding a Rooms meta box

    A great option if you want to display a few rooms in with other content on a page.

    1. This is part of the Meta Box Builder System. Use this link to find out about general meta box settings such as padding, borders etc.
    2. Show Rooms Filter Bar - if you want to allow visitors to sort by room type.
    3. Select individually - Choose specific rooms you wish to display.
    4. Select by Room Type (Group). - If you have organized your rooms in room types, then this option is very handy.
    5. Order By - Date or Drag and Drop. (see how drag and drops works here)
    6. Number of Columns to Show
    7. Save Changes

  4. Rooms General Settings

    Find general settings via Apperance > Theme Options > Rooms Tab.

    1. Rooms Home - Each Room Single Page may display a home button. This setting allows you to specify where that buttons goes.
    2. Anchor Link - If you would like to anchor down using the rooms home linke above, specicy your anchor here.
    3. Custom Slug - Set your custom permalink / slug here. Default is 'rooms'
    4. AddThis Enable
    5. Room Icons - Disable the icon from displaying on hover (rooms page and meta box)
    6. Navigation Control - Disable room prev / next buttons.

05 - Forms

Bellevue makes use of the Formidable plugin to handle all forms in the theme with a nice drag-and-drop interface. When setting up the theme you'll be prompted to install the plugin.

  1. Getting Setup

    1. We strongly recommend importing the forms shown in the theme demo if you'd like to include a similar form on your website, as it's the simplest way to get started.
    2. You can view this section of the documentation covering the import of the demo forms.
    3. If you have questions about settings in the plugin, there's a lot of information in the Formidable Knowledge Base. If you can't find the answer you're looking for, we welcome you to post in our support forum.

06 - Theme Shortcodes

25 Bootstrap 3 shortcodes will beautify your website

  1. How to use

    Use the shortcode generator tool that is accessible on the TinyMCE editor. Look for the 'Add Shortcode button'.

    1. Click on Add Shortcode
    2. Select a shortcode from the dropdown list
    3. Add your content and use the in-line help for support
    4. Click the Insert button to add the shortcode into your content

  2. List

    25 shortcodes based off of Bootstrap 3

    1. Accordion
    2. Alert
    3. Blockquote
    4. Button - Single
    5. Button Group
    6. Button Dropdown
    7. Carousel / Slider
    8. Code
    9. Column
    10. Drop Cap
    11. Glyphicons
    12. Google Map
    13. Highlighted Text
    14. Horizontal Description
    15. Image Shapes
    16. Jumbotron
    17. Label
    18. Lead Text
    19. Modals
    20. Page Header
    21. Panels
    22. Popovers
    23. Progress Bars
    24. Togglable Tabs
    25. Tooltips

Bellevue comes with a primary sidebar, and up to 4 footer widget areas.

  1. Organizing

    Use Widget Logic (a free plugin) to control where sidebars & widgets appear. Widget logic is lightweight, easy to use, and Free. All you need is one sidebar and you define where each widget shows up.

    1. Example: You have two widgets, a form widget and a simple text widget. You want the text widget to show on all sidebars, but you want the form widget to only show on the contact page.
    2. Solution: Add the text & form widgets to the primary sidebar and save. Make sure you have installed Widget Logic. Open up the Form Widget in the Primary Sidebar, under 'Widget logic:' enter in the following: is_page('contact'), where contact is the name or your contact page slug. Save.
    3. Widget logic has many filters using WP conditional logic. It's awesome. Here are some helpful links:
    4. Plugin Homepage
    5. Condition Tags (aka filters)

  2. Footer

    The Footer supports up to 4 widget columns. You can set the number under Appearance > Theme Options > Footer

  3. Show, Hide and Align

    You control if a sidebar diplsays on any page or on posts or the blog homepage.

    1. Pages: All pages have a 'Page Layout' meta box on the edit screen. This allows you to choose a Right, Left or No Sidebar setting.
    2. Blogs, Search, 404 and Archives Sidebar Settings are managed under Appearance > Theme Options > Header & Sidebar. Each group has it's own tab.

08 - Page Headers

  1. Pages

    All pages come with a Page Header Meta Box. You can add a title, subtext, button, background, parallax, animation and padding.

  2. Google Map

    Replacing the Page Header with a Google Map is done via the Map Meta Box (Common on the Contact Page). There is an option under the Map tab of the Map Meta Box, 'Replace Header with Map'.

  3. Blogs, Search, 404 and Archives

    Page Header settings for Blogs, Search, 404 and Archives are managed under Appearance > Theme Options > Header & Sidebar. Each group has it's own tab.

09 - The Blog

  1. Getting Started

    The easiest way to get started with a blog is to import the demo content. This will create a blog page and display your most recent posts. You can manage page header, sidebar or standard / masonry options for the blog here, Appearance > Theme Options > Header & Sidebar

  2. Setup a blog without demo content

    1. Create a page for your blog.
    2. Under Settings > Reading and set 'posts page' to the page you created for your blog.
    3. To managed page header, sidebar or standard / masonry options, go to Appearance > Theme Options > Header & Sidebar.

  3. Custom page headers for blog

    To use the Full Page Header options, like background, animation, padding, use the 'Standard' or 'Masonry Page Template' from the edit screen of your Blog Page, under the 'Page Attributes' Meta Box.

10 - Child Themes

We highly recommend using our Theme Features to get the customized look your are seeking, however as a developer or designer you may want to create a child theme to satisfy your apetite for complete control. In this case, we recommend using our sample Child Theme.

  1. Creating a Child Theme

    1. Go to Appearance > Themes > and click on 'Activate' under Bellevue Child Theme.
    2. Now you can add and fully customize your own PHP, CSS, JS, and other files you add under the themes/bellevue-child/ folder.
    3. To learn more about using a Child Theme please visit the WordPress.org Codex site.

11 - Multi Language Support

Bellevue can be easily translated in to your own language.

  1. Language Translation using Poedit (Free) by creating a .po file

    1. Download and install Poedit if you haven't done so already.
    2. Find Bellevue.pot file under Bellevue theme folder /lang (e.g. /wp-content/themes/bellevue/lang/bellevue.pot)
    3. Open the .pot file in Poedit.
    4. (See Image on the right) The box labeled (1) is the original message (in English) from the .pot file. The box labeled (2) is where you add your translation. Boxes labeled (3) and (4) are used for adding comments about the messages. These come in handy if you are working with a team of translators and would like to pass around ideas through the .po file.
    5. Go to File / Save as... to save your translations in a .po file. If you do not know how to name it, take a look at this page: Translating WordPress With Poedit. The name you should use is the combination of the room’s text domain (locate it inside codes) and a short string in parentheses next to a language’s name (e.g. French – Français (fr_FR)). For example, if the text domain is bellevue and the translation is French, just name the .po file bellevue-fr_FR.
    6. When you have finished translating, go to File → Save as… again to generate the .mo file. Or you can set your Poedit to always compile a .mo file when saving changes by clicking File / Preferences and on the Editor tab check the Automatically compile .mo file on save box.
    7. Open your wp-config.php file in a text editor and search for: define ('WPLANG', '');
    8. Edit this line according to the .mo file you've just created, e.g. define ('WPLANG', 'bellevue-fr_FR');
    9. Ref: Translating WordPress With Poedit

  2. Language Translation using WPML (Premium)

    1. Download and install WPML if you haven't done so already.
    2. Follow the steps outlined on the WPML site. Getting Started Guide

Themovation