Philos - documentation

  1. Theme Installation
  2. Install Recommended Plugins
  3. Import Demo Data
  4. Theme Settings
  5. Short code
  6. Woocommerce
  7. YITH Compare
  8. YITH Wishlist
  9. Stylesheet Error
  10. Sources and Credits

Introduction

This documentation will give you an understanding of how Philos is structured and guide you in performing the most common functions. If you require further assistance, related to topics not covered in this documentation, then please contact us via our support forum.

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to Email. But we would like you to first read the documentation. Will respond within 24 hours. Thank you very much!

Requirements #back to top

Apart from necessary WordPress requirements, here is listed recommended server configuration requirements to make theme's functions work correctly.

  • – PHP version: 5.6 (minimum) 7.2, or higher (recommended)
  • – memory_limit – 128M, or higher
  • – upload_max_filesize – 32M, or higher
  • – max_execution_time – 180, or higher

Most problems, such as white screen, out of memory error, sample data import failure, etc., usually arrives due to server settings and excessively low PHP configuration limits. You can change the necessary configurations, either by yourself (if your hosting provider allows to do so) or contact your hosting provider to increase the limits.

So, make sure your server configuration is all set up, and the theme and plugins are working correctly. Enough server configuration will also ensure fast speed and increased performance.

Note: Please check theme requirements before you start with the theme. Use the WordPress phpinfo() plugin to check your PHP configuration limits.

Theme Installation #back to top

Upon downloading the .zip file from themeforest.net you'll have all files inside the theme package. Do not upload the entire file you get from ThemeForest, upload only the philos_vx.1 folder.

There are two ways to upload a theme;

1) Upload By FTP:
Connect to Your ftp via Filezilla or any other FTP software, then upload the theme into wp-content/themes/ under your wordpress installation. You have to unzip philos_vx.1.zip and upload philos folder in to your theme folder. Once you've uploaded the theme you can Open WordPress Admin → Appearance→ Themes page and activate the theme from list.

2) Upload By Wordpress Admin:

  • Open WordPress Admin → Appearance→ Themes

  • Click Install Themes tab and hit upload link
  • Find the philos_vx.1.zip file located in the same folder which you have download from themeforest and Click install now button
  • Open WordPress Admin → Appearance→ Themes page and activate the theme from list.

while upload theme, sometimes its give "Execution Time Error" or "File Size Error". Ask your hosting company to modify PHP.ini or use FTP method to upload theme

Read more about: Installing WordPress http://codex.wordpress.org/Installing_WordPress

Install Recommended Plugins #back to top

The philos WordPress theme provides custom and powerful plugins. First you want upload and activate these plugins from your WordPress dashboard panel.

Please, activate all recommended plugin.

After all plugin installed, please active one by one or at once.

First Active the Theme and Install All the Required Plugins. Other wise error will come.

Open WordPress Appearance → Customize → WooCommerce → Product Images

Breadcrumbs settings

Open WordPress SEO → Search Appearance → Breadcrumbs

Before Import Data file you need to some theme necessary setting.

Import Demo Data #back to top

We have included 3 demo data file.you can find those file in to "Sample_Data" Folder within our package.

  1. philos-content.xml -- For all theme content
  2. philos-widgets.wie -- For all Widgets Settings
  3. philos-options.dat -- For all theme customizer Settings

Open WordPress Admin → Appearance→ Import Demo Data

Follow The screen shot

Data Import will be takes 15-20 minutes depend on server configuration.

After import all data, you have to set navigation menu. from wordpress Admin >> Appearance >> Menus

There are 3 differents types of menu

  1. Main Menu - Theme Main Menu
  2. Header Top Menus - Theme Header Top Menu
  3. Social Links Menu

We have already created top menu,header top menu.you have to select all menus as per your requirements.

How to set Home page and blog page menu?

After demo import, you have to select home page as a front page and blog page as a blog page

Please follow the screens for set home page and blog page.

Open WordPress Admin → Settings → Reading

Mega Menu

For activate Mega menu you have to select Enable Max Mega Menu Setting

For more detail please read Mega Menu Documention

How to set New/Sale icon in navigation menu?

You have to set New/Sale icon from navigation menu. Go to Admin >> Appearance >> Menus

Enable screen option as per below screen.

If you want to add "New icon" then add "new-label" class in "CSS Classes (optional)".

If you want to add "Sale icon" then add "sale-label" class in "CSS Classes (optional)".

Theme Settings #back to top

The philos WordPress theme provides Powerfull theme settings from where you can easy update all theme layout.

You can find theme settings in to Admin → Appearance→ Theme Settings

The Philos Provides 5 differents type of settings

  1. General Settings
  2. Extra Settings
  3. Color Settings
  4. Header Settings
  5. Footer Settings
  6. Blog Settings
  7. Woocomerce Settings

Genral Settings

  • Layout option:- you can set Full width or boxed layout from this settings
  • Body Typography option:- you can set font,font family, font size and color from this settings
  • Body Background Color Option:- you can set background color of body from this settings
  • Body Background Image option:- you can set body background image from this settings
  • Body Background Repeat option:- you can set backgroud repeat from this settings
  • Body Background Position option:- you can set body background image position from this settings

Font Settings

  • Heading option:- you can set h1 to h6 heading settings from this settings
  • Button Font Family option:- you can set button family from this settings
  • Label Font Family Option:- you can set label font family from this settings
  • Paragraph Font Family option:- you can set paragraph font family from this settings
  • Body Background Repeat option:- you can set backgroud repeat from this settings
  • Alt/Sub Font Family option:- you can set sub font family from this settings

Extra Settings

  • Back to Top:- you can set enable/disable Back to Top from this settings
  • Remove Query String:- you can Remove Query String from js when load on front end from this settings
  • Pre Loading:- you can choose Pre Loading Images from this settings
  • Pre Loading Background Color:- you can set Pre Loading background color from this settings
  • Pre Loading Color:- you can set Pre Loading color from this settings

Color Settings

  • Primary Color:- you can set color for primary elements from this settings
  • Secondary Color:- you can color for secondary elements from this settings
  • Button Hover Color:- you can choose button hover color from this settings
  • Button Text Color:- you can set button text color from this settings
  • Secondary Button hover Color:- you can set secondary button hover color from this settings
  • Secondary Button Text Color:- you can set secondary button text color from this settings

Header Settings

  • Header Style option:- you can set fixed header from this settings
  • Header Topbar option:- you can show/hide header topbar from this settings
  • Header Topbar Text:- you can set Phone Number & label in header from this settings
  • Display Site Description? option:- you can set site description from this settings
  • Display Buy Now Button option:- you can hide or display "buy now button" from this settings
  • Buy Now Button Label option:- you can set sub button label from this settings
  • Display Search Button option:- you can set search button option from this settings
  • Display Wishlist Button option:- you can set wishlist button from this settings
  • Display AddToCart Button option:- you can set add to cart from this settings

Footer Settings

  • Footer Copyrights option:- you can add footer copyright from this settings
  • Footer Payment Image option:- you can add payment option in footer from this settings
  • Display Footer Widget option:- you can set footer widget display setting from this settings

Popup Setting

For Popup You have to add Mailchimp shortcode in text Editor. Please see in screenshot with red mark.

You can set all popup related settings from this option. you can also hide or display popup from this settings.

Blog Settings

  • Show/Hide Breadcrumb on Blog Single page option:- you can hide breadcrumbs from this settings
  • Display Side on Blog Single page option:- you can set sidebar settings from this settings

  • Display Sidebar on Product Page? option:- you can hide sidebar in product page or product single page from this settings
  • Quick View option:- you can hide or display "Quick View button" from this settings
  • Product Share:- you can hide or display "Product Share" on single product page from this settings

Shop Sidebar Settings

Appearance >> Widget Areas >> Click on Add New or if any there then click on Edit.

After click on Add New or Edit Add New Widget Area. Click on Advanced >> check condition which page you have to show then Which sidebar to Repalce . Click on Publish.

Appearance >> Widget >> Drag & Drop your widget in Shop Sidebar Widget Area.

Now Go To Pages >> Any Pages (Example.. Shop Page) Click on Edit >> Page Custom Options

Footer Settings

Appearance >> Theme Settings >> Footer Settings.

Display Footer Widget Choose Yes

Now Go to Appearance >> Widget .

Footer Column Area 1

Choose Text Widget and Soical Media Widget

Footer Column Area 2 & Area 3

Choose Navigation Menu Widget

Footer Column Area 4

Choose Navigation Menu Widget

Footer Column Area 5

Choose Contact Us Widget

Shortcode #back to top

Section ShortCode 
                               [section class="section-padding"]your content...[/section]
Section ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
  • background_img :- you can add backgroud image through "background_img"
  • background_position :- you can add backgroud image position through "background_position"
Div ShortCode 
                               [div class="your-class"]your content...[/div]
Div ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
  • background_img :- you can add backgroud image through "background_img"
  • background_position :- you can add backgroud image position through "background_position"
Container ShortCode 
                               [container class="container"]your content...[/container]
Container ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
Row ShortCode 
                               [row class="row"]your content...[/row]
Row ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
Label/Span ShortCode 
                               [label class="row"]your content...[/label]
Label/Span ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
  • label :- you can add specific span / label through "label"
Heading ShortCode 
                               [heading heading_tag="h2" class="page-title"]Your Title...[/heading]
Heading ShortCode Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
  • heading_tag :- you can add specific Heading Tag through "heading_tag" Example : H1, H2, H3, H4, H5, H6
Post Slider Home Page ShortCode 
                              [homeblog count="10" main_title="Blog & News" column_count="4"][/homeblog]
Post Slider Home Page ShortCode Parameters (attributes)
  • count :- you can set number of post display through "count"
  • order :- you can set order of post display(ASC / DESC) through "order" By default rand...
  • column_count :- you can set number of post in row through "column_count" Example : 2, 4, 6
  • main_title :- you can add Title through "main_title"
Post/Blog ShortCode 
                              [blog][/blog]
Post/Blog ShortCode Parameters (attributes)
  • count :- you can set number of post display through "count"
  • order :- you can set order of post display(ASC / DESC) through "order" By default rand...
Home Page Products ShortCode 
                                  [products columns="4" class="product-slider" limit="8" orderby="id" order="DESC" visibility="visible"]
New Product ShortCode 
                                 [products columns="4" class="product-slider" limit="8" orderby="id" order="DESC" visibility="visible"]
Best Selling Product ShortCode 
                                  [products class="" limit="8" columns="4" best_selling="true" ]
Featured Product ShortCode 
                                 [products class="product-slider" limit="8" columns="4" visibility="featured" ]
Home Page Products Parameters (attributes)
  • columns :- The number of columns to display. Defaults to 4 through "columns"
  • limit :- The number of products to display. Defaults to display all (-1). through "limit"
  • class :- Adds an HTML wrapper class so you can modify the specific output with custom CSS. through "class". If you want to add slider then add "product-slider" class
  • orderby :- Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are:
    • date – The date the product was published.
    • id – The post ID of the product.
    • menu_order – The Menu Order, if set (lower numbers display first).
    • popularity – The number of purchases.
    • rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
    • rating – The average product rating.
    • title – The product title. This is the default orderby mode.

You can find all WooCommerce Shortcode from this link WooCommerce shortcodes

Testimonial ShortCode 
                                 [testimonial title="Customer Say" count="3"][/testimonial]
Testimonial Parameters (attributes)
  • title :- you can add Title through "title"
  • count :- The number of testimonial to display in row Defaults to 10 through "count"
Brand Logo carousel ShortCode 
                                 [brandlogo count="10" column_count="7"][/brandlogo]
Brand Logo Parameters (attributes)
  • columns :- The number of columns to display.through "columns"
  • column_count :- The number of logo to display in row Defaults to 7 through "column_count"
Portfolio ShortCode 
                                 [portfolio columns="12" sm_columns="12"][/portfolio]
Portfolio Parameters (attributes)
  • columns :- you can set number of columns through "columns".By Defaults to 4
  • sm_columns :- you can set number of columns in small device through "sm_columns".By Defaults to 6
  • For Two columns Portfolio you can set columns ="6"
  • For Three columns Portfolio you can set columns ="4" and sm_columns="6"
  • For Four columns Portfolio you can set columns ="3" and sm_columns="6"
Typography ShortCode 
                                [heading heading_tag="h1"]Your Title... [/heading]
Typography Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you can add specific ID through "id"
  • heading_tag :- you can add specific Heading Tag through "heading_tag" Example : H1, H2, H3, H4, H5, H6
Message Box ShortCode 
                        
                                [message class="alert-danger mb-20" icon_class="fa-info-circle"]Your Content goes Here..[/message]
Message Box Parameters (attributes)
  • class :- you can add your class through "class". you can add "alert-danger", "alert-success" ,"alert-warning" for according type of box.
  • icon_class :- you can add specific Font Awesome ICON through "icon_class"
Google Map ShortCode 
                        
                                 [googlemap id="map1" title="Philos1" lat="21.170240" class="mb-45" mapapi="XXXX" long="72.831061"][/googlemap]
Google Map Parameters (attributes)
  • class :- you can add your class through "class"
  • id :- you must add unique specific ID through "id"
  • title :- you can add your title through "title"
  • lat :- you can add specific latitude of your address through "lat"
  • long :- you can add specific longitude of your address through "long"
  • long :- you can add specific longitude of your address through "long"
  • mapapi :- you can add specific google map api key through "mapapi"
  • For more you can visit google map API Documentation
Horizontal Tab ShortCode 
                                [tabgroup class="tabs-bordered" id="tab-1"]
					                [tab id="tabs-4" title="tab1"]Your Content...[/tab]
					                [tab id="tabs-5" title="tab2"]your Content...[/tab]
					                [tab id="tabs-6" title="tab3"]Your Content...[/tab]
				                [/tabgroup]
Horizontal Tab Parameters (attributes)
  • class :- you can add your class through "class"
    • if you want to use only border around tab then use class="tabs-bordered"
  • id :- you must add unique specific ID through "id"
  • title :- you can add your title through "title"
Vertical Tab ShortCode 
                                    [vtabgroup class="tabs-bordered" id="tab-2"]
					                    [vtab id="tabs-7" title="tab1"]Your Content...[/vtab]
					                    [vtab id="tabs-8" title="tab2"]Your Content...[/vtab]
					                    [vtab id="tabs-9" title="tab3"]Your Content...[/vtab]
					                    [vtab id="tabs-10" title="tab4" class="hidden-phone"]Your Content...[/vtab]
				                    [/vtabgroup]
Vertical Tab Parameters (attributes)
  • class :- you can add your class through "class"
    • if you want to use only border around tab then use class="tabs-bordered"
  • id :- you must add unique specific ID through "id"
  • title :- you can add your title through "title"
Toggle ShortCode 
                                [togglegroup class="toggle-bg / toggle-border" data_show="closed" active="2"]
					                [toggle title="Tab1"]Your Content...[/toggle]
					                [toggle title="Tab2"]Your Content...[/toggle]
					                [toggle title="Tab3"]Your Content...[/toggle]
				                [/togglegroup]
Toggle Parameters (attributes)
  • class :- you can add your class through "class"
    • if you want to use only border around toggle then use class="toggle-border"
    • if you want to use only backgroud around toggle then use class="toggle-bg"
  • title :- you can add your title through "title"
  • data_show :- you can specific toggle will open/close through "data_show". By default closed. if you will set open then toggle will open.
  • active :- you can active ant toggle through "active". you have to add toggle index.
Accordion ShortCode 
                                   [accordiongroup class="accordion-bg / accordion-border" data_show="closed" active="2"]
					                    [accordion title="Tab1"]Your Content...[/accordion]
					                    [accordion title="Tab2"]Your Content...[/accordion]
					                    [accordion title="Tab3"]Your Content...[/accordion]
				                   [/accordiongroup]
Accordion Parameters (attributes)
  • class :- you can add your class through "class"
    • if you want to use only border around accordion then use class="accordion-border"
    • if you want to use only backgroud around accordion then use class="accordion-bg"
  • title :- you can add your title through "title"
  • data_show :- you can specific accordion will open/close through "data_show". By default closed. if you will set open then toggle will open.
  • active :- you can active ant accordion through "active". you have to add accordion index.
Button ShortCode 
                                    [button class="btn-lg btn-color"]Button Title[/button]
				                    [button class="btn-md btn-color"]Button Title[/button]
				                    [button class="btn-sm btn-color"]Button Title[/button]
				                    [button class="btn-xs btn-color"]Button Title[/button]
Button Parameters (attributes)
  • class :- you can add your class through "class"
    • "btn-lg" class stand for Large Size Button
    • "btn-md" class stand for medium Size Button
    • "btn-sm" class stand for Small Size Button
    • "btn-xs" class stand for Xtra Small Size Button
    • "btn-color" class stand for Colorfull Button
    • "btn-black" class stand for black Button
    • "btn-gray" class stand for gray Button
    • "btn-xs" class stand for Xtra Small Size Button

WooCommerce #back to top

WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world's favorite eCommerce solution that gives both store owners and developers complete control.

Here are few links for more information.

Documentation

Video Tutorials

YITH WooCommerce Compare #back to top

YITH WooCommerce Compare plugin is an extension of WooCommerce plugin that allow your users to compare some products of your shop.

Documentation

YITH WooCommerce Wishlist #back to top

YITH WooCommerce Wishlist offer visitors a chance to add the products of your woocommerce store to a wishlist page. With YITH WooCommerce Wishlist you can add a link in each product detail page, in order to add the products to the wishlist page.

Documentation

Theme is missing the style.css stylesheet error #back to top

A common issue that can occur when installing a WordPress themes is "The package could not be installed. The theme is missing the style.css stylesheet." error message being displayed when uploading or activating the theme.

Documentation

Sources and Credits #back to top

Image


Css & Font


Javascript

Note: For questions on basic WordPress, HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as theme issues get top priority.