UberGrid WordPress Theme

DOCUMENTATION

Thank you for purchasing UberGrid WordPress Theme. Before you start setting up your Website, please read through documentation and if you have any questions please feel free to contact our support team.

www.pukkathemes.com

  1. 1. Getting Started - Installation
    1. 1.1 WordPress Installation
    2. 1.2 Installing the Theme
    3. 1.3 Activation and Content Importer
  2. 2. Setting Up Your Site - Theme Options
    1. 2.1 Theme Options
    2. 2.2 General Settings
    3. 2.3 Home Page Content
    4. 2.4 Social
    5. 2.5 Style
    6. 2.6 Typography
    7. 2.7 Forms
  3. 3. Building Your Site
    1. 3.1 Page Templates
    2. 3.2 Page Builder
    3. 3.3 Widgets
    4. 3.4 Posts
    5. 3.5 Categories
    6. 3.6 Homepage
    7. 3.7 Navigation
    8. 3.7 Advanced Customization
  4. 4. Updating
    1. 4.1 Updating
    2. 4.2 Child Theme
  5. 5. FAQ
    1. 5.1 Change Homepage 'boxes'
    2. 5.2 Change Page Builder CSS
    3. 5.3 Using excerpt for boxes content

1. Getting Started - Installation

1.1 WordPress Installation

Make sure you’ve got the current version of WordPress . In order to download the current version, please visit wordpress.org.

Please check http://codex.wordpress.org/Installing_WordPress for information on how to install WordPress on your server.

 

1.2 Installing the Theme

Once WordPress is successfully installed, you can install the theme in two ways: via FTP, or through WordPress.

Via FTP

Un-zip the theme main file and upload the folder via a FTP program to the /wp-content/themes/ folder on your server.

Through WordPress

Use WordPress Theme Installer. Go to Appearance > Themes > Install Themes > Upload, and select the zipped theme file.

1.3 Activation and Content Importer

Once the theme is installed, you’ll just have to activate it in Appearance > Themes > Manage Themes.

Before you can get started with your ÜberShop theme and have it look as the demo, you first need to add content to WordPress. If you prefer to preload our demo content into your theme to start with, go to Appearance > Theme Settings > Content Importer.

2. Setting Up Your Site - Theme Options

2.1 Theme Options

The ÜberShop WordPress Theme comes with an easy Theme Settings Manager (Appearance > Theme settings) divided into nine tabs:

GENERAL SETTINGS
SOCIAL
HOMEPAGE CONTENT
STYLE
TYPOGRAPHY
FORMS

Each field is accompanied by a short help text. If you have any issues contact our support team.

2.2 General Settings

Use General Settings Tab (Appearance> Theme settings > General settings) to set up basic settings of the theme (logo, analytics code,
favicon and etc)

Logo

Upload your logo. Ideal/maximum width should be 200px.

Retina logo

Upload your double-sized logo for retina displays. Ideal/maximum width should be 400px.

Plain text logo

Insert text which will be displayed if image logo is missing. Default is Site Title.

Plain text logo color

Color of the text logo which is displayed if image logo is missing.

Logo for Mobile Menu

Logo image for Mobile Menu. Maximum/Ideal height is 36px.

Favicon

Upload your favicon image. Image pixel dimension must be in square aspect ratio (meaning height must be equal to the width). Acceptable dimensions: mimumum 32x32px, maximum 64x64px (.PNG)

Analytics code

Paste your tracking code here. (Google Analytics, AWStats, Piwick, Statcounter, ...).

Copyright Text

If you have Copyright Text insert it here. Copyright will be published bellow navigation.

Single author site

Select this feauture in order to hide author’scname from specific pages and post categories.

Right Sidebar width

Here you can select width of your sidebar.

Hide Language Switcher

Select this feature in order to hide default language switcher (flags)

Use page builder in posts

Select this feature in order to enable using page builder in posts.

Use Grid Layout For Categories

Select this in case you want to have grid layout for categories.

Grid layout categories

Select for witch categories you waant to use grid layout. It will be used for all if no category is selected.

Default Category Box Size

Select default Box Size for categories. This is important if you are using grid layout for.

2.3 Home Page Content

Use Home Page Conent Tab (Apperance > Themes Settings > Home Page Content) to set up your Homepage.

Front Page grid display

Choose this feature if you want front page to use grid based display.


Use Front Page Manager

Select this feature in order to manage front page boxes from Front Page Manager. In case you don't select this option, latest posts will be published on your front page.


Enable infinite scroll

Choose this feature in order to enable infinite scroll (endless page) on your Homepage.


Max number of front page boxes

Set up maximum nubmer of boxes on your homepage. Also, this number is the number of boxes loaded if using infinite scroll.


Max front page width

Set up maximum width for your front page by choosing number of columns. One column equals small or medium box width.


Default box size

Choose default box size. We would recommend you choose this, especialy if you are not using Front Page Manager.


Home page box date

Choose do you want to show Dates of Posts/Pages on Home page Boxes.


Right sidebar on home page

Choose do you want to enable right sidebar on Home Page.


Front page categories

If you want to show only latest posts from certain categories on your homepage, then you can select categories here. Keep in mind that this will work only if you aren't using Front Page Manager.


Block Sizes

Here you can change block width, height, margin, image width and image height. Keep in mind that you are changing medium box, and that other box sizes are calculated automatically from this setting so choose wisely.


2.4 Social

Use Social Tab (Appearance > Theme settings > Social) to set up social buttons and links.

Insert your facebook App ID. This means you now need to create a facebook app to perform integration. Don’t worry, creating an app is easy, you don’t need to be a developer to create an app here. Visit https://developers.facebook.com/apps/ and click create new app. If you are using some other social plugin, then you should Disable Facebook Open Graph Tags.

You can enable Social Buttons for posts (Facebook Like, Twitter, Linkedin, Pinetrest) and you can also disable Social Buttons on Pages.

For Social Media Icons - Choose their position (Primary or Secondary Menu) and then simply enter your social profile URL in the Link input field. For example, enter 'http://www.facebook.com/pukkathemes' for the Facebook Fan Page link.

2.5 Style

Use style Tab (Appearance > Theme settings > Style) to choose a predefined color scheme here. These are some examples. You can create any additional color scheme here.

Also you can add CSS changes here vie Custom CSS field.

2.6 Typography

Use This Tab to change typography of the theme.

2.7 Forms

Use Forms Tab (Appearance > Theme settings> Forms) to set up email, thank you page and error notification. All emails from custom forms (Page Builder) will be sent to this address.

3. Building Your Site

3.1 Page Templates

You can choose different page templates: full width, page with left sidebar, right sidebar and without sidebar.


 

3.2 Page Builder

You can easily create custom Page by using Page builder (Dynamic Meta Box). You can add Text Box, Accordion, Image, Tabs, Contact Form, Map or Divider.


If you have Page without right sidebar, then you just need to choose "Full Width" Template from Page Attributes.
You can also enable HTML for Page Builder (Apperance > Theme Settings > General Setings)


 

 

3.3 Widgets

To rearrange Widgets within the sidebar or Widget area go to (Appearance > Widgets), drag it into place.
There are 2 widget areas: Main and Secondary.


 

3.4 Posts

You have different Post Formats to choose: Standard, Video, Audio, Link, Quotes, Gallery


 

If you choose Video or Audio Post format then you can just paste link in "Media URL". If you choose Linke Post Format, then you'll have to paste link in "Link"


 

 

 

3.5 Categories

You have 2 types of categories: blog and grid categories. From Theme Settings (General Settings) you can choose for witch category you want to enable grid view.

 

3.6 Homepage

If you want to publish post/page on your homepage, then you just need to check Featured post button.

Also you can choose box size (small, medium and big) and upload secondary image (image for Homepage only). For secondary image you can put only URL, if you don’t want to upload image.


If you don’t have secondary image then featured image will be shown on your Homepage.


Dimensions for Secondary Images


Small box: 225x145px (450x290px for Retina displays)

Medium box: 250x290px (500x580px for Retina displays)

Big box: 520 x 290px (1040x580px for Retina displays)

We recommend you to upload image with bigger resolution (Retina displays), but this is up to you.


Also, use Excerpt text for text you want to publish on your homepage. You can enable Excerpt in Screen Options. If it’s enabled Excerpt Box will be bellow Post Formats.



Use Front Page Manager (Apperance > Front Page Manager) to add Pages, Categories, Custom Boxes or to organize your Homepage.


You can PIN your post on the Front Page Manager. This is really helpfull if you want to ensure that certain post stays on same homepage position, regardless of any new post etc.


 

3.7 Navigation

Use Menus (Apperance > Menus) to set up Navigation.


3.8 Advanced Customization

Child Themes

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child theme allows you to modify,
or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Learn more here
http://codex.wordpress.org/Child_Themes

Pluggable Function

Pluggable functions were introduced in WordPress 1.5.1 These functions let you override certain core functions via plugins. The most
up-to-date list of core functions that WordPress allows plugins to override is available at wp-includes/pluggable.php. WordPress loads the built-in functions only if they are undefined after all plugins have been loaded. Pluggable functions are no longer being added to WordPress core. All new functions instead use filters on their output to allow for similar overriding of their functionality. Note: A function can only be reassigned this way once, so you can’t install two plugins that plug the same function for different reasons. For safety, it is best to always wrap your functions with if ( !function_exists() ), otherwise you will produce fatal errors on plugin activation.

Check here full list of pluggable functions
http://codex.wordpress.org/Pluggable_Functions

Advanced Box and Page Builder Customization

There is an option to customize page builder (accordions, text box, forms and etc) without Child Theme and what is important you’ll still have a
possibility to upgrade your Theme without any issues.

You should use “pukka-overrides” directory for advanced customization.

For Boxes (grid) you should use:
pukka-overrides/grid-layout/views/box/file-name.php

File name could be: box.php
box-video.php
box-gallery.php
box-link.php
box-quote.php

For Page Builder you should use:

pukka-overrides/dynamic-meta/assets/css/dm.front.css (only CSS)

 

4. Updating

4.1 Updating

Whenever we update our theme files, we will send an alert through your WP Admin panel (if you are using Envato Wordpress Toolkit). Please subscribe to recieve update notifications from ThemeForest.com, also.

Downloading files and copying them using FTP (overwriting current files). Note that all changes that you have made on theme files will be overwritten, and because of this we highly recommend using child theme for modifying theme files.

You can use Envato Wordpress Toolkit plugin and automatically update your theme from Themeforest. If this plugin isn't included in theme you can download it here https://github.com/envato/envato-wordpress-toolkit or try to find it using 'Add new plugin' from WordPress' admin area.
You have good written tutorial how to use it here http://premium.wpmudev.org/blog/how-to-update-themeforest-themes-with-the-envato-wordpress-toolkit/ .

*Note

We highly recommend you to backup your files first before updating in case something goes wrong. If you made changes to original files, you will lose your changes when updating update. That is why you need to use child theme.

Your theme settings are safe.

4.2 Child Theme

We reccomend using child theme if you are planning to make changes to original files.

After you installed main theme, go to files that you downloaded and find folder ubergrid-child . Copy that folder in your wp-content/themes folder. Go to Apperance -> Themes and activate child theme. Now you are all set using child theme.

Any changes that you want to make to original files, just copy them into child theme folder (in the same place like in main theme folder) and you can safely change them.

Making these process you can safely change files not worrying about them get overwritten when you update theme. You can find more about child themes here http://codex.wordpress.org/Child_Themes .

5. FAQ

5.1 Change Homepage 'boxes'

Files witch are "rendering" grid boxes in Homepage are located in "ubergrid/pukka/modules/grid-layout/views".

If you want to change boxes you can do it safely by copying those files to folder (that you need to make) "ubergrid/pukka-overrides/grid-layout/views/".

From this folder you can change files and in that way your changes won't be lost when you update your theme.

5.2 Change Page Builder CSS

CSS file for Page Builder is located in "ubergrid/pukka/modules/dynamic-meta/assets/dm.front.css".

If you want to change it you can do it safely by copying that file to folder (that you need to make) "ubergrid/pukka-overrides/dynamic-meta/assets/dm.front.css".

From this folder you can change file and in that way your changes won't be lost when you update your theme.

5.3 Using excerpt for boxes content

You can use 'excerpt' field for displaying content on Homepage boxes. First you need to enable excerpt. Go to post and click on Screen Options from where you can check excerpt.

Now you have enabled exerpt field and there you can type content that you want to display on box.

Thank you for purchasing UberGrid WordPress Theme

If you have any questions please feel free to contact our support team.

www.pukkathemes.com