Setup

Installation and Setup for Togo WordPress Theme

This guide assumes you already have a working WordPress installation

Togo the doggy is here to guide you.

1/17
From admin of a fresh WP installation, click Appearance > Themes
From admin of a fresh WP installation, click Appearance > Themes
2/17
Click Add New
Click Add New
3/17
Click Upload Theme
4/17
Attach c9-togo.zip
Attach c9-togo.zip
5/17
Click on the Activate theme link
6/17
Click the Begin installing plugins link
Click the Begin installing plugins link
7/17
Select the top checkbox to bulk install your plugins
Select the top checkbox to bulk install your plugins and then click install in the dropdown
8/17
Select the top checkbox to bulk activate your plugins
Once complete, click return to plugins installer.
Select the top checkbox to bulk activate your plugins.
9/17
Click return to dashboard link. If you're redirected to WooCommerce, pick the classic installer.
Click return to dashboard link. If you’re redirected to WooCommerce, pick the classic installer.
10/17
After redirecting to WooCommerce, complete the simple install wizard
After redirecting to WooCommerce, complete the simple install wizard. We recommend the old install wizard so it doesn’t add excess plugins.
11/17
After WooCommerce finishes, Click Tools > Import & import XML sample content  (came with the c9-togo.zip file included in a folder called sample content)
After WooCommerce finishes, Click Tools > Import & import XML sample content
12/17
Click to Run the importer, or Install importer if you haven't already
Click to Run the importer, or Install importer if you haven’t already
13/17
Attach Togo xml file from the sample-content folder in the c9-togo.zip
Attach Togo xml file from the c9-togo-sample-content.zip linked in the header of this page
14/17
After importing, assign a default author for the pages/posts you imported
After importing, assign a default author for the pages/posts you imported
15/17
Configure WordPress admin settings
Configure WordPress admin settings
16/17
Set admin settings for visibility, labels, max image upload size and admin bar
Set admin settings for visibility, labels, max image upload size and admin bar. Each of these settings is explained in further detail here, as you may not need all of these.
17/17
Click on Appearance > Customize to edit logo and site design
Click on Appearance > Customize to edit logo and site design

Continue below to read more about customizing your online ordering store with plugins like a minimum order plugin, or you can skip to adding your logo, tagline, and social media information.

Customizing Your Togo WordPress Website

Time to make it “you” with content, your logo, and custom settings

Now that the theme is setup, what’s next? Customizations.

The last few steps to setting up your delivery and online ordering depend on your individual needs. We’ve recommended a few plugins to install after you’re done activating and setting up your theme including plugins for SEO, date/time for delivery selection, and a few other useful utilities for WordPress.

Additional WordPress Plugins

In our demo store, we installed a few additional plugins detailed below that you may find help you, that aren’t included in the theme by default typically.

WordPress Customizer Settings

There are a multitude of ways to customize the look and feel of your Togo site. The best place to start is from within the Customizer of your WordPress admin should you want to customize the fonts, logo, sidebars, and social links on your theme. You can also enter in custom CSS, and a tracking code for Google Analytics from within the customizer

From the WordPress Admin goto Appearance > Customize

Some of the available settings in the customizer. (Screenshots below) One important note is that some of the settings will not display in the customizer. To see your site when you’re done making changes, exit out of the customizer and view your site frontend link.

  • Site Identity – Edit your site logo, title, tagline, and site icon for the browser icon and bookmark image. We recommend a SVG images for logos and site icons
  • Branding – Use the default fonts or pick your own Google fonts
  • Posts – choose whether or not to display widgetized sidebars on Posts, Archive pages, and whether or not to display author information on blog posts
  • Social Media – enter links for social media accounts for your venue that show up in the site footer
  • Footer – Hide or show the site search in the footer, and enter a copyright message to display on the site on every page
  • Menus – Add the menu you imported during the setup process or make your own custom menus for the footer like we did in the site demo
  • Widgets – Assign sidebar widgets should you choose to use those on your blog posts page or archive page, and assign widgets to the universal site footer.
  • Homepage Settings – Set a custom homepage and a default blog posts page. We recommend setting up a static home page as we have in the Togo site demo.
  • WooCommerce – Customize settings related to WooCommerce including activating or deactivating the Site Notice, changing image thumbnail sizes, product catalog settings, or checkout settings
  • Additional CSS – drop in any custom CSS you’d like added to the site to change the design, layout, or for any style edits

The step by step walk through below will outline the exact settings you’ll need to get the demo site set up the same way we did.

Click on Appearance > Customize to edit logo and site design
Click on Appearance > Customize to edit logo and site design
Add a logo (We recommend an SVG file or 24bit PNG) a tagline, home title, and site icon.
Add a logo (SVG file or 24bit PNG) a tagline, home title, and site icon.
Change Togo site fonts from branding within the customizer
Change Togo site fonts from branding within the customizer
Change sidebar settings and author name display on posts
Change sidebar settings and author name display on posts
Add social links to your profiles for the footer icons
Add social links to your profiles for the footer icons
Hide or show the site search in footer and edit copyright message
Hide or show the site search in footer and edit copyright message
Assign site navigation and create navigation menus
Assign site navigation and create navigation menus
Assign top navigation to header for menu and order links
Assign top navigation after clicking “View Location”
Select footer widgets to add universal site footer content
Now it’s time to add footer widgets for universal site footer content
Adding navigation menu we imported for footer
Adding navigation menu we imported for footer
Adding a second menu to footer for about
Adding a second menu to footer for about Links
Add custom content to universal site footer
Add custom content to universal site footer such as hours of operation
Set homepage to custom homepage we imported
Set homepage to custom homepage we imported
Set the fixed site footer notice message or hide it completely
Adjust WooCOmmerce Settings + site footer notice message
Add custom CSS to change site design styles
Add custom CSS to change site design styles

Customizing with a child theme, client folder, or inline CSS

If you’re an advanced user or developer, you may want to make your own customizations to the theme and plugins. Togo was built using the C9 Starter Theme, a client folder boilerplate, and the C9 Blocks plugin.

For simple changes to colors or minor tweaks, you can utilize the Appearance > Customizer settings under Custom CSS. Togo also supports child themes.

Detailed documentation for working with our themes and plugins are included, with some additional helpful links below:

How to create and edit your menu with Togo

Here are three ways to create a new menu page.

Pro tip: Import the sample content from this page to see how to put the ordering menu together

Method #1 Begin with a page template.

Then replace images and text with your own menu blocks from WooCommerce products or using the block editor in WordPress

To use a pre-built landing page for your menu, click on the C9 Blocks feather icon and select “Page Templates”

Select the “Restaurant Style Menu” template

Start editing the menu links.

Method #2 Begin with section templates to build your menu page.

Then replace images and text with your own.

First, click on the COVERT NINE Blocks feather icon and select “Section Templates”

Scroll down and select a template.


Repeat this process to add as many section templates as you need on the page. Then, start editing!

Method #3 Take a design of your own and create it from blocks.

There are loads of block templates from which to choose, and sample content for the theme can also be imported from GettingitTogo.com’s demo website.

  • WooCommerce Product Blocks: A set of blocks that come with the WooCommerce plugin that you can sort by popular, category, tag, or select specific products to display as we have on the Togo Homepage.
  • C9 Grid: Arguably one of the most powerful, and complex responsive blocks with background video, image, and overlay support. All blocks should be placed in C9 Grid blocks so your site is responsive for mobile devices
  • C9 Heading: Heading blocks with the ability to override font sizes, styles, and a subheading powered by Bootstrap classes
  • C9 CTA Bar: A responsive call-to-action bar with a button that can link to an email sign up or buy page with alignwide and alignfull support
  • C9 Vertical Tabs: Vertical set of tabs that stack on mobile with full accessibility compliance from Bootstrap
  • C9 Horizontal Tabs: Horizontal tabs that scale down on mobile for clear and concise information on any screen size
  • C9 Toggles: Two styles of toggles for hiding information behind a click or a heading.
  • C9 Image Carousel: Responsive slider for images with captions and subheadings. Change the animation speed, auto paging, and the display of arrows and indicators
  • C9 Post Grid: Display a grid of posts, pages, or any custom post type in WordPress, with a wide range of filters and settings for exactly what you want to display in a responsive grid
  • C9 Carousel: A responsive slider carousel that can go inside of any C9 Grid element. Make a slider of logos, built in WordPress blocks like galleries, paragraphs, media & text, or videos
  • C9 Social Share: A simple set of social sharing buttons that utilize the FontAwesome 4.7 icon set. Buttons links are pre-configured for popular social networks.
  • + many more

Additional Documentation

WordPress Tutorials

Still stuck or need some guidance? We’re a Chicago-based team that coded and designed this entire site from scratch. Let us help you out!

%d bloggers like this: