Installation
The theme is built for use with WordPress 4.3.1 and higher. We recommend to upgrade to the latest version before proceeding to the installation process.
For an easy installation and setup process, please check our Video Tutorial on YouTube!
You can always find the latest version of the Documentation online: http://veented.com/docs/waxom/
1.1. Uploading and Activating the Theme
There are two different methods to install Waxom WordPress theme:
-
Using the WordPress built-in theme uploader
- Go to the 'Appearance / Themes' menu in your WordPress Admin Dashboard:
- Click the 'Add New' button located on top:
- Click the 'Upload Theme' button located on top:
- Press the 'Choose File' button, select waxom.zip file and click 'Install Now':
- When the uploader is finished (might take a moment), click 'Activate Theme'
- Go to the 'Appearance / Themes' menu in your WordPress Admin Dashboard:
-
Uploading the theme files through an FTP client
- Using an FTP client (like FileZilla), connect to a server with your WordPress installation
- Navigate to /wp-content/themes/ folder and upload the theme folder there
- Log in to your WP Admin Dashboard and open the 'Appearance / Themes' menu
- You will now see Waxom listed among the other themes. Just activate it!
1.2. Installing Plugins
After activating the theme, you will see a Required Plugins notice:
They are absolutely necessary for the theme to be fully operational. For more information about them, please check the Plugins section.
NOTE: Since WordPress 5.0, Gutenberg is now a default page/post content editor. If you would like to bring back the old editor, please install the "Classic Editor" plugin.
1.3. Importing a Demo Content
Waxom comes with a super easy method to import the Demo Content. Just visit the "Waxom Import" menu and click the "Import Demo Data" button:
It might take a while so be patient. After it's all done, you will see a success notice:
You have just imported all Homepage layouts from the theme's demo aswell as multiple portfolio and blog layouts plus about, team and contact page examples. If you want to import more page examples, just go again to "Waxom Import" menu and from the select box pick a desired page/package.
If you have any problems importing the demo content that method, please perform it the more manual way:
- Go to the 'Tools / Import' menu in your WordPress Dashboard
- Choose WordPress and install the plugin if you haven't done so already
- Choose the 'waxom_demo_content.xml' (can be found in /Demo Content/ folder) and press 'Upload file and import'
- When it's finished, you will see new posts, pages, portfolio items and menus on your website
NOTE 1: This is an optional step but it helps you create your website faster thanks to pre-built pages, posts and portfolio taken straight from the theme's Live Preview.
NOTE 2: Some photos visible on the theme's Live Preview are not included with the demo content due to their license type.
1.4. Basic Setup
Note: This step is optional if you have imported the Base Demo Content via the Waxom Import tool!
After you have the theme installed, you will need to make a basic setup:
- Go to the 'Settings / Reading' menu and select a 'static page' at the 'Front page displays' setting. Choose your own page or one of the imported Home layouts from the demo content and a Blog page there:
- Go to the 'Appearance / Menus' tab, enter a 'Menu Name' and press 'Create Menu'. If you have imported the demo content - you can go straight to the next step because you already have a menu created.
After you are done, just add some pages to your brand new menu and hit Save Menu button. Voila!
NOTE: For more detailed instructions about creating a custom menu please visit This Section.
2. Theme Options Panel
Theme Options Panel is a place where you can control every aspect of your website with few button clicks. It is accessible from the "Waxom" menu in your WordPress Dashboard:
Each available option there is well described so you shouldn't have any problems with any of them.
2.1. Saving the Theme Options Panel
After you have made some changes in the panel, please don't forget to click the "Save All Changes" 1 button located both in the bottom and top section of the panel.
2.2. Restoring the default settings
To restore the Theme Options default data, simply hit the 'Options Reset' 3 button located at the bottom of the Panel.
2.3. Backing up settings
Backing up the current Theme Options state is truly easy. Just visit the "Backup" 4 tab and follow the instructions. After you create a backup you can then load it anytime later or on a different site location (while migrating servers and so on).
3. Theme Structure
This section covers information about the main theme sections.
3.1. Header
Header is a section of your website that holds the logo image and the navigation menu:
You can configure, change the style and other settings of your Header in the Theme Options / Header menu:
3.3. Page Content
Page Content is a theme's section that holds your post and pages content. You may find more information about it in the Creating Content section.
3.4. Footer
Footer is a section located at the very bottom of your site. It can hold the copyright data, social icons and Footer Widgets (to insert widgets visit Appearance / Widgets menu and place your widgets into Footer Column 1-4 areas).
You can configure general Footer settings in the Theme Options / Footer menu:
4. Creating Pages and Content
This section covers information about the page and content creating process. If you want to go straight to the section about creating a One Pager Homepage, please click this link.
4.1. General Information
There are two ways of creating pages and posts content in Waxom theme:
- Page Builder (WPBakery Page Builder, former Visual Composer): This is a default way of building pages and posts content. Add rows, columns, content blocks and easily rearrange them with a drag and drop functionality. A full guide may be found here.
- Classic Way: Insert your content the classic way - directly to the Content Editor. This method is a default for blog posts.
4.2. Page Settings
Waxom comes with a truly simple page settings management systems that lets you easily choose a page layout, header style, footer color and so on for each page and post invidually:
Those settings are:
- Page Title: Disable or enable the title section of your page.
- Header Style: Choose a style of the header for your page.
- Layout: Choose a layout for your page. NOTE! For Page Builder pages, it is recommended to use the "Fullwidth" page layout.
There are also Advanced Page Settings (you need to click on the title to open the metabox):
- Page Nav Menu: Select a different navigation menu for the page.
- Footer Style: Choose a style of the page footer.
- Footer Skin: Choose a skin of the page footer.
- Footer Widgets Area: Enable or Disable the Footer Widgets Area.
4.3. WPBakery Page Builder (former Visual Composer)
Creating page or posts content with WPBakery Page Builder (former Visual Composer) is extremaly easy. To start, click the "Backend Editor" button:
And this should be the effect:
As you can see, basic information is provided directly on the screen. However, let's make it easier! After hitting the "Add Row" button, here is what you get:
Numbers on the list represent points on the screenshot above:
- 1 Add element - add a selected element to your page
- 2 Load a Templatera template
- 3 Drag and move the row
- 4 Change column layout of the row
- 5 Add a column to the row
- 6 Toggle row view (hide/show)
- 7 Edit the row settings
- 8 Duplicate row
- 9 Remove row
- 10 Add an element to the row
- 11 Add a new row below
- 12 Custom CSS code for page
Let's add a new content block to our page. Let's click the "Add element" button (or the plus sign on a column area). A popup window will show:
Simply choose a content block you would like to place on your page and click it. A new popup window will show up with block specified settings. It's that simple.
NOTE: All blocks provided by Waxom have an icon with a green background.
And this is an example view after adding few content blocks:
After you are done adding content to your page, simply click the "Publish" button located on the far right. Congrats! You've just created your first page using the Page Builder. Wasn't it simple?
4.4. WPBakery Page Builder Templates
Waxom comes with prebuilt WPBakery Page Builder (Visual Composer) templates so you can load the layouts straight from the theme's Live Preview directly into your website and then just adjust their content for your needs. Isn't that a time saver?
NOTE: Templatera templates are automatically imported with theme's demo content so if you have already loaded it, you don't need to separately import the file below.
To load templates, go to the "WPBakery Page Builder / Templatera" menu (Templatera plugin must be installed and active) and press the "Choose File" button next to the "Import VC Templates" label. After the window popups, choose the waxom_templatera.xml file located in the /Demo Content/Templatera/ folder. After it's done, hit the "Save Changes" button. Done!
How to use templates? Simply edit/create a page or post, switch to the "Backend Editor" mode and add the "Templatera" element. Choose a desired template and save.
4.5. Homepage
The homepage known from the theme's Live Preview is built with WPBakery Page Builder (former Visual Composer). After loading the Demo Content, you will be provided with all available homepage layouts.
For a detailed guide how to build a One Pager Homepage, please visit this section.
4.6. Portfolio
Portfolio is a page where portfolio posts are being displayed. Check the Creating Portfolio section for more information.
4.7. Custom Page Title
Waxom comes with a cool functionality to customize a page or post (blog and portfolio) page title section. To enable a custom page title select the "Use a custom page title" option in the Customize Page Title metabox. A lot of features will appear:
Each option has a label so you shouldn't have any troubles doing the customization. Have fun - there are absolutely no limitations!
5. Creating One Pager
One Pager is a page built fully with the WPBakery Page Builder (former Visual Composer) plugin so it is necessary to have it installed.
To avoid a process of building this page from scratch, you may import the theme's demo content and you will get instant access to all of the homepage examples including the One Pager one. If you would like to build one from scratch or simply learn the structure of it, please keep reading.
To get started, please create a new page. Next step is to enable the WPBakery Page Builder for the page by clicking the "Backend Editor":
After enabling it, you will get this view:
The basic part of a One Pager is the Row element. To add one, please click the big "+" plus icon on the top left and from the popup window select the "Row" element. After clicking it, a new section will appear in your editor. To add a new element inside, simply click the Plus button inside and choose an element to be placed.
One Pagers are known from a nice navigation bar scrolling effects. But how do they recognize which section should the About or Contact element refer to? That's why you need to use the Row Settings. To open them, simply click the Pencil icon on the right of the row element:
A popup window will appear:
Row ID is the field to type/insert your section's unique ID used later for your site navigation.
And basically - that is all. One Pager is a page with multiple rows like that, each (or not, like written below) with it's own, unique Row ID and invidual content. After creating your One Pager, please proceed to the Creating Site Navigation section.
NOTE: Please remember to set the Row ID of your first row/section to "first".
NOTE 2: You don't have to set a unique Row ID for each of your One Pager rows. Let's say your homepage structure is like following:
- Revolution Slider - Row ID: first
- Call to Action - no Row ID
- Icon Boxes - no Row ID
- Testimonials - Row ID: comments
The site navigation scroller script is smart enough to know that sections from Revolution Slider to Icon Boxes are actually one big section.
6. Creating Site Navigation
NOTE: After importing the theme's Base Demo Content, you will be provided with three menus: Main Navigation, Small Navigation (for Top Bar or a Widget) and OnePager Navigation for One Page type of pages.
Because of the One Pager nature of the theme, creating the site navigation may take few seconds more than if built for a standard theme.
6.1. Creating New Menu
To get started, please visit the Appearance / Menus, type your 'Menu Name' and press 'Create Menu':
After it's created, please assign it to "Primary Navigation" theme location at the bottom of the site and hit "Save Menu":
Now we are ready to start adding navigation elements.
6.2. Adding Menu Elements
There are two types of menu elements to be added:
- Standard Pages/Posts - links to your other site pages and posts
- OnePager Row Links - linking your One Pager rows/sections.
To add a standard page/post link, just click the "Pages" menu on the left and choose pages to be added to your menu:
To add a new OnePager link, please click the "Links" menu on the left side, type in the Link Text (row/section name) and the URL:
As you can see, you may use the "http://frontpage_url/" shortcode and the theme will dynamically replace it with your Front Page URL (set in Settings / Reading menu). You may also insert a full page URL which will allow you to create separate One Pagers - yes, it's possible! The "home" part is the unique Row ID of your Page Builder row. After you are done typing the name and URL, click "Add to Menu" button.
After you are done adding your new pages, don't forget to click the "Save Menu" button!
6.3. Mega Menus
Waxom comes with a native Mega Menus functionality and it's really easy to use!
First of all, open the Appearance / Menus tab and add second level elements to your Menu as shown below:
Next, open the parent menu element settings (little triangle icon on the right) and add a "mega-menu" class to the "CSS Classes" field:
NOTE: If you cannot see the "CSS Classes" field, please open the "Screen Options" menu located at the very top the site and check "CSS Classes" option:
After that, all you need to do is Save your menu. You have just created a 4 column mega menu!
NOTE: If you would like to disable the mega menu's Column Heading then just add an extra no-heading class to the menu's parent element.
7. Creating Portfolio
7.1. Adding Portfolio Posts
Before creating the portfolio page itself, you will need to create some portfolio posts first. To do so, simply visit the Portfolio / Add new menu:
A super basic portfolio post requires the Post Content, Featured Image, Post Categories fields to be configured.
After you import the demo content or Templatera templates, you will be able to choose from one of four pre-built single portfolio post templates. Just enable the "Backend Editor" and choose "Portfolio Post 1- Classic" template. This is what you should get:
NOTE: If you cannot see the "Backend Editor" button, please make sure that you have the WPBakery Page Builder (former Visual Composer) plugin installed and configured for portfolio posts, see guide.
As you can see, each field is very intuitive. Here is a list:
- 1 Post Content built with WPBakery Page Builder (former Visual Composer)
- 2 Post Categories - those are necessary for the filtering menu on the portfolio page to work. Simply add few by clicking the "Add New Category" button.
- 3 Featured Image - the post's thumbnail is based on the post's Featured Image so it is necessary to upload one.
- 4 Portfolio Post Settings - you can insert a short portfolio post description used for Portfolio Grid layouts with description and choose a link type of the post (if External option is selected, the thumbnail in the portfolio grid will link to the provided URL/link).
7.2. Portfolio Page
A portfolio page is simply a page with the Portfolio Grid section built with WPBakery Page Builder (former Visual Composer). You may also use a pre-built templatera template "Portfolio Page".
8. Blog Posts
Here is a basic view of the blog post in the dashboard:
As you can see, each field is very intuitive. Here is a list:
- 1 Post Content - you can insert any text content here including shortcodes of course.
- 2 Post Format - easily choose a format for your post. Each option will open an extra meta box for a specific type of a post, i.e. selecting the "Gallery" format opens a "Post Gallery" metabox that will let you create a gallery for your post.
- 3 Post Categories - the post categories.
- 4 Post Tags - the post tags.
- 5 Featured Image - post thumbnail.
8.1. Standard
This is a basic blog post format. The screenshot in the section above presents a standard blog post.
8.2. Gallery
To create a Gallery type post, simple select the "Gallery" option in the "Post Format" metabox:
It will open a new "Gallery Settings" metabox:
To add images to the gallery, simply click the "Create Gallery" button. In the popup window click the "Add to Gallery" button:
Here you upload new images or select the existing from your media library:
After you are done, click the "Add to Gallery" button and then "Update Gallery". New thumbnails will appear in your "Gallery Settings" metabox:
After you have your gallery created, simply choose it's type in the "Gallery Type" select menu and Publish the post!
8.3. Video
First of all, select the "Video" option in the "Post Format" metabox. A new "Video Settings" metabox will open where you can insert a URL/link to your video:
A full list of supported sites can be found here.
9. Theme Customizer (Appearance)
One of the coolest Waxom features is definitely our very own Theme Customizer. It is accessible directly from the Theme Options / Appearance tab:
Every change that you make appears immediately on a small preview on the right!
These tabs: Header, Page Title, Content and Footer don't need explanation - you can change main color aspects of selected theme sections. Rest of them are described below.
9.1. General
In the General tab you can change main settings of the theme looks like the Accent Color or Background Color. You can also choose one of the predefined styles either for Accent Color or a whole theme color scheme:
Changing a color scheme of your site was never easier!
8.3. Typography
In the Typography tab you can change font families for Headings and Parapgraphs, their weight and invidual font sizes:
Whole Google Font library accessible in a single mouse click!
10. Shortcodes
Waxom comes with many shortcodes that will let you build any page content in no time. There are two ways to access shortcodes and each is explained below.
10.1. WPBakery Page Builder (former Visual Composer)
The best and simplest way to manage your pages or posts content is WPBakery Page Builder (former Visual Composer). Most of shortcodes are available as element blocks that you can easily reconfigure, resize and modify at any time, without a need to insert them from scratch. More about WPBakery Page Builder (former Visual Composer) can be found in this section.
10.2. Quick Shortcodes
All simple shortcodes are easily accessible via the Quick Shortcode menu. While in the Page/Post Content Editor, click the double bracket icon and a dropdown menu will open:
There you can select one of numerous shortcodes available that will be immediately added to your editor's content.
11. Sidebars
Waxom fully supports widget locations (sidebars). There are default ones that come automatically upon theme activation and with the Sidebar Generator you may create as you only need.
You can add widgets to your sidebars in Appearance / Widgets tab:
11.1. Default Sidebars
Waxom comes with default sidebars for mayor locations:
Those are:
- Default Sidebar - this is a default sidebar set for any page that uses a "Sidebar" layout including blog posts and page.
- Archives/Search Sidebar - sidebar displayed on an Archives and Search results page
11.2. Sidebar Generator
With the Sidebar Generator, you may create as many sidebar locations as you only need. It's accessible via the Theme Options / Sidebars menu:
To create a new sidebar, simply click the "Add new Sidebar" button. After you are done setting a name, Save Theme Options and visit your Appearance / Widgets menu. You will see your brand new sidebar listed among the theme's default sidebars!
12. Plugins
Waxom comes with a number of plugins including premium ones like WPBakery Page Builder (former Visual Composer), Revolution and Layer Sliders. These plugins are required: Waxom Core, WPBakery Page Builder (former Visual Composer), Templatera, Contact Form 7 and Revolution Slider. After you activate the theme, you will get a notice informing about it:
After clicking the "Begin installing plugins" button you will be moved to the "Install Plugins" menu where you can easily install each required plugin:
Premium plugins documentation files can be found in the same /Documentation/ folder as theme's documentation.
NOTE: Since WordPress 5.0, Gutenberg is now a default page/post content editor. If you would like to bring back the old editor, please install the "Classic Editor" plugin.
12.1. WPBakery Page Builder (former Visual Composer)
WPBakery Page Builder (former Visual Composer) plugin can be installed via the Appearance / Install Plugins menu. You may also install it manually by uploading the js_composer.zip file from the /waxom/framework/plugins/lib/ folder.
After you install and activate the plugin, please visit the "WPBakery Page Builder" menu and select the "portfolio" and "post" post types to enable the Page Builder for portfolio posts:
Plugin documentation can be found in the "Plugins" folder of this theme package.
12.2. Revolution Slider
Revolution Slider can be installed via the Appearance / Install Plugins menu. You may also install it manually by uploading the .zip file from the /waxom/framework/plugins/lib/ folder.
To import sample sliders, open the Revolution Slider panel and click on the green "Import Slider" button. Choose the /Demo Content/Revolution Sliders/waxom_creative.zip file and click the blue "Import Slider" button. That's all!
Plugin documentation can be found in the "Plugins" folder of this theme package.
12.3. Layer Slider
Layer Slider can be installed via the Plugins / Add New menu. You may find the plugin's .zip file in the /Plugins/Layer Slider/ folder inside the theme's downloadable package.
Plugin documentation can be found in the "Plugins" folder of this theme package.
13.4. Contact Form 7
Contact Form 7 is a free plugin and also can be installed via the Appearance / Install Plugins menu.
Plugin documentation can be found Here.
13.5. Classic Editor
Since WordPress 5.0, Gutenberg is now a default page/post content editor. If you would like to bring back the old editor, please install the "Classic Editor" plugin.
13.6. WPML
WPML is the WordPress Multilingual Plugin that makes it easy to build multilingual sites and run them.
You can download the plugin from the official website:
Plugin documentation can be found Here.
13. Theme Hooks
You may learn about the theme hooks from the article on our Support Site: Link.
14. Theme and Plugin Updates
Full theme and plugins update guide can be found on our Support Site: Link.