VineForge Documentation

WordPress is a simple and easy-to-use Content Management System (CMS) that allows you to build pages and create posts. VineForge extends the functionality of WordPress by using custom content blocks, which are stackable design modules that make it easy to build out pages without having to worry about design or code. VineForge also comes with Commerce7 integrated right out of the box. The following instructions will help guide you in using WordPress and the custom features of VineForge.

WordPress Basics

Logging in to WordPress

To edit your site in WordPress, first open a new browser tab and go to yoursite.com/wp-admin. Enter your username and password, and click Log In.

Once logged in, you will be greeted with the WordPress Dashboard, and on the left side, you will see the main menu. Click on the Pages menu item, and you will see that your site comes pre-built with the following pages:

  • Home
  • About
  • Shop
  • Club
  • Visit
  • Blog
  • Contact
  • Downloads
  • Cart
  • Checkout
  • Collection
  • Product
  • Profile
  • Reservation
  • FAQ
  • Privacy Policy
  • Terms & Conditions

Some pages are custom VineForge pages, and some are strictly necessary for the Commerce7 integration. You can edit, add, or remove pages as needed. However, do not remove pages labeled as “Commerce7 Dynamic Route,” as those are necessary for Commerce7.

Creating and Editing Pages

  • To edit an existing page, go to Pages in the left menu and click on a page.
  • To create a new page, hover over Pages in the left menu and click Add Page.
  • When creating new page or post, there will be a Publish box in the right hand column with details regarding the status of your page. You have the option to Save Draft and Preview before publishing the page. If you are ready to publish the page, click Publish.
  • After a page is published, you can always make changes to it, and once you’re ready to publish those changes, click Update.

Creating and Editing Posts

Blog posts can be used for any kind of piece of long form text, such a articles, news updates, or recipes, for example.

  • To add a blog post, go to Posts > Add Post.
  • Here, you will see a large content editor where you can add text, images, links, etc.
  • In the Featured Image box on the right, click Set featured image and choose a featured image from the Media Library.
  • Click Publish or Update when you are ready to save your changes.

Media Library

The Media Library stores all of your files, such as images, videos, PDFs, etc. You can either upload your assets here, or you can upload them while editing pages and posts when prompted with an upload button. Either way, all your assets will always end up here. Upload to the Media Library with a simple drag and drop from your desktop.

Menus

To edit your website’s menus:

  • Go to Appearance > Menus.
  • Find Select a menu to edit and choose which menu you want to edit from the dropdown (Header or Footer).
  • In the Add menu items section, find which page(s) you want to add to your menu.
  • Click the corresponding checkbox(es) and then click Add to Menu.
  • In the Menu Structure section, you can drag and drop each menu item to change the order. You can even drag items to be indented, which will create a dropdown menu on the website. Be sure to not indent items any further than one level.
  • When you are ready to save your changes, click Save Menu.

Templates

WordPress templates define the layout of a page, and can serve different functions depending on which one you choose. VineForge comes with the following templates:

  • Page Builder: Includes all available content blocks, and is the primary template used for building custom pages.
  • Default template: A simple page template that can be used for pages such as Privacy Policy, Terms & Conditions, FAQ, etc.
  • Commerce7: Used for all the necessary Commerce7 pages.
  • Shop: Used for the main Shop page, and pulls in products from Commerce7.
  • Club: Used for the Club signup page.
  • Visit: Used for the Visit page, and includes reservation bookings and events.
  • Downloads: Used for the Downloads page, which allows you to host downloadable assets from your site.
  • Blog: Used for the blog landing page.

Blocks

The VineForge template is equipped with an intuitive editing experience that allows you to build your site quickly and easily using stackable blocks. You can view a demo of all available blocks on this page.

  • To start using blocks, first create a custom page by going to Pages > Add Page.
  • In the Page Attributes box on the right, select Page Builder from the Template dropdown.
  • You will now see two sections: Top Content and Main Content. To add blocks to these sections, click the +Add Content button and choose which block you want to create.

Top Content

In the Top Content section, there are two blocks to choose from, and each one has different layout options. It is not always required to use blocks in this section, but it is recommended to not use more than one of these blocks per page.

  • Hero
  • Overview

Main Content

The Main Content section includes all other available blocks. These blocks are designed to be created and stacked in whichever order you like.

  • Intro
  • Intro With Grid Links
  • Features
  • Featured Products
  • Photo Collage
  • Banner
  • Image Slider
  • Staff
  • Contact
  • Form
  • Content With Image
  • Column Content
  • Image Gallery
  • Video
  • Video Gallery
  • Testimonials

Editing Blocks

Blocks can be easily edited, moved, and removed. If you hover your mouse cursor over the top area of a block, you will see the following options:

  • Drag and Drop: When your mouse cursor changes to the ✥ icon, you can drag and drop blocks to change their order.
  • Add Content: adds another block above the current block.
  • Duplicate: duplicates the current block.
  • Delete: deletes the block.
  • Collapse/expand arrow: used for collapsing and expanding the block so it takes up less vertical space. Collapsing a block is useful when changing the order of your blocks.

Global Settings

To edit the global settings of your site, go to Pages > Home and scroll down until you see the Global Settings section.

Theme

The Theme section allows you to change the look and feel of your site. There are twelve available themes — choose the one that fits your brand the best:

Logos

  • Header Logo: click the Add Image button and choose an image from the Media Library. The logo must be either an SVG or a transparent PNG.
  • Footer Logo: click the Add Image button and choose an image from the Media Library. The logo must be either an SVG or a transparent PNG.
  • Favicon: a small icon that represents a brand in web browser tabs, bookmarks, and search results. Click the Add Image button and choose an image from the Media Library. The logo must be a PNG sized at 32 x 32 pixels.
  • Touch Icon: Similar to the favicon, this icon is used to represent a brand when the site is bookmarked on mobile devices. Click the Add Image button and choose an image from the Media Library. The logo must be a PNG sized at 228 x 228 pixels.

Social Media

Add any links to your brand’s social media profiles in the respective fields. These links will appear as icons in the header and footer of your site.

Header

These options will allow you to customize the global header of your site.

  • Align: Select Left or Right to change the alignment of the header menu items.
  • Social Media: Select Hide to hide the social icons in the header menu. This can help save horizontal space when the site is viewed on desktop, especially if there are a large amount of items in the header menu.
  • Commerce7: If your site is not using Commerce7, select Hide to hide Commerce7 cart and account links in the header menu.

Newsletter Signup

The Newsletter Signup options will change the content in the newsletter signup section found above the footer, as well as in the newsletter popup.

  • Title: Give this section a catchy title.
  • Text: Include a brief description of what is included in the newsletter.
  • Type: Choose None to hide the newsletter signup. Choose Commerce7 if you are using Commerce7 signup form, and choose MailChimp if you are using a MailChimp signup form.
    • MailChimp Form Action: This field is only visible when Type is set to MailChimp. This will require locating the form action value in your MailChimp form embed code.
    • MailChimp Form ID: This field is only visible when Type is set to MailChimp. This will require locating the form ID in your MailChimp form embed code.
  • Popup: Choose Hide if you do not want to show the newsletter popup on your site.
  • Popup image: Click the Add Image button and either upload a new image or choose one from the Media Library. JPG is recommended.

Editing Your Site

Now that you know the basics of WordPress, templates, and blocks, and have updated your global settings, you can edit the rest of your site. The following sections will describe how to edit certain important pages and elements.

Home

The home page should serve as a gateway into the other pages on your site. Use the Page Builder template to create blocks that are engaging and encourage users to view the other pages. A recommended setup would be as follows:

  • Top Content
    • Hero
  • Main Content
    • Featured Wines
    • Intro With Grid Links
    • Features
    • Intro
    • Banner

Shop

  1. Go to Pages > Shop.
  2. In the Page Attributes section on the right, choose the Shop template in the Template dropdown.
  3. In the Collections section, click Add Collection.
  4. Edit the following fields:
    • Collection Slug: Add collection slug from Commerce7.
    • Columns: Choose how many columns you want for the layout.
    • Hide Collection Title: Set to Yes if you do not want to display the title of the collection.
    • Hide Product Teasers: Set to Yes if you do not want to display product teasers.
  5. If you wish to add additional collections, click Add Collection and repeat Step 4.

Club

  1. Go to Pages > Club.
  2. In Overview, populate all necessary content fields.
  3. The Benefits section is for listing out all the benefits club members will get by signing up for one of your clubs. click Add Benefit to add more club benefits and edit all necessary fields.
  4. The Options section is for listing out all the different club options that potential members can sign up for. Click the Add Option button to add more club options. Fill out the Title field and describe the details of the club option in the Text field. The WYSIWYG editor will allow you to create bulleted lists if needed.
  5. In Layout, choose either Grid or List to change how the club options display on the site. If you only have one club option, then choose List.
  6. Under Content Blocks, click +Add Content to add additional content below the club information, if needed.

Visit

  1. Go to Pages > Visit.
  2. Top Content: Click the +Add Content button, choose either a Hero or Overview block, and edit all necessary fields.
  3. Reservations: Click Add Reservation to add a Reservation block, and edit all necessary fields. The value for the Commerce7 Slug field can be found in your Commerce7 profile.
  4. Events: This section is for editing the intro content for the Events section on the website. Events can be be created in the Events menu item on the left side of WordPress.
  5. Main Content: Add any additional content blocks by clicking +Add Content.

Blog

The Blog page will automatically display blog posts from the Posts section, and order them from newest to oldest.

  • To change the layout of the main Blog page, go to Pages > Blog.
  • Under Layout, choose either Grid or List.
  • To create or edit blog posts, go to Posts > Add Post.

Events

Each event has their own post, similar to blog posts, and can be added by going to Events > Add Event. Events will automatically display on the Visit page.

  • Content editor: add the details of your event in the Content Editor.
  • Featured Image: Click Set featured image and add an image from the Media Library.
  • Event Details
    • Date: Set the date of the event.
    • Time: Set the time of the event.
    • Link (Optional): add a link to where users can find more information or purchase tickets to the event, and be sure to update the link text accordingly.
  • Click Publish or Update when you are ready to save your changes.

Downloads

The Downloads page allows you to host all of your downloadable brand assets, such as logos, product images, photography, and PDFs. Before making any changes to the Downloads page itself, you will first need to create your download items.

  1. To create a download item, go to Downloads > Add New Download. Each download item can consist of a list of several downloadable assets. For example, a download item called “2021 Pinot Noir” can have a list of downloadable assets with items such as “Bottle Shot” and “Tech Sheet.”
  2. Give the download item a title.
  3. Under the Files section, click Add Download File to add a downloadable file. Click Add File and upload a new file or choose one from the Media Library. Repeat as necessary for each asset.
  4. Click Publish or Update when you are ready to save your changes.
  5. When your download items are ready, go to Pages > Downloads and click Add Section.
  6. Give the section a title and then choose how many columns you want for the layout.
  7. Click Add Item, and then click the dropdown. You will now see all available downloads you created. Choose one, and then repeat by clicking Add Item.
  8. Click Publish or Update when you are ready to save your changes.

Forms

  • To use a form on a page, add the Form block.
  • Type: select either WPForms or Commerce7
    • WPForms Shortcode: If using a form from WPForms, add the shortcode for that form, which can be found by clicking on the WPForms menu item.
    • Commerce7 Form Slug: If using a Commerce7 form, add the Commerce7 slug for that form, which can be found in your Commerce7 account.

Questions?

If you have any questions or need assistance using VineForge or WordPress, feel free to reach out at robert@metalworkdigital.com.