Noctua WordPress Theme Documentation

Noctua is every eCommerce owner’s dream: it’s an easy-to-use, FSE-ready, WooCommerce WordPress theme that makes products pop. The theme is the perfect combination of elegance and functionality.

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

Noctua WordPress theme documentation, step 1: Theme installation

Before proceeding, make sure that the WooCommerce plugin is installed and active. If the WooCommerce plugin is missing or is not active, theme features and demo import will not be complete.

The WooCommerce plugin can be installed through the WordPress admin dashboard or by uploading files through FTP manually.

Installing WooCommerce through the WordPress admin dashboard

1. Log into the WordPress admin panel.
2. Go to Plugins -> Add New.
3. Search for “WooCommerce”.
4. In the search results, click on Install Now.
5. When the installation is done, click on Activate button.

Theme can be installed two ways – through the WordPress admin dashboard or by uploading files through FTP manually. Before installing, 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.

Installing the theme through the WordPress admin dashboard

1. Log into 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 the theme file on your computer.
6. Click on Install Now to start the installation.
7. After the installation is done, click on Activate theme.

Installing the theme by manually uploading files

1. Download the latest theme version from WooCommerce.com.
2. Extract the zip folder on your computer.
3. Connect to your server using FTP client.
4. Upload extracted theme folder into ..wp-content/themes/ directory.
5. Log into the WordPress admin panel.
6. Go to Appearance -> Themes.
7. 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.

Required plugins

Before proceeding, make sure that the WooCommerce plugin is installed and active. If the WooCommerce plugin is missing or is not active, theme features and demo import will not be complete.

The WooCommerce plugin can be installed through the WordPress admin dashboard or by uploading files through FTP manually.

Installing WooCommerce through the WordPress admin dashboard

1. Log into the WordPress admin panel.
2. Go to Plugins -> Add New.
3. Search for “WooCommerce”.
4. In the search results, click on Install Now.
5. When the installation is done, click on Activate button.

Noctua WordPress theme documentation, step 2: Theme customization

Setting up menus

Theme menus can be created under Appearance -> Menus. Created menus can be used when working with templates using Editor.

The navigation menu can be changed in the Editor – you can easily replace the default menu with your own.

1. Go to Appearance -> Editor.
2. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
3. In the templates screen, click on Template parts on the left-hand side. Click on the header.
4. The Menu placeholder is set. Click on it, and from the floating menu click on Select Menu.
5. Save changes.

Using the theme editor

The theme can be customized using Editor feature. Editor allows you to control layout and elements of the page templates. Go to Appearance -> Editor. More details how to work with the editor are available on this link.

Setting up site logo

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The Logo placeholder is already there. Click on the blue upload icon.
4. Upload or browse for the desired logo. The logo should be a .png or .jpeg file.
5. Save changes when you are done.

Setting up the site title

Site title in the Noctua WordPress theme documentation can be set in the Appearance -> Customize, and under the Site Identity panel, you can set site title and favicon.

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The logo placeholder is already there. Click on it, and from the floating menu, select Remove site logo.
4. Click on the header container and then on the plus icon, to add the new element. Search for the “Site title” element.
5. The Site element will be placed on the far right of the header. Move it to the desired position.

Changing colors and fonts

Text and Colors settings are global settings that are applied to the whole site and all elements.

1. In Site Editor, click on the Colors option in the right-hand side panel.
2. Set the desired colors for background, text and links. The Color set will be applied to the whole site and all pages.

1. In Site Editor, click on the Typography option in the right-hand side panel.
2. Here you can set the desired font families, size, line height, and weight for text and links.

Footer is fully customizable – you can set the desired number of columns, and various elements (e.g., menus, text, logo). Please note that before setting up menus in the footer, you will need to create those menus in Appearance -> Menus.

Selecting navigation menu

The navigation menu can be changed in the Editor – you can easily replace the default menu with your own.

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The Menu placeholder is set. Click on it, and from the floating menu, click on Select Menu.
4. Save changes.

Replacing footer menus

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the footer.
3. Click on the menu that you wish to replace.
4. Select previously created menu.
5. Save changes when you are done.

Adding footer logo

By default, the footer uses three columns. You can add more columns if needed.

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the footer.
3. Add Logo block. Click on the blue upload icon.
4. Upload or browse for the desired logo. The logo should be a .png or .jpeg file.
5. Save changes when you are done.

Noctua WordPress theme documentation, step 3: Theme defined patterns

Patterns are predefined blocks that can be added to the content. Patterns are groups of several blocks, so their content – text and images – can be edited.
Besides standard patterns, Bonum theme comes with theme-specific patterns. To add a pattern, click on the block Add button, and then click on the Browse All button, in the floating block picker. In the left-hand side panel, click on the Patterns tab, and then from the dropdown pick the desired pattern group.

1. TK Text
2. TK Contact
3. TK About
4. TK Testimonials
5. TK Gallery
6. TK Headers
7. TK Call to Action

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

Noctua WordPress theme documentation, step 4: How we built our demo

Before building homepage, we suggest you create the products, product categories, posts and post categories first.

Then, move onto the following pages:

1. Home
2. About
3. Blog
4. Contact Us

WooCommerce plugin will create necessary pages – Shop, Cart, Checkout, My Account, Privacy Policy. These pages are not editable, except for the Privacy Policy where you can place and edit your text.

Homepage

The homepage is built using several patterns and blocks. In the following text, you can read instructions on how to build the same homepage as shown in our demo. With a little bit of planning, you can create a homepage that will fully suit your needs, with more product categories, blog posts, etc.

The homepage is built from several sections. We will explain each section.

1. The first element is a custom-built cover image with a text box. We have placed the cover elements with background and aligned content in the bottom right corner. There we have inserted a Group block with another Cover block, but with a solid background. Inside the Cover block, blocks are placed two column elements – the top one is a single column, while the bottom one is three column element. Inside columns are placed text.
   
2. Under the header image, there is a spacer element and a Heading 3 element. Insert two columns and set the width to Wide width. Insert images in both columns, as well as text. The image on the left column is prepared, so we got the effect that there are two images.
   
3. The next element is Header pattern 4, where an additional image is placed in the left column.
   
4. Insert spacer, followed by two columns with text and button. Products are Hand-picked products block from WooCommerce.
   
5. Huge cover is Header pattern 3.
   
6. Insert spacer, followed by text and separator. Insert Three column testimonials pattern. Finally, insert five columns where you will insert prepared logos.
   

About page

About page combines several elements.

1. The first element is Header pattern 3.
2. Insert Columns block with three columns. Set widths to 40vw, 20vw, 20vw. Spacing between columns should be 10vw.
3. Insert another Header pattern 3.

Blog

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

Contact Us

Contact Us page combines column elements where the text is placed, with the Cover block with an image.

Noctua WordPress theme documentation, step 5: Theme built-in CSS classes

Noctua theme comes with several built-in CSS classes. CSS classes can be used to create spacings, hide/show elements, etc. CSS classes are used on the desired elements.

1. Go to Pages -> All Pages and find the desired page.
2. On the page, click on the desired element.
3. Expand Advanced panel ,on the right-hand side.
4. Paste the name of the class there. You can add multiple classes, separated by space.

Theme classes that can be used:

• stick-to-top element will stick to the top of the screen, regardless of the page scroll.
• l-desktop-only element will appear only on computers.
• l-touch-only element will appear only on devices with the tocuh screen.
• l-above-mobile-only element will be shown only on devices with larger screen resolution.
• l-mobile-only element will appear only on the mobile devices.
• l-center-margin-auto element will get automatic left and right margin, and will be centered on the screen.
• l-no-margin-top removes the top margin from the element.
• l-no-margin-bottom removes the bottom margin from the element.
• background-color–transparent element will get transparent background.
• padding–horizontal-default adds default padding for the element. This class will prevent element from sticking to the left and right side of the screen. Padding values are 50px for computers, and 30px for mobile devices.
• no-padding–top removes the top padding from the element.
• no-padding–bottom removes the bottom padding from the element.
• no-padding–horizontal-on-touch removes left and right padding for all devices with touch screen.
• no-padding–horizontal-on-mobile removes left and right padding for all mobile devices.
• h-animate–from-top element with this class will float in from the top, when it comes into the viewport.
• h-animate–from-left element with this class will float in from the left, when it comes into the viewport.
• h-animate–from-right element with this class will float in from the right, when it comes into the viewport.
• h-animate–from-bottom element with this class will float in from the bottom, when it comes into the viewport.