Theme Files

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

pixelstudio-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
  |- pixelstudio.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

PixelStudio 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 pixelstudio.zip file from the downloaded theme file.

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

Installing via FTP

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

Installing Extra Plugins

This theme is bundled together with several plugin which will provides better user experience for the theme. The included plugins are :

  1. Revolution Slider - file : revslider.zip
  2. Widget Context - file : widget-context.zip
  3. Recent Posts Widget Extended - recent-posts-widget-extended.zip
  4. Bootstrap Shortcodes - bootstrap-shortcodes.2.1.zip

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

Revolution Slider

Revolution slider is a premium plugin which will allows you to create beautiful CSS3 animated slider with wysiwyg

The Revolution Slider plugin is bundled together with this theme, you can find the revslider.zip file in the main theme zip files under the plugin directory.

The plugin it self requires no special installation method, you can just extract the zip file and upload them to /wp-content/plugins/revslider folder

Widget Context

The widget context plugin is a plugin for controlling widget visibility. This is useful to limit widget visibility such as slider widget to frontpage only.

The plugin it self is hosted in wordpress.org, you can use either the bundled version or download the latest version via WordPress plugin installer. It is recommended to use the bundled version to ensure maximum compatibility with the theme

Recent Posts Widget Extended

This plugin is optional, it will provide you with a better widget for displaying the latest posts teasers plus thumbnail image.

The plugin it self is hosted in wordpress.org, you can use either the bundled version or download the latest version via WordPress plugin installer. It is recommended to use the bundled version to ensure maximum compatibility with the theme

Optimal widget settings as the demo site

Bootstrap Shortcodes

This plugin is optional, it will provide you with shortcode capability for displaying bootstrap elements.

The plugin it self is hosted in wordpress.org, you can use either the bundled version or download the latest version via WordPress plugin installer. It is recommended to use the bundled version to ensure maximum compatibility with the theme

Optimal widget settings

WordPress Multi Language Installation

The theme is tested with WMPL to ensure its compatibility, but the author of the plugin prohibit us to bundle the plugin together with this theme.

If you need this plugin, you must purchase the plugin from WPML.org and ...... need more info about this havent installed this yet!

How to avoid missing uploaded image when WPML is enabled

You will need to enable the WMPL for media plugin which is bundled together with WPML main plugin file for supporting the WordPress Media uploader which this theme use for assigning thumbnail image and portfolio images

It is required to perform media translation after you enable the wpml-media plugin. The configuration pags is located at http://example.com/wp-admin/admin.php?page=wpml-media.

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.pixelstudio.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 exclude 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/pixelstudio/js/controller.pixelstudio.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

Revolution Slider instance went blank or missing

It has been reported that in some case enabling Javascript minification can break the Revolution Slider Javascript. To fix this problem, you can choose to disable the W3 Total Cache JS minification or exclude the page that contains the Revolution Slider Instance from minification all together.

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

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_data/dummy_content.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 regions will be available for all templates.

How to show widgets per page?

Since the theme doesn't select which region to display on which page templates, you will have to use plugin such as Widget Context (bundled with the theme main zip file) to configure the widget per page visibility.

Theme Panels

The theme options panel is located in wp-admin/themes.php?page=pixelstudio_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. 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.

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.

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. Don't forget to hit the save button when finished, although changes can be viewed live, it will only be properly saved when save button is clicked.

3. Buttons

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

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 Boxed layout and Normal open style with a single click configuration from the configuration bootstrap panel.

Boxed Style

Open Style

Bootstrap Theme Panels

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.

General Panel Options

Logo Options

Logo Text
Set the text to be displayed on the left side of the logo image, if left blank no text will be displayed. You should left this blank if using a full image type of logo
Slogan Text
Set the text to be displayed underneath the logo text, if left blank no text will be displayed.
Logo Image

Upload a custom logo image, if the uploaded image is larger than the logo div container, it will be resized using css to be the same size as the logo div container.

You can adjust the width of the logo container using bootstrap column size from the Theme Options Layout Panel

For retina display, you can upload 2x image logo size and then resize the logo container or use custom css such as :

#logo img {
  width : xxx;
  height: xxx;
}

Main Title

Blog List

You can define custom text to be displayed as the main title for the blog listing page, this will affect the custom-page-blog-list.php template and index.php

Leave this empty to disable the main title

Archive Page
Set the main title for archive post listing page, this setting is used by General::getMainTitle() method and index.php.
Category Page
Set the main title for category post listing page, this setting is used by General::getMainTitle() method and index.php.
Search Page
Set the main title for search page, this setting is used by General::getMainTitle() method and index.php.
Tags Page
Set the main title for tags page, this setting is used by General::getMainTitle() method and index.php.
Author Page
Set the main title for author page, this setting is used by General::getMainTitle() method and index.php.

Content Teaser

Show Title
This is a quick toggle for displaying the post teaser title, this setting will effected the blog list, archive page, category page, search page, tags page and author page
Show Image
This is a quick toggle for displaying the post teaser featured thumbnail image, this setting will effected the blog list, archive page, category page, search page, tags page and author page
Show Byline
This is a quick toggle for displaying the post by author line text, this setting will effected the blog list, archive page, category page, search page, tags page and author page
Show Calendar
This is a quick toggle for displaying the post teaser calendar bubble on the left side, this setting will effected the blog list, archive page, category page, search page, tags page and author page
Show Title
This is a quick toggle for displaying the post excerpt content, this setting will effected the blog list, archive page, category page, search page, tags page and author page
Show Title
This is a quick toggle for displaying the post readmore button, this setting will effected the blog list, archive page, category page, search page, tags page and author page

Content Single

Show Image

This is a quick toggle for displaying the featured image showed on top of the page.

The settings will only be applied to the post type : post single content.

Show Title

This is a quick toggle for displaying the post title.

The settings will only be applied to the post type : post single content.

Show Calendar

This is a quick toggle for displaying the left side round calendar bubble.

The settings will only be applied to the post type : post single content.

Show Byline

This is a quick toggle for displaying the by author text.

The settings will only be applied to the post type : post single content.

Show Tags

This is a quick toggle for displaying the post tags underneath the byline.

The settings will only be applied to the post type : post single content.

Show Content

This is a quick toggle for displaying the post content body.

The settings will only be applied to the post type : post single content.

Show Author

This is a quick toggle for displaying the author information box underneath the main content box.

The settings will only be applied to the post type : post single content.

Show Comments

This is a quick toggle for displaying the comment entry box.

The settings will only be applied to the post type : post single content.

Show Comment Form

This is a quick toggle for displaying the comment form.

The settings will only be applied to the post type : post single content.

Show Social

This is a quick toggle for displaying the social share links underneath the post body content.

The settings will only be applied to the post type : post single content.

Thumbnail Size

You can define the width, height and whether to crop or not to crop the thumbnail image size that will be used for posts teasers thumbnail and single post featured image.

It is recommended to upload image in the boundary of server limits, uploading very large image into a shared hosting can break the site completely. Make sure you contact the server administrator regarding the maximum image size that their server can handle for image scaling.

Sidebar

This is the global settings for the sidebar position, other plugin such as the portfolio plugin can override this global settings. So you can actually have a different sidebar position between Portfolio and General Posts page.

Footer

You can set the text for the footer copyright message, you can add HTML code to the text.

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

Show title

This option will show / hide the title element inside the jumbotron element in the custom-page-frontpage.php.

Show content

This option will show / hide the body content inside the jumbotron element in the custom-page-frontpage.php.

If you want to remove the jumbotron element completely from the template, you will need to hide both the title and content element

How to build the front page?

This theme custom-page-frontpage.php is designed to utilize the sidebar region combined with widgets to build the frontpage. The original page title and body content will be placed inside the jumbotron element which can be turned off by disabling the element from the theme option frontpage panel.

Several widgets is also prepared for use with this template. Which then can be combined and easily reordered by utilizing WordPress default widget configuration page.

Available custom widgets that are designed for use in this template :

  1. Portfolio Teasers - Displaying a list of portfolio post items
  2. Revolution Slider - Displaying slider
  3. Post Teasers - Displaying teasers of post type : post items
  4. Service List - Create "our service" box
  5. Client List - Display a list of client logo that can be linked to their homepage

Page Panel Options

This theme panel options is for configuring the options used in the page.php and for the post type : page

Content Single

Show Image
Quick toggle for displaying / hiding the featured image in the post type : page single page
Show content
Quick toggle for displaying / hiding the post title
Show Title
Quick toggle for displaying / hiding the post body content
Show Content
Quick toggle for displaying / hiding the post author information box
Show Comments
Quick toggle for displaying / hiding the comment entries
Show Comment Form
Quick toggle for displaying / hiding the comment form
Show Social
Quick toggle for displaying / hiding the social share links underneath the body content

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

Grid Options

This section of portfolio settings will be applied for the portfolio listing page and portfolio category listing page only.

Show Title
Option for showing / hiding the portfolio title in the template
Show Image
Option for showing / hiding the portfolio image in the template
Show Excerpt
Option for showing / hiding the porfolio body excerpt
Show Icon
Option for showing / hiding the bubble icon beside the portfolio rounded image
Show Readmore
Option for showing / hiding the readmore button
Enable Isotope
Option for inializing isotope filtering js or not, without isotope the top link will link to category page.
Sidebar Position
Option for overriding the General class sidebar position, this is useful if you want to have different sidebar position that will be applied only to portfolio list page.
Show Readmore
Option for showing / hiding the readmore button
Column Sizes
You can configure the size of the grid element for mobile, tablet, small screen and large screen size using the Bootstrap column class.
Item per page
Settings for configuring how many teaser block should be displayed on a single page, Pagination element will be displayed if there are more portfolio post than the configured amount.
Main title
The main title text that should be displayed on the portfolio listing page, leaving this empty will disable the main title element.
Thumbnail Size
Set the image size for the portfolio thumbnail image, you can enter 2x size to support retina display.

Full Page

This section of portfolio settings will be applied to post type : portfolio single page

Show Title
Option for showing / hiding the portfolio title in the template
Show Thumbnail
Option for showing / hiding the main gallery thumbnail navigator
Show Image
Option for showing / hiding the portfolio image in the template
Show Content
Option for showing / hiding the porfolio body content
Show Share
Option for showing / hiding the social share links at the bottom of the body content
Show Designer
Option for showing / hiding the designer box at the bottom of the main image gallery
Show Meta
Option for showing / hiding the meta box at the left side of the designer box
Gallery Position
Option for formatting the main gallery, the full size gallery option will stretch the image to full width of the box container, this option is usually useful if you have configured the portfolio page to have a sidebar or the total web page max width is narrow (960px), while the centered option is suitable if you want to have smaller gallery image display. .
Sidebar Position
Option for overriding the General class sidebar position, this is useful if you want to have different sidebar position that will be applied only to portfolio single page.
Gallery Box Column
You can configure the size of the main gallery for mobile, tablet, small screen and large screen size using the Bootstrap column class. if you wanted to have a full size gallery, you must use 12 columns which will stretch the image perfectly or use other column size with the centered image gallery option which will resize the main image gallery container to be less than the main parent container and then center the main image gallery.
Designer Box Column
You can fine tune the designer box size, if you configure the column to use 12 column then the metabox grid will begin in a new row. if you want to have designer box and metabox inline side by side, you must configure both box column size total to be less than 12 column.
Thumbnail Size
Set the image size for the portfolio main gallery image image, you can enter 2x size to support retina display. but be careful not to enter image too large for the server to handle as most shared hosting will limit the maximum image size that can be processed (resized).

About Panel Options

This options will be applied to post type : about, in the single-about.php template

Show Title
Option for showing / hiding the main post title in the template
Show Body
Option for showing / hiding the body content
Sidebar Position
Option for overriding the General class sidebar position, this is useful if you want to have different sidebar position that will be applied only to about single page.
Photo Size
Set the image size for the team member photo image, you can enter 2x size to support retina display.
Client Logo
Set the image size for the client logo image, you can enter 2x size to support retina display. This image size will also used in the client list widgets.

Services Panel Options

This options will be applied to post type : services, in the single-services.php template

Show Title
Option for showing / hiding the main post title in the template
Show Content
Option for showing / hiding the body content
Sidebar Position
Option for overriding the General class sidebar position, this is useful if you want to have different sidebar position that will be applied only to services single page.
Services Box Column
You can fine tune the services box size according to bootstrap column class rule.
Working Box Column
You can fine tune the working box size according to bootstrap column class rule.
Accordion Box Column
You can fine tune the working box size according to bootstrap column class rule.
Tabs Box Column
You can fine tune the tabs box size according to bootstrap column class rule.

Contact Panel Options

This options will be applied to post type : services, in the single-contact.php template

Show Title
Option for showing / hiding the main post title in the template
Show Content
Option for showing / hiding the body content
Sidebar Position
Option for overriding the General class sidebar position, this is useful if you want to have different sidebar position that will be applied only to content single page.
Maps Box Column
You can fine tune the maps box size according to bootstrap column class rule.
Contact Box Column
You can fine tune the contact box size according to bootstrap column class rule.
Location Box Column
You can fine tune the location box size according to bootstrap column class rule.
Content Box Column
You can fine tune the content box size according to bootstrap column class rule.

404 Panel Options

This options will be applied to the 404 page using 404.php template

Show Title
Option for showing / hiding the title in the 404 page template
Show Content
Option for showing / hiding the content in the 404 page template
Main Title
Set the text to act as the 404 page main title.
Main Content
Set the text to act as the 404 page body content.

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

Related template for this post type are :

  1. single-contact.php - The main template for rendering the page
  2. templates/contact-forms.php - the template for rendering the contact form and processing the form submission.
  3. templates/contact-location.php - the template for rendering the location metabox entry

Contact Form Manager

Enable Contact Form
You can quickly disable the contact form for the current page by unchecking this
Title
The title for the contact form box, leave empty to disable the title
Form Settings
You can select which form elements that will be displayed
Recipient Email
Set the email address that the form should send the form submission to
Submit Button Text
Set the text to be displayed as the submit button text

You can actually replace the form with other plugin such as Contact Form 7 plugin by editing the contact-forms.php and place the php code for rendering the form made by the plugin inside the template

Code example for embedding Contact Form 7 Instance to template/contact-forms.php :

<?php $metas = Contact::getMetadata(get_post(), 'contact');?>
<?php if (isset($metas['title']) && !empty($metas['title'])) : ?>
<h2 class="contact-section-title"><?php echo $metas['title']; ?></h2>
<?php endif;?>
<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>

Location Manager

Enable Location
You can quickly disable the location box for the current page by unchecking this
Title
The title for the location box, leave empty to disable the title
Description text
The description for the location box, Any HTML tags will be escaped and leave empty to disable the description
Address text
Enter the location address for this location
Phone text
Enter the phone text for this lcoation
Fax text
Enter the fax text for this lcoation
Email
Enter the email text for this lcoation

Map Manager

Enable Maps
You can quickly disable the map box for the current page by unchecking this
Mouse Scroll
Toggle Google Maps js option for allowing mouse scroll to scroll the maps zoom level.
Draggable
Toggle Google Maps js option for allowing mouse drag to drag the maps position.
Doubleclick Zoom
Toggle Google Maps js option for allowing double click to zoom the maps in.
Responsive
Toggle Maps js option for allowing the maps to be resized when the screen size changed. This option will only affect the maps size when user actually changing the screen size after the maps is loaded.
Street View
Toggle Google Maps js option for displaying the street maps type.
Scale Control
Toggle Google Maps js option for allowing the map scale control.
Address
Enter the address for this maps, the entered address will be geocoded and used as the center of the maps
Map Zoom
Set the initial zoom level for the maps
Map Types
Set the map types to be displayed
Control Position
Google Map Js setting for control element position
Control Style
Google Map js setting for the control style

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.

Template used for this post type :

  1. single-about.php - The main template for displaying the single about page
  2. templates/about-client.php - the client logo list template
  3. templates/about-skills.php - the skills box template
  4. templates/about-services.php - the template used for rendering the services box
  5. templates/about-teams.php - the template used for rendering the teams box

Teams Manager

This metabox data will be processed in the templates/about-teams.php

Enable Teams
You can quickly disable the teams metabox by unchecking this checkbox
Title
Set the title for the teams metabox, leave this empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width for each of the teams member items
Team Member Table

You can enter new team member by clicking the "add new team member" blue button. Each table row will be formatted as a grid with the width column as specified on the column sizes select box above

The team member photo size can be configured from the Theme Options - About Panel

Skill Manager

This metabox data will be processed in the templates/about-skills.php

Enable Skills
You can quickly disable the skills metabox by unchecking this checkbox
Title
Set the title for the skills metabox, leave this empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the skills box main wrapper
Skills Table

You can enter new skill item by clicking the "add new skill" blue button. Each table row will be formatted as a new skill line row.

It is required to enter numerical value for the value row form field.

Services Manager

This metabox data will be processed in the templates/about-services.php

Enable Services
You can quickly disable the services metabox by unchecking this checkbox
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the services box main wrapper
Services Table

You can enter new service item by clicking the "add new service" blue button. Each table row will be formatted as a new skill line row.

Client Manager

This metabox data will be processed in the templates/about-clients.php

Enable Clients Logo
You can quickly disable the client metabox by unchecking this checkbox
Title
Set the title for the clients metabox, leave this empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the clients box main wrapper
Clients Table

You can enter new client by clicking the "add new client" blue button. Each table row will be formatted as a new client logo column.

It is required to use full path url for the url entry. example : http://example.com.

Leave the url field empty to just display the client logo without linking it to anywhere

.

Post Type Services

This is the main post form for the post type Services.

Additional settings for this post type is available on Services Panel

Template used for this post type :

  1. single-services.php - The main template for displaying the single services page
  2. templates/services-services.php - template used for rendering the services box
  3. templates/services-accordion.php - template used for rendering the accordion metabox
  4. templates/services-tabs.php - the template used for rendering the tabs box
  5. templates/services-working.php - the template used for rendering the working meta box

Services Manager

This metabox data will be processed in the templates/services-services.php

Enable Services Box
You can quickly disable the services metabox by unchecking this checkbox
Title
Set the title for the services metabox, leave this empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the services box items
Services Table

You can enter new services by clicking the "add new entry" blue button. Each table row will be formatted as a new service items column.

Working Manager

This metabox data will be processed in the templates/services-working.php

Enable Working Box
You can quickly disable the working metabox by unchecking this checkbox
Title
Set the title for the working metabox, leave this empty to disable the title
Working Table

You can enter new working items by clicking the "add new entry" blue button. Each table row will be formatted as a new working items column.

Accordion Manager

This metabox data will be processed in the templates/services-accordion.php

Enable Accordion Box
You can quickly disable the accordion metabox by unchecking this checkbox
Title
Set the title for the accordion metabox, leave this empty to disable the title
Accordion Table

You can enter new accordion item by clicking the "add new entry" blue button. Each table row will be formatted as a new accordion items row.

Tabs Manager

This metabox data will be processed in the templates/services-tabs.php

Enable Tabs Box
You can quickly disable the tabs metabox by unchecking this checkbox
Title
Set the title for the tabs metabox, leave this empty to disable the title
Tabs Table

You can enter new tabs item by clicking the "add new entry" blue button. Each table row will be formatted as a new tabs items row.

Post Type Portfolio

This is the main post form for the post type Portfolio. Additional settings is located on Theme Options - Portfolio Panel

Template used for this post type :

  1. single-portfolio.php
  2. taxonomy-portfolio_category.php
  3. portfolio-gallery.php
  4. portfolio-grid.php

Image Manager

This metabox data will be processed in the templates/portfolio-gallery.php

Additional configuration is located in the Theme Options - Portfolio Panel.

Thumbnail

Upload the image that will be used as the thumbnail on portfolio teaser.

You can adjust the image size from the Portfolio Panel under the Grid image options

Thumbnail Bubble Icon
Select the icon that will be used in the small bubble on the right side of the image.
Thumbnail Bubble Text
The text that will be used on top of the bubble icon, The size of the bubble is very small thus if you place too much text here it will be shortened and replaced by ... instead.
Images Table

You can enter new image by clicking the "add new image" blue button. Each table row will be formatted as images in the portfolio gallery

If there is no thumbnail image uploaded, then the first image uploaded in this table will be used to serve as the portfolio thumbnail

Project Information

This metabox data will be processed in the templates/single-portfolio.php

Title
Set the title for the project information box, leave empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the project information items
Project Information Table

You can enter new items by clicking the "add new entry" blue button. Each table row will be formatted as new project information item

Author Details

This metabox data will be processed in the templates/single-portfolio.php

Icon
Set Icon for this box
Title
Set the title for the author details box, leave empty to disable the title
Name
Set designer name text
Description
Set description for this project
Author Details Table

You can enter new items by clicking the "add new link" blue button. Each table row will be formatted as item rows

Post Teasers Widget

This widget is useful for displaying list of post entry taken from the post type post.

Template used for rendering the widget output is : widgets/templates/post/postbox.php

Title
The widget title, leave empty to disable the title
Show Post Title
Toggle for hiding / displaying the post title
Show Post Content
Toggle for hiding / displaying the post content
Show Post Image
Toggle for hiding / displaying the post thumbnail image
Show Readmore Button
Toggle for hiding / displaying the readmore button
Show Pager
Toggle for hiding / displaying the pager element
Post per page
Limit post to display on a single page
Sort by Terms
Sort the post by its category terms. This is useful if you want to only display a certain post on front page, you can create a new category called frontpage, set the post that will be displayed on front page to be in the category frontpage and then set the widget to display only posts under frontpage category.

Portfolio Teasers Widget

This widget is useful for displaying list of portfolio entry taken from the post type portfolio.

Template used for rendering the widget output is : widgets/templates/portfolio/portfoliobox.php

Title
The widget title, leave empty to disable the title
Grid Mode
You can use grid mode to display the items in column grid or list mode to display the items in a list mode.
Show Post Title
Toggle for hiding / displaying the post title
Show Post Content
Toggle for hiding / displaying the post content
Show Post Image
Toggle for hiding / displaying the post thumbnail image
Show Readmore Button
Toggle for hiding / displaying the readmore button
Show Icon Bubble
Toggle for hiding / displaying the small icon bubble on the right side of the image, note if the image is hidden then the icon bubble will be hidden as well regardless of the show icon buble settings.
Show Pager
Toggle for hiding / displaying the pager element
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the portfolio items and will only be effective if the grid mode is set to Grid Mode
Post per page
Limit post to display on a single page
Sort by Terms
Sort the portfolio by its portfolio category terms. This is useful if you want to only display a certain portfolio on front page, you can create a new portfolio category called frontpage, set the portfolio that will be displayed on front page to be in the category frontpage and then set the widget to display only portfolio under frontpage portfolio category.

Recent Portfolio Widget

This widget is useful for displaying list of portfolio post by its thumbnail and sorted by the creation date

Template used for rendering the widget output is : widgets/templates/portfoliorecent/portfoliorecentbox.php

Title
The widget title, leave empty to disable the title
Post per page
Limit post to display on a single page
Thumbnail Width & Height
Set the image thumbnail width and height

Contact Information Widget

This widget is useful for displaying list contact information

Template used for rendering the widget output is : widgets/templates/contact/contactbox.php

Title
The widget title, leave empty to disable the title
Table
Enter the label & text for each of the contact information row, you can add more row by clicking on the "add new entry" blue button

Social Links Widget

This widget is useful for displaying list of social network icon and link them to the social network page

Template used for rendering the widget output is : widgets/templates/social/socialbox.php

Title
The widget title, leave empty to disable the title
Icon Alignment
Set how to align the icon
Table
Enter the icons & links for each of the social button, you can add more row by clicking on the "add new links" blue button. Please use the full url when inputting data for the links textfield, example : http://example.com.

Client List Widget

This widget is useful for displaying list of client logo and link them to their homepage

Template used for rendering the widget output is : widgets/templates/client/clientbox.php

Title
The widget title, leave empty to disable the title
Table
Upload the client logo and enter its url for each of the client logo item, you can add more row by clicking on the "add new links" blue button. Please use the full url when inputting data for the links textfield, example : http://example.com and leave it empty for not linking the logo image to anywhere.

Services List Widget

This widget is useful for displaying list icon to represent the services that the company provides

Template used for rendering the widget output is : widgets/templates/services/servicesbox.php

Title
The widget title, leave empty to disable the title
Column Sizes
Set the column size according to the bootstrap column rules for each different devices. These column sizes will be used for configuring the width the services items grid
Table
Select the icon to use and input the text describing the service, you can add more row by clicking on the "add new entry" blue button.

CSS Structure

CSS Autoloading

This theme will automatically load all css found in the /css folder and subfolder.

It is recommended that you created a file called custom.css and place them in the /css folder for overriding theme css

Warning 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.

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

slicknav.css

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

liquidcarousel.css

CSS file for styling the liquid carousel element used for rendering the client logo element for both the client box found in the single about page or the client logo widget

slider.css

Additional CSS styling Revolution slider element

fotorama.css

CSS file for styling the fotorama elements used in portfolio gallery element

animate.css

CSS styling for adding CSS3 animation effect

widget.css

CSS file for styling all of the widget element

wordpress.css

Additional CSS styling for default WordPress feature

style.css

Theme main css file for styling all the theme elements

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.pixelstudio.js

This is the javascript file that will invoke or control 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.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.pixelstudio.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.pixelstudio.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.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.pixelstudio.js

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

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

jcanvas.min.js

jQuery Plugin for easily drawing canvas element

This plugin is used for drawing the line in the services list box via HTML5 canvas element

jquery.liquidcarousel.min.js

jQuery Plugin for creating responsive carousel element

This plugin is used for building the client logo carousel element

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.

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 resizeEvents - ericprieto
    • jQuery SlickNav - Josh Cope
    • jQuery timers - Jason Chavannes
    • jQuery jCanvas - Caleb Evans
    • jQuery liquidCarousel - nikolakis
    • jQuery toTop - Matt Varone
  • CSS

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

    • OpenSans - Steve Matteson
    • FontAwesome - Dave Gandy