Voicer WordPress Theme

Premium WordPress Theme

  • Created: September 2019
  • By: Softali - Envato author Profile
  • Current theme version 1.0

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 us via our support forum Support. Thank you very much!

Voicer WordPress Theme is HTML5 + CSS3 Website template and works fine in all major browsers and IE from version 10. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Installation

Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.

If you are struggling, here is a very detailed guide at Wordpress Codex that will walk you through every step.

Installing The Theme

Once you have setup a copy of WordPress, there are two ways you can go about installing the theme:

  1. FTP Upload

    Unzip the downloaded package and upload the theme directory /voicer/ into your WordPress themes directory /wp-content/themes/.

  2. WordPress Automatic Installation

    This is definitely the easier route for most. Simply navigate to Appearance > Themes > Add New > Upload Theme. Click the 'browse' button and locate the still zipped theme folder. The theme will be uploaded and installed in a matter of seconds.

    Then you need to activate installed theme.

    Click Activate or go in admin left menu: Appearance -> Themes and activate Voicer

Once you have installed and activated our theme you will be promted to install theme's plugins. Activation of them will be done automatically.

Import Layout

Import layout. Go in Appearance -> Voicer Import Demo. Import any layout

NOTE! If you need to have the original theme's layout reset all data by using WP Reset plugin. Go in Tools -> WP Reset

Activation

Go in admin menu: Appearance -> Customize -> Voicer Activation Code

Enter your purchased code and press the Publish button

Forms Arrangement

After some layout installed you can edit all original forms in the admin left menu: Contact -> Contact Forms

Here you can change parameters to yours

Audio Players

Our Theme includes 3 pre-built Audio players based on Audio Waveform Player (extended lisense). It is responsive HTML5 based audio plugin. It creates waveform from audio track automatically and displays it as a seekbar. It support self hosted audio mp3 files and some other external music services like Soundcloud, Podcasts, Google Drive Storage etc…

Common shortcode view for all player types:

[aw_player type="{home/popup/projects}"](html code for each track with li tags)[/aw_player]
. If you want to add more options for the player, you can find the Audio Waveform Player related Documentation in the folder documentation/awp-player.

Type of player in shortcode:

  • 1) Home player

    Shortcode example for Home Page player (under Voicer Main Slider):

    Original demo code:

    [aw_player type="home"]
    [playlist tracklist="false" images="false" ids="1195,1196,1197"]
    [/aw_player]
                                

    These numbers are examples from demo. But you have to upload your own tracks. And you will see your numbers here.

    To change tracks in Homepage player to your own:

    1. Go in admin left menu: Pages -> Voicer Home Page

      1. Open Text block with player shortcode
      2. In the popup window press the button Visual (not Text view)
      3. In the visual mode click on player block and press the "pencil" button Edit.

    2. In the opened window press "Add to Audio Playlist". Example, track can be removed by clicking X

    3. Save whole page.
  • 2) popup player

    Type of the player view is set if clicked by grid located tracks in the Home page -> block Our Projects

    Original demo code:

    [aw_player type="popup"]
    [playlist tracklist="false" ids="1195,1196,1197,1195"]
    [gallery size="full" ids="917,1234,1226,841"]
    [/aw_player]
                           

    These numbers are examples from demo. But you have to upload your own tracks. And you will see your numbers here.

    To change tracks in Project player to your own:

    1. Go in admin left menu: Pages -> Home page, scroll to the block Our Projects

      1. Open Text block with player shortcode
      2. In the popup window press the button Visual (not Text view)
      3. In the visual mode click on player block and press the "pencil" button Edit.

    2. In the opened window press "Add to Audio Playlist". Example, track can be removed by clicking X

    3. Edit Gallery in the same way as tracks: click on it and press "pencils" button Edit. Add/remove images

    4. Save Text block and save whole page.
  • 3) projects player

    Type of the player view is set on Projects page, can be find in the admin page: Pages -> Projects

    Original demo code:

    [aw_player type="projects"]
    [playlist ids="1195,1196,1197,1195,1196,1197,1195,1196,1197"]
    [gallery ids="1225,1226,841,1227,840,812,821,819,816"]
    [/aw_player]
                                

    These numbers are examples from demo. But you have to upload your own tracks. And you will see your numbers here.

    To change tracks in Project player to your own:

    1. Go in admin left menu: Pages -> Projects

      1. Open Text block with player shortcode
      2. In the popup window press the button Visual (not Text view)
      3. In the visual mode click on player block and press the "pencil" button Edit.

    2. In the opened window press "Add to Audio Playlist". Example, track can be removed by clicking X

    3. Edit Gallery in the same way as tracks: click on it and press "pencils" button Edit. Add/remove images

    4. Save Text block and save whole page.

HEADER: Blocks in Header

  1. Logo, Favicon - go in admin left menu: Appearance -> Customise -> Site Edentity -> Logo / Site Icon

  2. Top Menu - go in admin left menu: Appearance -> Menus -> choose Voicer Header Menu (Voicer Header Menu) and edit it following the standard WordPress procedure.
  3. Header Top Cart - go in admin left menu: Appearance -> Widgets -> Theme Header Cart, add/remove shotrcode: [theme_mini_cart]

Homepage

Go in Pages -> Voicer Home Page

Instagram

To display Instagram block you should get access token of your account.
Create account, upload images and enter it. Than all actions do in the same browser in which you're login.

  1. Login to your Instagram account an sign up as new developer here

  2. Register your application (client) here.
    Most fields are not important you may fill it with random data.
    The most important field is "Valid redirect URIs". Put there you website URL with ending slash "/". Example: "http://www.yourdomain.com/"

    Client id will looks like 03d92cc9e6214988adb9cf05f3e6c4cd Note "Valid redirect URIs" Note "CLIENT ID"

  3. Go to your client configuration at Security tab and enable implicit OAuth (remove check on Disable implicit OAuth)

  4. Copy example URL to your text editor (notepad for example)

                               https://www.instagram.com/oauth/authorize/?client_id=[YOUR_CLIENT_ID]&redirect_uri=http://www.yourdomain.com/&response_type=token
                               

    Replace own client id and url

    Load this URL in browser

  5. Press Authorize

  6. You should be redirected to your website with added token in URL address bar.
    Access token will looks like 22175810269.03d92cc.996b78bdb09c430d9d59f4815c0fd7b8 Note "access_token"

  7. Go in Pages -> Voicer Home Page, scroll to Instagram Element and enter own access token

Theme Basic Colors

  • Firstly, activate using of custom colors in Appearance -> Customize -> Voicer General Settings -> Use of custom colors

  • Than go in in Appearance -> Customize -> Theme colors, change them if you need and press Publish button

Forms

About importing forms , please, read chapter INSTALLATION -> FORMS ARRANGEMENT

Google Maps

Map on "Our Contacts" page

Open Pages -> Our Contacts page.

Press Backend editor button if it wasn't pressed. Open VC element and make own changes

Translation

Recommended plugins

There are two plugins which can help you with fast translation of our theme. We've checked and used them on our demo.

  • Polylang

    This plugin is used to translate theme's pages, posts, widgets,some strings

  • Loco Translate

    This plugin is useful to translate local constants which are located in the theme's folder: languages/voicer.pot file

    You can use either this plugin or Poedit program.
    We recommends Loco Translate plugin because it allows to make translation and save them in admin interface. Without local opening of the file.

    Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net. After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /languages/ folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP.

Examples

  1. Forms
    You have to create each form for each language. Go in admin: Contact -> Contact Forms. Create the new form, translate all texts and copy the shortcode of the corresponding form.

    For each page you have to create separate pages. So, go to the page with new language and insert the copied shortcode.

JavaScript

Custom JS file is located at theme's js folder. All external JS plugins are located at js/vendor folder.

If you need more information about external plugins, please visit plugins official sites.

Icons

Voicer WordPress Theme uses simply and flexible icon library Flaticon.

Icons are inserted in view of svg codes.

How to Add the New Icon(s)

Shortcode example:

[voicer_icon icon="icon-facebook-logo" link="www.facebook.com" class="hovicon"]

Shortcode parameters:

Full list of icon types you can find here - MAIN ICONS LIST

  1. link - not required parameter. If you add it you will see icon wrapper in view of
    <a href="your_link"><svg class="icon icon-"....>..</svg></a>

  2. class - not required parameter. If you add only it and no link you will see an icon in div wrapper
  3. name - not required parameter. Attribute "title" if icon wrapper is link.
  4. target - not required parameter. Attribute "target" if icon wrapper is link.
    For example, target="blank" will be trasformed as target="_blank"

Examples of possible icons view:

HTML Structure

The body part of the HTML file is divided in three main sections: header, content and footer.

HEADER



Header HTML structure:

	
   
	


Header Navigation

Default menu HTML structure:


Navigation menu in resolution more than 1199px looks like horizontal navbar. And navigation menu is collapsed for smaller viewports:




Content

Content HTML structure:

	
	

Section Titte

Section Content
....

Section Tilte

Section Content


FOOTER

Footer toggle HTML structure:

	
	
	


Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.


Grid System Rules

Some Bootstrap 4 grid system rules:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element
  • The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as equal width columns. Example: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:


Read more about bootstrap 4 grid here: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Short Examples

  1. Example 01: Add Home page player with own tracks on clean page

Sources and Credits

We have used the following files as listed.


Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with Voicer WordPress Template please go to your downloads section on ThemeForest.net and rate Voicer WordPress Theme with 5 stars.
Otherwise, SEND A EMAIL and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Voicer WordPress Template as much as I've enjoyed designing this template.

Kind Regards,
softali

If you have any questions, please do not hesitate to use our SUPPORT FORUM - We are happy to help!