SteakHouse - Installation Manual

Usage Guide

InstallationCustomization

Introduction

Steak House serves up a platter of rich features to assist you in cooking up a spectacular food, restaurant or other eatery website. With rustic design and clear, understandable options, it serves as a tempting base to build your establishment's reputation on.

Introduction

Guide Structure

This installation guide details installing the theme and matching our demo content and layout, whether you are installing in an existing WordPress instance or starting a new website from scratch. Step-by-step instructions are provided for installation, so you'll have no trouble getting started.

This guide is meant to be read in order, as each step in the installation process will often rely on an earlier step being completed beforehand. Nevertheless, quick links are available in the right side of the screen to allow you to jump to each section instantly if needed.

The Theme's Structure

Steak House, like our other modern theme releases, utilizes a page-based layout. This means that the frontpage is created using content taken from pages, rather than widgets like our older themes. This makes installation easier than ever, and creation of new content requires little in the way of technical know-how.

In brief; a page is selected as a static front page and assigned the Frontpage page template. The content from this page is used to generate the header text on the frontpage, with the image coming from the theme options. Then, subpages are added to this base frontpage; each new subpage will have its content displayed underneath the previous subpage's content.

On the customization side of things, all theme options and features, such as fonts, colors, sidebar position, theme width, header images and more are instantly configurable via the WordPress Theme Customizer.

Select Your Preferred Installation Method

Before we begin with the installation, we must decide which installation method is best suited for our needs. There are two installation options available; Quickstart and Manual Installation. Don't let the names mislead you; both installation methods are very simple, but they serve different needs.

If you are only just starting your site, then the quickstart installation is the best option. This is a full WordPress installation that installs WordPress itself, the theme, plugins, configuration and demo content to match our live demo layout exactly. However, this install method is only possible if you are starting a new website; the quickstart cannot be installed in an existing WordPress installation.

If you have an existing WordPress installation with content that you do not want to lose, then you should use the manual installation guide; this method involves some additional steps compared to the quickstart, but you will still be able to match the demo layout without any stress.

Quickstart Installation Guide

The quickstart installation requires very little input from you, and once the files have been uploaded to your server the installation process takes less than 5 minutes. You will need a few things to get started, including FTP access and a database name, username and password. A complete step-by-step guide to the quickstart installation may be found in our documentation:

WordPress Quickstart Installation Guide

Manual Installation Guide

The page-based frontpage that is utilized by Steak House makes installing the theme and matching the demo layout extremely easy; the majority of the content is imported along with the demo content, but there are some additional steps required if you are to match the demo layout completely. Make sure to follow the steps in this section of the installation guide in order, as each step usually requires that the previous step has been completed already.

The manual installation process can be divided into 5 short steps:

  1. Install the theme package.
  2. Install required plugins.
  3. Import demo content.
  4. Assign static frontpage.
  5. Assign menus.

Preparing for Theme Installation

Before starting the installation, it is important to ensure that the process will run smoothly. If you should have existing widgets placed in any positions in your WordPress backend, then these should either be moved into the Inactive Widgets section, or deleted entirely if you no longer wish to use them, so that there are no widgets in any widget positions.

Inactive widgets

This step is necessary as the widget areas where your widgets are placed are exclusive to the theme; if you move from one theme to another the widgets will often be moved to a new widget area which can damage the overall theme aesthetic. For example, your current theme may only have a single widget position where all widgets are assigned. However, your new theme may have several widget positions; once the theme is installed and activated, the widgets from your old theme may be inadvertently assigned to the first position of the new theme, which may not coincide with your older layout and will damage the theme's aesthetics.

Download and Install the Theme

  1. Now that you're ready to install, the first thing to do is download and install the theme package. Click here to visit the Steak House download page. There are three files available:

    theme-download-options

    • gk_steakhouse.zip - This is the basic theme package for installing in the WordPress backend, so you should download this package for manual installation.
    • gk_steakhouse_quickstart.zip - This package is for users who are starting a new site and need to install everything, including WordPress. Since we are installing manually we can ignore this package.
    • gk_steakhouse_rest_files.zip - This package contains the source PSD files for the theme, and is available only to our Developer-level subscribers. This package is not needed to match our demo layout, so you can ignore it.

    Once the gk_steakhouse.zip package has completed downloading, you can begin the installation.

  2. Login to your WordPress backend and click on Appearance → Themes. in the left menu to be taken to the Themes section of WordPress.

    theme-selection-page

  3. Click on the blue Add New link at the top of the screen to open the Add Themes page.

    upload-theme

  4. Click on the blue Upload Theme link, located at the top of the screen as with the previous step.
  5. A dialogue box will open to allow you to select the theme package for upload. Click on the Choose File button and select your just-downloaded gk_steakhouse.zip file. Then, click the Install Now button to start the installation process.

    theme-install-selection

  6. Wait a few moments whilst WordPress installs the theme's files. Once the install is complete, you will be given three options; Live Preview, Activate, or Return to Themes Page. Click on Activate.

    theme-upload-complete

The theme is now installed, and we can move on to installing the plugins.

Install the Plugins

The plugins included with Steak House allow you to extend and diversify your content and provides additional features that cover the core elements a good bar and grill website needs. Some plugins are required to match the demo layout, whilst others are optional but provide extra features that many users will find useful.

The required plugins are as follows:

  • News Show Pro creates article previews and showcases. With full control over whether to show featured images, titles and text snippets with multiple display options and pagination, all your best articles can be reached instantly. This plugin is used in the Events & Blog section of the frontpage.
  • Widget Rules gives you control over which pages and posts a widget should appear on, so you can create specific widget instances to match all types of content.
  • GK Taxonomy Images makes it easy to add featured images to taxonomy pages such as category or tag listings.
  • GK Contact SteakHouse provides a simple solution for creating a contact form using a shortcode.
  • GK Reservation SteakHouse allows for the creation of a reservation form that emails reservation requests to a specified email.

There is also one recommended plugin:

  • Tabs can create tabbed areas that can display other widgets for truly flexible content. Combined with News Show Pro, you can highlight your latest or most popular posts in tabbed lists.

These plugins are not included with the theme files, but they may be installed with very little effort after theme installation.

  1. After installing and activating the theme a message will appear at the top of the WordPress backend that tells you which recommended or required plugins the theme uses.

    plugin-message

  2. Click on the Begin Installing Plugins text link that appears underneath the message; you will be taken to the Install Required Plugins screen.

    required-plugin-list

  3. On this screen there is a list of the recommended and required plugins; to the left of the Plugin title is a tickbox; click on this to add a tick to every plugin. Then, click on the Bulk Actions drop-down list and select Install, then click Apply.

    install-plugins

  4. Allow WordPress to run through the installation process for each plugin; you will see messages advising of each step of installation. Once it finishes, you will see a text link called Return to Required Plugins Installer; click on this link.
  5. Now that the plugins are installed, all that's left is to activate them. Like before, click on the tickbox next to the Plugin title to add a tick to every plugin, then select Activate in the Bulk Actions drop-down list and click Apply.
  6. WordPress will activate the plugins as needed after a few moments. Once done, you can proceed to the next step of installation.

Import the Demo Content

This is the most important step in this installation guide, as the demo content includes all the pages that will be used to create your frontpage and match it to the demo. There are two steps to this process; first, we need to install the tool that will let us import the demo content, the WordPress Importer. Then, we need to download the demo content and use the WordPress Importer to import it to our site.

Installing the WordPress Importer

  1. Log-in to your WordPress backend and click on Tools → Import in the left menu. A new screen will open with a list of options for systems that you can import posts into WordPress from, including Tumblr, LiveJournal and more.

    Selecting the WordPress importer tool in the menu

  2. The demo content we will be importing comes from a WordPress installation, so click on WordPress in the list of systems. A pop-up will open with an option to install the WordPress Importer.

    Installing the WordPress importer

  3. If you want a bit more information on what can be imported, take a moment to read through the description. Once done, or if you don't fancy reading, you can click the Install Now button to start the installation process.
  4. WordPress will run through the download and install process automatically, so relax for a moment and let it do its thing. Once the install is complete you will see a message and two text options that let you activate and run the newly-installed plugin, or go back to the list of system importers. We'll be importing our WordPress content soon, so click on Activate Plugin & Run Importer.

    Installing the WordPress importer

After a moment you will be taken to the Importer's start screen, ready for a file to be uploaded. However, we don't yet have the file to upload; we'll take care of that now.

Downloading and Importing the Content

All the demo content data is contained in what WordPress calls a WXR file, though it is more commonly called an XML file. We'll need to download this file and use the WordPress Importer to install it on our site.

  1. First, we need to download the WXR file for Steak House. The XML file may be found here. If you just click on the link you might encounter an issue; instead of downloading, your browser will instead open and display the file contents automatically. To get around this, we'll need to tell the browser that we want to download, rather than display the file:

    WXR files

    • In Safari - Right or control-click on the link and select ‘Download linked file’. This will download a file called steakhouse.xml.
    • In Chrome - Right-click on the link and select ‘Download link as…’. A dialogue box will open to specify where the download should be saved. The name will default to ‘steakhouse.xml’, so just leave this as default and save the file.
    • In Firefox - Right-click on the link and select ‘Save link as…’. A dialogue box will open where you can specify the save location; as with the other browsers the name will default to 'steakhouse.xml' so leave this as it is.
    • In Internet Explorer - Right-click on the link and choose 'Save Target as'. A dialogue box will open so you can decide where to download the file to. The file name will default to 'steakhouse.xml', so leave this as it is.
  2. Navigate back to your WordPress backend and open the WordPress Importer by clicking on Tools → Import → WordPress; if the importer is still open after the install then you may obviously skip this step!

  3. Click on Choose File and select the 'steakhouse.xml' file you just downloaded, then click on the Upload file and import button.

    Selecting the XML file to install

  4. After a few moments you will see the Assign Authors page. This area will let you decide who gets to be in charge of the content you are importing; you may import the original authors, create a new author, or assign the content to your existing users. There may only be one or two authors who may be imported, or there may be as many as ten, especially if the theme includes BuddyPress since each BuddyPress user in the demo content will be considered a separate author. One of the following options will need to be set for each author and their content that is to be imported:

    • If the option is left blank - The original creator's username will be imported into your WordPress, and the imported content assigned to the imported username.
    • If a name is entered in the 'Create new user with login name' field - The name you wrote in the field will be used as the username for a new user, and the imported content will be assigned to this new user.
    • If a user is selected in the 'Assign posts to an existing user' drop-down list - Once the content is imported it will be assigned to the user that you selected in the drop-down box.
  5. If you are importing this content into a WordPress site with a lot of existing content, it may be prudent to import the original authors; this way it is much easier to find the demo content once the import is complete.

    A list of user accounts available from the demo content

  6. Now click on the Download and import file attachments tick-box; if selected then the demo placeholder images and other media from the demo will be imported along with the posts.

  7. Finally, click on the Submit button to start the importing process. Wait for the process to complete; once done, you will see a confirmation message letting you know everything is finished.

    Import of demo content complete

The demo content is now ready to go, so there are only two steps left; assign the frontpage, and assign the menus.

Set the Frontpage Template

All that's left is to tell WordPress which page to display as the homepage; once this is set as the theme's frontpage, the theme's code will automatically populate the content from the subpages and your site will then match the demo layout. To set the Frontpage template:

  1. Log-in to your WordPress backend and open the Theme Customizer by clicking on Appearance → Customize in the left menu.

    Theme Customizer

  2. Click on the Static Front Page option in the left menu of the Theme Customizer to expand the options.

    Use static frontpage

  3. Under the Front page displays option, click on the radial button for A static page. Two more options will appear; Front page and Posts page.
  4. In the drop-down list for the Front page option, select Frontpage.

    Use static frontpage

  5. Click the Save & Publish button at the top of the left menu bar to save the changes.

Assign the Menus

There are three menus in Steak House; the main menu to the left of the logo in the top bar, the main menu to the right of the logo in the top bar, and the footer menu at the bottom of each page.

Available Menus

Like with the Frontpage content, the menus were already imported along with the demo content, so we will just need to assign them to their respective positions in the WordPress Customizer. To do so:

  1. Open your WordPress dashboard and click on Appearance → Customize in the left menu to open the WordPress Customizer.

  2. You will see a Navigation tab in the left sidebar of the customizer, where the options are. Click on this tab to expand its options; you'll see the option to assign the menus in each available menu position.

    Assign Menus

  3. You can see that there are three available menu locations; Main Menu Left, Main Menu Right, and Footer Navigation. Click on the drop-down box under each menu to be given a selection of available menus that can be assigned to the position. Each menu has a similar name to the position it occupies, so assign the Main Menu Left menu to the Main Menu Left position, the Main Menu Right menu to the Main Menu Right position, and the Footer Navigation menu to the Footer Menu position.

    Menus Assigned

  4. Click on the Save & Publish button at the top of the sidebar to save the changes.

The menus are now assigned and your site should match the demo layout exactly, so you can get started with customizing it to your liking. For more information on how you can modify this content, read the Customization guide.

WPML Setup

Steakhouse offers a unique, elegant solution for restaurants and other eateries or dining blogs to get their message out to the world, and with full support for WPML, the ultimate multilingual solution for WordPress, you can offer a complete translated site for users across the globe. Want to see what a complete multilingual site based on Steakhouse looks like? Check out the public test site here.

What You'll Need

If you're serious about making your WordPress site with Steakhouse multilingual, you're going to need to purchase the WPML plugin. There are several levels of WPML available for purchase for varying budgets and requirements, but it is recommended that you go with full Multilingual CMS support, as this will allow you to translate widgets, custom fields and other strings, such as the site title that feature in Steakhouse. You'll need to install the main WPML package, along with the String Translation and Translation Management modules, which give you more complete control over your translation content.

Attention: In order for WPML to work correctly with Steakhouse, you should have a minimum of version 1.2.0 of Perfetta and version 3.1.8 of WPML installed; if you install versions earlier than this you may encounter bugs and issues that prevent full functionality of the plugin.

Getting Started

Before you start with WPML you will of course need to ensure that Steakhouse is installed and activated in your WordPress installation, and any widgets and the frontpage are properly setup. If you haven't done this yet there are several options for doing so which may be found in our complete installation guide for Steakhouse, available here.

Next, you'll need to install the main components of WPML; the main sitepress-multilingual-cms package and the additional wpml-string-translation and wpml-translation-management plugins.

Once the packages are installed, you will be able to finish configuration of the plugin by navigating to WPML → Languages in the left-menu of your WordPress dashboard; here you will be able to specify the base language of your website as well as any additional languages you intend to support. Bear in mind that you can amend the supported languages later, so don't worry if you forget to add all the ones you support. You may also enable the language switcher as a widget, but this is not recommended for Steakhouse; instead, set the language switcher to appear in the WP Menu. You will be able to choose from the available menu areas of the theme, so pick whichever suits you best; in the test version of the multilingual site the language switcher is placed in the Main Menu Left menu position.

Language switcher

Doing so will display the language switcher in the main menu that drops down once you scroll down the frontpage, on the left side of the logo.

Language switcher

For more in-depth information on the setup process and options, check out the WPML Getting Started Guide.

Translating your Content

If you want a completely translated site, then you will need to translate several areas: the site title and tagline, the menus, your posts and pages (especially the pages that make up the frontpage). For more information on content translation, read through the Full Guide available on the WPML website; we'll cover the essentials below.

Translating Posts or Pages

To translate a post, navigate to your post list by clicking on Posts → All Posts in the left menu of your WordPress dashboard, then click on the post you wish to translate. Once on the Edit Post screen, you will see a Language section in the sidebar:

Language section

Simply click on the Translate button to create a new blank translation of the post. Alternatively, you may tick the Duplicate tickbox and then click the Duplicate button that appears to copy all content, including images, to the translation version of the post for easy reference.

Language section

The same process applies to pages; simply select your page to translate from your page list (Pages → All Pages in the left-menu).

Translating Frontpage Pages

The frontpage of Steakhouse is based on pages; a page is assigned the frontpage template, and then subpages of this frontpage are used to create each section of the frontpage. These pages are not functionally different from other pages, and can be translated the same way. However, it is highly recommended that you use the Duplicate method mentioned above to create your second language's content. The reason for this is that the frontpage items frequently use custom HTML to achieve their structure and layout; if you manually create the page from scratch then you will need to manually write this custom HTML. Instead, by duplicating the original content you can make the changes in the language only, leaving the HTML tags and classes intact.

Translating Menus

You may offer multiple versions of your menus, with custom translations for each language. To do so, you will need to create a new menu by clicking on Appearance → Menus in your WordPress backend.

Once on the menu screen, click on Create a new menu to be taken to the Edit Menus screen. Here, you can choose your menu's language, and create the menu as normal. When assigning menus on the Manage Locations tab, you may click on the language switcher on the top bar to change which language's menus are being assigned:

Language backend switcher

Translating the Widgets

The basic Steakhouse layout does not use any widgets, however if you are intending to make use of them on your site then it is important to know how to translate widgets in general. Translating of any text widgets is achieved via the string translation option of WPML, which is used to translate all non-post, page or menu content.

Open the string translation area by clicking on WPML → String Translation in the left-menu. On this page, you will see content for any text widgets you have assigned:

widget translations

For example, if I have a text widget called Test Widget, and text in the body of the text widget reading:

"This is a test widget"

Then in the list of strings available for translation there will be two items; a widget title string with the title text, and a widget body string with the body content. Simply click on the Translations text next to the string you wish to translate, and enter your translation.

More information on string translation is available on the WPML Website.

Using Translation Management

Translation Management is a powerful feature in WPML that allows site admins to monitor, assign and manage translations on their site, as well as add translations without affecting the base WordPress post editor. More details on this useful feature may be found here.

Translating Page Slugs

You may wish for the URLs of your translated content to display unique data separate from the original language's page slug. WPML offer a tutorial on this feature here.

Scanning Strings coming from a theme or plugin

Some themes or plugins have their own content strings that are output to the front or backend. In these cases, WPML can scan for strings from the theme or plugin so that you may offer translations if necessary. More details on performing this action may be found here.

More information

We hope that this guide has proven useful in getting your translations started, and if you should require further information regarding WPML or its add-ons, make sure to stop by the WPML website, where a wealth of information is available.