Introduction

We would like to first thank you for purchasing this theme. This documentation consists of several parts that guide you through the entire process of installing and setting up our theme starting from a fresh install.

We did our best to make this documentation as clear as possible with step-by-step guidance, including screenshots. However, if you have any difficulties with this theme or have any suggestions on improving our documentation, please post in our support forums or submit a support ticket.

First Steps

After you have purchased our theme, you will need to download and install it on your website. This tutorial will show you how to do this.

Download from Rough Pixels

There are a couple of ways to download your theme, the first is from a download link found within the email purchase receipt that you get when you made your purchase. Please note that this link has an expiry date.

If you decide to download from this website, you will need to log in and then visit your Purchase History.

Purchase History

From your purchase history, you will click on the View Details and Downloads link.

View Details and Downloads link

Your next screen should now show your download(s) for a single theme.

Biggy download button

If you purchased the All-Access membership, you should see a large Click Here To Use Your All-Access Pass button. Once you click this, you will be taken to a page where all your theme downloads are displayed; each with a download button:

All Access download button

Installing a Theme

You can install the theme in two ways: through WordPress, or via FTP.

Install via Dashboard

  1. Log in to the WordPress Administration Panels.
  2. After you have logged in, navigate to the Appearance > Themes.
  3. Click the Add New button on the top of the screen.

    Add a new theme from dashboard
  4. On the next page, click the Upload Theme button on the top of the screen.

    Dashboard upload theme
  5. Click the Choose File button to browse your computer and navigate to where you downloaded your theme too. Select the file biggy.zip and click Install Now.
  6. WordPress will upload and extract the theme archive for you. All you need to do next is to click on the Activate text link under the message for successful theme installation.
    Activate Biggy
  7. Now you can view your site’s front-end to see the theme active, or you can jump right in and begin setting up your website.

Install via FTP

  1. Navigate to where you downloaded your theme and double-click the biggy.zip file to extract using your standard zip archive software (eg: WS_FTP Pro, Filezilla, etc.)
  2. Using your FTP client (program) to log into your host web server.
  3. Go the WordPress root folder on your server, then go to /wp-content/themes/ folder.
  4. Upload the extracted file folder biggy themes folder.
  5. Log in to the WordPress Administration dashboard.
  6. Navigate to the Appearance > Themes. On this page, you should see the Biggy theme in the list of themes.
  7. Move the cursor on the block with the Biggy theme and click the Activate button.
    Activate Biggy from the theme page
  8. Now your theme is active!

Theme License Key

This tutorial will apply to all premium themes, but may also include any free versions that we host ourselves instead of the theme directory on the wordpress.org website.

Themes from Rough Pixels use a license key to help manage active memberships, but they also give you the added benefit of receiving update notices with 1-click updating.

The first thing you need to do is log into the Rough Pixels website with your user account and then go to your Purchase History:

Purchase History

Activate Theme License

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to the Appearance > Theme License.
  3. In a new browser window (or tab), log into the Rough Pixels website and navigate to your Purchase History.

    Purchase History
  4. You should see a License Details table with an Inactive status, but from here, you will copy your license key:
    Biggy license details
  5. Go back to your website’s dashboard with your theme license screen open and paste your key into the field.

    Enter license key
  6. Click the Activate License button and then the Save Changes button
  7. Once you activate your license, you can return to your License Details in your Purchase history to see the status is now set to Active.

Adding Another Licensed Website

Depending on the theme or membership purchase, each one comes with a specific number of license usages. When you first activate your license key, you should see a message similar to this:

Biggy licenses left

With the example above, we see that 1/3 sites have been activated, which means we have 2 left. This also means that this license gives us a total of three separate websites that can use the same license key. If you have additional sites that you want to receive support and updates for, you have to add more sites to your license.

Add More Websites

  1. Log in to Rough Pixels and visit your Purchase History page.
  2. In the License Details table, click on the Manage Sites link.
    Biggy manage websites
  3. Enter the Full URL (with the http://www or https://www part included) for the website you are adding.

    Add Website to be licensed
  4. Click the Add Site button.
  5. Repeat for additional websites you want to add.

Update Theme

Updating your theme is easily done because we have incorporated an update feature that is similar to the method if you had downloaded a plugin or theme from the wordpress.org website. When an update arrives, you will get a notification in your dashboard in a few areas:

Theme Update Notice
Another Theme Update notice

In the screenshot above, you can click Update Now for your theme, and then once it’s finished updating, you will have the latest version installed.

IMPORTANT: This update method only works if you have activated your theme with a license key, but also, to make sure your theme membership is still active and has not expired.

Installing Plugins

This theme recommends the installation and activation of some plug-ins to add additional features and capabilities. We made a shortlist of plugins to consider plugins:

  • Widget Options — Allows you to publish widgets to select pages and also hide widget titles;
  • Regenerate Thumbnails — This lets you regenerate thumbnails if you ever change sizes or the blog layout;

Installing Plugins

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Install Plugins menu.
  3. In the Search field, type in the name of a plugin and once it shows up, click the Install button.

    Search and add plugins
  4. Once installed, you can click Activate and then customize the plugin’s settings if needed.

Site Title & Tagline

To change the site title, tagline and description, follow these steps by logging into your WordPress Administration dashboard and then navigate to Appearance > Site Identity:

  1. Add or edit your site title.
  2. Add or edit your site description (tagline).
  3. You also have the option to hide the title and/or tagline; ideal if you want to use a logo.
  4. We’ve added a couple of colour selectors for the title and tagline.
  5. Upload a logo (if you plan to use one).
  6. Click Publish button.

Favicon

Follow the below steps to set favicon on your site.

upload a site favicon
  1. Prepare your favicon image file. It must be square, and at least 512 pixels for the width and height.
  2. Log in to the WordPress Administration dashboard.
  3. Navigate to Appearance > Customize > Site Identity.
  4. Open the Site Indentity tab.
  5. Click Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.
  6. Click Save & Publish button.

Navigation Menus

The Biggytheme supports up to 4 custom navigation menu locations. WordPress comes with a simple user interface that makes it quite easy for beginners to create and manage menus. From here, you can create your main menu, footer menu, and social icon menus.

Creating Menus

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Menus
  3. If you don’t have any menus, click the Create Menu button and create a new menu.
  4. From the blocks on the left side select pages that you want to add in your menu. Click the Add to Menu button.
  5. Once you’ve added a few items to your menu, you will see the added menu items on the right side in the Menu Structure section.
  6. If you want to rename a menu item, click the down arrow of a menu item to display its properties. You can then edit the navigation label that is displayed on menus.
  7. You can also change the order of menu items by dragging them to the position that you want them.
  8. To create a drop-down menu, drag a menu item slightly to the right of the menu item above it to create a sub-item relationship on the menu.
  9. Scroll to the bottom of the menu editor window. In the section titled Theme locations, click the checkbox for the location where you want your menu to appear.
  10. Click Save Menu button.
Biggy creating menus

Social Profile Menus

The social profile menus are generally found at the top of your webpage and depending on the theme, in the footer area. The Biggy theme supports the most popular social networks, which you can use to get followers to your site.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Menus.
  3. If your social menu is not made, you will need to create a new one.
  4. You will add each social network by pasting in their respective URL into Custom Links the box under Add Menu Items. For example, we would enter in https://twitter.com/roughpixels for our twitter profile URL.
  5. Drag your new menu item(s) into your new menu
  6. Assign your social menu to the Social links menu locations under Menu Settings
  7. Click the Save Menu button

Enable Thumbnail Creation

This theme includes the option to enable automatic thumbnail creation each time you upload a photo. This is generally a benefit when you want to maintain a consistent thumbnail size for blog posts, widgets, and anything else that uses thumbnails.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Thumbnail Settings.
  3. Choose the type of thumbnail(s) you want to enable for automatic creation. We recommend that if you know what blog layout you plan to use, only set the thumbnail crop for that blog. If you enable the others, you end up with a lot more thumbnails that won’t be used.
  4. You also have an option to custom size your featured image for posts and pages. To handle this, you get settings for the width and one for the height.
  5. Click the Publish button to update the customizer.

Front Page Banner

If you are familiar with the WordPress Header Image feature, then this will seem familiar. Biggy uses this for the custom front page that you see on the live demo site. Although it loads by default when you first install this theme, you can remove the image. For this theme, here is what the default setup looks like on our front page:

Biggy front page banner example

Note: We also have the theme set the site title and site description (tagline) centered in the middle.

Header Image Setting

Your front-page banner is actually using the WordPress Header Image feature. With it, you can upload additional banner images and set them to randomize each time the page is refreshed or visited.

  • Log in to the WordPress Administration dashboard.
  • Navigate to the Appearance > Header.
    1. The default image is loaded, but you can click the Hide Image button to remove it.
    2. Add more images or a different image
    3. The current header photo is shown
    4. If you upload additional photos, you can click the Randomize button to reload a different image on page refresh or each time you visit the front page.
    5. Click the Publish button.

Because this is a larger image, we recommend using large-good quality photos. When you upload a photo, it will be cropped to 1600×1200 pixels. The reason we made the crop so big, is because there will be people who will change the header height to be 100% from top to bottom—a type of splash page.

Change the Banner Height

By default, when viewing this theme on a desktop monitor, the image will be 80% of the browser window in height. However, you can adjust this to be shorter or even go full height of the window.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Theme Options > Other Options
  3. Look for the height settings and slide the indicators while previewing the changes in the customizer. You can adjust the height for desktop, tablet, to the phone.
    Biggy banner height setting
  4. Click the Publish button.

The only caveat is that this height setting (option) is global, which means all pages with a cover image will be resized too. We are planning to change how this feature works to make it more efficient and separate the front-page, posts, and pages to be individual.

In addition to the banner images, there is also an option to change the colour of the overlay and to also change the transparency level. The default colour is black and the transparency is set to be just dark enough to allow any text to show up.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Other Options
  3. Look for the Cover Overlay settings and use the colour selector to change the colour:
    Biggy overlay settings
  4. Use the slider to adjust the overlay transparency
  5. Click the Publish button.

Header Styles

Biggy gives you a few header styles. The only exception is that on pages that use a cover banner image, the image will be the background behind the main header.

Biggy header style 1
Biggy header style 2
Biggy header style 3

With regards to the image-based header styles, these are only for blog, page, and the front page layouts. However, for the light vs dark header styles (1 and 2), here is how to make the change for your inner pages.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Other Options
  3. Look for the Site Header setting and check the box to use the dark header style.
  4. Click the Publish button.

Theme Customization

The Biggy theme offers a lot of customization. Using the theme-specific options and settings, you can change the layout, colors, background image, etc.

Customizer

Biggy supports the WordPress Customizer. The Customizer is a framework for live-previewing any changes that you make to WordPress. It provides a simple and consistent interface for users to customize various aspects of their theme and their site, from colors and layouts to widgets, menus, and more. Themes and plugins alike can add custom options to the Customizer.

To access the WordPress Customizer, log in to the WordPress Administration dashboard and navigate to Appearance > Customize.

Biggy customizer

Blog Intro

Biggy gives you the option to create a custom blog title and introduction. By default, WordPress does not give you this option, with exception to the category archive pages. Your heading group would look something like this

Biggy blog intro
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Label Options.
  3. Look for the Default Front Page Blog Heading setting and type your blog heading
  4. Your blog introduction text is done from the blog page you would make.
  5. Click the Publish button.

NOTE: We are planning to change how the blog title and intro are created in an upcoming theme update so that it’s easier and done from one location.

Blog Layouts

The Biggy theme offers 8 blog layouts:

  • Classic Right Sidebar
  • Classic Left Sidebar
  • Grid
  • Card
  • Wide
  • List
  • Gallery
  • Minimal

To change the blog layout, follow these steps:

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Blog Options.
  3. Find the Blog Layout drop-down setting and select the blog style you want to use.
  4. Click the Publish button.

The gallery blog-style includes a couple of settings that are specific to it. Here is an example of how the blog gallery style looks with a post summary:

Biggy gallery blog style example

You can change the overlay colour as well as the opacity level of the overlay by following these steps:

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Blog Options.
  3. While you are on the blog options tab, look for the Blog Gallery settings.
    Biggy blog gallery overlay settings
  4. Use the colour selector to for the overlay colour
  5. Choose the overlay opacity (transparency) level that you want by sliding the slider. You can see your live preview if you navigate to your blog page in the preview window.
  6. Click the Publish button.

Blog Excerpts

This tutorial will show you how to change your blog summaries to use excerpts instead. This is useful if you want a consistent look to your blog home page (and categories). Excerpts will also hide all formatting and page elements from view.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Blog Options.
  3. Find the Blog Summary Type  setting and select the Post Excerpt option.
  4. In addition to excerpts, you can also change how many words to show for excerpts. Simply adjust the Excerpt Length setting to what you want.
  5. Click the Publish button.

Blog Display Options

With all of our themes, we give you the option to show or hide various page/post elements:

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Blog Options.
  3. Check the boxes next to each item that you want to show or hide on the post or page views.
  4. Click the Publish button.

Post Layout

Similar to the blog layout option, you get 7 layouts for your full post view:

  • Post With Right Sidebar
  • Post With Left Sidebar
  • Cover Banner Full Width
  • Cover Banner Left Sidebar
  • Cover Banner Right Sidebar
  • Wide Featured Image & No Sidebar
  • Wide Featured Image & Title Above

To change your full post layout, follow these steps:

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Post Options.
  3. Find the Full Post Layout setting and select the layout you want to use.
  4. Click the Publish button.

Post Display Options

Similar to the blog display options, you can show or hide various (full) post elements.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Post Options.
  3. Find the Show or Hide Settings  setting and decide what to show and hide from view.
  4. Click the Publish button.

If you decide to use any of the Cover Banner layouts, you may want to adjust the height of your banner area.

Biggy cover post banner height

One thing to keep in mind is that whatever you change with the height setting(s), this will also affect all other sections of your site using the banner image concept.

NOTE: We are planning to separate the banner height settings for the front page, pages, and the Cover Banner post layouts. Look for this change in an upcoming theme update. This might also affect existing sites as we make the change.

To change your height, we provided three height settings:

  • Banner Height – Phones > for the height of your banner in phone screens
  • Banner Height – Tablets > for the height of your banner in tablets
  • Banner Height – Desktop > for the height of your banner in desktop monitors

If you are on the “Post Options” tab of your customizer, simply make the necessary adjustments to the banner height settings and then click the Publish button at the top.

Labels

With Biggy, you can change some of the labels such as “Read More“, and a few others that show up in the front-end of your website. But we’ve also included an additional setting for the default blog home page. When you first install WordPress, your blog is the front page and you will notice there is no title or introduction for it, so we’ve included one.

NoteThe blog heading is only if you are not using a custom page for your blog.

Biggy label settings
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Label Options.
  3. Customize the label you want to change
  4. Click Publish button.

Colors

You can quickly and easily change the color with the available selectors that this theme offers. Each colour has a HEX value. For example, the screenshot you see below has a dark blue colour, so the HEX value for this orange is #dd9933. To create your color scheme, follow these steps:

  1. Log in to the WordPress Administration Panels.
  2. Go to Appearance > Customize > Colours.
  3. Open the Colours tab.
  4. Select the colour you want to change and click button Select Color with the built-in colour selector:

    Colour Selector
  5. By moving the circle on the colors area, select a color you want to use.
  6. Click the Publish button.

The copyright text is displayed at the bottom of every page. You can change the copyright text from within the customizer.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Basic Settings.
  3. Type your custom copyright text in the Copyright Name field.
  4. Click the Publish button.

Custom CSS

Part of the WordPress customizer gives you the option to add some of your own CSS stylings. You can quickly and easily add your custom CSS code without touching the theme’s own code. Your CSS code will have the highest priority and will override your theme, and sometimes, plugin styles.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Additional CSS.
  3. Add your custom CSS code, either by typing it or pasting your code.

    Adding custom CSS to the customizer
  4. Click the Publish button.

We have incorporated the Colorbox lightbox feature for viewing images from the WordPress Gallery Shortcode (even the block gallery). You can now view your photos in a popup overlay viewer.

NOTE: We are planning to remove the lightbox in the next update because it does not work with actual image captions correctly (not compatible). We will be offering an alternative.

  • Log in to the WordPress administration dashboard
  • Go to Appearance > Customize > Other Options
  • Look for the Enable Gallery Lightbox setting and check the box.
  • Click the Publish button

Disable Gutenberg Styles

Not everyone wants to use the Gutenberg block editor that is now the default editor in WordPress. Many are using the Classic Editor instead, so we added a setting to disable the block styles.

  1. Log in to the WordPress administration dashboard
  2. Go to Appearance > Customize > Theme Options > Other Options
  3. Look for the Disable the Block Stylesheet setting and check the box next to it
  4. Click the Publish button at the top

Once you do this, no more block styles will load, which helps speed up your website. From this point, just keep the classic editor as your default one.

Remember, though, when disabling the block styling, anything that was using blocks will now be unstyled. You will also lose the ability to do some of the blocks that we put into the live demo for this theme.

Typography Options

Typography generally has a learning curve for most people, even developers. We normally do not include extensive font options in our themes because of that. We usually refer customers to seek out a font plugin—and we still do because they are more comprehensive.

However, this theme is unique compared to our other themes because of the LARGE text we use for various elements. Not everyone will want to use over-sized fonts as we did, so it was important to include some typography options for this theme.

But as we state, typography and themes can have a steep learning curve. You generally have a few options:

  1. Manually customize fonts and text-based elements in a page
  2. Use a font plugin
  3. Just use the existing styling that comes with the theme

Typography, as it applies to fonts and font management can be overwhelming, so we gave you some help in this area by adding a Typography section to the customizer.

We also sectioned off several settings to keep it more organized.

  • Body Font
  • Headings Font
  • Languages
  • Headings Weight
  • Headings Case
  • Headings Letter spacing
  • Main Content Text
  • Page Title Sizes
  • Heading Font Sizes
  • Drop Cap Option

Setting Your Body or Heading Font

These two settings are using a dropdown select list, but to see it, make sure you delete any existing font you see in the field. Simply click on the field to open up the list and select the font you want. Unfortunately, the drop-down does not offer a sample of each font, so you will need to visit Google Fonts.

NOTEWe did not include all Google fonts because there are 1000’s of them. If there is a Google font you want but it’s not in the list, you can request it be added for a theme update. You also have the option to install a Google fonts plugin, if that works better for you.

  • Fonts Information: If you need to learn more about fonts and typography, we recommend you start with the W3Schools website for Fonts.
  • Text Styling: They also have information about CSS Text.
  • Google Fonts
  • Languages: This is probably the most confusing part, is the “Languages” support, so language support info might help.

Basic Font Settings

With this theme, we’ve included the ability to add fonts and basic styling for them, but we also added the main font/text styling for the following:

  • Global text size – For all text
  • Custom Image Header Title – This is the front page header image banner title
  • Archive Titles – These are the titles on the page. For example, category titles.
  • Full Post Banner Titles – These are the titles that are located on your cover banners (pages and posts)
  • Full Post Default Titles – When your post is not using a cover image banner, these are the standard titles
  • Full Post Default Titles (Top Titles) – when using the full post top layout, the title is above the featured image
  • Page Titles – These are for “page” only titles
  • Minimum Blog Style Titles – When using the minimum blog layout, this is your blog summary titles
  • Widget Titles – Strictly for the widget titles

Heading Sizes

For in-page headings, such as h1, h2, h3, h4, h5, and h6, we kept the sizing options separate. You can change the size by typing it in, or you can use the little arrows to the right of the text field when you mouse-over each one.

number field for heading sizes

How We Use Sizes

With the exception to the Global Text Size setting (which uses percent), all other font sizing is based on a vw unit. I won’t bore you with the technical aspects of this, but this helps your text responsive in a much better way than px, %, and even em.

Each font setting has some info giving you the default size for this theme (and setting). Each one also gives you a maximum size you can enter in. When you use the arrows on each field, it does it with 0.25 increments.

Do You Still Need Help?

If you find this is overwhelming, or you have some text that you are trying to change the size of, please submit a support ticket and we will be happy to help guide you through.

Theme Sidebars and Widgets

With the Definite theme, you get 13 sidebar positions. These help add more layout and content capabilities for your web pages, but will also depend on what widgets you add to them. To add widgets to the footer of your site, follow these steps:

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Widgets 
  3. Choose a Widget and either drag it to the sidebar where you wish it to appear.
  4. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget.
  5. To save the changes you make to a widget, click Save.
  6. To remove a Widget, click Remove or drag the widget back into the Available Widgets list.

If you change WordPress Themes, any widgets you have will return to the Available Widgets list. You may need to add them again and rearrangement depending upon the new Theme’s sidebar positions.

Biggy sidebar positions

Dynamic Width Sidebars

Most themes from others have fixed sized sidebars; meaning they don’t adjust in size based on what is published in each position. We offer Dynamic Width Sidebars which do adjust based on how many widgets you publish. If we use our Content Bottom sidebar group as an example, this is how it works:

  • Publish a widget in Bottom 1, your widget will become 100% in width.
  • Publish a widget in Bottom 1+2, each widget will now be 50% in width.
  • Publish a widget in Bottom 1+2+3, each widget will now be 33% in width.
  • Publish a widget in Bottom 1+2+3+4, each widget will now be 25% in width.

About Blog & Social Buttons

With Purified, you get an “About Blog & Social Buttons” widget that gives you the option to upload a portrait photo and to write a brief introduction of yourself.

  • Log in to the WordPress Administration dashboard.
  • Then navigate to Appearance > Widgets
  • Drag the About Blog & Social Buttons widget into the sidebar position you want to show it in.
    1. Add a title for your widget
    2. Upload a photo, such as an author’s portrait.
    3. Enter an author’s name.
    4. Type out a short author’s introduction
    5. If you want to add a linked button, fill out the URL and the button text label
    6. Type in the full URL to the author’s social profiles
  • Click the Save button
Purified about blog widget settings

Recent Posts Widget

The Purified theme includes a recent posts widget to display the most recent posts with thumbnails. The thumbnails are automatically generated from the featured image you upload for the post(s).

  • Log in to the WordPress Administration dashboard.
  • Then navigate to Appearance > Widgets
  • Drag the Recent Posts with Thumbnails widget into the sidebar position you want to show it in.
    1. Title your widget
    2. Choose how many posts to display
    3. Choose the order of displaying posts
    4. Select the category from where to get posts from
    5. Check the box next to Display Post Date (optional)
  • Click the Save button
Natured recent posts widget

Create a Contact Page

This tutorial will show you how to make a contact page when using the Contact Form 7 plugin for WordPress. Basic knowledge of WordPress administration is required when doing this.

Install the Contact Form 7 Plugin

Before we can do anything, you will need a plugin called Contact Form 7 before we can continue. If you already have the Contact Form 7 plugin installed, you can skip this step. But to install it, go to Plugins >> Add New, and then type in the search, “Contact Form 7” into the field. Once it shows up in the results, click Install and Activate.

Creating Your Contact Page

After installing the Contact Form 7 plugin, we have a few things to do.

  1. First, open the Contact > Contact Forms menu link on your WordPress administration panel. You can manage multiple contact forms there.
  2. You will see a default form named Contact Form Demo
  3. You will also see a shortcode, similar to this: [contact-form-7 404 "Not Found"]
  4. Copy the shortcode and then go to Pages > Add New
  5. Name your page Contact Us (or whatever you decide) and add any content you want
  6. With your new page created, you will also want to assign the Contact page template to it by going to Page Attributes and selecting it.
  7. Drop a shortcode block into your page and then paste the contact form shortcode that you copied earlier.
  8. Click the “Publish” button for your page.

Add More Contact Info to Your Page

With this theme, we included an extra tab to the customizer which lets you add more information (optional of course). Here is an example from the live demo:

The customizer will give you extra settings to insert info for Contact Info, Address, and additional contact details.

  1. Log in to the WordPress Administration dashboard.
  2. Go to Appearance >> Customize >> Contact Options
  3. Title your fields and add the corresponding content to each one.
  4. Click the Publish button.