Ridestyle - WordPress Theme - Documentation

1. System Requirements

2. Installation & Update

3. Active theme

Step 1. In WordPress Dashboard, Go to Activate page

Step 2. Enter your envato, purchase code and click Save Changes

How to get your purchase code Click here

Successful activation.

4. Install Needed Plugins

After successful activation of the theme, you need to install the necessary plugins for the site

Step 1. In WordPress Dashboard, click to Begin installing plugins in installation notification

Step 2.

1 - Choose check all plugins

2 - Choose Install action

2 - Click Apply and wait

Successful install and active required plugins.

5. Import demo data

Step 1. In WordPress Dashboard, Go to Theme Option -> Import Demo Content

Step 2. Click to Import Now

- 1 Import now: Import full demo content

- 2 Import without media: Import full demo content but no media

- 3 Import media: Import only media

On Popup lightbox select OK to start then waiting a moment while import sample data

Successful import demo data

Note: In case your server has the same configuration as the request but still can not import successfully with Import now. You can use the Import without media feature and then Import media. You can import many times until successful.

6. Video tutorial

1. Basic Settings

2. Menu Settings

- Menu style: Set style for main item menu.

- Hover color: Set color hover for main item menu.

- Background Hover color: Set background color hover for main item menu.

3. Blog & Post

4. Layout Settings

- Sidebar Page: Set sidebar position for your default page. Left, Right, or No sidebar.

- Sidebar Position on Page Archives: Set sidebar position for your archives page(category/tag/author page...). Left, Right, or No sidebar.

- Sidebar select display in page Archives:: Choose a sidebar to display.

- Sidebar Position on search page:: Set sidebar position for your search page. Left, Right, or No sidebar.

- Add SideBar: You can add more sidebar for your site.

5. Typography

- Add Settings: You can add custom css for html tag in area defined in your site.

- Add Google Fonts: You can add more Google fonts to use in your site.

6. Shop Settings

7. Product Settings

Video tutorial

1. Introduction

WPBakery Page Builder (formerly Visual Composer) is a unique plugin, it will help you manage your content at the WordPress sites and create stunning layouts in few minutes without coding. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the past, to create that type of layouts you should be HTML guru or Shortcodes operator ninja.

But not anymore! WPBakery Page Builder will create and manage complex layouts combined with professionally designed plugins made easy!

2. Plugin Documentation

WPBakery Page Builder Documentation

WPBakery Page Builder (Learn more)

Enable page builder for custom post type

In WordPress Dashboard, You can go to WPBakery Page Builder -> Role Manager. Choose Post types is Custom and check post type that you want to enable page builder and Save Changes to finish

3. Update WPBakery Page Builder plugin

When updating the theme version, if there is a newer update for WpBakery you will see the update notice line appear. You can see plugin package (js_composer.zip) in folder theme -> plugins folder

You can update WpBakery following these steps:

Step 1. Click to Begin updating plugin.

Step 2. Click to Update

Update Successful

4. Activate plugin license

WPBakery was purchased by us for an extended license. As a result, all our buyers can use WPBakery without having to purchase additional personal licenses. The auto-update Activate plugin only applies to the envato account that directly purchases the WPBakery license. But you can still update the latest version of WPBakery Page Builder through the installation message when updating our theme.

1. Header & Footer

Header & Footer is one of our outstanding features. It allows you to create and edit your web page header/footer content with the page builder. You can easily edit or design your own header/footer for your site with a wide range of customizable features.

The First, please sure header / footer editing with page builder is active

In WordPress Dashboard, You can go to Header Page to edit/create header

Go to Footer Page to edit/create footer

Edit/Create Header Page interface

Edit/Create Footer Page interface

To set Header/Footer default for your site. You can go toTheme Option -> Basic Settings -> General

To set Header/Footer for special page(Home page). You can go to edit page area. Find to Page Settings -> General Settings

Video tutorial

2. Mega Menu

The First, please sure Mega Page editing with page builder is active

In WordPress Dashboard, You can go to Mega Page to edit/create content of mega menu

This is the editing/create interface of Mega Menu

After you have a Mega Page, the next step is to go to the Menus to configure the display for a mega item.

Step 1. To Dashboard, you can go to Appearance -> Menus

Step 2. Select menu item to display Mega Menu. 

1. Check Enable Mega Menu

2. Select the Mega Menu to display

3. Save changes to apply

Step 3. This is the front end display interface

Video tutorial

3. Elements (Shortcodes)

List 7up's elements.

Below is the interface of each element

3.1. Accordion

Feature: Used to display accordion.

Edit interface

Front-end views

3.1. Account Manager

Feature: Used to display the list of paths that users logged in to are allowed to access. Displayed as a dropdown.

Edit interface

Front-end views

3.2. Advertisement

Feature: Used to display ads, banner images with text content.

Edit interface

Front-end views

3.3. Banner Slider

Feature: Used to display banner slider.

Edit interface

Front-end views

3.4. Blog

Feature: Used to display blog page. You can show grid, list or both.

Edit interface

Front-end views

• Blog Full Width
• Blog List
• Blog Grid
• Blog Masonry
• Blog Detail

3.5. Breadcrumb

Feature: Used to display breadcrumb any where in page builder.

Edit interface

Front-end views

3.6. Carousel Slider

Feature: Used to display carousel slider with any content.

Edit interface

Front-end views

3.7. Contact Form 7

Feature: Used to display form contact.

Edit interface

Front-end views

3.8. Custom Link

Feature: Used to custom link.

Edit interface

3.9. Flex Wrapper

Feature: Used to display flex box.

Edit interface

Front-end views

3.10. Google Map

Feature: Used to display google map with custom market, information. You also create map with multi location.

Edit interface

Front-end views

3.11. Information

Feature: Used to display information.

Edit interface

Front-end views

3.11. Instagram

Feature: Used to display images from your instagram.

Edit interface

Front-end views

3.11. Intro Slider

Feature: Used to display intro slider.

Edit interface

Front-end views

3.14. Mega List Pages

Feature: Used to display list page.

Edit interface

Front-end views

3.12. Logo

Feature: Used to display logo of your site.

Edit interface

Front-end views

3.13. Mailchimp

Feature: Used to display mailchimp form with MailChimp for WP plugin.

Edit interface

Front-end views

3.15. Menu

Feature: Used to display menu in header or any where in page builder.

Edit interface

Front-end views

3.19. Mini Cart

Feature: Used to display mini cart any where in your page builder.

Edit interface

Front-end views

3.20. Posts

Feature: Used to display one more posts with many styles defined (grid, slider). Allows customization of column number, item slider, row number, animation thumbnail, pagination, loadmore, masonry ....

Edit interface

Front-end views

3.16. Product Countdown

Feature: Used to display product countdown.

Edit interface

Front-end views

3.21. Products

Feature: Used to display one more product with many styles defined (grid, slider). Allows customization of column number, item slider, row number, animation thumbnail, pagination, loadmore, masonry ....

Edit interface

Front-end views

3.22. Search Form

Feature: Used to display search form. You can custom search for post,product or all of your post type with categories list. Live search feature already in this element.

Edit interface

Front-end views

3.23. Shop

Feature: Used to display shop page. You can use enable shop ajax in this element.

Edit interface

Front-end views

• Shop Ajax
• Shop List
• Shop Grid
• Shop Load More
• Shop Hidden SideBar
• Shop SideBar Right

3.16. Tabs

Feature: Used to display tab with 7uptheme style.

Edit interface

Front-end views

3.17. Tool Panel

Feature: Used to display a advertisement

Edit interface

4. Create/Edit page

In WordPress Dashboard you can go to Pages -> All Pages and choose page want to edit. Or you can choose Pages -> Add New to create new page.

Pages template:

Default template: create a page with default space top and bottom.

Visual template: create a page with page builder and no default space top and bottom.

Video tutorial

Edit Page

Create Page

5. Create post/product

Create post

In WordPress Dashboard you can go to Posts --> Add New to create new post. Or Posts --> All Posts and choose a post to edit.

Create product

In WordPress Dashboard you can go to Products --> Add New to create new product. Or Products --> All Products and choose a product to edit.

Note: you can enable page builder for post/product to create/edit with Bakery page builder.

6. Responsive

All products using 7uptheme framework 2 (from 7/2018) will have additional advanced responsive functions. Helps you improve visibility for mobile devices.

Base responsibe for column: when you create page builder content from rows and columns. You can divide the width of the columns you want to display for each screen.

In Column Settings, you can choose Responsive Options

Width: default width. Apply for small device.

Responsiveness: responsibe settings for 5 type of device.

1: Large device

2: Medium device

3: Small device(default)

4: Small 2 device: Mobile lanscape

5: Extra Small: Mobile default

Advanced responsive:: Applies to some special items or all items depending on your settings.

In elements setting, You can choose Responsive Design Option: you can change padding, margin, background, width ... and alot of css attribute for each device.

7. Meta Data

7.1 Meta General

1. Tab General Settings: used to setting header, footer, sidebar, append content before and affter, show/hide title and social network sharing for each page/post/product

2. Tab Custom Color: used to setting background and main color for each page/post/product.

3. Tab Display & Style: used to select style display and edit width of page container for each page/post/product

7.2 Meta Post

7.3 Meta Product

1. Product Settings

2. Product Type: used to set trending for current product and add more image thumbnail on hover product

8. Widget

List 7up's widget

8.1. Attribute Filter

8.2. Categories Filter

8.3. Author Information

8.4. Post List

8.5. Price Filter

1. Choose home page

After importing the demo data. You can choose one of our demo home as your home page.

Step 1: In WordPress Dashboard, Go to Settings -> Reading

Step 2: Click to A static page (select below) and select Home page from list.

Step 3: Click Save Changes to apply.

2. Translate theme/plugin with Loco Translate

Loco Translate provides in-browser editing of WordPress translation files. It also provides localization tools for developers, such as extracting strings and generating templates.

First, you need to install Loco Translate plugin for your site.

Translate Theme

Step 1: In WordPress Dashboard, Go to Loco Translate -> Themes

Step 2: Choose theme want to translate from theme list.

Step 3: Click to New language to add language to translate. Or choose exits language to edit.

Step 4:Choose a language and location and click Start translating to start translate.

Step 5: translate interface

1: Click Sync button to update new pot file. Use when update theme or update pot file in theme-folder -> languages folder.

2: Enter key to find text/string

3: Source text, click to text want to translate.

4: Source text display.

5: Enter text translated.

6: Click Save to finish.

Translate Plugin: Same as translate theme, In WordPress Dashboard, Go to Loco Translate -> Plugins and and sequentially the remaining steps as you are translating the theme.

3. Multi language plugins

Our products are compatible with multi language plugins like WPML, Polylang, QTranslateX

First, make sure you have installed multi language compatible plugins for our products and that translations for languages are available for the categories, products, pages, product categories .... You can read Multi language plugin guide for usage

Theme Option in Multi Language: When using multi language plugin. Theme Option values will be stored independently for each language. So you need to save your settings for each language.

Go to Theme Option, Switch language that you want to settings

Header/Footer/Mega page in multi language: You can translate same as page or copy content and translate in a new Header/Footer/Mega Page and rechoose for each language.

4. Optimization

* Optimize Uploaded Images

Images are one of the heavier elements of your site. There are a few ways you can optimize your uploaded images.

You should specify the maximum image dimensions for thumbnail, medium, and large sized images. That means, if you upload an image 1024px wide, and your content area is only 604px wide, normally the image will be scaled down using CSS. When you specify the maximum width of your ‘large’ images as 604px, it’ll then display the pre-resized, 604px wide image, which will be significantly smaller in size.

* Install A Caching Plugin

The second most effective way (the first being choosing a good web host) to improve your site’s load times is to install a caching plugin. As soon as you install a plugin like W3 Total Cache or WP Super Cache, you’ll be able to tell that your site loads faster.

In simple words, when a caching plugin is active on your site, it servers users cached copies of your pages. It greatly reduces MySQL database access, no. of PHP requests, server access for static resources, and even HTTP requests (in case of combining multiple files into one).

W3 Total Cache is one my most favourite WordPress plugins. It offers a variety of caching features:

- Page Cache

- Minify

- Object Cache

- Database Cache

- Browser Cache

- CDN

Initially, you don’t want everything enabled. You can still safely enable everything except Minify and CDN (unless you want to use a CDN).

Minify breaks some other heavily JS-based plugins unless you specifically tweak it. On the other hand, you should tweak the Browser Cache settings to utilise the full potential of browser caching.

* Try a CDN to Speed Up WordPress

Offloading the static resources of your site, like images, scripts, css files, can speed up your site. Not only those resources will load faster for visitors, if you use a CDN, your primary server will have less load to handle and thus will deliver significantly better performance while serving the rest of your site.

* Enable Gzip Compression

You should serve compressed versions of your site to your visitors, as they’ll be less in size and will generally load a lot faster.

5. Use child theme

Child Themes

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

- Using a child theme can speed up development time.

- Using a child theme is a great way to learn about WordPress theme development.

Child Themes install

You can find child theme package next to the main theme package in the full download(ridestyle-child.zip). Once you've installed the main theme, you have to install the child theme and start customizing it

The main file

- function.php: You can create new function or php process for your theme or copy a php function in the main theme to child add to edit and customize your way.

- style.css: Allows you to insert the css code into your web page

Template folder

Allows you to change the html structure of the theme components. You can copy any file in folder s7upf_templates into child theme with the same directory structure to edit. Or you also copy all s7upf_templates folder into child theme for comprehensive change.

6. Custom style

In addition to using styles available in theme settings, you can add css codes to customize your look in the following ways:

Use Custom CSS of WPBakery page builder: In WordPress Dashboard, Go to WPBakery Page Builder -> Custom CSS

Use Additional CSS in Customize WordPress: In WordPress Dashboard, Go to Appearance -> Customize -> Additional CSS

Use file style.css in child theme.

1. Change Logo

- First, to change the logo, you need to define the correct header. Note that the home page may be using its own header. You need to check the meta data header page for your home page. Review the Header / Footer section for more details.

- Then go to the header editing interface, find to Logo element and click edit

- Click Save Changes and Update header page to finish

2. Import demo data error

- Check your server and WordPress configuration. Make sure it is correct. You can see System requirement.

- In the case of properly configured but not resolved issues with the Import now feature, you can use the Import without media feature.

- After Import without media all done. You can continue Import media. You can import media many time until success.

- Worst case is after you have done all that still can not solve the problem you please create topic on our forum with your demo account information. We will help you check the problem. You can create topic in Ridestyle forum

3. RTL style missing in child theme

- If you use child theme and have problem with RTL style. You can copy rtl.css in main theme into child theme to fix this issue.

4. Header/Footer not change

- First, to change the logo, you need to define the correct header. Note that the home page may be using its own header. You need to check the meta data header page for your home page. Review the Header / Footer section for more details.

- Disable Session page in Theme Option. Go to Theme Option -> General -> Other -> Session page -> Turn Off

5. Remove Intro Demo

Go to Theme Option -> General -> Other -> Session page -> Show tool panel