Organic Grunge version 1.0.7 by dtbaker

• Name: Organic Grunge
• Version: 1.0.7
• Author: dtbaker
• Created: 2016-01-12
• Last Updated: 2017-06-13
• Tested With: WordPress 4.8
• Download: Click Here
• Online Demo: Click Here

Live Backend Demo

Do you need to test out a theme feature in the admin backend? Need to see how the installer works before running it on your own website? Feel free to test everything here:

Theme Installation

Please watch this instructional video showing how to install this WordPress theme and setup default content:

Below are the step by step instructions:

1. Purchase the theme from ThemeForest.net
2. After purchasing go to your Downloads page ( http://themeforest.net/downloads )
3. Click on the Download button and choose the Installable WordPress file option and save this ZIP file to your desktop.
4. Login to WordPress Dashboard.
5. Go to Appearance > Themes > Install Themes
6. Click the Upload tab
7. Choose the downloaded ZIP file from your desktop and click upload
8. Choose the ‘Activate’ option after upload
9. Follow the Setup Wizard prompts (see video for example)
10. (if you need to run the setup wizard again please go to Appearance > Setup Wizard)

Here is a screenshot showing step by step instructions for downloading and installing the WordPress theme:

Elementor Page Builder

This theme uses the Elementor page builder. Elementor is a very powerful and very good WordPress page builder. Using Elementor will help you design amazing looking pages very quickly and easily.

Help with the Elementor page builder:

• Read the documentation available here: https://docs.elementor.com/
• Watch the Videos on Youtube here: https://www.youtube.com/channel/UCt9kG_EDX8zwGSC1-ycJJVA
• Stay up to date on the latest new features via Facebook here: https://www.facebook.com/elemntor/

Upgrading to Elementor Pro

This theme comes with the Free version of Elementor. It is already extremely powerful, but you can take it to the next level by purchasing the 3rd party Pro version. For a small extra fee you get access to great new features such as: Form Builders, Slides, Portfolio, Global Widgets, Custom CSS, Pro Pre-Made Templates, WooCommerce addons, Flip Box, Masonry Layout, Share Buttons and much more.

To find out more and to purchase Elementor Pro please click here: https://elementor.com/

Child Theme Customizations (optional)

• A "Child Theme" is a separate theme that is installed along side the main WordPress theme. This method is used so you can continue to receive updates for the main parent theme without overwriting any custom changes made to your child theme.
• If you ran the setup wizard then the child theme should have been created automatically for you.
• We recommend installing a child theme incase you wish to make advanced changes to the theme and still would like to receive updates.
• If you are familiar with WordPress theme customisations and you are planning on modifying this theme for your project then we highly recommend creating a "Child Theme" that contains your customisations.
• This way when an update is released by us it will not overwrite any of your custom changes.
• If you do not plan on editing any of the theme files (eg: css files, php code, background images) then you do not need to create a Child Theme.
• More details about Child Themes are available here: http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Responsive Layout

This theme is enabled with responsive CSS layouts so that it displays nicely on mobile devices. If you wish to disable this responsive feature please go to Appearance > Customize > Page Layout

Customizing Theme Colors, Fonts and Other Options

Customization is done easily via the Appearance > Customize menu. Here you can change colors and font styles for the ensite website, and preview them before they go live.

Most of the settings are under the "Typography" menu.

Other changes can be performed in CSS files. Install the "Child Theme" (see above) and then edit the child theme style.css file. You can edit this file via FTP or via Appearance > Editor menu.

Advanced Customization: if you need assistance with advanced customizations then please hire someone from Envato Studio (look in the WordPress category)

Create a photo gallery or simple image slider

Here are instructions on creating the fancy gallery with 3 images (as seen on the home page of the demo).

1. Create a new page in WordPress
2. Click the "Add Media" button at the top
3. Choose "Create Gallery" on the left
4. Select (or upload) your gallery images (the ideal image size is 160px by 140px)
5. Click the "Create New Gallery" button
6. Change "Link To" as "Media File"
7. Change "Image Size" to "Thumbnail"
8. Change the "Gallery Type" to one of the desired options.
9. Click the "Insert Gallery" button
10. Save the page and view it to check it works.

An example of available galleries is here: http://organic.dtbaker.net/gallery/

Setup the Contact Page

(not required if you have setup default content as above)

1. Make sure the Contact Form 7 plugin is installed
2. Login as admin and choose "Contacts" menu on the left.
3. Open the default "Contact Form 1" and make any changes as neccessary.
4. Copy the shortcode (it will look something like [[contact-form-7 title="Contact form 1″]] )
5. Create a new page called "Contact", type the words "Please fill in the form below to contact us" and paste in the shortcode from before.
6. Save the page and check the contact form works (ie: do you receive an email from it?)
7. Click edit page again and add a map using the google map shortcode (more details below under shortcode)

Setup the Main Menu

(not required if you have setup default content as above)

Go to Appearance > Menu and follow the standard WordPress menu creation process.
Detailed instructions on creating a menu are located on the WordPress website here: http://codex.wordpress.org/WordPress_Menu_User_Guide

Installing the online shop (WooCommerce)

1. If you wish to sell products please install WooCommerce (this should happen during the installation wizard)
2. Go to WooCommerce > Settings and configure your preferences
3. Further details about installing and using WooCommerce are available here:
   http://docs.woothemes.com/document/woocommerce/
   
4. Further help and support for using WooCommerce is available here:
   http://www.woothemes.com/woocommerce/

Background Images / Colors

Note: some graphical elements have been designed to only work with the default background image. So a change of background image may cause some inside design elements to not look nice. Additional graphical modifications may need to be made after changing the default background.

1. If you wish to change the default background image:
2. Go to Appearance > Background
3. Go to "Choose an Image from your Computer" and choose the background image you would like to use.
4. Adjust the colors and background settings to suit your needs.

Insert Styled Image

This theme comes with a really cool and unique styled image selector. When inserting an image to a page/post you have the option to choose the image style. See this video for an example:

Columns

Adding columns to your page is very easy. Simply edit the page/post and click the "Columns" button. See this video for an example:

Columns can also be styled, choose the style from the drop down list.

Included Widgets

• Opening Hours Widget:
  Useful for placing on the Contact Us page.
  
• Social Icons Widget:
  Here are the social icons included within this widget:
  
• Google Map:
  Useful for the contact page or the footer widget area.

Widget Decorations

You can change the background color of any Widget within this theme using the easy drop down menu in Appearance > Widgets.

Changing widget backgrounds can be done like in this video:

Widgets Positions / Sidebars

The Widgets and Sidebars in this theme are handled by the "Widget Area Manager" plugin.
To view all available widget areas (header/sidebar/footer) please see the demo.

You can change the position of some of the widget areas using the "Left/Right Column", "Header", "Footer One" and "Footer Two" menu items displayed in the admin bar:

• Header Widget Area: this is used to store the "Header Button" widgets only. Other widgets will most likely not work in this header widget area. These are the 6 buttons you can see next to the logo at the top of the live demo. These can be moved/replaced/renamed and the color can be picked.
• Left/Right Column: this is the standard left/right column widget area. It can be the same one every page or different on every page. All widgets should work in this area.
• Footer One: this is a "full width" widget area that can be shown on every page. It appears under the content and sidebar, just before the final website footer. This is used to contain the "Our Products" widget as seen on the home page in the live demo.
• Footer Two: this is the bottom footer area that contains the 3 columns of widgets.

Here is a video showing changing the position of the sidebar widgets:

Translations

Please try installing the free plugin called Loco Translate. Once installed go to the Loco Translate menu, then choose Themes, then choose the theme, then click "New Language" and follow the prompts.

Alternatively, the WordPress POT file for this theme is available in the /languages/ folder of the theme zip file. Instructions on translating WordPress themes with POT file are available here: https://poedit.net/wordpress

Photoshop Files

Photoshop files are available from this special URL after purchasing this theme: http://dtbaker.net/files/envato/resources/. Please login with your Envato account to access the latest version of the purchased resources.

Advanced Editing

Please consider using a Child Theme for any changes. This will help stop theme updates overwriting your customisations.

• CSS Files:
  • A good way to override default theme CSS is to install a WordPress CSS plugin such as this one. This is a little easier than overwriting theme stylesheets for small changes.
  • Here are the list of css files and a description of what they do:
  • style.blog.css – the blog layout page and individual blog pages
  • style.comments.css – the blog comments
  • style.content.css – the inside content area. Images, text, boxes.
  • style.custom.css – automatically generated, do not edit this file, see below dynamic stylesheet section for more details.
  • style.css – overall page styles (sidebars, header, footer)
  • style.editor.css – wordpress editor styles
  • style.ie.css – old IE styles
  • style.prettyPhoto.css – handles nice image popups in galleries
  • style.responsive.css – tablet and mobile responsive css layout rules
  • style.woocommerce.css – styles to override the default WooCommerce layout
  • style.wpcf7.css – override the default contact form settings
• LESS Files:
  • There are some LESS files that were used to generate the CSS files. If you are familiar with LESS then please feel free to use these files for editing the main CSS files. Otherwise simply edit the main CSS files and ignore the LESS files all together.
• Dynamic stylesheet: style.custom.css
  This stylesheet is created and overwritten every time you click save in the theme "Customize" area
  The file style.custom.php is used to generate the style.custom.css file, so feel free to modify the style.custom.php file if you need to change any of the automatically generated css rules.
  The file dtbaker.theme_options.php contains some of the default custom styles listed at the top. This file also controls the wordpress customizer options if you need to make changes there.
• Comments: the comment layout is controlled from functions.php under the function organic_comment() – this can be overridden with a child theme
• If you would like to make an advanced change and cannot figure it out please send us an email. Although we are unable to perform any custom modifications for you we may be able to point you in the right direction. Changes outside of the "customize" area of this theme will require an advanced level of CSS, HTML and (possibly) PHP knowledge.
• We always recommend hiring a professional website editor from Envato Studio to assist with changes.

Changelog

Here is a list of theme changes:

• Version: 1.0.7
  Date: 2017-06-13
  - Elementor page builder update
  - WordPress 4.8 update
  
• Version: 1.0.6
  Date: 2017-04-24
  - WooCommerce update
  - Elementor support
  - WordPress update
  
• Version: 1.0.5
  Date: 2016-06-06
  - Fix logo header text
  - Fix WooCommerce cart checkout page
  
• Version: 1.0.4
  Date: 2016-04-06
  - Fix installation wizard
  
• Version: 1.0.3
  Date: 2016-04-04
  - Fix defaults and script positions
  
• Version: 1.0.2
  Date: 2016-03-31
  - Fix back/next default nav button color
  
• Version: 1.0.1
  Date: 2016-03-02
  - Initial Release