TheOne Wordpress Theme Documentation

• Created: 7/3/2014
• Latest Update: 8/13/2020
• By: SeaTheme.net

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.
Thanks so much!

Installation

To use a WordPress theme you must have a working version of Wordpress already installed. For information in regard to installing the WordPress platform, please refer to the WordPress Codex here

1. Extract the package file

After extract the main zip file, you'll see these folders and files:

• theone.zip - zipped theme file, install this file
• Documentation folder - help file
• Log folder
• Demo-data.zip - 9 demo data files
• Theone-child.zip - Child theme
2. Install theme file

This template works well for WordPress 3.9, update yours if needed.
Installing the theme can be done in two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

• Use the Envato WordPress Toolkit plugin.

  Please refer this post.
  Note: How to get the API Key of themeforest? Refer the post.

• Using WordPress Theme Upload:
  Be sure to extract the file "TheOne.zip" from the ThemeForest download before uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.
  • Login to your WordPress admin.
  • In the "Appearance > Themes" menu click the tab "Install Themes".
  • At the top of the page click “Add New”, click “Upload Theme”, then click the file input to select a file.
  • Select the zipped theme file, "TheOne.zip", and click "Install Now".
  • After installation you will receive a success message confirming your new install.
  • Click the link "Activate".

  The video guide - Installation

  Check the video

• Using FTP:
  • Login to your FTP server and navigate to your WordPress themes directory.
  • Normally this would be "wp-content/themes".
  • Extract folder "TheOne" from the zipped theme.
  • Copy the folder "TheOne" to your themes directory.
  • After the files finish uploading, login to your WordPress admin.
  • In the "Appearance" menu click "Themes".
  • Click "Activate" for the theme "TheOne Responsive Retina Ready Multi-Purpose WP Theme".

1. Recommended Plugins

After activating the theme, you would notice the message box on the top of admin pages to ask you install/activate some plugins, you could use them for free or cancel the messages.

2. Logo

To set up logo for your website, you need to:

1. Go to the WordPress Admin Dashboard.
2. Click on the left sidebar item named "Theone" to open the ThemeOptions panel.
3. Go to ThemeOptions > General Settings > Logo section, here you could upload a logo image or input logo text.

The logo size recommended smaller than 180px(width) * 60px(hight), if you want to the logo is displayed clearly in retina screen, please upload a double size image logo(e.g. 360 x 120).

3. Skin

10 predefined colour scheme for your website, pleas go to ThemeOptions > Styling

There are many detail colour setting options for every scheme, you could define your own style base on the given scheme setting. You could also click on the small icon "?" on the right side description for every item to learn detail explanation for the option.

4. Frontpage

To set up the homepage, you need to create a page which you want to use it as homepage, after that, go to ThemeOptions > FrontPage section to select the page from drop-down menu.

5. Generate New Thumbs for This Theme

If there have been some images in your site already, please click the button. It will generate the right size thumbs for the images.

6. Menu

Before building your custom menu, you need to create your pages first, then navigate to Appearance > Menus, it is recommended to create you menu from Pages or Links.

Anchor: You could link a menu item to a particular section in a page, and this feature makes it possible to build an one-page website. Following is how to use Anchor:

1. Build the target page and edit the content with PageBuilder (important). Use the fullwidth wrap for section of one page. Enter the archor name in Fullwidth wrap(check Fullwidth wrap section)
2. In menu panel, eelect the page and click the "Add to menu" button, there is the meun item shown in right column.
3. Edit the menu item in right column, select a archor name in archer selector.
   
   
4. Add the same page to a new menu item, select anoter archor.
5. Save Menu.

7 Post Formats

TheOne provide 7 formats for your post, theses formats would affect the style of your post in list and content page.

Portfolio Post

TheOne provide template with multiple options for your portfolio post, you just need to turn on the "Use Portfolio Template" switcher to activate the template mode:

The text content container could be on left, right or fullwidth, and you could setup the image list layout for the images.

5 Post Types

1. Team

You could add/manage your team members with the Team type post.

To add a new team member, please go to Team > Add New

To show the team members on webpage, you need to use the "Team" module from Page Builder:

1. Add at least 1 team member, assign a team category and upload a featured image(photo, required) for every team member.
2. Create a page and enable the Page Builder.
3. Insert a “Team” module to the page.
4. Edit the “Team” module, choose a team category you want to show in page.

2. Clients

You could add/manage your client information with the Clients type post with the similar interactions to Team.

To add a new client, please go to Client > Add New
Upload the client’s logo image to Featured Image.

To show your clients logo on webpage, you need to:

1. Add several clients you want to show, and set a client category for every client.
2. Create a page and enable the Page Builder.
3. Insert a “Client” module to the page.
4. Edit the “Client” module, choose a client category you want to show in page

3. Testimonials

You could add/manage your testimonials information with the Testimonials type post with the similar interactions to Team.

To add a new testimonial, please go to Testimonials > Add New

To show testimonials on webpage, you need to:

1. Add at least one testimonial you want to show, and set a testimonial category for every item.
2. Create a page and enable the Page Builder.
3. Insert a “Testimonials” module to the page.
4. Edit the “Testimonials” module, choose a client category you want to show in page

4. Jobs

You could add/manage your opening positions with the Jobs type post.

To add a new position, please go to Jobs > Add New

To show jobs on webpage, you need to:

1. Add at least one job post, and set a category for every item.
2. Create a page and enable the Page Builder.
3. Insert a “Jobs” module to the page.
4. Edit the “Jobs” module, choose a client category you want to show in page

5. FAQs

You could add/manage your frequently asked questions with the FAQs type post.

To add a new question, please go to FAQs > Add New

To show your FAQs on webpage, you need to:

1. Add at least one question post, and set a category for every item.
2. Create a page and enable the Page Builder.
3. Insert a “FQAs” module to the page.
4. Edit the “FQAs” module, choose a client category you want to show in page

BM slider

Navigation to BM Slider>Add new, You could create a top slider for page. In this panel, you could set the background image or video, add slider elements indlued: text(H1-H6), blur text, image, button and divide. You could select the slider in page option.

Go to Page / Add new, you could build all kink of pages you like. It is recommended to use Page Builder creating pages. Learn about how to use Page Builder.

Page Options

TheOne provide a set of options to help you making amazing pages:

• Canvas Shapes for top / bottom
• Sidebar
• Slider on head: BM slider or Revolution slider

  Revolution slider

  • If you want to use the Revolution slider, please select the "Full Screen" option for "Slider Layout". If you want active the page canvas shape. Enter the -15% in Offset Size Box to make the slider be filled into top slider wrap
  • The round bullet is moved to right, if you want to use the original style, please remove the css code in section /* bullets put right */ in style.css
  • You could download the demo data and import it
  
  
  
  
• Title wrap: Deactivate the "Show Slider On Head", you'll see the "Show Title Wrap" option, active it. The options of top wrap included:
  • Show Title
  • Show Excerpt Below Title
  • Show Featured Image On Header
• The top and bottom space of page

TheOne provide drag & drop page builder for your pages and posts, press the button "Switch to Page Builder" to enable it. Following is a brief introduction for the page builder:

1. Wraps

The modules could be placed directly into the panel or be dragged into a wrap, depending on your layout. A standard wrap have the same width with page content.

Fullwidth Wrap

A fullwidth wrap have the following features:

• A wider width than the page content, such as to be full-width to outer container, it could be used for your full-width sections.
• Support background color/image/video, IE 8/9 and touch devices do not support the video background, you need to upload a Atl Image for them.
• Parallax effect for image background/foreground, the effect do not support touch devices. If the background image parallax ratio is set as "0", the parallax would be disable.
• Support tabs.
• If you set the dark background color, please active the "Shift Text Color for Dark Background", the font color of this fullwidth wrap is set as white forcibly.
• If you want the content of fullwith wrap filled to full width of screen(no left/right padding), please active the "Fit Content to Fullwidth".
• One page:
  The onepage layout is composed by the Fullwidth wrap. Set a archor name for each fullwidth wrap. You'll select the archor name in menu editing panle.
  
  
  

  Note: please use lowercase letters, do not use spaces and other characters.

  Each section could be set in one Fullwidth wrap.

  

2. Modules

• Text Block

  You could set up a background color for the text block, leave it empty if you don't want to show any background color.

  

   

• Icon Box

  Icon on Left

  

  Icon on Top

  

   

• Image Box

  

   

• Text List

  You could set a bullet icon for every item

  

   

• Button

  You could create a button and customise the size and colour.

  

   

• Portfolio

  Portfolio module is designed for you to showcase your portfolio post, on flip mouseover effect, the portfolio images could be previewed when mouse rollover.

  

   

• Gallery

  Gallery is a image list to show a gallery from image post (featured image) or a set of library images, click the image it would open a beautiful light-box or go to a particular link.

  

   

• Single Image

  Single Image module is to enter a single image to your post/page.

  

   

• Message Box

  This module could create 4 types of message box: Success, Warning, Error, Information

  

   

• Accordion / Toggle

  Accordion and Toggle has the same style in front end, you could expand only one item in Accordion mode and could expand multiple items in Toggle mode.

  

   

• Tabs

  Horizontal Tabs

  

  Vertical Tabs

  

   

• Testimonial

  To show a testimonial module in page, you need to create testimonials from the left hand navigation: Testimonial > Add New, and assign every testimonial post a category, then when build the module, choose the category you want to use.

  

  

   

• Blog

  The Blog module could display the blogs in all format.

  

   

• Client

  The usage is similar with Testimonial module

  

   

• Divider

  Divider module is to place a spacer or lines in the vertical dimension.

  

   

• Team

  The Team Meta information would be hidden on mobile mode

  

   

• Jobs

  The usage is similar with Testimonial module

  

   

• FAQ

  The usage is similar with Testimonial module, and have a same style with jobs.

   

• Contact Form

  TheOne support the famous plugin "Contact Form 7", once you install it to your WordPress, the Contact Form 7 option would appear in the Form Type drop-down menu. Following image is the standard Contact Form module looks like in front end.

  

   

• Video

  To enter a video to the page, you need to copy and paste the embeded code of the video, a example with Vimeo video:

  

  Supported video:

  • Vimeo
  • Youtube
  • and other embeded videos from video sites

  For Vimeo and Youtube video, you could directly copy/paste the link of the video:

  

   

• Promote

  It is a section to place a slogan or other words with a mouseover background color and link.

  

   

• Share

  This section is to help viewers share your current page out via social medias, by now it support: Twitter, Facebook and Pinterest

  

   

• Google Map

  The Google Map module need you provide the name of your location.

  

  If you want to use Google Map Style, please go to this page to edit the map style.

  

• Price

  Build your price block by Price module, by now it support not more than 4 price blocks, and it is recommended to make the module fullwidth(1/1).

  

   

• Slider

  To use the Revolution Slider, you need to:

  1. install the Revolution Slider plugin(there would be a tip which prompt you to install the plugin, we have bought the liscence and you could use it for free in this theme)
  2. create your slider and name it in Revolution Slider panel(the left hand in admin panel navigation)
  3. when using the slider module, set the first options "Slider Type" as "Revolution Slider"
  4. Check the Revolution Slider documentation

  

   

• Infographic

  Progress bar:

  

  Pictorial:

  

  Pie:

  

  Column:

  

  Big Number:

  

   

• Liquid List

  Liquid List could open the post content in current page with smooth animation:

  

   

• Carousel

  The carousel module support the list be horizontal scrolled

  

   

• Latest Post

  Latest Post could display a particular category post as a list follow a post.

  

   

• Count Down

  The Count Down module allow you assign a deadline and to create a timer automatically on front-end.

  

   

3. Save and Load templates

Once you have build a layout via the page builder, and you want to clone them to other page/posts, you could save the current layout to a template and load then in the other page/post page builder section.

The OnePage site including a page with several sections and a menu for this page at least.

1. Create a page with Page Builder, and seperate the content into several sections with Fullwidth Wrap

2. Give a Anchor name for every section:

• Open the Fullwidth Wrap editing panel
• Enter a name for this section and save
  
  
  

  Note: please use lowercase letters, do not use spaces and other characters.

3. Create a menu and link menu items to the page sections:

• Go to Appearance>Menus, choose a menu or edit the current menu
• Choose the page from left Page panel and Add to Menu
• In Menu Structure panel on the right, edit the menu item, choose a anchor for the item. All the sections you have named would be listed in the Anchor drop-down menu. Redo this step for the others menu items
  
  
  


• You could also create a menu item link to other page

4. Video Guide: How to create an Onepage

Check the video
Note: the Fullwidth wrap / Archor name position is changed in latest version.

The Shortcode is assistant for article editing. You could add the shortcodes into WordPress editor or Text module of the Pagebuilder.
Please activate the BM Shortcode plugin.

1. Button

[button link="button URL" color="btn-dark"] Button Text [/button]
[button link="button URL" color="btn-light"] Button Text [/button]

2. Line

You could define width, color, and style for line.

[line width="100%" color="blue" style="solid"]
[line width="20px" color="red" style="dot"]
[line width="100%" color="pink" style="dashed"]
[line width="100%" color="green" style="dashed"]
[line width="90%" color="brown" style="dashed"]
[line width="80%" color="grey" style="dashed"]
[line width="70%" color="dark" style="dashed"]
[line width="60%" color="black" style="dashed"]

3. Blank

[blank]

4. Image

[image style="standard" name="on" link="" target="off" caption="The cation of this image"]The image URL[/image]

6. Gallery

[ux_gallery name="on"]196,195,194,193,192[/ux_gallery]

The numbers are ID of images. Please check how to find the image(media library) ID?
1) Log into WordPress admin panel, navigate to Media click on Library.
2) Switch from Grid View to List View, then mouse over the image, you will see an image ID in the bottom.
3) Open the image, and copy this image ID from the URL in your browser address bar.

5. Dropcap

[dropcap]S[/dropcap]celerisque sit sit sociis augue hac in, sit, enim amet ut lectus. Eu in? Mauris dis, et scelerisque? Adipiscing purus.

6. Column

[one_half]This is a one/half column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/one_half][one_half_last] This is a one/half column. Duo cotidieque efficiantur an. [/one_half_last]

[two_third]This is a two/third column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/two_third][one_third_last] This is a one/third column. Duo cotidieque efficiantur an. [/one_third_last]

[one_third] This is a one/third column. Duo cotidieque efficiantur an. [/one_third][two_third_last]This is a two/third column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/two_third_last]

[one_fourth] This is a one/fourth column. Duo cotidieque efficiantur an. [/one_fourth][three_fourth_last]This is a three/fourth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/three_fourth_last]

[one_fifth] This is a one/fifth column. Duo cotidieque efficiantur an. [/one_fifth][four_fifth_last]This is a four/fifth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/four_fifth_last]

[two_fifth] This is a two/fifth column. Duo cotidieque efficiantur an. [/two_fifth][three_fifth_last]This is a three/fifth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/three_fifth_last]

[one_sixth] This is a one/sixth column. Duo cotidieque efficiantur an. [/one_sixth][five_sixth_last]This is a five/sixth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/five_sixth_last]

7. Fixed Width Column

[fixed_column margin_top="0px" margin_right="0px" margin_bottom="0px" margin_left="0px" width="600px"][height_light]This is a example of 600px Fixed Width Column.[/height_light] Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. [/fixed_column]

8. Icon

[icon size="fa-lg"]fa-music[/icon]

[icon size="fa-2x"]fa-heart[/icon]

[icon size="fa-3x"]fa-plane[/icon]

9. Text list

[list style="fa-map-marker"] Item 01 [/list][list style="fa-paper-plane"] The Text List support FontAwesome. [/list]

10. Switching Words

[switching_word size="h4" word1="Awesome" word2="Untouchable" word3="Foodful" word4="" word5=""]The Za theme is [/switching_word]

On admin panel the left hand, click "TheOne" to enter Theme Options

From Theme Options, you could:

• Import Demo Data to your website - Theme Options > Import Demo Data
• Export Demo Data - Theme Options > Export Current Data
• Setup Front Page - Theme Options > Front Page
• Setup Website Logo - Theme Options > General Settings > Logo
• Setup Fixed Sidebar or Floating Sidebar - Theme Options > Layout Settings
• Setup Social Media - Theme Options > Social Networks
• Setup the Colour and background for Website - Theme Options > Schemes
• Setup the fonts for Website - Theme Options > Font Settings

1. Javascript files
   1. Bootstrap 2.3.1 - styles/bootstrap.js - Some js for Bootstrap layout
   2. main.js - main js plugins: Waypoints v2.0.4, Flexslider v2.2, isotope, Modernizr 2.7.1, debouncedresize, DoubleTapToGo, imagesLoaded v3.1.6, SmoothScroll v1.2.1, Magnific Popup v0.9.9
   3. jquery.jplayer.min.js - js/jquery.jplayer.min.js - HTML5 media player plugin
   4. infographic.js - js/infographic.js - For infographic of pagebuilder, included: bar, Knob v1.2, animateNumbers
   5. jquery.countdown.min.js - js/jquery.countdown.min.js - For Count Down module of pagebuilder
   6. One Page Nav - js/jquery.onepagenav.js - Onepage navigation
   7. Queryloader v2 - js/jquery.queryloader2.js - Page loading
   8. Hoverdir v1.1.1 - js/jquery.hoverdir.js - Portfolio moudle of pagebuilder mouseover effect / mask
   9. carouFredSel 6.2.1 - js/jquery.caroufredsel.js - For Carousel
   10. Gray - js/jquery.gray.min.js - Portfolio moudle of pagebuilder, make the thumbnails gray
   11. theme.pagebuilder.js - functions/pagebuilder/js/theme.pagebuilder.js - TheOne pagebuilder main js
   12. custom.theme.js - js/custom.theme.js - TheOne theme main js
2. CSS files
   1. Bootstrap 2.3.1 - styles/bootstrap.css - Bootstrap layout
   2. TheOne Pagebuild css - styles/pagebuild.css - Pagebuild layout and module style
   3. styles/magnific-popup.css - - Lightbox jquery plugin css
   4. style.css - style.css - TheOne theme main css

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.

Thanks,
SeaTheme