Installing Video using the WordPress dashboard

1. Connect to the member area, expand the Video theme section and download the Video.zip file.
2. Inside your WordPress dashboard, navigate to Appearance ⇨ Themes ⇨ Add New ⇨ Upload ⇨ and load the .zip file you just downloaded.
3. Once the upload is finished click on “Activate”. With that done choose to “Install sample data”.

Installing with FTP

Installing via FTP is necessary on servers that aren’t optimized for WordPress and can often interrupt the installation process because of the long execution time. Good news is that this type of install isn’t particularly hard, just longer compared to installing from the back-end.

• Connect to the member area and download the Video.zip file.
• Extract the file using software like 7-Zip. Use the Extract Here option.
• Assuming you read the above linked FTP tutorial, navigate to /wp-content/themes/ on your server and upload the extracted theme folder
• Login to your WordPress dashboard and go to Appearance ⇨ Themes. Activate the Video theme
• While in the Appearance ⇨ Themes section, click on the blue “Install sample data” button to populate your site with dummy data and make it look like our demo.

 

Using embed codes

To add videos head over to wp-admin ⇨ Video ⇨ Add Video. The easiest way to display a video is to enter an embed code from sites like YouTube (inside the “Video Embed Code” field). You can also do it with just the URL (use the “Video URL” field). On YouTube, this information can be obtained by clicking on the Share tab below the video. Along with entering the video embed code, you should also look to enter the video title (at the top), the category and a short description.

Uploading a thumbnail (featured image) is also recommended. You can do that by using the “Featured Image” section located inside the right sidebar while creating videos.

1. Click on “Set featured image”.
2. Click on the “Upload Files” tab if you want to upload a new image, or just choose an existing one from your library.
3. Hit the “Set featured image” button in the bottom right corner to confirm your selection.

Self-hosting a video

If you don’t want to rely on YouTube, Vimeo and Dailymotion, just upload them directly to WordPress. To create a video page with a self-hosted video follow these steps:

• Go to wp-admin ⇨ Video ⇨ Add Video.
• Enter the title and description like you normally would.
• Click on “Add Media” below the title field and choose “Upload Files”.
• Locate the video file on your hard drive and upload it. Now just close that popup (don’t insert the video into the post).

As long as the video embed code fields are empty, the video you just uploaded should show inside video detail page.

The ability to add videos from the front-end has been added to the Video theme in version 1.1. If you’re running version 1.0.3 or older please update your theme in order to enable this feature.

Create an “Submit Video” page

The theme is programmed to create the “Submit Video” page upon installation. The default URL of the Submit Video page is

your-site.com/submit-video/

You can alter the URL (slug) or name of this page by going to wp-admin ⇨ Pages and editing the “Submit Video” page.

If you can’t find this page in wp-admin ⇨ Pages please follow these steps to create a new one.

1. Create a new page by going to wp-admin ⇨ Pages ⇨ Add New.
2. Set the title of the page to whatever you want.
3. Insert the following shortcode inside the content box

   [submit_video_form post_type="videos"]

4. Publish the page.

Enabling registrations

To allow visitors to register go to wp-admin ⇨ Settings ⇨ General and enable the “Memberships” option. Once the option is enabled visitors will be able to register through the login/register form and through the Submit Video page.

Default login/register page URL

your-site.com/?ptype=login

Editing register, login and edit profile pages

Login form can be modified from

/wp-content/themes/Video/functions/registration/login_frm.php

Register form can be modified from

/wp-content/themes/Video/functions/registration/reg_frm.php

Login and register validation is located inside

/wp-content/themes/Video/functions/registration/reg_validation.js

Edit profile page can be modified from

/wp-content/themes/Video/functions/functions/user_profile.php

Managing submitted videos

You can choose what to do with submitted videos from Appearance ⇨ Theme Settings ⇨ Default Video Submit Status.

Draft = every video will have to be manually approved (published) by you before it’s available on the site

Publish = every uploaded video will be available on the site as soon as its submitted.

Approving (publishing) drafts

Follow these steps to approve a submitted video

1. Go to Video ⇨ All Videos.
2. Position your mouse on the video you want to publish and click on “Quick Edit”.
3. Inside the “Status” option select Published and click on Update.

To approve multiple videos at once tick the checkbox next to each video, click on “Bulk Actions” and choose “Edit”.

User dashboard page

Every visitor who submits a video on your site will be able to manage their profile and submissions from a front-end user dashboard. The easiest way to access this section is to click on the username in the top right corner of the site.

Here’s what the user dashboard page should look like.

Editing the Submit Video form

The video submission form inside Video is hardcoded and can only be modified by tweaking the source code. The changes can be made in this file

/wp-content/themes/Video/functions/post_videos_functions.php

The name of the function (and action) that contains the default form fields is

tmpl_custom_fields_video_option_after

Field validation for the form is located in this file

/wp-content/themes/Video/functions/submition_validation.php

 

The homepage

When you load your sites homepage you should see widgets; most of the homepage is totally widgetized. The homepage itself is a regular WordPress page created with the Home Page page template. This page (with this template) is normally created during theme activation and automatically assigned as the sites front page. However, if it’s not, i.e., if your homepage is not showing widgets follow these steps to fix it:

1. Go to Pages -⇨ Add New. Enter the page title as “Home” (for consistency sake, this isn’t really important) and on the right side, under Page Attributes ⇨ Template choose the “Home Page” template. Publish the page.
2. Navigate to Settings ⇨ Reading and under “Front page displays” choose “A static page”. In the “Front page” dropdown choose “Home”.
3. Go to Appearance ⇨ Widgets to populate the homepage with widgets. The widget areas that appear on the homepage are: Header Right, Front Banner, Home Page – Content, Home Page – Sidebar and Footer.

To learn more about the homepage and each of its elements, study the image displayed below.

1 – Secondary navigation area

You can assign a menu here by going to Appearance ⇨ Menus and creating a menu. When you’re done select “Secondary Menu” under Menu Settings ⇨ Theme Locations. For details on how to create custom menus watch the following video…

2 – The logo section

To change your logo go to Appearance ⇨ Customize ⇨ Site Logo ⇨ Upload image for logo.

To remove the tagline shown below the logo expand the “Site Title & Tagline” option (while in the Customize section). Uncheck the “Display Tagline” option. In case you want to remove the logo altogether and display your site title instead, expand the Site Logo section again and click on the current logo image. Now click on the “Remove Image” link.

3 – Primary navigation area

You can assign a menu here by going to Appearance ⇨ Menus and creating a custom menu. When you’re done select “Primary Menu” under Menu Settings ⇨ Theme Locations.

4 – Header Right widget area

To add content in this area go to Appearance ⇨ Widgets and place a widget inside the Header Right area. In the screenshot above the widget located in this area is Search (default WordPress widget). When you insert the widget in the area do not enter a title.

5 – Front Banner widget area

Assign a slider to this area by going to Appearance ⇨ Widgets and placing the “T – Video Slider” widget inside the Front Banner widget area. Set which categories should show inside the slider, the number of posts displayed and hit “Save”. I recommend leaving the title field empty.

6 – Home Page Sidebar area

To re-create this section as depicted on the screenshot above, head over to Appearance ⇨ Widgets and place the following widgets inside the Home Page – Sidebar widget area.

• T – Popular Posts
• T – Video Categories
• Recent Comments (the native WordPress widget)

7 – Home Page Content area

Go to the Appearance ⇨ Widgets section and place the following widgets inside the Home Page – Content widget area.

• T – All Categories First Video
• T – Latest Posts/Videos

8 – The Footer area

To change content in this area navigate to Appearance ⇨ Widgets ⇨ Footer. Each widget placed inside the area will be shown inside a separate column. The widgets included in this area by default are (from left to right):

1. Text (the native WordPress widget)
2. T – Video Categories
3. T – Newsletter
4. T – Social Media

To re-create the Social Media widget as depicted in the screenshot use font awesome icon codes. Each social media entry requires three pieces of info: Social Link, Social Icon and Social Class.

Example
Social Link: http://facebook.com/templatic
Social Icon:

<i class="fa fa-facebook"></i>

Social Class: facebook

Here’s a list of social icons/classes available in Video

<i class="fa fa-facebook"></i>

<i class="fa fa-twitter"></i>

<i class="fa fa-linkedin"></i>

<i class="fa fa-youtube"></i>

<i class="fa fa-google-plus"></i>

<i class="fa fa-pinterest"></i>

<i class="fa fa-dribbble"></i>

<i class="fa fa-flickr"></i>

<i class="fa fa-github"></i>

<i class="fa fa-instagram"></i>

<i class="fa fa-skype"></i>

<i class="fa fa-tumblr"></i>

The “Social Class” value is always the same as the key from the social icon. In other words, the social class for the Google Plus icon is google-plus

9 – The credits (left)

If you want to edit this area go to Appearance ⇨ Editor and open the footer.php file. The code you want to change is located around line 12 and looks like this

&copy; <?php echo date(‘Y’); ?> <?php bloginfo(‘name’); ?>.

10 – The credits (right)

To remove this section go to Appearance ⇨ Customize ⇨ Footer. Now just delete all the code inside that box.

Category pages

Category pages in Video are entirely dynamic, meaning they’ll be constructed automatically based on available content. Apart from actually creating the category, you don’t need to do much else.

To get started head over to wp-admin ⇨ Video ⇨ Video Categories and use the section on the left to create a new category. Since empty categories won’t impress anyone, head over to Video ⇨ Add Video and create a video post. For more details about this click here.

You can open a category in the front-end by going to Video ⇨ Video Categories and hovering over the category you want to open. Now just hit the “View” link.

Video Categories can also be added to navigation menus in order to make them more accessible. While creating a menu in Appearance ⇨ Menus, click on the “Screen Options” button in the top right corner and enable “Video Categories”. You can now add video categories to the menu by checking them on the left side and clicking “Add to menu”. For details on creating custom menus watch our Custom Menus Video.

Video detail pages

A video detail page is what you get after creating a video. The image below will outline key areas of the detail page and how you can edit (or even remove) them.

0 – Breadcrumbs

Breadcrumbs are an automatically generated path to your video detail page. You can use them to quickly load the category in which the video is posted or go back to the homepage. To remove breadcrumbs add this code to Appearance ⇨ Custom CSS Editor

.breadcrumbs {
display: none !important;
}

1 – The video

Add a video by using the “Video Custom Settings” section within the Video ⇨ Add Video form. Read the “Create a video” section (of this guide) for more details on this.

2 – Video Detail Page Sidebar area

To populate this area with widgets head over to Appearance ⇨ Widgets and add some widgets to the “Video Detail Page – Sidebar” area. The widgets included in the screenshot above are:

• T – Related Posts/Videos
• T – Newsletter
• T – Social Media
• T – Video Categories

3 – The video title

This is the title you enter while creating the video post. It will mostly be the same as the title of the video, but they don’t have to be the same.

4 – Byline

The byline is a short line with information about the author and categories assigned to the video post. You can delete it by opening /themes/Video/partials/loop-single-video.php and locating the following code around line 60.

echo $post_byline;

Change it to this

//echo $post_byline;

5 – Share buttons

These buttons allow visitors to quickly share your content with their friends. To remove some networks from the list open /themes/Video/partials/loop-single-video.php and locate the following list around line 89.

<ul class="button-group right social-media-links">

Remove social media options by deleting list ( <li> ) elements within that list.

6 – Comment and View counters

These counters serve as a quick way to judge the popularity of a video. To remove the view counter enter the following snippet of code to Appearance ⇨ Custom CSS Editor

.meta-transparent-buttons .disabled-btn {
display: none;
}

To remove the comments counter/button, open /themes/Video/partials/loop-single-video.php and remove or comment out line number 77. It looks like this

<li><a class="button" href="<?php echo $href; ?>"><i class="step fa fa-comment"></i><span><?php echo $comments_count->approved; ?></span></a></li>

7 – The video description

This is the information you enter inside the main content area when creating the video post. Feel free to style the content with HTML and inline CSS. If you need some inspiration, check out the Kitchen Sink page on our demo site. You can get the contents of that page by downloading this file.

8 – Previous/Next video buttons

Visitors can use these buttons to navigate to the next video (from the same category). To delete these buttons add the following code to Appearance ⇨ Custom CSS Editor

.row.page-nav {
display: none;
}

9 – The comments section

If you don’t want to enable commenting on your videos, go to Video ⇨ All Videos and select those for which you want to disable comments. Now choose “Edit” in the Bulk Actions dropdown. In the area that opens edit the options for the Comments dropdown.

To disable comments for future videos go to Settings ⇨ Discussion and uncheck the “Allow people to post comments on new articles” option located under “Default article settings”.

If all this sounds like too much hassle you can just add this to Appearance ⇨ Custom CSS Editor

.respond-form {
display: none;
}

Setting up a Blog page

Along with the ability to showcase videos, Video theme also allows you to run and manage a blog. You can create individual posts by going to wp-admin ⇨ Posts ⇨ Add New. The Blog is essentially just a category holding those individual posts. So… follow these steps to create a blog

1. Create a new category in Posts ⇨ Categories and name it “Blog”.
2. Add posts to that category by going to Posts ⇨ Add New.
3. By adding the posts our Blog page was automatically created. You can see it by going to Posts ⇨ Categories and clicking on the “View” link

I also recommend adding this Blog category to your navigation menu. Do that by going to Appearance ⇨ Menus and creating a new menu. Expand the categories dropdown, choose blog and hit “Add to menu”.

 

Changing colors

Changing colors in Video doesn’t require your to touch any code, you can do it from the Appearance ⇨ Customize ⇨ Colors section.The available options are…

• Body Background Color – Changing this will change the background of the whole theme. This includes the stuff inside and outside of the main content area (the container).
• Content Color – Tweaking this option will change the paragraph color on your site (video description). It will also change meta descriptions, title borders (in widgets), the comments section, etc.
• Primary Color – Use this option to change the color of most links inside your theme. Among other things, it changes video title color for most homepage widgets.
• Secondary Color – Changes the background of your slider (the text section) and the color of the Primary navigation bar.
• Title Color – Changes the title color (video name) for all pages, videos, posts and widgets.

Setting a background image

Navigate to Appearance ⇨ Customize ⇨ Background Images to set a fancy new background for your theme. Upload either a header image or a body background image, depending on what you want to change. It’s worth noting that the header background image will be displayed on top if you set both.

When it comes to setting a custom body background image, keep these guidelines in mind:

• The image should be very large, around 1920×1080 pixels.
• The image is tiled (repeated) by default. Hide this effect by uploading large images as mentioned earlier.
• The uploaded image will affect the whole page, including the content section (i.e., the container). I recommend editing the image before uploading it and carving out the area in which the content should be displayed. The width of the content area inside Video is 1200 pixels. Here’s an example of what your background should look like.
• Using a background image increases page load and might diminish the site experience for mobile users. If you can avoid using it, then avoid it.

General customization tips

If you’re looking to drastically customize the theme then the above mentioned options won’t be enough. In case most of your changes are design-related, check out the Appearance ⇨ Custom CSS Editor section. It allows you quickly overwrite any CSS code. You’ll find more details on how to perform these overwrites in this article.

If however you plan on changing both design and functionality, consider creating a child theme. You’ll find good instructions on this subject in this WPengine post.

 

SEO plugins

To optimize your content for search engines I highly recommend installing one of these two SEO plugins.

• WordPress SEO by Yoast (detailed instructions)
• All in One SEO Pack (detailed instructions)

These plugins will work with Video in pretty much the same way as with other WordPress themes (there are no theme-specific features). For instructions on setting up each plugin just click on “detailed instructions” in the list above.

Contact form plugins

For setting up contact page (so visitors can get in touch) we’ve provided support for two plugins

• Contact Form 7 (free)
• Gravity Forms (premium)

Once you create the contact form (using one of the plugins) simply insert the provided shortcode inside any page, post or video entry inside the theme.

 

How to translate Video in a different language?

For details instructions on how to translate Video (or any other Templatic theme) open this translation tutorial.

How to make slider auto slide?

If you want the slider to auto rotate without clicking on arrows given on it, then it can be achieved this way.

• Open the file named as “scripts.js” placed at the “Themes/Video/Library/JS” folder.
• Find the below code at around line number 527:
• timer: false,
• Replace it with this one:
• timer: true,
• Now, find this below it:
• timer_show_progress_bar: false,
• Replace it with this one:
• timer_show_progress_bar: true,