MiniGO - Uber Minimal Flat Coming Soon WP Plugin Crafted with care in 2014 by Premio Themes

Greetings and welcome to our MiniGO under construction WP plugin. I’m Octavian Chelaru, the founder of Premio Themes, and I’d like to thank you for purchasing one of our products, your support is much appreciated.

Please drop us a line and let us know what you think of this template, if you have any suggestions for improvements or extra features, if there’s something you don’t like or you just want to say “Hello”.

We count on your help to constantly improve the quality of our products and bring more value to you and all of our other customers.

Now, let’s get to the help part.

First of all, customization of this plugin will, of course, require minimal knowledge of WordPress and for heavier customization a bit of HTML and CSS. Chances are you’re already quite familiar with them but in the off chance you’re not, here’s a really good place to get you started: TutsPlus.

File Structure

After purchasing this product and unpacking the zip file you will see the following folders:

  • 1-WP-Plugin - This holds the WordPress Plugin zip file and demo background images and video files.
  • 2-HTML-Template - This is the actual template you will be uploading to your server
  • 3-SASS - We included the SASS sources here for advanced users
  • 4-PSD - This folder contains the Photoshop PSD designs of the template
  • 5-Help - Here you can find the help file

Now, in order to get started using this product all you need to do is add the minigo.zip as a new plugin to your WordPress instalation. However for more advanced users here is the file structure of the plugin:

  • 1-WP-Plugin
    • Demo assets - Contains the graphical assets we used in the demo, in case you want to recreate it.
      • Images - Contains 6 demo images you can use for the slideshow
      • Video - Contains a demo video in 3 web formats (mp4, ogv, webm) and a fallback image for no video support
    • minigo.zip - Template file and assets for the front end, this is the plugin zip file you need to upload to WP
      • inc - Libraries and assets used for the Admin interface
      • template - Template file and assets for the front end page
        • images
          • patterns - The optional pattern overlay images
        • inc
        • scripts - Here you can find all the Javascript files
          • flipclock.min.js - The FlipClock.js library. Used for controlling the countdown
          • jquery.easypiechart.min.js - The Easy Pie Chart library. It’s part of the circular countdown style
          • jquery.placeholder.min.js - jQuery Placeholder. Helps fix form usability in older browsers
          • main.js - This is our custom Javascript code, uncompressed
          • main.min.js - This is our custom Javascript code, compressed
          • modernizr.custom.min.js - Custom build of Modernizr containing only the parts we needed.
          • respond.min.js - Respond.js. Adds responsive capabilities to older browsers
        • styles - Here you can find all the CSS files
          • custom.css - Holds your custom CSS if you need it
          • loader.css - Styles the loader, uncompressed
          • loader.min.css - Styles the loader, compressed
          • main.css - Holds most of the styling code, uncompressed
          • main.min.css - Holds most of the styling code, compressed
        • comingsoon.php - The template file
        • config.php
        • favicon.ico - Default Favicon
        • mailListHandler.php

In addition to the WP Plugin version of MiniGO, we also included the html version in case you need it:

  • 2-HTML-Template
    • images
      • bg - The background images used in the slideshow
      • patterns - The optional pattern overlay images
      • logo.png - The logo image file
    • inc
    • scripts - Here you can find all the Javascript files
      • flipclock.min.js - The FlipClock.js library. Used for controlling the countdown
      • jquery.easypiechart.min.js - The Easy Pie Chart library. It’s part of the circular countdown style
      • jquery.placeholder.min.js - jQuery Placeholder. Helps fix form usability in older browsers
      • main.js - This is our custom Javascript code, uncompressed
      • main.min.js - This is our custom Javascript code, compressed
      • modernizr.custom.min.js - Custom build of Modernizr containing only the parts we needed.
      • respond.min.js - Respond.js. Adds responsive capabilities to older browsers
    • styles - Here you can find all the CSS files
      • custom.css - Holds your custom CSS if you need it
      • loader.css - Styles the loader, uncompressed
      • loader.min.css - Styles the loader, compressed
      • main.css - Holds most of the styling code, uncompressed
      • main.min.css - Holds most of the styling code, compressed
    • video - Holds the demo video files. Only needed if you use a self hosted video as background (not youtube)
    • .htaccess - Optional but recommended. This configures your server to allow better caching etc
    • 404.html - Optional but recommended. The file displayed when someone visits a URL pointing to a missing file or folder
    • config.php - Configuration file for the Mailing list and Contact forms
    • demo-1.html - HTML file for the first preview demo
    • demo-2.html - HTML file for the second preview demo
    • demo-3.html - HTML file for the third preview demo
    • demo-4.html - HTML file for the forth preview demo
    • favicon.ico - Optional but recommended. Replace with your own customized icon.
    • index.html - This is the home page which display all the text content, images and so on.
    • mail-list_FJdfjfk4FGeWR.txt - Demo file for the mailing system
    • mailListHandler.php
    • robots.txt - Optional, it explicitly allows any type of search bot to visit and index your site
Quick Tip: The demo-1.html through demo-4.html files are demonstrational and contain the configurations we used for the products live demo. They can be disgarded if you don’t need them.

Installation

To install MiniGO on your WordPress installation follow these steps:

  1. In the WordPress Admin interface, go to the Plugins section of the left hand side menu.
  2. On top of this section click on Add New, then on Upload and finally click the Choose File button.
  3. A file browser will come up. Find and select minigo.zip in the 1-WP-Plugin folder.
  4. After the install process is finished click Activate Plugin.
  5. Set up MiniGO by going to the MiniGO Options menu item of the side menu.

If the above steps don’t work for some reason, you can try the following:

  1. Unzip minigo.zip from the 1-WP-Plugin folder. Inside there’s a folder, also named minigo.
  2. Use an FTP client (such as FileZilla) to upload the minigo folder to the wp-content/plugins folder of your WordPress installation.
  3. In the WordPress Admin interface, go to the Plugins section of the left hand side menu.
  4. Find MiniGO in the list of installed Plugins and click Activate to enable it.
  5. Set up MiniGO by going to the MiniGO Options menu item of the side menu.

If you don’t know how to use an FTP client to upload file and change file permissions (usually not needed) refer to your hosting provider’s help section or use this quick guide.

Settings (Options)

As this is a WordPress plugin we thought it’s much better to document all the available options straight in admin panel instead of outlining them here in the help file. So simply install the plugin, go to the admin panel and all the options will be explained there.

If you want to use the html version where you need to edit the index.html file to access the options, please take a look at the MiniGO HTML help file to get you started on setting it up.

Visual Customisation

In the sections below we’ll describe how you can customise your Logo, Loader, Slideshow and also how to use custom CSS to change any visual aspect of your site.

Loader

Use the Custom CSS guide to learn how to customise your CSS styling.
To customize the background color of the loader add the following to your custom.css file:

.loader {
    background: #000000;
}

This sets the loader background to black or #000000.

Refer to the section below to learn how you can change or remove the logo from the loader.

Custom CSS

The MiniGO plugin has a Custom CSS field in the MiniGO Options -> Theme Settings section of the WordPress Admin. You can type in your CSS code there.
To find out how you can identify the CSS rules that need changing to achieve what you want, continue reading and follow the general guide below.

Next we will explore the methods used to customize the styling of the pages via custom CSS.

To change the look of your site, we recommend the following software:

  • The Google Chrome browser. While the steps described in this section will mostly be the same in Mozilla Firefox, this guide uses Chrome.

  • A code editor. You can get away with a simple text editor (like Notepad) but we recommend using a real code editor. Our choice is Sublime Text but there are many to choose from.

Because this is a general guide, as a quick exercise we will be changing the color of the section titles in this help file. All steps except #5 apply to most sites

First, some preparations. We recommend that you use a separate CSS file for your changes in order to seamlessly integrate future updates from our developers without losing your changes.
We have provided an empty file for you in the styles folder, named custom.css. Look in the File Structure section of this help file if you can’t find it.

Quick tip: You can modify the main CSS file, but future updates will overwrite your changes. If you want to do this, you’ll need to replace the minified in index.html:

<link rel="stylesheet" href="styles/main.min.css">

to this:

<link rel="stylesheet" href="styles/main.css">

Then skim through the steps below to find out how to locate the CSS properties you need to change. Once you know what to change just do the following:

  • Spot the line number mentioned to the right of the selector you are interested in. For example main.css:9306 means line number 9306 of the main.css file.
  • Open styles/main.css in your editor, scroll to that line number, and make your changes.

Now, let’s change some styling!

  1. Right click one of the orange titles and select “Inspect Element”

    The Developer Tools panel will open.
    On the left side of the Developer Tools, the HTML tag of the title is selected. On the right side, you will see all the CSS properties assigned this element.

    To change the color of the titles, we’re interested in the color property of the h1 tags.

  2. To change the color, we need to use the same CSS selector used to set the original color. In this example, the selector is h1. Click on the selector in the Developer Tools and copy the text.

  3. Now, in your code editor, open custom.css and type this (by pasting the previously copied selector):

    h1 {
     color: #ff0000;
    }

    Then, save the file and reload the page. The section titles should now be a bright red color, the #ff0000 part being the actual color value.

Form Issues

MailChimp Issues

There are two common mistakes that people make when using the MailChimp feature:

  1. Using the List Name instead of the List ID which leads to the form submission to fail.
  2. Using an email such as email@test.com to test the form. MailChimp rejects such addresses.

Contact Form Issues

If you aren’t receiving email from the form, first check your Spam folder. This is a very common occurence. If the mail isn’t in the Spam folder either, try one of the following:

Change the FROM email address

Sometimes the mail server of the hosting provider only allows email to be sent from addresses that were configured on their server and using one of your registered domains.

Ask for support

You can ask your hosting provider if there is any special configuration that needs to be done in order for PHP to support the mail() function. You can email us with this information if you believe there are changes that need to be done.

Try to configure email using SMTP

If your hosting provider does not support wp_mail and the standard PHP mail() function, you can try to configure email sending from WordPress using SMTP (another type of mail service).

WordPress supports SMTP mail but this needs to be configured separately via the admin area of WordPress.

The following plugin can be used to setup SMTP on your WordPress site: http://wordpress.org/extend/plugins/wp-mail-smtp/

WP Mail SMTP reconfigures the wp_mail() function to use SMTP instead of mail() and creates an options page that allows you to specify various options. You may need to contact your hosting provider to get detailed information on the option settings required.

With SMTP you can also send emails via an external email provider such as Gmail, Outlook or some other online email service, and send outgoing email through their SMTP server rather than from the email service on your WP hosting.

See Install WP Mail SMTP to send all emails through an external SMTP server for some detailed instructions on using SMTP via an external email provider.

Note: When using SMTP you need to authenticate, so there has to be a real email address that the emails are coming from.

Most users on quality WordPress hosting will not need to use SMTP. You should avoid using SMTP if possible as using SMTP can contribute to the following email authentication issues.

More common issues and their solutions can be found in this article. It is about issues with the Contact Form 7 plugin but a lot of it applies.

Install a 3rd party contact plugin

Plugins such as Contact Form 7 can be used if you still can’t send email using the standard form. See the Third Party Plugins section to read more about 3rd party plugins.

Third Party Plugins

You can use shortcodes from other plugins if you wish. By default, shortcodes will work in MiniGO but the 3rd party plugin styles and scripts are not loaded.
To load them, go to the Advanced Settings tab of the MiniGO admin panel and enable Load Styles and Scripts from other Plugins.

This will allow you to use any shortcodes that other plugins provide but there is a chance they will break MiniGO’s layout.

Assets Used

Fonts

Google Fonts were used to create this template in order to insure easy implementation with great browser compatibility. The fact that they’re free and gorgeous also helps.

So here are the fonts we used and their download links:

Lato (thin, light, normal, bold, ultra-bold)
http://www.google.com/fonts#UsePlace:use/Collection:Lato

Icons

We used the lovely Font Awesome font icons for this theme to ensure flexibility, easy color changing, quick loading,
browser compatibility and, most importantly, great look on high density displays (like retina).

You can download Font Awesome font icons here:
http://fontawesome.io/

Javascript Libraries

jQuery - It needs no introduction.

FlipClock.js - Used for controlling the countdown.

Easy Pie Chart - Leightweight plugin to draw simple, animated pie charts.

jQuery Placeholder - Helps fix form usability in older browsers.

Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Respond.js - Adds responsive capabilities to older browsers.

CSS Libraries

normalize.css - Makes browsers render all elements more consistently and in line with modern standards.

inuit.css - A lightweight CSS framework.

PHP Libraries

Redux Framework - A framework that simplifies building WordPress admin interfaces.

Images & Video

Some of the images used in the template preview have been purchased from Fotolia. Unfortunately due to license limitations these images can’t be included in the product you purchased so placeholder images were used instead. If you are specifically interested in one particular photo please shoot me an e-mail and I’ll send you the image id so that you can purchase it.

http://www.fotolia.com

The video we used within the package is a modified version of this free After Effects template: Bokeh Background.

Credits

Octavian Chelaru

Octavian Chelaru

VIBE CRAFTER

E-mail Linkedin Facebook
Octavian Chelaru

Bogdan Gribincea

CODE ARTIST

E-mail Linkedin Facebook Twitter