Businessx

businessx-mockup
Businessx is a free one page WordPress theme. You can download it from: http://www.acosmin.com/theme/businessx/

Overview

  • Important – works only on WordPress version 4.5 and above
  • Responsive design
  • Grid size: 1280px
  • Sidebar size: 344px
  • Post maximum width: 846px
  • Three menu locations: Primary Menu, Actions Menu, Footer Menu
  • Page templates: Portfolio Page (for Jetpack Portfolio), Front Page (for Business Extensions)
  • Recommended images sizes: 1920x1080px – Some info on featured images and regenerate thumbnails – click here

Installation

Businessx isn’t currently hosted by WordPress.org. You will need to download it from here. After that go in your WordPress Administration Panel > Appearance > Themes, click on Add New, then on Upload Theme and activate it (Businessx). It is highly recommended that you use a child theme, more info bellow.

Important: if you’re using Businessx Extensions, do not modify the theme name in style.css.

Child theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme (Businessx in this case). Child themes are the recommended way of modifying an existing theme. You can find more info here.

You can download an already made and compatible child theme from here. Install it as any other theme (as noted in the Installation section). Just make sure you have the parent theme (Businessx) installed first.

Important: if you’re using Businessx Extensions, do not modify the theme name in style.css.

Update theme

Businessx is in the official WordPress.org themes directory, when an update is released you will receive a notice to update.

Before you update, please make a backup and also check the Backups section on this page.

Also, please use a child theme and make all your customizations on it. Modifying the parent theme is risky because if you update, you’re going to lose all your changes.

Menus

Businessx features 3 menu locations:

businessx-menus-locations

In the above image you can see the locations you can use to add custom menus:

  • Primary Menu – You can use it to add normal menu items (pages, posts, custom links). It’s recommended you use just a few top level items and multiple submenus.
  • Actions Menu – Use this location to add a few buttons, between one and three. It doesn’t support submenus.
  • Footer Menu – Use this location to add links to your Terms and Conditions, license or anything you want. Limit to just a few items. It doesn’t support submenus.

Scroll to section

To make a menu item smooth scroll to a specific section you will need to follow this steps (this works only for the Primary Menu and Actions Menu):

scroll-to-section

  1. Go to Appearance > Menus.
  2. In the top right corner click on Screen Options.
  3. Make sure you have CSS Classes checked. If not, click on it.
  4. When you want to add an item, click on Custom Links, in the URL field add #section-about for example and in the Link Text field any title you want
  5. Add the item, click on it and in the CSS Classes (optional) text field add gotosection
  6. Save the menu and now when you go on your front page a click on the newly created menu item, it will scroll to the specified section

Here are the section ids you can use: #section-slider, #section-features, #section-about, #section-team, #section-clients, #section-portfolio, #section-actions, #section-testimonials, #section-pricing, #section-faq, #section-hero, #section-blog.

To make the menu items act like links on other pages you will need to install a plugin called Menu Item Visibility Control. After installing/activating go to Appearance > Menus and do the following:

  1. Add two identical menu items as mentioned above
  2. Choose the menu item you want to show on front page and in the Visibility: text field add is_front_page()
  3. In the menu item displayed on all the other pages (except front page), the Visibility: text field must contain ! is_front_page(). Also, in the URL field instead of adding a simple section id, also add your front page’s url, for example: http://yoururl.com/#section-about

Example in image:

display-url-menu-item

Social Profiles Buttons

In the Primary Menu and Footer Menu locations you can also add links to your social profiles, represented by icons. You can do this by simply creating a custom link, in the URL Field add your social profile link (example: https://twitter.com/acosmin) and in the Link Text field add anything you want (example: Twitter), just don’t leave it empty.

Supported social profiles (for now): twitter, facebook, google, youtube, instagram, flickr, pinterest, tumblr, vk, linkedin, github, dribbble.

Logo Options

To change your logo options you will need to open Customizer > Site Identity section

businessx-logo-option

By default the logo is text oriented and it will display your website’s title. To change it you just need to change Site Title.

If you want an image as your logo, first select Image in Logo type and after that upload your image right bellow this field, in Logo media uploader.

Recommended images: 200 × 100px, PNG format with a transparent background color.

Custom Headers

Custom headers are images you can assign to be displayed at the top of the page. It will only display on homepage and archive views (search, paged, 404, archives etc.). For posts and pages, when you publish them, you have the option to upload Featured images.

businessx-custom-headers

You can add them from: Customizer > Settings > Header after that scroll to Custom Header Images

Recommended images: 1900 × 800px, JPG/JPEG format, optimized for web 20-50%;

Add as many image as you like. Also, you can click on Randomize uploaded headers to display a random header each time you refresh a page.

Parallax Effect

To enable a Parallax effect on Custom headers, check Custom Header Parallax.

Changing Colors

To change any color go to Customizer > Colors. Anything related to colors you will find in this panel (except for Businessx Extensions – Sections).

businessx-colors

Most important sections in this panel are:

  • Body – change background color and font color;
  • Links – change links colors, for each link state: hover/focus/active (these do not apply to the Footer, there is a special section for it).
  • Header – from here you can change any color related to the menu/header;

Jetpack

Businessx has support for some of Jetpack’s modules, it was tested with the following:

  • Custom Content Types (just the Portfolio module for now)
  • Extra sidebar widgets
  • Contact Form
  • Tiled Galleries
  • Sharing

Footer – Contact Form

To add a contact form in the footer you will need a text widget in which you place the shortcode for it. Example of shortcode:

Footer – Map, Address & Info

For this you will need Jetpack’s “Extra sidebar widgets” activated. After that you add the Contact Info widget in any sidebar you want.

Front Page

To setup your front page you need to have Businessx Extensions plugin activated, after that you create a page with the “Front Page” template selected.

businessx-front-page

Then you can use either the Customizer or Reading page. You can go to WordPress Administration Panel > Settings > Reading, click on “A static page (select below)”, for “Front page” select the page you created above and for “Posts page” any page you want to display your blog view.

businessx-front-page-select

Sections

Sections are blocks of content styled in different ways, with layouts designed for specific purposes.

To use them you need the Businessx Extensions plugin activated and to setup your front page as mentioned above. You can then find them in Customizer > Front Page Sections panel (this panel appears only when your are viewing the front page).

Sections order

If you want to change the order in which they are displayed, you just need to drag & drop them in the position you want.

businessx-sections-order

Hiding sections

To hide a section you need to open/expand it and click on “Hide this section”. If a section is hidden, a specific icon will appear next to the section’s title:

businessx-hidden-section

You will not be able to edit section items while this option is enabled.

Sections Items

Some sections have items which you can add and edit by clicking on “Add or edit …..”

businessx-add-items

After you add items, you can edit options for each one, move them around to change their position or even delete them. The same way you do with widgets.

Important to remember: After you’ve added/edited/deleted items and you are pleased with your work don’t forget to backup by clicking on the Backup sections button. It’s located in the top left-corner. The blue lighted circle indicates that changes were made and you can save if you want to.

businessx-backup-items-position

Sections Options

Each section has specific options, most of them are documented (bellow each label) and are self explanatory.

Backups

These are mostly used to save each section’s item position. There are some cases when you might lose these positions and your items will disappear:

  • Businessx Extensions isn’t active because you disabled it or you changed themes (in which case it disables itself)
  • You change themes multiple times.

As mentioned in Sections Items: After you’ve added/edited/deleted items and you are pleased with your work don’t forget to backup by clicking on the Backup sections button. It’s located in the top left-corner. The blue lighted circle indicates that changes were made and you can save if you want to.

businessx-backup-items-position

In case your items disappear you can restore them with one click in Customizer > Settings > Backups (click on “Restore Backup”).

Notice: Don’t delete your inactive widgets by clicking on “Clear Inactive Widgets” on the widgets page. Only delete the ones that aren’t prefixed with BX:

Templating

The following steps are in case you want to edit Businessx Extensions’ templates without modifying the plugin’s files. This way you can update the plugin and not lose your changes.

  • Create a folder called businessx_templates in your theme’s folder
  • Go to the plugin folder for Businessx Extensions and find the templates folder
  • You can now copy any file you want to edit from the templates folder into your new businessx_templates folder
  • WP will now prioritize templates from the businessx_templates folder

If a file is in a sub-folder in the Businessx Extensions template folder then you need to make that same sub-folder in your businessx_templates folder. For example: ../businessx_templates/sections-items/

Note: please use a child theme (you can download one from here) whenever possible to avoid a theme update from deleting your custom template files.

Note: you should only move template files that you’re actually going to change. That way all the files you do not change will continue to get updates from Businessx Extensions.