Introduction

We would like to first thank you for getting our 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.

Free & Premium Theme Tutorials

Because our free themes are built from the premium versions, they share similar, if not the same setup tutorials. Therefore, we decided to integrate both into this one-page document. If you see a tutorial that is not part of the free version of your theme, simply skip over to the next one. Also, if there is a theme feature that does not have a tutorial, please let us know.

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 WordPress

If you are getting the free version of this theme from the WordPress.org website, you can download it from that location, or you can use the WordPress theme installer to search for the Definite Lite theme. Once it shows up, simply click on the Install and then Activate buttons.

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. We will use the Clarified theme as an example:

Theme 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 salal.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 Salal Pro
  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 salal-pro.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 salal-pro into the themes folder.
  5. Log in to the WordPress Administration dashboard.
  6. Navigate to the Appearance > Themes. On this page, you should see the Salal Pro theme in the list of themes.
  7. Move the cursor on the block with the Salal Pro theme and click the Activate button.

    Manually activate a theme
  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:

    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:

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.

    License Manage Websites link
  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;

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:

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Site Identity.
  3. Open the Site Identity tab.
  4. Now you will see three input fields:
    • Logo — Upload a logo if you plan to use one.
    • Site Title — Displayed in the sidebar and in the browser tab.
    • Tagline — This is your site tagline, also known as the site description.
    • Display Site Title — Show or hide your site title.
    • Display Site Tagline — Show or hide your site tagline.
  5. Type your custom the site title and tagline.
  6. If you want to use a logo, you can hide your site title and/or tagline.
  7. 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 Salal Pro theme supports up to 5 custom navigation menu locations. These include a couple of top header menus, social menus, and a footer menu. WordPress comes with a simple user interface that makes it quite easy for beginners to create and manage 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.
Creating menus

Social Profile Menus

The social profile menus are found at the top of your webpage and in the footer area. The Salal theme supports the most popular social networks, which you can use to get followers to your site. For Salal, the top social menu uses icons, while the footer will display them as text-based links, each with icons.

  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.
  5. Drag your new menu item(s) into your new menu
  6. Assign your social menu to one or both of the social menu locations under Menu Settings
  7. Click the Save Menu button
Create social menu for Salal

Add a Post Slider

With Salal, you get a built-in post slider (an Owl Slider) that displays posts with their featured images from the category you choose.

Salal Post Slider

This slider ONLY shows on the front page of your website, so if you need a slider to show on other pages, you will have to create a child theme to change the code or use a slider plugin.

it’s very IMPORTANT to have your posts already created with featured images.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Slider Settings.
  3. Check the box next to Display the Slider
  4. Choose the category you want to show slides from.
  5. Decide how many slides (posts) to show (I recommend keeping the number low as the more you add, the more load time is needed for your front page).
  6. Choose what slide elements to display.
  7. Decide on the background colour.
  8. Click the Publish button to update the customizer.

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.
  4. Click the Publish button to update the customizer.

Custom Login Page

Available with Salal Pro, you get to enjoy a custom login page. By default, WordPress has it’s own that we are always using, but it’s boring.

custom Salal login page

So with this theme, we decided to customize it and uploading our own logo.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Basic Settings.
  3. Look for the Login Page Logo setting and click the Select image button
  4. Browse for your logo image in your Media Library, or upload one.
  5. Click the Publish button to update the customizer.

Theme Customization

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

Customizer

The Salal theme 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.

Salal theme customizer

Adjust Section Width

You can adjust the page section width for the following areas:

  • Header Branding Width (Pro only
  • Top Navigation area
  • The footer area
  • Top Sidebar Area (Pro only)
  • The bottom sidebar area

This tutorial will show how to make your width adjustments.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Laytout Settings.
  3. For the header area, begin moving the slider to adjust the width.

    Salal width adjustment for sections
  4. The customizer window can be smaller, so you will want to check the front of your site for the right sizing.
  5. Click on the Publish button
  6. Repeat for any other sections that you want to adjust the width too.

Look for the width slide settings and make the changes you want. You should see the live preview window show the changes as you make them (if your browser window is large enough).

Blog Intro

Although this is part of the Labels feature of this theme, we decided to make this a separate tutorial. The blog intro section is optional but offers a nice introduction to your blog’s home page.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Theme Options > Label Settings.
  3. Enable the blog intro section by checking the box.
  4. Type a blog title (heading) for your intro.
  5. Type a blog introduction for your intro.
  6. Click the Publish button.

Blog Layouts

The Salal theme has four (3 for the free version) blog layout: Large Post, List Post, Post Grid, and Alternating. To change the layout, follow these steps:

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

Blog Sidebar Position

Setting your sidebar choice for the blog will give you the additional layouts with either leftright, or no sidebar option.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Blog Settings.
  3. Find the Sidebar Position  setting and select the position/layout that you want to use.
  4. 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 Settings.
  3. Find the Blog Content  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.

Post Display Options

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

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

Hide Blog Summary Elements

You can show or hide various blog elements, primarily the meta-information on posts.

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

Customize Labels

With Salal Pro, you can customize various labels, such as the Read More on blog post summaries or hide the archive prefix labels.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Label Settings.
  3. Begin making changes to any label setting that you want to change.
  4. The only different label setting is to hide the prefix from archive titles. For example, WordPress will always put the prefix Category: before the category’s name like this: Category: Lifestyle Changes
  5. Disabling the archive prefix setting will hide the Category: prefix
  6. Click the 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 blue is #343f58. 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.

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