Barberia, theme documentation

Server requirements is one of the key factors for WordPress and Barberia theme, it is highly recommended to use a server which supports the following requirements. We explain about WordPress, Barberia, WooCommerce server requirements.

WordPress requirements

WordPress recommends following server settings.

Barberia requirements

We recommends following server settings for Our WordPress Theme:

WooCommerce requirements

Barberia support WooCommerce officially so it is best to make sure your server also supports this plugin requirements if you are going to set up a shop.To learn about the plugin server requirements, read the official article.

WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less that five minutes to complete.

Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.

If you are struggling, here is a very detailed guide at Wordpress Codex that will walk you through every step.

If you prefer something more visual, you can watch this video tutorial on how to install Wordpress by us

(Please note the video shown is from our NUVO Restaurant theme, but the same process applies)

In order to install Barberia, once you download the theme, unzip the main archive. You will see the following files and folders:

1. wp-barberia.zip: Theme files that you will need to upload into your WordPress themes directory
2. Document: Documentation files
3. Licensing: License files
4. Plugins: Required Premium Plugins that you need to install manually

Barberia Can Be Installed in 2 Different Ways:

1. 1 Installing through WordPress
2. 2 Uploading through FTP (File transfer protocol)

1. Install Barberia – Installation through WordPress:

Installing a theme through WordPress is quite a simple process. After you have logged into your WordPress Simply navigate to Appearance > Themes > Add New > Upload Theme . Click the button “choose file” and locate your Theme zip file (wp-Barberia.zip), then click the “install now” button. After Barberia is installed, find the Theme in Appearance > Themes and click Activate.

Please be informed that you should not upload the whole archive you downloaded from Themeforest, as you will get an error reporting “broken stylesheet file”. Instead locate the wp-Barberia.zip file inside the main archive you downloaded.

2. Installation Through FTP:

Please be informed that you should not upload the whole item you have downloaded from Themeforest as you will get an error message. Instead:

1. Download the Theme archive and extract the main theme zip file with the title (wp-barberia.zip)
2. You may need to preserve the folder structure in the archive when extracting these files. Some softwares such as Winrar create a subdirectory within the same directory name they have unzipped. Uploading a theme to your server via FTP with this structure will lead to error messages.
3. Use an FTP client (for example Filezilla) to access your host web server
4. Transfer your unzipped theme to your server in the wp-content/themes
5. Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your uploaded theme.

Once you have installed and activated our theme you will be prompted to install required and recommended plugins. Just click the link to Begin installing plugins.

Next, check boxes to select all the plugins you want to install, select the bulk action of install from the dropdown box and then click the button to apply.

Next, just click the link to Return to Required Plugins Installer.

Select the plugins you had installed, and then apply the bulk action to activate them.

Finally, you will got a confirmation notice that your plugins were activeded.

To help you set up website with the least efforts, we include in the theme package dummy content file. After installing it, all content seen on the live demo will be imported except for images/videos.

There are two methods you can use, one is using our One-click Importer, the other is Importing manually. To go with the former option, please follow the steps below:

1. 1. Go to Install Demo on the Tools menu.
   

   

2. 2. The Demo Content menu tab will show.
3. 3. Just click Install and wait for the process to complete.

   

4. 4. After the importation is finished, Save Changes and you are done.

To be more perfect site you should install more photos .

1. 1. Go to Regen Thumbnails on the Tools menu
   

   

You just need to wait until the update is complete all photos.

You will have the perfect website.

Now you have a website just like our demo, with the pictures replaced by grey images.

To imprort the demo content with XML files, please follow the steps below:

1. 1. Go to Tools > Import then choose Intall Now of Wordpress:

   

   

2. 2. Select Wordpress system then browse for the .xml file. You shoud be able to find it following the path wp-barberia->inc->demo-data->barberia->content

   

3. 3. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
4. 4. You will then have the choice to import attachments, so click on the "Download and import file attachments" box.

   

5. 5. Click Submit.

Now you have a website just like our demo, with the pictures replaced by grey images.

The theme options can be installed by this way: Go to Appearance->Theme Options->Backup Options, copy and paste content of Barberia-FullPackage/Sample Data/option.txt file into Transfer Theme Options Data field. See screenshot for details:

To add a widget you need to decide where you want to show the information in the front end of the website.To see which areas are available to use go to WordPress admin Menu > Appearance > Widgets.

To Add Widget on Sidebar, please following these steps:

1. 1. Simply drag and drop the widget you want into the widgets section you want to the right hand side.
2. 2. When you finished, you can visit the site to see results.





3. Result:

This section provides you with detailed information on how to use Widgets in Barberia themes. WordPress Widgets are small blocks that perform a specific function. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Barberia themes give different functionalities by default as widgets which you can use on your website.

1. Main Sidebar

Use this area to add your widget to all single blog post pages in the Sidebar section. For example:

2. Header Top

Use this area to add your widget to the header top section of all pages. For example:

3. Footer Top 2, Footer Top 3, Footer Top 4

Use this area to add your widget to the footer section of all pages. The information will be added to the second column of the footer section.The footer section may have different a column count which is decided in Theme Options. For example:

4. Shop Sidebar

Use this area to add your widgets to all WooCommerce pages that have product listing in the Sidebar section. For example:

Theme Options is the main section of Barberia, which you can do your global settings for your website. You can access Theme Options from top left side of your dashboard. We are going to describe about Body options available under WP Barberia > Body section of Theme Options at here.

Body Background

1. Body Background color

Use this option to set the background color of the website.

2. Background Repeat

Use this option to set how you want the background image repeat. Available options are:

1. 1 No Repeat
2. 2 Repeat All
3. 3 Repeat Horizontally
4. 4 Repeat Vertically
5. 5 Inherit

3. Background Size

Use this option to set how you want the background image attached to the page. Available options are:

1. 1 Fixed
2. 2 Scroll
3. 3 Inherit

3. Background Position

Use this option to set the position of background image. Available options are:

1. 1 Left Top
2. 2 Left Center
3. 3 Left Bottom
4. 1 Center Top
5. 2 Center Center
6. 3 Center Bottom
7. 1 Right Top
8. 2 Right Center
9. 3 Right Bottom

4. Background Attachment

Use this option to force background image take up the whole container. Browser may cut off portions of the image to fit in different window sizes. Available options are:

1. 1 Inherit
2. 2 Cover
3. 3 Contain

1. Body Background Image

Use this option to set the background image of the website.

Body Layout

Use this option to set the width of entire page on your website. You can override this option using Layout option inside Candidate Page Options inside each page. Available options are:

1. 1 Fullwidth Layout
2. 2 Boxed Layout

Result for Layout is Boxed:

Result for Layout is Fullwidth:

Use this options to enable/disable the loading effect when WordPress starts up.

Use this option to upload or select from media library, the favicon for the website.

Theme Options is the main section of Barberia, which you can do your global settings for your website. You can access Theme Options from top left side of your dashboard. We are going to describe about Header options available in Header section of Theme Options at here.

1. Header Top

Enable Header Top

Enable this option to show header top section.

Result for Enable Header Top is On:

Result for Enable Header Top is Off:

Header Top Padding

Use this option to add spacing at the top and bottom of Header Top section. For example:

Phone Number, Email, Address

Use this option to add Phone number, Email, Address for your website:

2. Header Bottom

Header Transparent Sticky

If you enable this option, the Sticky Header will have background color and you can set the color and alpha. Having Alpha property of background color less than 100%, will make a semi transparent effect in your transparent header.

3. Sticky Header

If Sticky Header is enabled- This option will keep your header navigation bar fixed at the top during scroll.

4. Header Bottom Padding

Use this option to add spacing at the top and bottom of Header Bottom section. For example:

5. Header Bottom Sticky Padding

Use this option to add spacing at the top and bottom of Sticky Header section. For example:

3. Menu

Mega Menu

The Mega Menu extension gives you the ability to construct advanced navigation menus. It can span the full site width, have custom column width settings, display widgets, have icons or images next to menu items and more. If you need information on how to create a mega menu, please read our The Menu tab.

4. Logo

Select Logo : This option sets the actual file you want to assign for your logo. The template automatically loads the image files available for use according to the path that you have set in the previous folder.

Logo Height:This option sets the height that you want to allow for the logo position. Please note that the height you set here must be compatible with the width that you set in the other module positions in the row that you published the logo position to in the first option eg header, nav or left module positions.

Logo Sticky Height:This option sets the height that you want to allow for the sticky logo position. Please note that the height you set here must be compatible with the width that you set in the other module positions in the row that you published the logo position to in the first option eg header, nav or left module positions.

Sub title Use this option to add Sub Page Title for page.You can override this option using Page Settings inside each page.

Sub title in gallery Use this option to add Sub Page Title for all gallery page.You can override this option using Page Settings inside each page.

Sub title in shop Use this option to add Sub Page Title for all WooCommerce page.

Primary ColorUse this option set color for different parts of the website. For example:

Secondary ColorUse this option set color for different parts of the website. For example:

Link ColorThis option is under the Link tab. Use this option to set the link color for the a tags.

Link Hover ColorThis option is under the Link tab. Use this option to set the link color on mouse over for the a tags.

For example:

We are going to describe about options available under the Typography section of Theme Options at here.

Body Fonts

Use this option to set the font properties for the main body section. Fonts included in the theme are Standand Fonts, Google Fonts and Custom Fonts. You can set the properties below for selected fonts in this section:

1. Font Family You can select either Standard Fonts or Google Fonts or Custom Fonts here.
2. Font Size You can select font-size at here.
3. Font Color You can select font-color at here.
4. Font Weight & Style You can select font-weight and style at here.
5. Text Align You can select text-aling at here.

Custom Font

Use this option to set the font properties for different parts of the website.

We are going to describe about Footer under Theme Options > Footer of Theme Options at here.

ColumnUse this option to set the column layout of the footer section. Available options are:

1. 1 One Column
2. 2 Two Columns
3. 3 Three Columns
4. 4 Four Columns

For example Number of Footer Top Columns is 4:

CopyrightUse this option to add Copyright text for the footer bottom section.

Use this option to set the background of 404 page on your website. (It includes Background Image, background Size, Background Repeat,Background Position,Background Pattern).

Show Sidebar Enable this option to show sidebar on shop pages.

Shop pages show at most Enter the number of products you want to show on shop page.

Products Columns Use Products Columns to Select the number of products columns to show on shop page. Available options are:

1. 1 Column
2. 2 Columns
3. 3 Columns
4. 4 Columns

This section of Theme Options gives you a quick way to paste your custom css code and see the result in the front end of the website. This option is a temporary solution for adding custom css, but if you are interested in a more permanent method, you’d better add the code on the style.css file of Barberia Child Theme.

The browser automatically compiles your LESS files via JavaScript every time you load a page. This provides an appropriate testing environment. It's not recommended to enable developer mode on the live site as the constant process of compiling is highly inefficient.

This section is especially for all those who want to move settings from theme options panel between themes or when you move your website from test server to live. Please always remember to click "Save Changes" button. Without that you will lose all your changes.

1. 1. From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.



2. 2. Click on create a new menu to add a new menu



3. 3. You should define a name for your menu.
4. 4. Click on Create Menu button.

Your new custom menu has now been defined, and you are ready to drag and drop menu items.

The Screen Options allows you to choose which items you can use to add to a menu. Certain items like Posts are hidden by default. If you have not seen it already, it appears on the right side of the WordPress back-end header. If you click on Screen Options, it will slide down, and you can easily check items to hide or show.

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

1. 1. These panes will allow you to drop any sort of item into your menu. You can build from custom links to post, pages or categories.
2. 2. To add any of those options as a menu item, select the item and click on the Add to Menu button. After a moment, you will see the item appear on your menu’s visual editing canvas.



3. 3. Please remember you should always save your changes by clicking on Save Menu, which can be found on the right of the header and footer sections.

Your custom menu has now been saved.

1. Locate the menu item which you want to remove in the menu editor window.
2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
3. Click on the Remove link. The menu item/box will be immediately removed.
4. Click the Save Menu button to save your changes.

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.

1. 1. Position the mouse over the 'child' menu item.
2. 2. Whilst holding the left mouse button, drag it to the right.
3. 3. Release the mouse button.
4. 4. Repeat these steps for each sub-menu item.



5. 5. Click the Save Menu  button in the Menu Editor to save your changes.

1. 1. Scroll to the bottom of the menu editor window.
2. 2. In the section titled Theme locations, click the check box for the location where you want your menu to appear.



3. 3. Click Save menu once you've made your selection.

Congratulations! Your menu has now been added to your site.

You can set any menu as Primary menu at here.

Barberia provides a convenient method to customize different characteristics of a page right inside the page editing screen in dashboard. On each page edit screen there is a meta box called PAGE SETTINGS which you can use to tweak things on the page. In this tab we are going to describe those options in detail.

1. Layout

1.1 Disable padding Use this options to enable/disable padding top and padding bottom of page content.

1.2 Custom background If this option is on, You can override Background option in Theme options.

1.3 Custom Layout If this option is on, You can override Layout option in Theme options.

2.Header

2.1 Disable Header Top Use this options to enable/disable header top section for current page.

2.2 Disable Header Bottom Use this options to enable/disable Header Bottom section for current page.

2.3 Custom Header bottom If this option is on, You can override Header Transparent Sticky option in Theme options, change color for header bottom background, set menu for current page.

3. Page Title & BC

Disable Page Title Use this options to enable/disable Page Title section for current page.

4. One Page

Enable Use this options to enable/disable one page mode for current page.

5. Footer

Enable Use this options to enable/disable Footer section for current page.

To set a page as Home page, go to Settings > Reading in your WordPress Dashboard panel.

1. 1. Set "Front page displays" as "A Static Page"
2. 2. In the drop down menu for "Front Page" choose a page which will be your home page.



3. 3. Save changes.

To create default blog page layout, please choose Template is Blog Classic

Result for Default Blog page:

To create Blog page 2 Columns layout, you will need to follow the steps below:

1. Create new page and add Blogs element for content:

2. Go to Blogs Settings to select column for Blogs layout:

3. You can choose source for your Blog page in Source Settings tab

To create Gallery Masonry Style layout, you will need to follow the steps below:

1. Create new page and add Gallery element for content:

2. Go to Gallery Settings to select templage:

3. Choose Gallery layout is Masonry on "General tab", you can also Enable Filter at here:

3. You can choose source for Galler page in Source Settings tab and add categories for filter at here:

This plugin is package compilation some addons, which is developed by CMSSUPERHEROES Team for Visual Comporser plugin.

For detailed inforamtion and support on this plugin, please go to: REDEXP

Contact Form 7 is one of the most popular form builders for wordpress.We have created styles ready for you to use within your Barberia theme.

For detailed inforamtion and support on this plugin, please go to: Contact Form 7

Admin panel for creating custom post types and custom taxonomies in WordPress.

EF3-Framework auto create demo data package for developer, auto import demo data for clients. After import you can deactivate or remove plugin.

For detailed inforamtion and support on this plugin, please go to: EF3 Import And Export

EF3-Framework add Redux Framework, Redux Meta Framework and SCSS Framework only for themes developer.

For detailed inforamtion and support on this plugin, please go to: EF3-Framework

Woo Commerce is one of the most popular shopping cart plugins for wordpress.

For detailed inforamtion and support on this plugin, please go to: WooCommerce

Slider Revolution is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories in no time!

For detailed inforamtion and support on this plugin, please go to: Slider Revolution

Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required.

For detailed inforamtion and support on this plugin, please go to: WPBakery Visual Composer

1. Uplodate theme

There are 2 methods to update our WordPress themes to a newer version. These new updates are essential if you want to have a bug free website, as we add new features and make improvements to the theme over time. Some of these updates might be needed in order to make the theme compatible with newer versions of WordPress. There is no risk of losing your settings and pages. However, if you had made modifications to theme files, they will be lost.

1.1 Update Barberia Through WordPress Admin Panel:

1. For this method you should first install the Theme Upgrades Tool.
2. Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme. (wp-Barberia.zip).
3. Login to your WordPress Dashboard.
4. Click on “Appearance > Themes”.
5. Click on Add New button on this page
6. Click on Upload Theme Button
7. Click “Choose File” and locate the new theme file. (wp-Barberia.zip).
8. In the “Upgrade existing theme?” option choose “Yes” from the dropdown list.
9. Click “Install Now”.
10. Click “Activate”.

1.2 Update Barberia Through FTP

• Login to your Themeforest account and go to downloads (Dashboard > Downloads).
• Download the theme to your computer.
• Install an FTP program (for example, Filezilla is free).
• Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP.
• Unzip the item main file.
• Locate theme.zip (wp-Barberia.zip) and unzip it. Make sure your unzipping software does not create an extra directory with the same name, nested into each other.
• Drag and drop theme main folder into your FTP program with the destination: “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”.
• The FTP program will give a warning that there is an existing directory with the same name, choose to Replace All.
• It will take between 15 to 30 minutes to replace all files. Once you are done, login to your WordPress dashboard and go to Theme Options. On the header (beside Theme Options logo) the theme version will be changed to the latest version. This is the indication that your theme is updated. We recommend method one which takes less than one minute.

1. Uplodate necessary plugins

When the time comes that you want to update our themes to the latest versions you may need to update necessary plugins of theme. To update the plugin you will need to follow the steps below:

1. 1 Deactivate plugins
2. 2 Delete plugins
3. 3 On the Dashboard, go to Appearance->Install plugins to reinstall plugins.

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide. You can also use POEdit plugin for translation.

• 1. Located the .po and .mo files in folder/languages.
• 
• 2. Select language in admin options.
• 
• 3. Find language prefix (save option and reload front-end to view html).
• 
• 4. Copy two file .po & .mo and rename to eg( en_CA.mo & en_CA.po ... ) same for other languages .
• 
• 5. Open the file .po with POEdit and translate the texts into your preferred language.
• 
• 6. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
• 7. When that’s done, simply upload the files to your theme folder.

Our themes are optimized by with H1, H2, H3, H4, H5 tags, clean code, HTML5 but if you want to get higher ranking on search engines, you must need some help from SEO plugins and Google Pagespeed Service:

• Yoast SEO plugin
• Google Pagespeed Service
• Smush.it ( Optimizing Images )
• SEO Friendly Images ( SEO Images )

The team at REDEXP are always happy to help you with any questions or recommendations you have about the Barberia theme. If you need any help or support please contact us through the TF Messaging system or
direct at Email: support@cmssuperheroes.com
direct at Forum: here