Introduction
Thank you very much for choosing GIO. We truly appreciate and really hope that you’ll enjoy our theme and our future updates and improvements. If you have any questions or recommendations, feel free to contact us.
Requeriments
- WordPress installation
- PHP 7.3+
- Basic Knowledge of WordPress (create posts, upload images, install plugins, fill fields, etc.)
As you know, you can always visit the demo site.
Common Theme Installation
If you don’t want to import the demo file, the ideal is to install theme from a fresh WP installation, to customize the theme options and start uploading the contents.
When you purchase the theme, the downloaded zip file contains Theme files (it contains the zipped installable WordPress theme file)
Extract the downloaded zip, and select the zip file giowp.zip and giowp-child.zip. Now, you have two ways for installing the theme:
1 – Install theme via WordPress Dashboard
Go to Appearance > Themes section and click Add New
In the next screen click the Upload Theme button
Click the Choose File button, select the zip file and click Install Now.
You can now activate the Parent Theme first, and optional the Child Theme (only for code customizations)
Child Theme
A child theme is a theme that has all the functionality and styling of another theme; referred to as the parent theme. Child themes are the recommended way of modifying the code of an existing theme, since a child theme preserves all custom code changes and modifications; even after a theme update. If you modify code directly from a parent theme, and then update the parent theme, your changes will be lost.
Although child themes can be a great way to add custom changes, they are most often used to customize core code taken from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support, and we will be unable to assist you with any issues that may arise. The child theme is primarily inserted in the package for developers’ convenience.
Always use a child theme when modifying core code. Child themes can also be used for custom CSS applications, template file modifications, and custom PHP functions and/or hooks. There are two ways to modify a child theme. Bear in mind that using child themes is no guarantee that an update of custom code on the parent theme will not require further maintenance.
If you want to make changes in theme’s templates or functions, we recommend that you install child theme and make changes there. To learn more about the purpose and basis of creation of child theme, visit WordPress Codex on Child Themes section.
Custom Menu
Go to Appareance – Menu in the Dashboard and build the menu dragging the elements you like. After that, check the “Display location” in Menu Settings and Save Menu to display it in the Hamburger Sidenav.
Next go to Appearance – Widgets and add the nav menu on sidebar
Navbar and Logos
Logo in navbar
In addition to configuring the navbar, you can upload two logos, one for the Normal (light) mode and other for Dark mode, if you wish to enable them. Recommended logos in PNG or SVG format for better definition.
Navbar / Logo height: the height of the header navbar and/or logo in pixels.
Navbar Shrink: shrink effect when you choose a bigger logo (major navbar and logo heights).
Logo position: Choose from left (near menu) or centered logo.
Options
Use Fade effect for load pages: activate a simple fade effect when a page is loaded.
Activate Load Bar: activate a thin load bar when a page is loaded, similar to YouTube.
Load Bar color: select a custom color for the thin load bar when activated.
Fixed Navbar: changes the header to a fixed position, making the entire navbar visible when scrolling.
Border navbar: adds a border-bottom line to header navbar.
Border menu: adds a border-right line to sidenav menu.
Border menu shadow: adds a border-right shadow to sidenav menu.
Border footer: adds a border-top line to footer.
Side menu font size: sets the size in px of the side menu sections.
Search modal: show or hide the search button in navbar.
Rounded Corners: styles all the images and borders with a rounded corner style, similar to an “app-like” style.
Posts, Archives and Search
Home articles: activate section of posts below home sidebar.
Home Post columns: define number of columns used for posts layout on home.
Home Post qty: select the number of posts to show at section.
Archive Post columns: define number of columns used for posts layout on archives.
Infinite Scroll: activate Infinite Scrolling or paged navigation.
View More: display a button for show more posts, only if Infinite Scroll is activated.
Post info (Home): define if the info of posts is showed inside the image box or outside.
Image color (Home): define if the post image on home is configured to display in three modes: Black and White Only, Black and White to Color on hover, or Color only.
Display Time: shows the date of post, configured on WP settings section.
Display categories: displays the category of the post.
Display excerpt: shows post excerpt.
Display authors: shows the author of the post.
Display tags: displays the tags of the post.
Display Archive Sidebar: display sidebar in the archive pages.
Display Blog Sidebar: display sidebar in posts or reviews (singles).
Display author: display badges of author on single posts.
More readings qty: select the number of related posts to show at bottom of posts.
More Post qty: select the number of posts to show at section below end of single posts.
Styling
Body text color: the general color of the texts.
Link color: color for the links.
Hover color: color for the links when hovered.
Navbar background: bg color of the header.
Hamburger menu color: colorize the hamburger “three line” menu in responsive view.
Sidenav background: bg color for the sidenav menu (and displayed when the hamburger menu is pressed).
Sidenav menu text color: the text color of the menu elements on the sidenav.
Sidenav menu item hover color: the hover background color of the menu elements on the sidenav.
Sidenav menu text hover color: the hover text color of the menu elements on the sidenav.
Sidenav dropdown icon color: the color of the dropdown arrow on the sidenav.
Sidenav close icon color: the color of the close “X” on the sidenav.
Footer background: bg color of the footer.
Footer text: color of text on footer.
Footer text hover color: hover color of text on footer.
Widget titles color: a custom color for the widgets titles.
Widget titles border: enable or disable a border-bottom below the widget title.
Search result term color: choose a custom color for the searched term in search result page.
Buttons background color: bg of the custom button class.
Buttons text color: text color of the custom button class.
Buttons background hover color: bg of the custom button class when hover it.
Buttons text hover color: text of the custom button class when hover it.
Comment card color: color of the comment card for post comments.
Back to Top background color: bg of the “up” button showed when scrolling the page.
Back to arrow color: color of the “up” arrow showed when scrolling the page.
Infinite Scroll background color: bg of the “more” button showed when scrolling the page for view more posts.
Infinite Scroll arrow color: color of the “down” arrow showed when scrolling the page for view more posts.
Home Slider
You can enable a slider for the homepage and add the slides what you want, uploading image, setting the titles and buttons texts, the color of arrows and linking them to anywhere. In the same way of post images, the slider images can be displayed in three modes: Black and White Only, Black and White to Color on hover, or Color only.
Home Featured
Configures the modules sections in homepage choosing the posts or taxonomies to be displayed.
For example, Brand slider can add brand taxonomy terms to a slider on homepage.
Featured posts cand add both posts and or reviews to blocks. This option can show selections on Grid view (similar to home articles) or with a traditional Slider view. Also the Grid view can be used within slider.
404 Page
You can customize the classic Error page. Simply add an image as background (1920×1080 recommended), add a title and a custom message to define an original variant of this page.
Social media links
You can simply fill the fields with the complete url’s of your fav and active social media profiles. Use to display in an HTML Widget in the footer section or another location with the shortcode
[social]