Theme Files

Bueza Premium theme is packaged with several files inside the main zip file. The file structure of the zipped file should be :

bueza-3.x-1.x.zip
  |- documentation - Folder containing documentation files.
  |- dummy_data - Folder containing the dummy data file that can be imported via WordPress Importer
  |- plugins - Folder containing plugins that must be uploaded to the server and enabled
  |- slider_image_assets - Folder containing Revolution slider assets as seen in the demo
  |- slider_import - Folder containing Imported slider revolution widget that can be imported to the site
  |- bueza.zip - The theme zip file that must be extracted or uploaded.

If you have missing files or corrupted file, please redownload them again and if the problem persist, please contact our support team for further assistance.

Installing Theme

Bueza Premium theme can be installed as a normal WordPress theme would. It is able to be installed via WordPress Theme Uploader or via FTP method.

Installing via WordPress Uploader

Visit the uploader form in your site admin : http://example.com/wp-admin/theme-install.php?tab=upload and when presented with the upload form, select the bueza.zip file from the downloaded theme file.

Information: This method sometimes will failed if the hosting has low maximum file upload size or low maximum execution time configured.

Installing via FTP

To install theme using FTP uploader, you will need to extract the main theme file (bueza.zip) and upload the content found in the zip into remote wp-content/theme/bueza

Installing Extra Plugins

Eventhough Bueza is compatible with WordPress Multi Language Plugin, UberMenu Plugin and WooCommerce Plugin, We cannot bundle those plugin inside the main theme files because of the copyright owner of those plugins doesn't allow it. Thus you may need to download (or purchase) those plugin separately before it can be enabled and used in Bueza.

As of Revolution Slider, it is already bundled together with the main theme file, you can find the files for it inside the bueza/plugins directory in the main theme file.

If you need to know more information about installing WordPress plugin, please visit WordPress official plugin installation guide.

WooCommerce Installation

WooCommerce is available to install via WordPress plugin repository, thus you will need to visit wp-admin/plugin-install.php and input woocommerce in the search bar to get a list of all available WooCommerce package that can be installed. The main plugin file for WooCommerce is WooCommerce - excelling eCommerce

You can visit WooCommerce official installation guide for more detailed information about installing WooCommerce Plugin

UberMenu Installation

You will need to purchase the plugin from CodeCanyon.

After purchased completed, you should be able to dowload the plugin file. Then you can use WordPress plugin uploader to upload the zip file or use FTP to upload the extracted file

Please consult UberMenu Official Installation Guide for more detailed information.

WordPress Multi Language Installation

You will need to purchase the plugin from WPML.org and ...... need more info about this havent installed this yet!

Revolution Slider Installation

Revolution Slider is bundled together with this theme, you will need to extract the plugin first before you can upload them via FTP or WordPress uploader. Extract the plugins/codecanyon-xxxxxxx-slider-revolution-responsive-wordpress-plugin.zip, afterwards you will have the revslider folder and revslider.zip.

When using the WordPress plugin uploader at wp-admin/plugin-install.php?tab=upload, you will need to select the revslider.zip file in the upload form for uploading the plugin.

When using FTP software to upload the file, you will need to upload the revslider folder into wp-content/plugins/revslider directory.

Revolution Slider is bundled with its own documentation, you can find the documentation index.html in the documentation folder

Importing Dummy Data

It is possible to get the site up quickly by importing the dummy data that is bundled together with the theme, The dummy data xml file is located inside the main theme file under the dummy_data folder.

To import them into your WordPress installation, you will need to download the WordPress Importer plugin. The plugin installation will be performed automatically once you visited the WordPress import page at wp-admin/import.php

1. Choose Importer

Visit the wp-admin/import.php and select WordPress as the importer source.

This option may not visible at the first time and WordPress will request to install Importer plugin instead

2. Select File to Import

Browse to the extracted main theme file and search for dummy_content/bueza_demo.xml, select the file and upload it to begin the import process

Theme Sidebar Regions

The image above is marking all the dynamic sidebar regions available in the theme, the different color is marking that the regions is only available under certain template file or page locations

Standard Theme Regions

The standard theme regions is marked with Black Color, the regions will be available in all the theme place except when it is overrided by special regions, such as the Shop top header left will override the default Top header left when the theme is in shop related page

Shop Related Regions

The shop related regions is marked with Red Color, they will be available on shop related template only and will override the standard theme regions if both regions exists in the same location.

Custom Frontpage Regions

The Custom Frontpage regions is marked with Purple Color, they will be available only on the custom frontpage template, the sidebar region will override the standard sidebar when the theme use custom frontpage template as its frontpage.

Portfolio Related Regions

The Portfolio regions is marked with Green Color, they will be available on Portfolio related content.

Theme Panels

The theme options panel is located in wp-admin/themes.php?page=bueza_options

1. Panel Navigator

This is the main panel navigator, you can change the panel configuration options by clicking on the panel navigator menu entry.

2. Configuration Messages

All kind of messages related to configuration state will be displayed in this place.

3. Operation Button

Save Button

This button will save the configuration in the current active panel to database.

Reset Button

This button will reset the active configuration by Deleting the database entry for the current active configuration panel.

The reset process is inreversible and will proceed without warning. Only click when needed

Global Reset Button

This button will perform a global reset and removing all panel stored configuration from the database. Which will reset the theme to its original default state.

The global reset process is inreversible and will proceed without warning. Only click when needed

4. Active Panel

This is the active panel showing the current active panel configuration forms.

Theme Customizer

The theme customizer panel is only available on WordPress 3.6 and above and it is located in wp-admin/customize.php

1. Live Preview

The live preview window will update itself either directly by JavaScript or Page refresh when you change the customizer panel options value.

2. Customizer Panel

You can change the configuration directly and see the changes in the live preview. Some changes need to be saved first before it applied to the site.

3. Buttons

You must click on the save button in order to save the changes made in the customizer panel.

Headline

Theme headline widget embedded in every page except on custom front page and custom front page for shop. You can easily change the text and the background image for each page where the headline is available

The Headline text and slogan is configurable via post metabox for all single post template

The Headline background image can be replaced via theme customizer panel

1. Headline Background

You can easily change the background via Customizer or via Theme Configuration Color Panel. for advanced user it is also possible to override the background image via CSS rule, if you overriding the background image via CSS rule, you may need to use !important or load the overriding css at the footer

2. Headline Text

For single post, the headline text can be changed via the Headline Manager metabox and by default it will fallback into the single post title when the metabox is empty

3. Headline Slogan

For single post, the headline slogan can be changed via the Headline Manager metabox and by default will be empty if the metabox entry is empty.

Integrated with BootStrap 3.3

Bootstrap is fully integrated with this theme, you can use bootstrap related markup to customize the theme template. The theme also provides GUI for configuring page column size to match bootstrap css rule.

For more information about bootstrap css rule, please visit BootStrap Homepage.

1. Extra Small Device Column settings

This column settings will be applied to devices that has less than 768px viewport width, if you set to 0 then this region will not be visible when viewed with such device

2. Small Device

This column settings will be applied to devices that has more than 768px viewport width, if you set to 0 then this region will not be visible when viewed with such device

3. Medium Device

This column settings will be applied to devices that has more than 992px viewport width, if you set to 0 then this region will not be visible when viewed with such device

4. Large Device

This column settings will be applied to devices that has more than 1200px viewport width, if you set to 0 then this region will not be visible when viewed with such device

Layout Style

Theme has the capability to switch between the (1) boxed layout into (2) normal open style with a single click configuration from the configuration bootstrap panel.

1. Change Layout Style

Switch between the default normal layout or boxed version of this theme

Maximum Page Width

1. Maximum page width option

You can define the maximum page width for the theme without sacrificing the responsive feature, the theme will still shrink its width in smaller screen as a responsive theme should behave.

Masonry and Equalheight

Theme has the capability to switch between a masonry layout or equal height per row layout in some of the template area. When combined with the BootStrap Grid system it can create custom layout for the theme.

The applicable region for this is :

  • Front page region in custom front page template
  • Portfolio Front page and portfolio category page
  • Shop Frontpage
  • Blog listing on grid mode using custom blog grid template

Theme in Masonry Mode

Theme in Equal Height Per Row Mode

1. Set The Column Width

For Masonry or Equal Height to perform correctly you must set the column width smaller from 12 column(full width). For frontpage region the setting for columns is in the Layout Column configuration panels, for other region the setting will be located on each of their own panel.

2. Select the Grid Mode

Select the grid mode to be masonry or equal height, this options will be visible on each region own configuration panel.

3. Set the Widgets (optional)

This step is optional and only for the frontpage region, other region such as the shop frontpage, portfolio frontpage and blog grid listing will not have this options simply because the content that will be transformed into masonry or equal height will be fetched programmatically from each template.

UberMenu Vertical Mode

UberMenu Plugin is not included in the theme, you will need to purchase one from Code Canyon

1. Activate UberMenu

Select which theme menu location that will be transformed into a megamenu by UberMenu Plugin. Click on save when done.

2. Activate the vertical tabs mode

In the menu items 1st level item, there will be a checkbox allowing you to transform the menu item leaf into a vertical menu item

3. Megamenu alignment

The tabs position will be on left or right according to the option selected here, center will have tabs position to the left but the arrow and the dropdown box will be centered against the 1st level position.

4. First Level

The 1st level will always act act as the dropdown trigger.

5. Second Level

The 2nd level will be placed on the left or right side and acting as the vertical tabs header trigger

4. Third Level and above

The 3rd level will act as the column header, and 4th level and above will be flattened to be the children of the 3rd level.

General Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

Global Reset will reset every panel databased stored configuration and revert all of the configuration back to its original state

Reset and Global is not reversible, please use them with caution

2. Show / Hide Top Header

Display or hide the top header element, this option will hide the whole row regardless of what is configured in the "Show Search Bar" or "Show Top Header Menu".

3. Show / Hide Search Bar

Display or hide the search bar in the top header element

4. Show / Hide Top Header Menu

Display or hide the top header menu in the top header element

5. Show / Hide Headline

Display or hide the headline element. This option will effect globally.

6. Logo Text

You can enter the logo text for displaying logo as text, this is useful if you want to use text plus a logo image. Leave blank to hide the text element.

7. Slogan Text

A slogan text will be displayed under the logo text, Leave this blank to disable the slogan text

8. Logo Image

Upload custom images for the logo, Logo images by default is not resized automatically.

9. Logo Image

Global configuration for the sidebar position, this option can be overrided in some template.

10. Show / Hide Full Footer

This option will hide or show the fullfooter elements, this will be applied globally

11. Copyright

Change the copyright text in the fullfooter

Layout Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Region Name

This the marker for the layout region name that the column size will be applied to

3. Mobile Column settings

This column settings will be applied to devices that has less than 768px viewport width, if you set to 0 then this region will not be visible when viewed with such device

4. Tablet Device

This column settings will be applied to devices that has more than 768px viewport width, if you set to 0 then this region will not be visible when viewed with such device

5. Small Device

This column settings will be applied to devices that has more than 992px viewport width, if you set to 0 then this region will not be visible when viewed with such device

6. Large Device

This column settings will be applied to devices that has more than 1200px viewport width, if you set to 0 then this region will not be visible when viewed with such device

BootStrap Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Maximum Width

You can set the page maximum width to 960px, 1170px or fluid

3. Style Mode

You can change the layout style mode from normal to boxed mode.

Color & Schema Panel Options

You can configure the color and schema options from this panel, Although this is also configurable via Customizer, you can only reset the schema and color data via this panel.

Color options is a dynamic color setting that will be printed dynamically when the site loaded.

Schema is a a complete set of css and images to transform the site looks globally and can only be edited directly from code

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2 & 3. Color Schema Selector

Change the color schema by selecting the color schema select box and click on the button, the newly selected schema will be applied immediately after the button is selected.

4. Element Name

The element which the color options will be applied to

5. Background color

The option to choose the background color for the element

6. Background image

The option to choose the background image file for the element, the image will be repeated by css automatically

7. Header text

The option to choose the text color for the element children h1, h2, h3, h4, h5 and h6 tags

8. Body text

The option to choose the text color for the element

The custom css generated will be applied at the end of the head elements, thus any css applied at the bottom of the page can potentialy override the custom CSS

Google Fonts Panel Options

You can change the default font type and size for each region element

Loading too many different custom fonts will slow the site down

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Region Name

The Region name that the configuration will be applied to

3. Enabler Button

The enabler button for enabling the configuratin for the region

4. Font Size

You can choose the font size for the region

5. Font Weight

You can choose the font weight for the region

6. Font Style

You can choose the font style for the region

7. Font Family

You can choose the font family for the region

If your language has custom accent, Embedded Google Fonts may not have the accent available for you to use.

FrontPage Panel Options

Front page options is for targeting the custom front page template. To set the custom front page template as the front page you will need to create a Page post type and select the custom front page template as its template. then you will need to select the newly created page to act as the front page in the WordPress Reading Option section

1. Show / Hide Main Content

You can toggle to show / hide the whole main content block

2. Show / Hide Title

You can toggle to show / hide the main content block title

3. Show / Hide Pagination

You can toggle to show / hide main content pagination

4. Sidebar Position

Options for placing the main content sidebar

5. Frontpage Region Grid Mode

You can adjust the front page sidebar region grid mode, The masonry grid mode work best if the region column is set to less than 12 column and the equal height row work best if the region column is set to 12.

The region column size is configured via the Layout Panels

The content of the region is configured via WordPress widget section

6. Frontpage Region Grid Mode

Change the Main Content block title

7. Frontpage Region Grid Mode

Input on how many post should the main content display, this will also relate to the pagination options

8. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

Blog Panel Options

Blog Panel is used for controlling : Blog Grid Template, Blog List Template, Blog Single Template, Single Template, Archive Template, Category Template and Search Template.

Some special template such as FrontPage, Portfolio, Shop, About, Featured, Slogan and 404 will have special settings that overrides the settings found in the Blog Panel

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Blog Grid Mode

This is a custom Page template that can be selected from the page template metabox

3. Show / Hide Image

Option for showing / hiding the blog featured image

4. Show / Hide Title

Option for showing / hiding the blog title

5. Show / Hide Byline

Option for showing / hiding the blog byline

6. Show / Hide Excerpt

Option for showing / hiding the blog excerpt

7. Sidebar Position

Option for setting the sidebar position, you can also disable sidebar by selecting none. If this is not set, it will fallback to the General Panel sidebar option

8 - 11. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

12. Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

13. Post per page

You can define how many post item per page should be displayed. If more post available than the configured post per page settings, the theme will display the pagination element automatically.

14. Image Size

Define the image size for the grid

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule and it may cause distortion if the image size is set too low

15. Blog List Mode

The list mode is the default mode for the frontpage and archive pages such as the search page or taxonomy page

16. Show / Hide Image

Option for show / hide the post featured image in list mode

17. Show / Hide Title

Option for show / hide the post title in list mode

18. Show / Hide Byline

Option for show / hide the post byline in list mode

19. Show / Hide Excerpt

Option for show / hide the post excerpt in list mode

20. Post Per Page

How many post should the page displayed before showing pagination element.

21. Sidebar Position

Set the sidebar position for the blog listing template overriding the global sidebar position set by the General Panel

22. Thumbnail size

Set the image size for the thumbnail

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule and it may cause distortion if the image size is set too low

23. Blog Single Page

The blog single page is the default template for displaying Post Type : Post the settings defined here only applies to the post type post template

24. Show / Hide Image

Option for showing / hiding the featured image in the single post

25. Show / Hide Title

Option for showing / hiding the post title in the single post

26. Show / Hide Byline

Option for showing / hiding the post byline in the single post

27. Show / Hide Tags

Option for showing / hiding the post tags in the single post

28. Show / Hide Contents

Option for showing / hiding the post content in the single post

29. Show / Hide Author

Option for showing / hiding the post author information box in the single post

30. Show / Hide Related

Option for showing / hiding the related post box in the single post

The post related box will retrieve all related post by its Tags not by category. This is only for simple post relation function, for more complex one you can use YARPP Plugin which this theme has provided template for it to look the similar as the default related box

31. Show / Hide Comments

Option for showing / hiding the post comment entry in the single post

32. Show / Hide Comment Form

Option for showing / hiding the post comment form in the single post

33 - 36. Show / Hide Social Sharing Buttons

Option for showing / hiding the social sharing buttons in the single post

The Social Sharing button is built using static link for sharing the single post to social networks.

37. Sidebar Position

Set the sidebar position for the single post template overriding the global sidebar position set by the General Panel

38. Main Image Size

Set the image size for the main image

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule and it may cause distortion if the image size is set too low

Portfolio Panel Options

The Portfolio Panel options is for controlling the Portfolio Listing Template, Portfolio Category Template and Portfolio Single Template

For Portfolio related widgets is controlled by their own widget configuration options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Portfolio Listing & Portfolio Category Grid Template

3. Show / Hide Title

Option for showing / hiding the portfolio title in the template

4. Show / Hide Taxonomy

Option for showing / hiding the portfolio taxonomy in the template

5. Show / Hide Image

Option for showing / hiding the portfolio image in the template

6. Show / Hide Hover Link Element

Option for showing / hiding the portfolio hover link element in the template

7. Enabling Isotope filter

Option for enabling the isotope filtering jQuery plugin, without this the category link will still work but will do page refresh instead.

It is recommended to disable the isotope filter if you have many portfolio items that requires user to browse via pagination

8. Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

9. Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

10 - 13. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

14. Item Per Page

How many portfolio item should the page display before showing pagination element.

15. Highlight Title

Set the highlight text to be displayed on the template page

16. Highlight Slogan

Set the highlight slogan to be displayed on the template page

17 - 18. Grid Thumbnail Image

Set the image size for the grid thumbnail

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

19. Portfolio Single Page

20. Show / Hide Gallery Thumbnail

Option for showing / hiding the portfolio gallery thumbnail scroller in the portfolio single page template

21. Show / Hide Title

Option for showing / hiding the portfolio post title in the portfolio single page template

22. Show / Hide Taxonomy

Option for showing / hiding the portfolio taxonomy in the portfolio single page template

23. Show / Hide Image

Option for showing / hiding the portfolio main image in the portfolio single page template

24. Show / Hide Content

Option for showing / hiding the portfolio post content in the portfolio single page template

25. Show / Hide Project Meta

Option for showing / hiding the portfolio project informatio metadata in the portfolio single page template

26. Show / Hide Pager

Option for showing / hiding the portfolio post pager in the portfolio single page template

27. Show / Hide Related Project

Option for showing / hiding the portfolio related project box in the portfolio single page template

28 - 32. Show / Hide Share Links

Option for showing / hiding the social networking sharing links in the portfolio single page template

33. Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

34. Related Box Title

Set the main title for the related box element.

35. Related Post Per Page

Set the number of related post should be displayed.

36 - 37. Full Page Thumbnail Image

Set the image size for the full page main image, this settings will affect the size of the image gallery too.

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

Portfolio Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Gallery Options

The title for gallery section options set.

3. Show / Hide Slider Thumbnail

Option for showing / hiding the image slider thumbnail in the about single page template

4. Gallery Image Size

Set the image size for the gallery image

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

5. Teams Options

The title for team member section options set.

6 - 9. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

10. Team Member Photo Size

Set the image size for the team member photo image

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

11. Clients Options

The title for client section options set.

12 - 15. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

16. Client Logo Image Size

Set the image size for the client logo image

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

Featured Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Featured List Options

You must also set the options in the featured list widget to for displaying the featured list widget properly.

3. Logo Image Size

Set the image size for the logo image in the featured list widget

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

4. Thumbnail Image Size

Set the image size for the thumbnail image in the featured list widget

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

5. Featured List Single Page

5. Show / Hide Image

Option for showing / hiding the main image in the featured single page template

6. Show / Hide Title

Option for showing / hiding the post title in the featured single page template

7. Show / Hide Category

Option for showing / hiding the post category in the featured single page template

8. Show / Hide Content

Option for showing / hiding the post content in the featured single page template

9. Show / Hide Gallery

Option for showing / hiding the image gallery in the featured single page template

10. Show / Hide Gallery Thumb

Option for showing / hiding the image gallery thumbnail scroller in the featured single page template

11. Show / Hide Gallery Description

Option for showing / hiding the image gallery description in the featured single page template

12. Show / Hide Related

Option for showing / hiding the related post in the featured single page template

13 - 17. Show / Hide Share Links

Option for showing / hiding the social networking sharing links in the featured single page template

18. Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

19. Main Image Size

Set the image size for the main image in the featured single page

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

20. Gallery Image Size

Set the image size for the gallery main image in the featured single page

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

Slogan Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Slogan Widget Options

Other related options for the slider widget is located in the widget configuration form.

3. Slogan Thumbnail Image Size

Set the image size for the slogan thumbnail image in the slogan widget

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

4. Slogan Full Page options

4. Show / Hide Title

Option for showing / hiding the post title in the slogan single page template

5. Show / Hide Highlight

Option for showing / hiding the post highlight text in the slogan single page template

6. Show / Hide Image

Option for showing / hiding the main image in the slogan single page template

7. Show / Hide Icon

Option for showing / hiding the icon box in the slogan single page template

8. Show / Hide Content

Option for showing / hiding the post content in the slogan single page template

9. Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

10. Highlight Text

Set the default fallback highlight text that will be used if user has no text inserted in the highlight text post meta.

11. Slogan Full Page Image Size

Set the image size for the slogan main image in the slogan single page

It is recommended to use larger image to acommodate the image view when its in mobile phone or tablet mode. The image will be stretched automatically by CSS styling rule which may cause distortion if the image size is set too low

404 Panel Options

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Show / Hide Title

Option for showing / hiding the title in the 404 page template

3. Show / Hide Content

Option for showing / hiding the content in the 404 page template

4. Headline Title

Set the headline title text for the 404 page

5. Headline Slogan

Set the headline slogan text for the 404 page

6. Main Title

Set the main title for the 404 page

7. Main Content

Set the main content text for the 404 page

Shop Panel Options

This panel option will be active only if the WooCommerce E-commerce Plugin is installed and activated

After enabling the WooCommerce plugin, if you have comments in the Product Post type and then you disabled the WooCommerce Plugin, comment report page may throw error due to missing permission. That is not the theme error but more of the way the WooCommerce plugin error and should be reported to WooCommerce plugin developer

1. Operation Button

You can Save, Reset or do Global Reset by clicking on each button respectively

Reset will remove the database stored configuration for the related panel only and revert the related configuration back to its original state

2. Catalog Page

The catalog page options will configure the options found in the Archive Product template. The template it self will consist of two major block of the catalog block and the category block, the template will also depends on the WooCommerce main settings especially settings for showing the category and the catalog blocks

3. Show / Hide Product Image

Option for showing / hiding the product image in the catalog page

4. Show / Hide Product Title

Option for showing / hiding the product title in the catalog page

5. Show / Hide Product Rating

Option for showing / hiding the product rating in the catalog page

6. Show / Hide Product Add To Cart

Option for showing / hiding the product add to cart button in the catalog page

7. Show / Hide Product Price

Option for showing / hiding the product price in the catalog page

8. Show / Hide Product Sale Flash

Option for showing / hiding the product sale flash in the catalog page

9. Show / Hide Product Category

Option for showing / hiding the product category in the catalog page

10. The Catalog Block

10. Show / Hide Catalog Block

Option for showing / hiding the whole catalog block in the catalog page

11. Show / Hide Catalog BreadCrumb

Option for showing / hiding the catalog breadcrumb in the catalog page

12. Show / Hide Catalog Content

Option for showing / hiding the catalog content in the catalog page

13. Show / Hide Catalog Title

Option for showing / hiding the catalog title in the catalog page

14. Show / Hide Catalog Pagination

Option for showing / hiding the catalog pagination element in the catalog page

15. Show / Hide Catalog Count

Option for showing / hiding the catalog product count in the catalog page

16. Show / Hide Catalog Filter

Option for showing / hiding the catalog product filtering element in the catalog page

17. Show / Hide Catalog Description

Option for showing / hiding the catalog description in the catalog page

18. Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

19. Catalog Block Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

20. Post Per Page

Set how many product in the catalog to be displayed for each page.

21 - 24. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

25. The Category Block

25. Show / Hide Category Block

Option for showing / hiding the whole category block in the catalog page

26. Show / Hide Category Name

Option for showing / hiding the category name in the catalog page

27. Show / Hide Category Main Title

Option for showing / hiding the category block main title in the catalog page

28. Show / Hide Category Title

Option for showing / hiding the category title in the catalog page

29. Show / Hide Category Count

Option for showing / hiding the category product count in the catalog page

30. Show / Hide Category Image

Option for showing / hiding the category image in the catalog page, the category image will fallback to WooCommerce if not configured, you will need to give each category an image for this to work properly.

31. Category Block Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

32. Main Title

Set the main title for the category block.

33 - 36. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

37. Shop Top Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

The Column settings for this region can be configured from the Layout Panel

39. Shop Bottom Grid Mode

You can choose to use Masonry or equalheight as the grid mode, it is recommended to use less than 12 columns in the column settings above for the masonry grid layout to work best.

The Column settings for this region can be configured from the Layout Panel

40. Shop Header Options

The shop header options will configure the custom shop header template, you can also configure the column size for the elements found in the template via Layout Panel

You may need to readjust the column size from Layout Panel if you disable one of the shop header elements

41. Show / Hide Top Menu

Option for showing / hiding the top menu element in the shop header template

42. Show / Hide Cart

Option for showing / hiding the cart element in the shop header template

43. Show / Hide Login

Option for showing / hiding the login element in the shop header template

44. Show / Hide Search

Option for showing / hiding the search element in the shop header template

45. Show / Hide Navigation

Option for showing / hiding the navigation element in the shop header template

46. Custom Shop Page Template Options

This options will be applied to the custom shop page template, the custom shop page template is a custom Page Post Type template designed for use with the WooCommerce extra pages such as My Account Page, Cart Page etc. To use this template, you must change the Template Metabox value to Shop Page template in each of the WooCommerce extra pages.

47. Custom Shop Page Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

48. Shop Single Page

The configuration options in this panel block will be applied to shop single product template.

49. Show / Hide Breadcrumb

Option for showing / hiding the breadcrumb element in the shop single product template

50. Show / Hide Messages

Option for showing / hiding the WooCommerce notification messages element in the shop single product template

51. Show / Hide Sale Flash

Option for showing / hiding the sale flash element in the shop single product template

52. Show / Hide Images

Option for showing / hiding the main images in the shop single product template

53. Show / Hide Title

Option for showing / hiding the product title in the shop single product template

54. Show / Hide Price

Option for showing / hiding the product price in the shop single product template

55. Show / Hide Rating

Option for showing / hiding the product rating in the shop single product template

56. Show / Hide Excerpt

Option for showing / hiding the product excerpt in the shop single product template

57. Show / Hide Add To Cart

Option for showing / hiding the product add to cart button in the shop single product template

58. Show / Hide Meta

Option for showing / hiding the product custom meta field in the shop single product template

59. Show / Hide Sharing

Option for showing / hiding the product sharing links in the shop single product template

60. Show / Hide Tabs

Option for showing / hiding the product tabs element in the shop single product template

61. Show / Hide Related

Option for showing / hiding the related box in the shop single product template

62. Show / Hide Upsell

Option for showing / hiding the upsell in the shop single product template

63. Single Product Sidebar Position

Set the sidebar position for the template overriding the global sidebar position set by the General Panel

64 - 67. Image Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

This settings is related to the Summary Box Size, The combined column if over 12 column then the summary box will be displayed underneath the image box

68 - 71. Summary Box Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

This settings is related to the Image Box Size, The combined column if over 12 column then the summary box will be displayed underneath the image box

72. Grid Options

This options will be applied to all Product Grid found in catalog block, category block, catalog page, single product page and widgets

The Grid option provide a different style for formatting the product item in the grid, valid styles are : zebra, single color and bordered box

Zebra Style

The zebra style will format the product grid elements with zebra style color for the background, odd elements color is different from the even elements color

Single Color

The single color style will format the product grid elements with just a single color for the background

Bordered

The bordered style will format the product grid element with borders and single background color

Post Type Contact

This is the main post form for the post type contact, The settings will be applied for single post type contact only

Post Type contact will use the single contact template to format the output for its post data

The Post Type Contact Post Entry Form

The Post Type Contact Single Template Output

1. Post Title

The Post title for the post

2. Headline Title

The Headline title for this post

3. Headline Slogan

The Headline slogan for this post

4. Body Content

The Body content for this post

Location Box

Location box can be disabled or enabled quickly by checking the Enable Location checkbox. Any empty input data will not be printed

5. Location Title

The title for the location box

6. Location Address

The address entry for the location box

7. Location Phone

The location phone number entry for the location box

8. Location Fax

The location fax number entry for the location box

9. Location Email

The location email address entry for the location box

Contact Form Box

Location box can be disabled or enabled quickly by checking the Enable contact form checkbox.

10. Title

The title for the contact form box

11. Form Settings

Check the form element that you wish to display on the front end.

12. Recipient email address

The email address where the submitted form will be emailed to.

13. Submit Button Text

The text to be displayed in the form submit button.

Google Maps Box

Google Maps Box can be disabled or enabled quickly by checking the Enable Maps checkbox.

13. Title

The title for the Maps box

14. Maps Options

The options for the Maps element that will be sent to Google

15. Address

The address that will be geocoded by google for the marker in the map elements, use of valid address is recommended for Google to successfully geocoded the address into longitude and latitude.

16. Map Zoom

The initial zoom level for the maps element.

17. Map Type

The map type to display on the maps element.

18. Map Control Location

The control location display fo the map element.

19. Map Type Control Style

The style for the map control.

The options for maps is built accordingly to Google Maps API V3, If some of the options doesn't work due to an update in Google Maps API please contact our support team.

Office Hours Box

Office Hours Box can be disabled or enabled quickly by checking the Enable Office Hours checkbox.

20. Title

The title for the office hours box element.

21. Description

The description for the office hours box element.

22. Monday - Friday

The office open hours for Monday to Friday entry for the office hours box element.

23. Saturday

The office open hours for saturday entry for the office hours box element.

24. Sunday

The office open hours for Sunday entry for the office hours box element.

Post Type Contact

This is the main post form for the post type testimonial, Testimonial doesn't have a single page output, all output for this post type entry will be printed using the Testimonial Widget. Additional settings for this post type is available on Testimonial Panel.

The Post Type Testimonial Post Entry Form

The Post Type Testimonial Widget Output

1. Post Title

The Post title for the post, You must enter the testifier full name for this post.

2. Company Name

The testifier company name

3. Body Content

The testimonial content for this post

Post Type About

This is the main post form for the post type About, The settings in this form will be used only for a single post. Additional settings for this post type is available on About Panel. This post type use the single about template for rendering its single page output.

The Post Type About Post Entry Form

The Post Type About Single Page Output

1. Post Title

The Post title for the post

2. Headline Title

The Headline title for this post

3. Headline Slogan

The Headline slogan for this post

4. Body Content

The Body content for this post

5. Enable Image Gallery

Option for showing / hiding the image gallery box

6 - 9. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

The Main Content grid size will be calculated automatically to compensate the column size of the image box

10. Title

The title for the image box

11. Select Image

The select image button will open the frame for uploading / inserting the image into the image gallery box

12. Remove Image

The remove image button will remove the image from image gallery box

13. Add New Image

The add new image button will add a new row for adding new image into the image gallery box

14. Enable Services

Option for showing / hiding the services box

15 - 18. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

19. Title

The title for the service box

20. Icons

Select the font awesome icons for the service box entry

21. Title

The title for the service box entry

22. Description

The description for the service box entry

23. Remove

Remove the service box entry row

24. Add New Service

Add new service entry row.

25. Enable Skills

Option for showing / hiding the skills box

26 - 29. Column Size

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

30. Title

The title for the skills box

31. Title

The title for the skills box entry

32. value

The value for the skills box entry percentage bar, input only numerical value for this to work.

33. Remove

Remove the skills box entry row

34. Add New Skills

Add new skills entry row.

35. Enable Teams

Option for showing / hiding the team member box

The Teams member grid column size is configurable via About Panel

36. Title

The title for the skills box

37. Photo

Upload and assign team member photo

38 - 40. Member Information

Enter team member information

41 - 44. Member social links

Enter team member social networking link page, you will need to enter the full links including the http://

45. Remove

Remove the teams box entry row

46. Add Team Member

Add new teams entry row.

47. Enable Clients Logo

Option for showing / hiding the client logo box

48. Select Logo

The select logo button will open the frame for uploading / inserting the image into the client logo box

49. URL

The url for the client website, this will be used to wrap the image to link to the url.

50. Remove

The remove button will remove the logo from client logo box

51. Add New Client

The add new client button will add a new row for adding new client

Post Type Featured

This is the main post form for the post type Featured, The settings in this form will be used only for a single post. Additional settings for this post type is available on Featured Panel and Featured Widget. This post type use the single featured template for rendering its single page output.

The Post Type Featured Post Entry Form

The Post Type Featured Page Output

1. Post Title

The Post title for the post

2. Headline Title

The Headline title for this post

3. Headline Slogan

The Headline slogan for this post

4. Body Content

The Body content for this post

5. Featured Category

The custom featured category specially linked to Featured post type.

6. Description

The desription text located underneath the image gallery

7. Logo Image

the logo image used in the featured widget

8. Main Image

The main image located at top of post content

9. Select Image

The select image button will open the frame for uploading / inserting the image into the image gallery box

10. Remove Image

The remove image button will remove the image from image gallery box

11. Add New Image

The add new image button will add a new row for adding new image into the image gallery box

Post Type Portfolio

This is the main post form for the post type Portfolio, Additional settings for this post type is available on Porfolio Panel, Portfolio Recent Widget and Portfolio Item Widget. This post type use the single portfolio template for rendering its single page output.

The Post Type Portfolio Post Entry Form

The Post Type Portfolio Page Output

1. Post Title

The Post title for the post

2. Headline Title

The Headline title for this post

3. Headline Slogan

The Headline slogan for this post

4. Body Content

The Body content for this post

5. Project Title

The title for the project information box

6. Project Completion Date

The completion date for the project information box

7. Project Client Name

The client name for the project information box

8. Project Client Homepage

The client home page url for the project information box, please use full url path including the http://

9. Project Skills

The skill in the project for the project information box

10. Project Role

The role involved in the project for the project information box

11. Project Category

The project category information for the project information box

12. Image Thumbnail

The image that will be used as a thumbnail for the portfolio teaser.

13. Select Image

The select image button will open the frame for uploading / inserting the image into the image gallery box

14. Remove Image

The remove image button will remove the image from image gallery box

15. Add New Image

The add new image button will add a new row for adding new image into the image gallery box

16. Icons

The font awesome icons that will be used in the portfolio teaser hover element.

17. Title

The title text that will be used in the portfolio teaser hover element.

18. Message

The description text entry that will be used in the portfolio teaser hover element.

19. Portfolio Category

The custom portfolio category vocabulary entry, this will be used in the isotope mode and releated portfolio box to sort out the portfolio items.

Post Type Slogan

This is the main post form for the post type Slogan, Additional settings for this post type is available on Slogan Panel and Slogan Widget. This post type use the single portfolio template for rendering its single page output.

The Post Type Slogan Post Entry Form

The Post Type About Slogan Page Output

1. Post Title

The Post title for the post

2. Headline Title

The Headline title for this post

3. Headline Slogan

The Headline slogan for this post

4. Body Content

The Body content for this post

5. Icons

The font awesome icon that will be used in the widget and in the single page.

6. Featured Image

The image that will be served as the main image in the single post and as the teaser image in the widget.

7. Highlight Text

The highlight text for overriding the default highlight text set in the Slogan Panel

Widget Featured Items

Additional settings for this widget element is available on Featured Panel and Featured Post.

Widget Featured Items Form

Widget Featured Items Output

1. Widget Title

Show / Hide the Widget title for the widget box

2. Title

Show / Hide the Post title in the widget

3. Logo

Show / Hide the Logo element in the widget

4. Image

Show / Hide the Image element in the widget

5. Content

Show / Hide the Content element in the widget

6. Pagination

Show / Hide the Pagination element in the widget

7. Category

Show / Hide the Category element in the widget

8 - 11. Logo Column Size

This is for configuring the Logo grid column settings accordingly to BootStrap CSS rule.

12 - 15. Content Column Size

This is for configuring the Content grid column settings accordingly to BootStrap CSS rule.

16 - 19. Thumbnail Column Size

This is for configuring the Thumbnail grid column settings accordingly to BootStrap CSS rule.

20. Title

The main title text for this widget

21. Button Title

The button text for the dropdown readmore button

22. Post per page

The number of post per page that should be displayed.

Widget Portfolio Items

Additional settings for this widget element is available on Portfolio Panel and Portfolio Post.

Widget Portfolio Items Form

Widget Portfolio Items Output

1. Title

Show / Hide the main title for the widget box

2. Taxonomy

Show / Hide the taxonomy element for the widget box

3. Image

Show / Hide the image element for the widget box

4. Hover link

Show / Hide the hover link elements for the widget box

5. Enable Isotope filtering

Enable / Disable the jQuery Isotope filtering feature

6. Title

Enter the title text for the widget box

7 - 10. Grid Column

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

11. Post per page

The number of post per page that should be displayed.

Widget Portfolio Recent

Widget Portfolio Recent Form

Widget Portfolio Recent Output

1. Pager

Show / Hide the pager element for the widget box

2. Title

The widget title

3. Number of posts

The number of post the widget should display before pagination

4. Thumbnail Width

The thumbnail width, this will be printed as a static CSS rule with image resized from the Portfolio Thumbnail image size.

5. Thumbnail Height

The thumbnail height, this will be printed as a static CSS rule with image resized from the Portfolio Thumbnail image size.

Widget Slogan

Additional settings for this widget element is available on Slogan Panel and Slogan Post.

Widget Slogan Form

Widget Slogan Output

1. Show Image

Show / Hide the featured image element

2. Show Icon

Show / Hide the icon element

3. Show Title

Show / Hide the title element

4. Show Content

Show / Hide the content element

5. Show Pagination

Show / Hide the pagination element

6. Title

The widget title

7. Posts Per Page

The number of post the widget should display before pagination

8 - 11. Grid Column

This is for configuring the grid column settings accordingly to BootStrap CSS rule.

Widget Social Links

Widget Social Links Form

Widget Social Links Output

1. Title

The widget title

2. Icon Alignment

Align the icon to the left or right or center.

3. Icon Selector

Select the icon for the social links entry

4. Links

The url link to the social networking page, Full url including the http:// must be entered for a valid link

5. Remove

Remove the link entry

6. Add New Links

Add a new link entry

Widget Tabbed

Widget Tabbed Form

Widget Tabbed Output

1. Show Popular Post

Show / Hide the tabs that will retrieve popular post based on the view count, this has performance implication since every page view will need to be recorded back to database for counting purposes. The database can get quite large in site with thousands of post entry. If you have large site with thousand of entry and very active page view, it is recommended to disable this and use a dedicated plugin to count the post views.

2. Recent Post

Show / Hide the recent post entry tabs, the recent post tabs will fetch post and sort them by matching the post creation timestamp

3. Recent Comment

Show / Hide the recent comment tabs, the recent comment tabs will fetch the latest comment entry and sort them by matching the comment object creation timestamp

4. Title

The widget title

5. Posts Per Page

The number of post the widget should display before pagination

6. Popular Post Header

The text to be displayed as the popular post tab header

7. Recent Post Header

The text to be displayed as the recent post tab header

8. Comment Header

The text to be displayed as the recent comment tab header

9. Image Width

The thumbnail width, this will be printed as a static CSS rule.

10. Image Height

The thumbnail height, this will be printed as a static CSS rule.

Widget Tabbed

Widget Testimonial Form

1. Show Pager

Show / Hide the pager element

2. Title

The widget title

3. Posts Per Page

The number of post the widget should display before pagination

WooCommerce Integration

The theme is fully integrated with WooCommerce e-commerce plugin, to achieve the best result some of the plugin setting must be configured first to display the output as designed with the theme

Product Images

You will need to adjust the default image size for the products found in the wp-admin/admin.php?page=woocommerce_settings&tab=catalog to have larger Catalog Images, Single Product and Product Thumbnails image size to prevent the image displayed blurred due to resizing.

Templates

WooCommerce will use Page Post Type for displaying the Shop Pages as defined in the wp-admin/admin.php?page=woocommerce_settings&tab=pages, you will need to assign each of those pages to use the Shop Pages template using the Page Attributes metabox.

WooCommerce also will use Page Post Type to display the shop front page / shop main catalog page, you must assign that page to use the Shop Catalog template using the Page Attributes meta box

Taxonomy Image

You must assign taxonomy term an image that will be used to serve as the category image in the catalog page. You can upload the image from the catalog taxonomy term edit page

Dummy Content

WooCommerce plugin has included a file for you to quickly import dummy product content, the file is dummy_data.xml which located inside the plugin root directory

UberMenu Integration

This Theme is integrated properly with the UberMenu Megamenu plugin, it will have 4 theme location menu that can be transformed into Megamenu style by utilizing the UberMenu Plugin.

Although the plugin has limited capability that it can only serve a single Megamenu instance per page.

Enabling Menu

Before a Theme Location Menu can be transformed into a mega menu, you will need to go to wp-admin/nav-menus.php and Activate Uber Menu Location by checking on the checkbox that represent the theme location menu and click on save in the activate ubermenu location metabox

Enabling Vertical Tabs

Additional feature provided by the theme is the ability to transform megamenu drop down into a dropdown with vertical tabs, To enable this feature please see the UberMenu Vertical Tabs section

Custom Style Preset

This theme provides one ubermenu custom preset that will adapt according to the theme schema, the custom preset can be found in ubermenu/skins folder, to enable the skins you must go to wp-admin/themes.php?page=uber-menu and select the style preset

Revolution Slider Integration

Revolution slider is fully integrated with this theme, there are no extra additional coding needed.

You will just need to install the plugin, create new slider instance and place the slider instance widget in the Slider Region

WordPress Multi Lingual Plugin

The theme is fully integrated with WPML plugin, once you purchase and install the plugin, a new option will be visible in the General Options Panel. The option will allow you to show the WPML language selector dropdown box easily in the theme header, you can disable the auto language selector display and use widget instead to change the location of the selector box

W3 Total Cache Plugin

Total Cache plugin can be integrated with the theme with a simple configuration in the plugin.

You must not minify the controller.bueza.js file because the file then will not loaded last and it will fire prematurely causing the Google Maps element and tabbed widget failed to work properly.

To exculde the file from being minifed, you must visit the Minify Settings Page at wp-admin/admin.php?page=w3tc_minify then input wp-content/themes/bueza/js/controller.bueza.js in the Never minify the following js files textarea

Then you may need to clear the Total cache cached file for the new settings to work

You can download the W3 Total Cache Plugin from its wordpress repository

Regenerate Thumbnail Plugin

The theme is fully tested with the Regenerate Thumbnail plugin, You will need this plugin for quickly regenerate all the thumbnail after changing the theme image thumbnail's size. WordPress will not automatically resize the image when the image has already been resized.

You can download the regenerate thumbnail plugin from its WordPress repository

CSS Structure

CSS Autoloading

This theme will automatically load all css found in the /css folder and subfolder. There is no guarantee that the css file loaded will be in the same order for different server.

Dynamic CSS Rules

At the end of the <head> element the theme will print the dynamic CSS rule such as the color styling or the custom fonts styling

BootStrap CSS

The base of the theme css file is using the BootStrap 3.x styling found in the /libraries/bootstrap/css folder, then the original bootstrap css is overriden by the bootstrap-additional.css file for additional features.

Comment.css

This file provides all css styling related to comment and comment form elements

Font-awesome.css

This file provides the font icon made using font awesome font glyph.

jquery.ui.totop.css

CSS file for styling the Scroll to top element

pages.css

CSS file for styling the Page Post Type and all the other custom post types

post.css

CSS file for styling the posts elements

responsive.css

CSS file for additional responsive styling. the main reponsive styling will be handled via bootstrap css

slicknav.css

CSS file for styling slick navigation menu that will be visible on device with width less from 768px

slider.css

CSS file for integrating the Revolution Slider into the theme

widget.css

CSS file for styling all of the widget element

wordpress.css

Additional CSS styling for default WordPress feature

Additional CSS Files

The theme will load additional css files from the schema folder and plugins folder depending on the url and user settings

BootStrap

This Theme is built using BootStrap as the main CSS Framework, the version used is the 3.x version.

The main files for BootStrap framework is located in the libraries/bootstrap folder which includes the CSS files and the Javascript files

The actual loading for the files is performed by the core class.bootstrap.php file, which also handles the default column sizes for all of the theme Region Section

By default BootStrap Class will load the BootStrap minified CSS and Javascript file if user doesn't define the WordPress Debug mode constant.

It is not recommended to edit the CSS and Javascript file found in the libraries/bootstrap folder directly, instead create a custom css file and place the custom CSS overriding rules to ensure that your custom style won't get overwritten when updating the theme.

Javascript

JS Autoloading

All Javascript files found in /js folder will be automatically loaded and files beginning with controller.xxx.js will be loaded after all the other files is loaded.

controller.bueza.js

This is the javascript file that will invoke or controll all other javascript plugin. The file will depends on the document to be fully loaded first before performing the invocation of other javascript file

In the file there are several Event binding that will linked to Document or Window elements state before the invocation processed

jquery.easing.1.3.min.js

This file is the standard jQuery easing plugin which is needed by some of the other jQuery plugin loaded by this theme

jquery.equalheight.row.js

jQuery Plugin for resizing element height to achieve an equal height elements per row. This plugin will attempt to resize all children elements that are marked in such way and recalculate its height per row

The structure required for this plugin to work :

<ul class="equalheightRow">
  <!-- first row is made by css rule like floating element with 33% width -->
  <li class="items">Some Content<li>
  <li class="items">Some Content<li>
  <li class="items">Some Content<li>
  
  <!-- second row is made by css rule like floating element with 33% width -->
  <li class="items">Some Content<li>
  <li class="items">Some Content<li>
  <li class="items">Some Content<li>
  
</ul>

The element can be other than ul but it must contain the class equalheightRow and the children can be other class than li but must contain the class items

fotorama.uncompressed.js

This is a image gallery plugin for converting lists of image into a gallery of images with thumbnail scroller

The theme will automatically convert any image list into the Fotorama Image Gallery if the parent element has the galleries class

Example structure :

<ul class="galleries">
  <li class="items"><img src="" /><li>
  <li class="items"><img src="" /><li>
  <li class="items"><img src="" /><li>
  <li class="items"><img src="" /><li>
  <li class="items"><img src="" /><li>
  <li class="items"><img src="" /><li>
</ul>

jquery.gomap.js

This is a modified gomap.js script for easily embedding a Google Maps maps instance in the page, Do not update this script manually because all the customization will be lost.

jquery.hcsticky.min.js

jQuery plugin for converting element into a floating navigation bar. You can disable the navigation bar feature by commenting out the following line in controller.bueza.js

$('#header').hcSticky();

jquery.isotope.1.5.25.min.js

jQuery Isotope plugin is for building a filtering animated effects. You can disable the isotope effect directly from the theme Option Panels

For adding extra function or options, you can edit the following function from the controller.bueza.js file.

if (Isotope.length != 0) {
  Isotope.each(function() {    
    // Prepend the link to show all categories
    $(this).prepend('<li><a href="#" class="term-link" data-id="*" data-target="' + $(this).attr('data-target') + '">All</a></li>');
  });
  
  // Bind the click event and sort the elements
  Isotope.on('click', '.term-link', function(e) {
    // This must be before anything else
    // To avoid page change if js is broken
    e.preventDefault();
    
    var self = $(this),
        Element = $('.isotope-target[data-target=' + self.attr('data-target') + ']'),  
        sort = '[data-id*=' + self.attr('data-id') + ']';
    
    if (self.attr('data-id') == '*') {
      sort = '*';
    }
    
    $('.isotope-sources[data-target=' + self.attr('data-target') + ']').find('li').removeClass('active');
    self.parent('li').addClass('active');
    
    Element.isotope({
      itemSelector: '.isotope-item',
      layoutMode: 'fitRows',
      filter: sort
    });
  });
}  

jquery.nicescroll.min.js

jQuery plugin for removing the default scrollbar and replacing it with customizable scroll bar

You can customize the scrollbar size and color by editing the following line in the controller.bueza.js

 Html.niceScroll({
     cursorborder: "1px solid #25A084",
     cursorcolor: "#21BB98",
     background: "#F5F5F5",
     scrollspeed: "60",
     mousescrollstep: "80"
 });

jquery.resizeevents.js

Adding extra resize_start and resize_end events for better performance. It is recommended to use this instead of the native browser resize event

jquery.slicknav.js

The slick navigation that will fire on browser with width less from 768px.

You can customize the options for this plugin by editing the following line in the controller.bueza.js

$('#navigation').find('.nav').slicknav({
  label: '',
  prependTo: '#header'
});

jquery.superlabels.2.3-custom.min.js

jQuery plugin for animating the form label elements mimicking the placeholder property

This plugin has been customized for better perfomance and bug fixes, please do not update this manually

You can change the plugin option or disable it from the following line in controller.bueza.js

// Build infield labels for form
SuperLabels.find('label').each(function() {
  var label = $(this).html().replace(':', '');
  $(this).html(label);
});

SuperLabels.superLabels({
  labelLeft: 10,
  labelTop: 8
});

jquery.timers-1.2.min.js

Additional jQuery plugin needed by other plugin

jquery.ui.totop.js

jQuery Plugin for building the scroll to top element

This plugin is auto initialized from the plugin file itself

Developing Plugin

The theme can be extended via plugin system which involves developer to create a PHP class and place them in the /plugins/class directory.

The new plugin file should be named class.{plugin_class_name}.php and the class name should be exactly the same as the {plugin_class_name}.

The new plugin class must use the PluginInterface interface because during theme bootstrap some of the required method will be called from the plugin class

The main class which controls all the plugin loading is the /core/class/class.plugins.php

Required bootStrap()

The required bootStrap() will be invoked during the plugin initialization, the invocation will be inside the WordPress init action hook, thus you can place all the required function or methods that need to be called inside the init action in this bootStrap() method.

/**
 * Example of a new plugin
 * The filename : class.example.php
 */
class Example implements PluginInterface {
  
  private $defaults = array(.... put all the default configuration for the plugin ........);
  
  /**
   * Encapsulating Hook Init.
   */
  public function bootStrap() {
    // Place all the function or method that must be called inside the init action
    // For example registering a new post type
    $args = array(..... arrays of settings for new post type sample ......);
    register_post_type('example', $args);
  }
  
  /**
   * Retrieve default value
   */
  public function getDefault() {
    return $this->defaults;
  }
}

Plugin Panels

The main class for controlling the panel system is the /core/admin/panels/class/class.panels.php

If you want to create additional panel for custom plugin, you will need to create a new PHP file and place them in /core/admin/panels/panes directory

The filename should be class.{class_name}.php and the class must use the {class_name} as the class name. The class must also implements the PanelInterface interface.

/**
 * Example panel
 * The filename should be class.examplePanel.php
 */
class examplePanel implements PanelInterface {
  public function setHeader() {
    // Return the array of header information
  }
  
  public function setContent() {
    // Return the HTML content for the panel
  }
  
  public function savePanel() {
    // Function for perform save or reset to database
  }
  
  public function cleanPost($className) {
    // function for cleaning up the $_POST variable after saving
  }
}

Plugin Panels: setHeader()

All subpanel must have the setHeader() method inside the class and the method must return array of information that will be used as the panel header when the panels is rendered.

public function setHeader() {
  return array(
    'text' => 'The text for the header',
    'description' => 'The text for the header description',
    'icon' => 'icon-home', // Icon class accordingly to font awesome icon
    'delta' => 206, // The weight where the panel should be displayed, lower number will be served first.
  );
}

Plugin Panels: setContent()

All subpanel must have the setContent() method inside the class and the method must return the HTML entry that will be served as the panel content.

public function setContent() {
  return 'Place the text to serve as the content here';
}

Plugin Panels: savePanel()

All subpanel must have the savePanel() method inside the class and the method process the actual form saving to the database

public function savePanel() {

   // Save option
   // The $_POST['somekey'] should point to your panel save button name property
   if (isset($_POST['somekey'])) {
     // Save Form to databse
     set_theme_mod('example', $_POST['somekey']);
     
     // Tell panel class to build the save message
     $_POST['messagesave'] = true;
   }
   
   // Reset option
   // The $_POST['someresetkey'] should point to your panel save button name property
   // The $_POST['GlobalResetSubmit'] is the global reset key button name property
   if (isset($_POST['someresetkey']) || isset($_POST['GlobalResetSubmit'])) {
     
     // Remove theme option from database
     remove_theme_mod('example');
     
     // Tell panel class to build the reset message
     $_POST['messagereset'] = true;
   }
}

Plugin Panels: cleanPost($className)

All subpanel must have the cleanPost($className) method inside the class and the method should remove the $_POST data related to the panel for sane default value of the form element.

public function cleanPost($className) {
  if ($className == 'example') {
    unset($_POST['example']);
  }
}

Extra Widgets

The extra widgets class is located in /widgets/class directory, if you want to use the theme widget loading system, you must create a new file inside the widget directory and the filename must be class.{class_name}.php.

The class name must be the same as {class_name} and must extends WP_Widget class

/**
 * Filename must be class.example.com and must be placed in the /widgets/class directory
 */
class Example extends WP_Widget {

  /**
   * Registering widget as WP_Widget requirement
   */
  public function __construct() {
    parent::__construct(
        'example', // the class name
        'Example Widget',
        array('description' => 'Example widget')
    );
  }

  /**
   * Registering widget
   */
  public function registerWidget() {
    return register_widget('example'); // example is the class name
  }


  /**
   * Extending widget
   *
   * @see WP_Widget::widget()
   */
  public function widget($args, $instance) {
    // Build the widget output here.
  }


  /**
   * Widget configuration form
   * @see WP_Widget::form()
   */
  public function form($instance) {
    // Build the widget configuration form here
  }

  /**
   * Widget update function.
   * @see WP_Widget::update()
   */
  public function update($new_instance, $old_instance) {
    // Process the widget instance before it is saved to database
  }

Core Classes

The main core class for this theme is located in the /core/classes and the main core class file is the class.core.php

class.core.php

This is the main core class for the theme, it is responsible for hooking into various WordPress action such as the init hook, wp_init hook, admin_init hook and many more.

The classes main auto loader is also defined in this core class.

The plugin initialization is also performed in this class init hook

class.bootstrap.php

This is the class for integrating bootstrap CSS framework to the theme

class.color.php

This is the class for building the custom color configured by user and loading the color schema

class.fontawesome.php

This is the class for building the fontawesome form and output.

class.form.php

Form builder class, for building form elements

class.googlemapsform.php

Extension of form class for building the google maps form

class.plugins.php

The main class for loading the theme plugin classes

class.sanitize.php

Form class element for sanitizing form output

class.schema.php

The main class for loading theme color schema classes

class.uniqueid.php

Helper class for building an absolute unique id

class.validator.php

Form class extension for validating form input

class.wp_bootstrap_navwalker.php

Class for converting standard WP menu walker into bootstrap compliance markup

Color Schema

Color Schema is a way to completely change the site looks without the need for creating a subtheme.

The way it works is by creating a subset of css files that will define the color and styling for each color schema. The CSS will be loaded at the last chance after all other CSS except the dynamic color and font css loaded to ensure that the schema CSS rules will override other CSS rules

Schema File Structure

Schema file set must reside in the /schema folder and each different schema must create its own directory with the same name as the schema class name.

for example a schema with machine name of example_color must create its own directory named example_color in the /schema folder that has the final path of /schema/example_color.

inside the custom color schema folder, the schema must have file named schema.example_color.php and inside the file it must have a class called Example_Color and the class must extends the SchemaController and implements the SchemaInterface interface.

/**
 * Example Color Schema
 * The filename must be : schema.example_color.php
 * The file must reside in : /schema/example_color/schema.example_color.php
 */
class Example_Color extends SchemaController implements SchemaInterface {
  
  /**
   * Registering the Color Schema information
   */
  public function setInfo() {
    $this->schema = array(
      'name' => 'example_color',
      'path' => __DIR__,
      'uri' => AirHead::$themeUrl . '/schema/' . basename(__DIR__),
      'title' => __('Example Color Schema', ACTIVE_THEME),
    );

    return $this;
  }


  /**
   * Registering color schema
   */
  public function setColor() {
    $this->color = array(
      'page' => array(
        'background-one' => '#D1D0CF',
        'background-image' => '',
        'text-color-header' => '#333333',
        'text-color-body' => '#555555',
      ),
      'topheader' => array(),
      'header' => array(),
      'headline' => array(),
      'maincontent' => array(),
      'sidebar' => array(),
      'footer' => array(),
      'fullfooter' => array(),
    );

    return $this;
  }

  /**
   * Registering custom fonts
   */
  public function setFont() {
    $this->font = array();

    return $this;
  }

  /**
   * Rules for loading extra css
   */
  public function loadStyle() {
    // Enqueue extra styles as the schema required.
    // The enqueueing must use wp_enqueue_style function.
  }  

}

Templates

This theme use default WordPress templating system, the templates resides in the root directory of the theme. While subtemplates resides in the /tempates directory and its sub directories.

Special templates for WooCommerce is placed in the /woocommerce directory.

Some widget has its own template that resides in the /widgets/templates directory.

Credits

Thank you for the plugins authors that made this theme possible

  • JavaScripts

    • jQuery Easing Plugin - George McGinley Smith
    • jQuery EqualHeight - CSS Tricks
    • jQuery FotoRama - Artem Polikarpov
    • jQuery $.GoMap - pittss
    • jQuery hcsticky - Željko Galetić
    • jQuery Isotope - David DeSandro
    • jQuery niceScroll - InuYaksa
    • jQuery resize - Yannick Albert
    • jQuery resizeEvents - ericprieto
    • jQuery SlickNav - Josh Cope
    • jQuery superLabels - Remy Bach
    • jQuery timers - Jason Chavannes
    • jQuery toTop - Matt Varone
  • CSS

    • BootStrap Framework - BootStrap Team
    • FontAwesome - Dave Gandy
  • Fonts

    • Droid - Steve Matteson
    • OpenSans - Steve Matteson
    • Oswald - Vernon Adams
    • Varelaround - Admix Designs
    • FontAwesome - Dave Gandy