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.

Natured 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 natured.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 Natured from the theme page
  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 natured.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 naturedinto the themes folder.
  5. Log in to the WordPress Administration dashboard.
  6. Navigate to the Appearance > Themes. On this page, you should see the Natured theme in the list of themes.
  7. Move the cursor on the block with the Natured theme and click the Activate button.
    Activate Natured 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:
    Natured 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:

Natured 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.
    Natured 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;
  • Contact Form 7 — Contact form plugin;
  • MailChimp for WordPress — MailChimp for WordPress, which adds a sign-up newsletter method to your site.

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. If you are using a logo, you can also adjust the size of your logo.
  7. Click Publish button.
Natured Site Identity settings

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 Natured theme supports up to 5 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.

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 Natured 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 Top Social Links and/or Bottom 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 > 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.

Theme Customization

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

Customizer

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

Natured customizer

The Natured theme has several customization elements that you can change. You can choose how the sidebar elements are organized, the width of the sidebar column, and even change the position of the sidebar from the default left to be on the right of your window.

  • Log in to the WordPress Administration dashboard.
  • Navigate to the Appearance > Layout Options.
    1. In the drop-down for Sidebar Layout select the layout you want to use.
    2. In the drop-down for Sidebar Position select the position (left or right).
    3. In the drop-down for Sidebar Width select the width of the sidebar in percentage value.
  • Click Save & Publish button.
Natured sidebar layout settings

With Natured, you have a lot of flexibility with the sidebar column when it comes to the background image option. This feature is actually the WordPress Background Image function that we simply used for the sidebar.

By default, you get a green maple leaf photo that you can use, or you can change it to one of your own. You have the option to have a standard photo throughout your website or have a different one for each page, post, and category.

Natured sidebar column photos

For all pages

This tutorial will give you a global sidebar image across all pages throughout your website.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Background
  3. You can click Remove or  Change Image in the Background section. If you change it, you can either upload or select an image from your Media Library and then click Publish.
  4. Set the background properties that best suits your image:
    Natured sidebar image settings
  5. To change the transparency of blackout overlay, use the range slider to adjust the level of transparency. Please note this is a global setting, so this will affect “all” pages.
    Natured sidebar dark overlay setting
  6. Click the Publish button.

For Individual Pages or Posts

Even if you have the “For all pages” option set up, you can choose sidebar images on a per-page or per-post basis. Adding a new sidebar image on individual pages or posts is just like adding a Featured Image.

  1. Log in to the WordPress Administration dashboard.
  2. (Option 1) Navigate to Pages (or Posts) > Add New
  3. (Option 2) Open an existing page or post.
  4. Scroll down the right side of the editor until you see the Sidebar Image box:
    Natured sidebar post image setting
  5. Click the Set Background Image link.
  6. Upload a new image or select an existing image from your media library, and click the Choose image button
  7. Click the Publish or Update button.

For Categories

In addition to pages and posts, you can also add a sidebar column photo for individual blog categories. This tutorial will show you how to create a new category.

  1. Log in to the WordPress Administration dashboard.
  2. Go to Posts > Categories 
  3. Name your new category.
  4. Type your category slug; add a hyphen for multi-word category names. For example, my-lifestyle
  5. Set the parent category if you are creating a sub-category.
  6. Write out a short category description.
  7. Just below the category description field is a background image option. Click the Set a background image button.
  8. Click the Add New Category button.
Natured - Create a new category with a sidebar column photo

Edit an Existing Category

  1. Log in to the WordPress Administration dashboard.
  2. Go to Posts > Categories 
  3. Open an existing category.
  4. Just below the category description field is a background image option. Click the Set a background image button.
    Natured add a photo to a category
  5. Upload a photo or get one from your media library.
  6. Click the Update button.

Blog Intro

Natured 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

Natured Blog intro example
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Post Options.
  3. Type a blog title (heading) for your intro.
  4. Type a blog introduction for your intro.
  5. Click the Publish button.

Blog Layouts

To change the blog layout, follow these steps:

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

Blog Excerpts

This tutorial will show you how to change your blog excerpt size (length). We use an excerpt for a consistent look to your blog home page (and categories). IMPORTANT NOTE: Excerpts will hide all formatting and page elements from view, but will show on the full post view.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Post Options
  3. Find the Excerpt Length setting and adjust it to your preference. Note: the count represents word-count.
  4. 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 > Post 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.

Natured gives you the option to add captions to your blog post and page featured images.

Natured featured image captions

Captions will only show if your image has a caption added. However, if you do not want them to show, follow this tutorial:

  1. Log in to the WordPress Administration Panels.
  2. Go to Appearance > Customize > Post Options.
  3. Look for the Display Featured Image Caption setting and check the box to show captions.
  4. Click the Publish button.

Labels

With Natured, you can change some of the labels such as “Continue Reading“, and a few others that show up in the front-end of your website.

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

Share Buttons

The social media share buttons let you share a page with others using your social media channels. The share buttons are displayed after the page content.

Natured share buttons example

You can enable or disable the display of some of the buttons.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Share Options.
  3. Check the boxes of the social networks that you want to display.
  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.

Galleries

There are a ton of gallery options with WordPress, many of which are plugin-related. However, we implemented a couple options for the default WordPress Shortcode Gallery.

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

If you use the WordPress Gallery Shortcode, you can enable this setting which will convert your basic gallery into a masonry layout.

Natured Masonry gallery layout example
  • Log in to the WordPress administration dashboard
  • Go to Appearance > Customize > Other Options
  • Look for the Enable the Masonry Gallery Style setting and check the box.
  • Click the Publish button

Portfolio

The Natured theme has the ability to help you to create a personal portfolio using the Portfolio Post Type plugin.

Natured portfolio example

So the first thing you will want to do before moving onto the next stage in this tutorial is to install and activate this plugin.

A nice feature about the portfolio is that you can use actual pages to choose 1 of 4 portfolio templates that we made available:

  1. Portfolio Grid (2 Columns)
  2. Portfolio Grid (3 Columns)
  3. Portfolio (3 Columns & Square Thumbnails)
  4. Portfolio Grid (3 Columns & Tall Thumbnails)

Creating a Portfolio Page

To use a template, we need to create a page for our portfolio that will display all your portfolio posts from all categories.

  1. Log in to the WordPress administration dashboard
  2. Go to  Pages > Add New
  3. Enter the Portfolio page title, such as My Portfolio. For the block editor, you can also add text and blocks in front of the project list.
  4. If you are using the block editor, click the tab on the right panel. Then click the Page Attributes tab. In the Templatesdrop-down menu, select one of the portfolio templates listed in the drop-down.
  5. Click the Publish button.

Creating a Project

The process of creating a project page is the same as the process of creating a post/page but we will be adding our project from the Portfolio location in our Administration area.

  1. Log in to the WordPress administration dashboard
  2. Click the Portfolio tab in our administration menu column–usually found under the Posts tab.
  3. Click the Add New Item sub-tab.
  4. Start filling the fields and add blocks with text and media.
  5. In the right sidebar, select a portfolio category, a featured image, and a sidebar background image.
  6. Click Publish or Update
  7. Repeat for additional portfolio projects (posts).

Theme Sidebars and Widgets

With the Definite theme, you get 11 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.

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

About Blog & Social Buttons

With Natured, 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

Recent Posts Widget

The Natured 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

Mailchimp Newsletter Widget

Before you can take advantage of the built-in styling for a newsletter widget (plugin) called Mailchimp for WP, you need to create an account on the MailChimp website. We will let you handle that part before continuing on with our tutorial.

We are going to make this:

Natured newsletter styling for the Mailchimp for WP plugin

Creating a Form

  1. Navigate to the MailChimp for WP -> Forms menu.
  2. Enter the form title to the What is the name of this form? field. Check the box next to the name of the created email list.
  3. Click the Add New Form button.
  4. You will see the HTML editor for editing the subscription form shown further down the page. You can add additional form fields, text and other HTML tags. If you want to use the form like on the demo site, enter this HTML code:
<h3 style="text-align: center;">Get My Newsletter</h3><p style="text-align: center;">Using the Mailchimp for WordPress plugin, you can subscribe to my email newsletter for a look at the top stories in travel, design and photography.</p>
<div class="natured-newsletter-form">
  <div class="natured-newsletter-form-wrap">
  <input type="text" name="NAME" placeholder="Your name" required />
  <input type="email" name="EMAIL" placeholder="Your email address" required />
  <input type="submit" value="Sign up" />
  </div>
</div>

Using the Mailchimp Widget

For this tutorial, we will add it using a widget like the live demo site shows.

  1. Navigate to Appearance > Widgets.
  2. Drag a Mailchimp Sign-up Form widget into the sidebar position of choice (we recommend a Bottom sidebar position).
  3. Click Save

Using the Mailchimp Shortcode

For this tutorial, we will add our newsletter form with the Mailchimp shortcode.

  1. Navigate to the MailChimp for WP -> Forms menu.
  2. At the bottom of the forms page, copy & paste the shortcode (yours might have a different id number).
    Mailchimp shortcode example
  3. Open a page or post and using a shortcode block, paste your Mailchimp shortcode into it
    Natured add mailchimp shortcode to block
  4. Click Publish or Update