Gamos WordPress Theme Documentation

Gamos theme is a wedding invitation WordPress theme. It’s designed for everyone who wishes to add an elegant website for their magical moment.

Learn how you can get the most out of the theme with the Gamos WordPress theme documentation.

Gamos WordPress theme documentation, step 1: Theme installation

The theme can be installed through the WordPress Admin panel.

To install Gamos theme, please follow the next steps:

1. Extract the downloaded .zip file.
2. Install the parent theme tk-sites.zip located in the extracted folder. This theme will appear in admin panel as Themes Kingdom Sites.
3. Install theme gamos.zip located in the extracted folder.
4. Activate the Gamos theme.
5. After Gamos theme activation, the automatic setup will prompt you if you wish to setup and import the demo content.

A detailed video of theme installation is available here.

Note: If you get the error message “The package could not be installed. The theme is missing the style.css stylesheet.” please unpack the zip file that you have downloaded, and inside the unpacked zip file you will find two more files – a parent and child theme. Install parent theme first, and then child theme. Activate the child theme when the installation is done.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Gamos WordPress theme documentation are:

1. Jetpack
2. Gutenberg
3. Themes Kingdom Fonts

Jetpack plugin setup

Jetpack plugin is a required plugin. After installing the plugin, you will need to connect it with your site. When you click the Set up Jetpack button, you will need to log in to your WordPress.com account, or you’ll have to create a free Jetpack account. The official article that explains how to set up the Jetpack plugin is available here.

Gamos WordPress theme documentation, step 2: Theme features – explained

Besides of standard patterns, Gamos theme is coming with theme-specific patterns.

1. Styled Text
2. Contact Patterns
3. About & Team Patterns
4. Gallery Patterns
5. Header Templates
6. Call to action

To learn more about built-in patterns, and how to work with them, please read our official guide WordPress Block Patterns.

Gamos WordPress theme documentation, step 3: How we built our demo

Gamos demo is built as wedding invitation website.

First, we have created the following pages:

1. Home
2. Journal
3. RSVP

Home page

On the Home page, for the first block, we have used H2 text, which size is set to gigantic. For date, we have used H3. The ceremony and reception section is built using two columns layout block – on the left side is placed image, and text is on the right side. Before inserting the next section, insert a spacer element, and create some white space.
In the Our Story section, we have used two columns layouts. The left column is used for the text and image, while in the right column we added two images – one is left-aligned, and the second one is right-aligned. Between images, we have used the spacer element.
In the left column, to text Our Story we added HTML anchor “our-story”. HTML anchor is placed in the right side sidebar, under the Advanced panel. HTML anchor will be used to create scrollable sections.
For the Accommodation section, we have combined the group with a two-column layout and an inline gallery with three images. Images were cropped and prepared to be the same dimensions. For the Accommodations title, we have used HTML anchor “accommodations”.
For the last sections, we have inserted the H2 element with Larger font size. Word RSVP is a link that points to the RSVP page.

Journal

The Journal page in the Gamos WordPress theme documentation is the page where all posts are displayed. There are no elements on this page. This page is using a template Index.

RSVP

The RSVP page is quite simple – there is only an h2 header and form built using Jetpack forms, organized in two columns.

Once when you are done, there are two things left to be done.

1. Go to Appearance -> Menus and create a new menu.
2. Add link to Our Story section – to do that use Custom Link element, for title enter Our Story, and for link enter #our-story.
3. Add link to Accomodations – same as before – use Custom link element, enter title Accomodations, and for link enter #accomodations.
4. Add Journal and RSVP as regular pages link.

In Settings -> Reading set theme to use static page. For homepage set Home page, and for posts landing page set Journal page.

Gamos WordPress theme documentation, step 4: Working with theme templates

With the new WordPress feature – Full Site Editing – tech savvy users can easily tweak theme templates using Gutenberg editor, instead of messing with the theme code.

In Gamos theme, only header and footer templates can be tweaked. To start working with theme parts, in WordPress admin panel go to Appearance -> Template Parts. Click on the part that you wish to customize.

Here are example videos how to perform simple changes in templates.

Gamos WordPress theme documentation, step 5: Useful CSS classes

Gamos theme is coming with pre-defined CSS classes. Those classes can be used for specific things, like display element only on mobile devices, or to reduce white space and such.

Here is a list of those classes in the Gamos WordPress theme documentation:

• l-desktop-only: element will show only on desktop devices.
• l-touch-only: element will appear only on devices with touch scree – mobile phones and tablets.
• l-above-mobile-only: element will appear on all devices with screen bigger than mobile screen.
• l-mobile-only: element will appear on mobile devices only.
• l-center-margin-auto: element will be centered.
• l-no-margin-top: removes top margin. Comes handy if you wish to reduce whitespace between elements.
• l-no-margin-bottom: removes bottom margin.
• background-color–transparent: removes background color from element.
• padding–horizontal-default: adds left and right padding to the element. Adds 50px for dekstop devices, and 30px for mobile devices.

These classes are used on blocks that are placed on the page. To use classes:

• Click on the desired element.
• Expand Advanced panel.
• Copy and paste name of the class.

If you need to use multiple classes, separate them with space.