Live - Wordpress Theme Documentation


logo


Created: 11/14/2012
By: Brutal Design — wolfthemes.com
Contact: help@wolfthemes.com

Thank you for purchasing my theme!
If you have any questions that are beyond the scope of this help file, you can sign up to the support forum.


Table of Content


1. Installation - top

First of all, install or update to the latest version of Wordpress on your server.

Ther is 2 ways to install the theme and plugins

Install via zip upload

  1. Extract the archive package downloaded on Themeforest
  2. In your admin panel, go in Appearance -> Theme -> Install Themes. Choose the "upload" option and upload the live.zip file from your theme package
  3. You will be asked to install the plugins you need. Select your desired plugins (it may take a couple of minutes), install and activate them
  4. Create the default pages, by clicking on the info messages

Install via FTP

  1. Extract the archive package downloaded on Themeforest
  2. Via your FTP client, put the "live" folder in wp-content/themes/ (screenshot below)
  3. In your wordpress admin panel, go in Appareance -> Themes and activate live theme.
  4. You will be asked to install the plugins you need. Select your desired plugins, install and activate them
  5. Create the default pages, by clicking on the info message

You can also install the plugins through FTP. To do so, drop the folders contained in the "plugins" folder into your wp-content/plugins directory

Recommended 3rd party plugins

WP Retina 2x - Retina image support.
WordPress Importer - To import the demo content from the demo.xml file included in the theme package.
Antispam Bee - Prevent comment spam in your blog.
Regenerate Thumbnails - Re-crop all your thumbnails after theme switch.

Note: I don't provide support for 3rd party plugins issues.

Default Content

There is 2 ways to import default content.

1 / Recommended : Install the default pages on theme installation by clicking on the "install default pages" info message

2/ You can also choose to use Wordpress Importer plugin to upload the demo.xml file.

If you have prevously installed the default pages, delete them and empty the thrash.

  1. Install Wordpress importer.
  2. Go in the Tools -> Import section of your admin panel
  3. Choose Wordpress
  4. Upload the demo.xml file included in the theme package

You are free to use this second way but you have to know that Wordpress importer is not 100% reliable especially if you choose to download attachment images included in the demo, through the plugin.

Set up your menu

When no menu is created, this theme has a fallback function that lists all pages as main menu.

This can break the layout if there is a lot of published pages.

Create your menu

To set up your menu, go in Appareance -> menus and create your main menu and bottom menu.
Then assign each menu to its location.

Dropdown Menu

To set a drop down menu item, just drag and drop your menu item in the main menu area, and shift it a little bit on the right, under the item you want to be as parent. (only for the main menu)

Home icon

To display the Home icon as home page menu item, first check the "CSS classes" checkbox in the screen options, at the top right of the menu admin panel.

Then, add the home-menu-item class to your "Home" menu item.

Tip: You can change the menu item label to display something different than your page title.
For exemple, if your page title is "Get in Touch", you can set your menu item to display "Contact".

Set your Home and Blog page

To set your Home page and your Blog page, go in the Settings -> reading section of your wordpress admin.

Choose the page you want to display on front page, and select the Blog as page for posts

Set a permalink structure

A permalink structure is a wordpress feature that allow you to make your URL's look more friendly.
By default, wordpress doesn't set a permalink structure.

To set up your permalink structure, go in Settings -> permalinks and choose your custom permalink structure.

Basic Settings

Basic Wordpress features
Set a featured image

If you are a new wordpress user, you must learn how to set a featured image.

A post featured image is an image that you can upload to represent your post.

Set a featured image is very simple: In your text editor, click on "set a featured image" (usually the box at the bottom right), upload an image and click on "use as featured image" instead of "insert into post".

Wordpress Embed

Basically, this theme plays with Wordpress Embed to display your medias.

This feature allows you to display a media by simply paste its URL in your post.

Be sure to paste the URL on a line by itself and make sure it is not hyperlinked.

For example:

WordPress will automatically turn that into a YouTube embed when the post is viewed.

I will explain how to use this feature within the theme in the Blog section.

Learn more infos on the Wordpress Codex

Your Logo

To set up your own logo, go in the customizer panel and go in the "Main Styles" tab.
You will be able to upload your logo.

Favicons

To change your favicon, replace the file favicon.ico in the: wp-content/themes/live/images/favicons

As live is responsive, you also have 3 favicons in png format that will be used for tablet and mobile. You can replace those files too in
wp-content/themes/live/images/favicons/

Please respect the format (png) and the dimensions for each:

  1. 57px x 57px
  2. 72px x 72px
  3. 114px x 114px

If you use a child theme, you can paste your favicons in a images/favicons folder inside your child theme folder.

Note that once you have replaced your favicon, you will be able to see the changes after empty your browser's cache or by opening your website in incognito mode.


2. The Blog - top

First create an empty page with the "default" template.

The Post Formats

The blog supports all wordpress post formats

Post Formats allow you to display your posts differently depending on your content.

In you post editor page, you can select which post format you want to use in the "Format" box, usually, at the right of your text editor.

If you are not able to see this box by default, click "Screen Options" at the top right corner of you post editor page and check the "Format" checkbox.

standard
It is the typical wordpress post. It will display the title, the featured image (if set) and the content below.
aside
Typically styled without a title. Similar to a Facebook note update.
You can use this post pormat to display an embed tweet.

gallery

The theme will look for a gallery in your post content and use it to display a slider.

To create a gallery, first click on "Add medias"

Then click on "Create a gallery"

When you open the Media Manager, you will be shown the files in your Media Library. If you’d like to create a gallery from those files, then you’re already where you need to be. Just select the files you’d like to include in your gallery.

You can re-order you image as you wish, upload new files, add captions to your images etc...

The caption field of your image will be used as slide caption

If you have installed the Revolution Slider plugin, you can paste your slider shortcode instead of the Wordpress gallery

link
A link to another site. The first URL in your post will be used and your post title will be linked to this URL.

image
A single image. The featured image will be used, and, on click, will open its full size version in a lightbox.
quote
A quotation.

status
A short status update, similar to a Twitter/Facebook status update.
video
A single video. The first video URL will be considered the video. (see Wordpress embed)

Info: This theme has an in-buit feature that generate a thumbnail from any video automatically.

The script will look for the first video URL in your post and generate a thumbnail.

This featured support youtube and vimeo videos only.

audio
An audio file. You can use the audio shortcode provided by Wordpress.

You can also embed a soundloud song using wordpress embed feature by pasting your song soundcloud URL

Alternatively, you can install Soundcloud plugin and/or Wolf jPlayer to display a playlist.

chat
A chat transcript, like so:
John: foo
Mary: bar
John: foo 2

Split your post

You can split your post to add a "Continue reading →" link on the post index page.

To do so, use the wordpress more tag

You can find the More Tag button in the first row of the visual editor

You can further customize the message that displays in the link to the full post content.
You will need to do this in the HTML view of your editor. Once you have changed to the HTML editor, look for this code: To customize the message, simply add a space after and turn it into something like this…


3. The Home Page - top

The home page header style

You can paste any content to display in your home page header in the Custom Theme Options -> Home Header

This feature allows you to greet your visitor with a slider, a video or anything else.

You can find those settings in the custom theme options.

Revolution Slider

To display the revolution slider in your home page header, create a slider via the revolution slider admin page and paste its shortcode in the "Home Header Content" text area in the theme options.

Revolution Slider settings

To make the revoution slider looks like the demo, use the following settings:

First be sure that the "Use Revolution Slider theme style" box is checked (plugins tab)

In your slider settings, choose "full width" and set the width to 1200px.

If you want your slider to be boxed and centered, keep the "auto-responsive" settings but set the "Home Header Type" as "boxed" in the theme options.


4. Custom Theme Options - top

To set your theme options, go in Live! -> Theme Options in your Wordpress admin panel.

The theme options panel allow you to change the appareance of your website by uploading backgrounds, logos, default avatar, changing the color of the main elements with color pickers etc... .

5. Structure - top

HTML

The Header, the Content and the Footer

The header contains:

The content

The content is the variable part of the pages and is divided in 3 areas

The footer contains

CSS

5 CSS files are used in this theme:

  1. style.css (the main stylesheet)
  2. flexslider.css (flexslider stylesheet)
  3. swipebox.css (swipebox stylesheet)
  4. fancybox.css (fancybox stylesheet)
  5. font.css (used to preview your font in the theme options)
  6. editor-style.css (Used to style the TinyMCE editor.)

Javascript

10 JS scripts are included in this theme

  1. html5.js (cross browser HTML5, and media queries compatibility)
  2. jquery.flexslider.min.js (used for the sliders)
  3. jquery.swipebox.min.js (for the Swipebox)
  4. jquery.fancybox.pack.js (for the Fancybox)
  5. jquery.fancybox.media.js (for the Fancybox)
  6. jquery.gallery.js (used for the masonry gallery if Wolf Albums is installed)
  7. jquery.isotope.min.js (masonry plugin)
  8. jquery.parallax.js (used for the background parallax effect)
  9. jquery.functions.js (used for the theme specific jQuery functions)
  10. theme-csutomizer.js (used for wordpress customizer live preview)

Some files are enqueued conditionally depending on pages and theme options to save bandwidth.

PHP

This theme is built on the "Wolf Framework".

The purpose of this framework is to set up the theme in the most clean and fast load way, respecting the Wordpress standards.
The structure of the theme is set in one single array in the functions.php file.

If you are a PHP jedi, feel free to digg the framework code, it is well commented.

If you are not familiar with PHP, DO NOT modify the content of the functions.php file and the content of the includes and framework folders.

If you want to add functions or filters to your theme, it is recommended to add them in the
includes/theme-functions.php file.
Be careful: adding code could result in errors.


6. Credits - top

Photos are not included in the theme.

Like the font used for the logo? Purchase this awesome font Lickety Split by Tyler Finck on www.tylerfinck.com


Thank you again for purchasing my theme! Have fun!

Feel free to check my website to find some Wordpress tips and free plugins.
Follow me on twitter @wolf_themes

Go To Table of Contents


Demo of the theme: https://demo.wolfthemes.com/live
Support Forum: https://help.wolfthemes.com

Support services will only cover theme setup, trouble using any features, and bug fixes. Regretfully I can't provide support for modifications or 3rd party plugins issues. Thanks for your understanding.