Nuptia WordPress Theme Documentation

Nuptia theme is a wedding invitation theme. It’s designed and developed for the brides and grooms, as well as wedding planners, that want elegant websites which will celebrate their magical moments.

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

Nuptia WordPress theme documentation, step 1: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In the Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for theme file on your computer.
6. Click on Install Now to start the installation.
7. After the installation is done, click on Activate theme.

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 Nuptia 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.

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

Besides of standard patterns, Nuptia 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.

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

Nuptia demo is built as wedding invitation website.

First, we have created the following pages:

1. Home
2. Journal
3. Our Story
4. Registry
5. RSVP
6. Travel & Stay

Home page

On the Home page, we have used Header pattern 2, where we have replaced the background image, text, and removed the button that is included. For the second block, we have inserted one paragraph and an h2 heading. In the third block, we have combined two columns layout, with image and text on the right. Image is prepared in Photoshop. Here we have used a full-width group element as the holder. Content is heading h2, with paragraph and button. For top and bottom spacing, we have used Spacer block. Finally, here we have used group block, where we have inserted a right-aligned image. On the left, we have inserted another group with text.

Journal

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

Our Story

Our story page is built using default blocks. In the first section, we have inserted a full-width group section. Inside that section, we have placed three columns. In the left column we placed text about the bride, in central we have inserted an image, and on the right, we have placed information about the groom. On the top and bottom are used spacer blocks. In the second section on the top is spacer block, and below it, there are h2 heading and paragraphs.

Registry

On the Registry page, we have placed a large h2 heading, followed by two columns block. In columns, we have inserted text on the left, and a button on the right. The button can be linked to any other page or to an external link(e.g. booking calendar). On the bottom of the page is placed large image.

RSVP

The RSVP page is quite simple – there is only an h2 header and form built using Jetpack forms.

Travel & Stay

On Travel & Stay page first element is the spacer block. After that, there is an h2 heading with a short paragraph, followed by a separator and a large image. At the bottom of the page, a two-column layout holds two images and buttons. At the very end, there is an additional h2 heading.

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

1. Go to Appearance -> Menus and create a new menu. Add all pages to it, and mark menu as Primary.
2. In Settings -> Reading set theme to use static page. For homepage set Home page, and for posts landing page set Journal page.

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

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

In Nuptia 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.

Nuptia WordPress theme documentation, step 5: Useful CSS classes

Nuptia theme is coming with pre-defined CSS classees. 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:

• 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.