You are on page 1of 51

Polytechnic for WordPress

By Charles & Brandon Jones – http://themeisland.net

Welcome to Polytechnic
I’d like to personally thank you for purchasing the Polytechnic WordPress Theme.
This theme aims at offering the power of one of the best multipurpose themes out there, focusing
on education, and streamlining it for ease of use. We know that there can be a learning curve to
using any new theme, which is why we made this documentation file as detailed as possible, and
offer helpful support when needed. We trust together, that we can make your educational
institution shine.
We’ve spent a lot of time thinking through the design concepts used, features/options included, and
building out functionalities that will benefit any educational institution. If you run into any questions,
issues, or feedback please let me know!
I hope you like it.
Charles Jones

Theme Installation Guide - v.0.7


This will guide you through the basic site installation & setup,
then present methods for using all of the theme features!

To install this theme you must have a working version of WordPress already installed. For
information in regard to installing the WordPress platform, please see the WordPress Codex -
http://codex.wordpress.org/Installing_WordPress

Why so many steps? Because you purchased a powerful theme! We want to give you a head start by
giving you something real to work with, in addition to providing you with some helpful tools that you
and your clients can use.

If you are just looking for the basics, feel free to skim, but if you are looking to use specific elements
used in the live demo - we recommend importing the recommended plugins, demo-content, theme-
options, and widgets laid out in this documentation. These elements are best imported at the same
time, in the order provided here. Then you are welcome to edit or delete anything un-needed.

If you can't find the answer or are having trouble, please file a ticket at our dedicated support forum:
http://themeisland.ticksy.com/ I am here to help and love user feedback.

Part 1. Theme Installation


It all starts here! Upload the theme file and then activate the theme itself. The theme files can be
uploaded in two ways:

• Standard WordPress Theme Upload: Navigate to Appearance > Add New Themes > Upload.
Select “browse”, and choose the zipped theme file (you can find it in the Theme_Installable_ZIP
folder. Hit “Install Now” and the theme will be uploaded and installed.

If you run into any issues uploading using the method above, you can use this alternate method:

• FTP Upload: Using your FTP program, upload the un-zipped Theme Folder into the /wp-
content/themes/ folder on your server.

Once the theme is uploaded, you need to activate it via the prompt. You can also always go to
Appearance > Themes and activate your chosen theme.

Part 2. Plugin Installation


This theme comes with several “pre-packaged” plugins that will automatically be uploaded along
with your theme. Once your theme is activated, you will be prompted to install and activate them
immediately. Simply follow the on-screen instructions to install and activate them (don’t forget to
ACTIVATE following the installation). Note: If you select all and bulk install, this will take some time
(15 min in some cases). Make a cup of coffee, grab a snack, or work on something else while you
wait.

If you dismiss the prompt, you can always revisit the Appearance > Install Plugins panel to add them
later on, although most of our themes require the plugins that they include. Note: we recommend
installing plugins before importing the Demo-Content.

2.1 – Notes on Plugins


2.1.2.0 – Why include plugins with the theme: We’ve thought long and hard about the balance
between simplicity v. functionality, new users v. experienced, what makes the most sense for the
vast majority of our users. Users fall into all kinds of categories, we’ve just tried to make this install
benefit everyone at the end of it.

So, to limit confusion, we’ve made all of the plugins used in the demo “required” or “recommended”.
These are included in this way to provide an easy way for you guys and gals to use all of the cool
tools that we use in our demo. Most of these plugins we use on a regular basis in our own projects,
and have provided you with them in case you want to use any of them in yours.

2.1.2.1 – Recommended: We recommend installing and activating all of the plugins, then if you want
to remove some that you aren't using you are welcome to. We've had a ton of feedback on this so
we are trying to a) offer you the user all of the handy tools that we use b) get your site as powerful
as the demo and c) make the installation process as simple as we can. Doing this step early will help
when you we import the demo content, options, and widget settings.

2.1.2.2 - Notes on Plugins: We do not provide support for these plugins. If you have questions on
these plugins we recommend directing your questions to the plugin authors. With that said, if you
have questions on how we are using them with our theme or need some basic help, feel free to ask
us. If you notice a bug in any of these please let us know so that we can include a patch. If it is a
plugin specific bug, we can pull it from our theme and let the plugin author know so they can offer
support and better their product.

2.1.2.3 – Plugins Styles v. Theme Styles: We spent months making sure everything looked great
and worked great. The theme by nature will manage styles across the theme for consistency. That
said, many users may want to use the native plugin styles – and that’s okay too. To open this up, we
are now offering plugin import files and theme-style option toggles. This essentially allows users to
use the default theme styles, and when the occasion arises – use the integrated plugin’s options
panel to customize these specific elements further.

2.1.2.4 - Plugin Updates: Free/Non-Premium plugins may need to be updated after up activation.

2.1.2.5 - Premium Plugin Updates: The Premium plugin versions that we are including have been
tested and work great. If you still want to update these just let us know. For more information about
premium plugins: http://themeisland.ticksy.com/faq/1860

• Standard WordPress Activation: You can install and activate each of these from the Prompt or
the Appearance > Install Plugins directory.

Part 3. Importing the Demo Data (optional!)


We highly recommend importing the Demo Content.XML to populate your site with the demo content.
With this Demo Content, you can see how we have built elements across the site to give you a better
understanding of what you can do. You can also use this content and replace it with your own
information, which is the quickest and easiest way to get your site looking like the demo.

3.1 - Importing the Demo Posts, Pages, and Menus (XML)


This will only import the posts, pages, menus (not including menu widgets for mega menu), media,
and contact forms from the Theme Demo. Please note that this will not import any plugin-specific
content, such as sliders, widgets.

You can import the demo theme data with the following steps:

Install the WordPress Importer plugin from the Tools > Import panel (select "WordPress" from the
list of options).

1. Log into your site as an administrator.


2. Make sure you activated your new theme before proceeding.
3. Go to Tools → Import
4. Choose “WordPress” from the list.
5. Upload the Demo-Content.XML file found in your found in ThemeName / Resources /
Demo_Data folder.
6. You will be asked to map the authors in this export file to users on the blog. For each author,
you may choose to map to an existing user on the blog or to create a new user.
7. You will then have the choice to import attachments, so click on the “Download and import
file attachments” box.
8. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus
are imported. You will need assign the menu a theme location & you’ll need to configure
widgets. This is a limitation of WordPress’ import system.
9. Have Fun!
10. If anything doesn’t transfer over, feel free to repeat the process but know that this can
create duplicate content such as menus. The WordPress Import method does have some
limitations, so we recommend having other internet applications to a minimum if you are
having issues.

3.2 - Importing Widgets (WIE)


This is a can be a tricky process because we may have used a variety of plugins to build our Theme
Demo widgets. As such, we recommend that you install all plugins mentioned in the Theme
Documentation before attempting to import our demo widgets (this includes activating and turning
on any necessary plugins – if Jetpack is an included plugin, navigate to Jetpack and click the Connect
to WordPress.com).

If your theme comes with a WIE file (found in ThemeName / Resources / Demo_Data folder), then
you can upload this file to import some widget settings.

1. Navigate to the Tools > Widget Import/Export panel.


2. Click Browse through the prompt
3. Find and select the provided WIE file widgets.wie
4. And click Import Widgets
5. If there are any error produced they could be from content that already exists or from
missing plugins. This is normal but if you are concerned with the results, you can re-upload
this file again after installing/activating any missing plugins.
6. Navigate to Appearance > Widgets to review the widgets and sidebar settings uploaded.
Note: Footer Columns 3 & 5 will have widgets, but are waiting for you to assign menus ;)

Note: This import method is not a reliable import method for the “Max Mega Menu widgets”.
Although they will import to this location, they unfortunately do not get assigned to their
corresponding menus.

3.3 - Importing Theme Options (TXT)

You can always access the Theme Options panel from the Appearances > Theme Options page in
your dashboard. The theme options panel is where you will set up all “universal” theme variables, like
the logo, highlight colors, layout options, and lots more. We recommend navigating to this panel,
and hitting the Save Changes button at least once before moving on to other steps.

If you would like to import the demo theme options:

1. Navigate to the OptionTree > Settings > Import panel > and find the “Theme Options”
section. Note: there are several options here (ie. Settings, Layout, ect.). “Theme Options” is
the only field that we’ll be using.
2. Then also navigate and open the “Theme-Options.txt” file in a text editor (ThemeName /
Resources / Demo_Data folder)
3. Copy the entire code string/content from that .TXT file and paste it into the “Theme Options”
text field. Then click “Import Theme Options.”
4. Note that some settings may still need to be filled out or adjusted to your specific site
(like the Slider Shortcode, Categories, and Images), so take a few minutes to review the
options that we just imported in Appearance > Theme Options and play around with it. This
import method is a quick way to start, but by no means should it conclude your work in the
Theme Options panel!

For more information on the Theme Options panel, check out Part 4. The Theme Options Panel
below.

3.4 - Importing Responsive Menu Skin (JSON)

You can manage all of this in the Responsive Menu panel in your dashboard. The Responsive Menu
panels & tabs is where you will setup your Mobile/Responsive menu. We are now also providing a
Responsive-Menu-Skin to get you started. This will allow you to import the same styles that the
demo is using, while maintaining the customization options for this.

If you would like to import the Responsive-Menu-Skin:


1. Navigate to the Responsive Menu > Import/Export (tab) and find the “Import” section. Note:
there are several options here (ie. Import, Export, Reset). “Import” is the only field that we’ll
be using.
2. Select Browse (in the Import Section). Navigate to “Responsive-Menu-Skin.json” and select it
> click open. Note: the “Responsive-Menu-Skin.json” can be found in (ThemeName /
Resources / Demo_Data folder)
3. Then click the Import Options button. Note, make sure to hit the Import Options button and
not Update Options button for this – since Update Options will make it look like you’ve done
the same, but will not actually import the file.

For more information on the Responsive Menu panel, check out Part 4. Mobile Menu section below.

3.5 - Importing Sliders


The sliders on this theme are created with the premium Revolution Slider plugin that we are
including with this theme. To import the demo’s slider:

1. Open Revolution Slider.


2. Click the Import Slider button.
3. Click Browse within the prompt.
4. Find and select the demo_slider.zip file found in ThemeName / Resources / Demo_Data /
Sliders / demo_slider.zip
5. And Click Import Slider

Then, if the slider isn’t showing up where you want it:

1. Copy the slider shortcode that the Slider Settings generate


2. Open the Page that you want this slider on
3. And add this via the content area OR
4. Scroll down to the page options - find the Leaderboard option and select Revolution Slider
Shortcode
5. Then paste the slider shortcode that you copied into the field provided.

You can also call the sliders that you create with the Revolution Slider via the Visual Composer
module. For more information on creating your own awesome slider(s), check out the full
documentation on this premium slider plugin here:

http://themepunch.com/codecanyon/revolution_wp/documentation/

Part 4. Assign Your Menus & Widget Locations

Managing Menus – All menus are managed in Appearance > Menus. For more information on mega
menu items, see the next step - 4.2.

Edit Menu Basics - Editing Menus is standard WordPress knowledge. For more information on this,
please see the WordPress codex. What we will cover in this section is how to use the theme specific
menu functionality that we’ve added for you guys and gals.

Menu Locations and Widget Sidebars: This theme uses Menu Locations and Widget Sidebars to
make managing these elements more dynamic and easier. Even if you imported the demo data, you
will need to set your theme menus and widgets. This is because there isn’t really a great way to
reliably install the demo menu location and widgets sidebars onto your theme without introducing
some rather large security holes into this theme… as such, even if you imported the demo data, do a
couple quick things. Visit the following panels to do this:

• Appearances > Menus > Menu Locations

This theme maintains 4 menu locations. This means you can control what menu is displayed for
each of these locations by assigning a menu to each location. Note: The mobile menu location is
now being set in Responsive Menu > Look & Feel > Choose Menu to Responsify (see details below).
Make sure to assign a menu to all locations. You can use the same menu for multiple locations, for
example the demo is using the Main Menu (included in the Demo-Content.XML noted in the
previous step) for the Primary location, Sticky location, and Mobile location. All of the menus used in

the demo (and referred to here) are included in the Demo-Content.XML file.

Primary Menu – The demo is assigning “Primary Menu” to this location. This location will be
displayed in the Header (default is right of the logo).

Secondary Menu – The demo is assigning “Secondary Menu” to this location. This location
will be displayed in the Tophat).

Sticky Header Menu – The demo is assigning “Primary Menu” to this location. This location
will be displayed in the Header when scrolling beyond the fold (when the Sticky Header Menu option
is set in Theme Options).
Mobile Menu – The demo is assigning “Primary Menu” to this location. This location will be
displayed at the top left of the viewport on smaller screens. To assign this menu, first make sure that
you’ve installed the included Responsive Menu plugin (Appearance > Install Plugins) and activated it
(Plugins panel). From there, navigate to Responsive Menu > and set the option titled “Menu to Use”.
You’ll also want to use the same “Breakpoint” that the theme is setup with (which is 767px).

You’ll also notice that you can customize the Button, Menu, Sub-Menus, and some other additional
functionality via the other tabs. The necessary options are included as free, and everything that is
being used in the demo is with the free version. You do not need to upgrade to pro, but the option is
there if you want. If you want to install the demo Responsive-Menu-Skin, see section 3.4 above.
• Appearances > Widgets

The theme has several “sidebar” areas that will accept widgets, including multiple “bonus” widget
areas that you can use with the “Dynamic Widgetized Sidebar” module in the Visual Composer. Most
of the widgets used should have been imported with the Importing Widgets step mentioned before.
With that said, you may need to visit this panel and assign any widgets that didn’t get assigned to a
sidebar location.

Part 4.2. How To Build the Demo Menus From Scratch


Mega Menu Option – Simply put, we’ve added support for the Max Mega Menu plugin
(https://wordpress.org/plugins/megamenu/) to give you more functionality. This plugin is included as
a free alternative to the native WordPress menu (standard dropdown) functionality.

Note: Because of the nature of this free plugin (available in the WordPress Plugins Directory) there
are going to be some limitations to this option, but again we are including this to give you an option
to the standard method because we think that there are some cool features to this plugin that out
weight those limitations. The choice to use or not use this method is totally up to you. There also are
paid options available on CodeCanyon if you want to integrate something yourself, but none that we
were happy with - that also offered us the ability to provide it for you for free (via a developers
license). We do plan on supporting some paid options in the near future, but the licensing will be up
to you the user.

Transfer/Migration: Limitations that we have come across for this plugin really just include
the transfer/migration process. Essentially, this plugin creates unique tags for mega/widget
areas and when migrated, the tags don’t always match up to the new install – thus you’ll be
hard pressed to find out that you have to re-build these mega menus (ie. you are moving
from a local host to a live server, or one server to another). Because of this, we recommend
simply keeping a record of your widgets used (like we have below) just in case.

Plugin Deactivation: If this plugin is deactivated for any reason (manually, by activating
another theme, or if you are attempting to migrate this data to a new setup) you may loose
the content that you have built with the Max Mega Menu plugin. Again, this is just a
limitation of this free plugin and we are working on a way to make this easier for you guys
and gals. For now, though, we recommend keeping a record of the widgets you build/use as
a backup or just using the standard flyout menu (see 4.2.5-2).

Backup/Restore: We have found that when on the same database, the backing up and
restoring seems to work great since the corresponding tags don’t change. If updating the
theme, or if something looks broken in your mega menus, you should be able to simply
restore these widgets with your exported widgets.WIE file (see step 3.2 for more information
on doing this – the plugin is the same, just export instead of import to backup all widgets
including megamenus). Again, we recommend simply keeping a record of your widgets used
(like we have below) just in case.

4.2.0: Activate the plugin – When activating the theme, you’ll be prompted to activate this plugin. If
you skip the activation process you can install/activate it via Appearance > Install Plugins or via the
WordPress Plugins Directory (Plugins > Add New > Max Mega Menu or
https://wordpress.org/plugins/megamenu/.

4.2.1: Enable Settings - Navigate to Appearance > Menus >


Menu Locations and make sure to assign your Primary Menu
Location. Then Navigate to Appearance > Menus > Edit Menus >
and open the Mega Menu Settings for that menu. In this
settings section, you can enable the mega menu for the Primary
Menu Location, set the trigger event to display the mega menu,
choose and effect, select a custom theme for this menu (see
Menu Theme section), and hit save.

4.2.2: Set Sub Menu Type - Navigate to a parent item that you would like to give a mega menu to
and open the menu item options. You’ll see that several mega menu options have been added.
Make sure to assign the sub menu type – Mega Menu or Flyout Menu. Flyout Menu will display the
standard sub-menu dropdown list. To display a mega menu (like this example), select Mega Menu
Panel.
4.2.3: Configure Panel Widgets - Mega menus are made up of various widgets and although
widgets are usually managed in Appearance > Widgets, the author of this plugin has provided a drag
and drop editing panel. To open this panel and manage your widgets, select “Configure Panel
Widgets”.

4.2.4: Add New Widget(s) - Note: We understand there are a lot of widgets and plugin widgets out
there. We are currently only supporting the ones used in the demo (Text, Custom Menu Wizard,
Image Widget, Contact Form 7, etc.) but please let us know if you are having an issue with your
custom widget.
4.2.5: Building Each Mega Menu - The following is a walk-though setup of widgets for each Mega
Menu for Main Menu

4.2.5-1 “Course” Menu Item:


(All Text Widget Markup can be found in Resourses/Theme_Demo_Data/Text_Widgets)

A – Search “Search Courses (Live!)”:

B – Text “Quick Links”:


C – Text “Browse By Professor”:
D – Custom Menu Wizard “No Title” (use “Widget for Mega Menu – Browse By Study & Single Course”
menu). Note, this widget is provided by the Custom Menu Wizard Plugin
(https://wordpress.org/plugins/custom-menu-wizard/) and calls is using the Widget for Mega Menu -
Browse By Study & Single Course provided in the Demo-Content.XML:

(screenshot of menu used):


E – Image Widget “Gear Up For Courses”. Note, this widget is provided by the Image Widget plugin
(https://wordpress.org/plugins/image-widget/). Size used is Full Size with Align none.
F – Text Widget “Sensei – Learning Management - Support”.
4.2.5-2 “Theme Overview” Menu Item:
A – In this instance, you’re going to assign the Flyout Menu (instead of Mega Menu as mentioned
above):
B – Add sub menu items to the parent item:
4.2.5-3 “Campus Life” Menu Item
(All Text Widget Markup can be found in Resourses/Theme_Demo_Data/Text_Widgets)

A – Custom Menu Wizard “No Title” (use “Widget for Mega Menu – Campus Life” menu). Note, this
widget is provided by the Custom Menu Wizard Plugin (https://wordpress.org/plugins/custom-menu-
wizard/) and calls is using the “Widget for Mega Menu – Campus Life” provided in the Demo-
Content.XML:

Menu Used:
B – Recent Posts Extended “Campus Life”. Note, this widget is provided by the Recent Posts
Extended plugin (https://wordpress.org/plugins/recent-posts-widget-extended/). Limit 3, Order ASC,
Orderby Date, Display Thumbnail, Display Excerpt On:
C – Image Widget “Gear Up The Semester”. Note, this widget is provided by the Image Widget plugin
(https://wordpress.org/plugins/image-widget/). Size used is Full Size with Align none.

4.2.5-4 “News & Events” Menu Item


(All Text Widget Markup can be found in Resourses/Theme_Demo_Data/Text_Widgets)

A – Custom Menu Wizard “No Title” (use “Widget for Mega Menu – News & Events” menu). Note, this
widget is provided by the Custom Menu Wizard Plugin (https://wordpress.org/plugins/custom-menu-
wizard/) and calls is using the “Widget for Mega Menu – News & Events” provided in the Demo-
Content.XML:
Menu Used:
B – Recent Posts Extended “Latest News”. Note, this widget is provided by the Recent Posts Extended
plugin (https://wordpress.org/plugins/recent-posts-widget-extended/). Limit 2, Order DESC, Orderby
Date, Display Thumbnail, Display Excerpt Off:
C – Events Widget “Upcoming Events”. Note, this widget is provided by The Events Calendar plugin
(https://wordpress.org/plugins/the-events-calendar/). Show 3.
4.2.5-5 “Contact Us” Menu Item
(All Text Widget Markup can be found in Resourses/Theme_Demo_Data/Text_Widgets)

A – Search Widget “Search Directory (Live Search)”. Note, Live Search provided by Ajaxy Live Search
plugin (https://wordpress.org/plugins/ajaxy-search-form/):

B – Text Widget “More Contacts”:


C – Text Widget “Have a General Question or Comment?”. Note this shortcode (provided in the
Demo-Content.XML) is generated by the plugin Contact Form 7
(https://wordpress.org/plugins/contact-form-7/):
D – Text Widget “Quick Contacts”:
Part 5. Assign Your Homepage
This theme will display a list of posts on the front page by default. If you want to use a “Static Page”
with your own custom content instead:

1. In your WordPress admin > navigate to in Settings > Reading.


2. The default WordPress install has the Front page displays set to Your Latest Posts. To
display some custom content on your home page (like in the demo), select “A static page”
and for the “Front page” option assign a custom page from the dropdown.
3. (Note: Using the Post page option in Settings > Reading will negate all page templates, so it’s
best to leave this blank. For more information on this, check out this link from the
WordPress Codex: http://codex.wordpress.org/Settings_Reading_Screen - Don’t worry, you’ll
be able to set this functionality and many other options in the page options for each page).
4. You can set any page here but for demo purposes, choose “Home Page, Front Page or
Welcome” from the dropdown.

Part 6. The Theme Options Panel


You can access the Theme Options panel from the Appearances > Theme Options page in your
dashboard. The theme options panel is where you will set up all “universal” theme variables, like the
logo, highlight colors, layout options, and lots more.

You are not required to add a logo or fill out all of the options, but it is recommended that you visit
this panel at least once and hit the “save” button to establish the base settings for the theme.

Keep in mind that there is also the Theme Customizer – which is a separate panel that allows you
to fine-tune the appearance of the theme. We’ll review that later in this document.

Here’s and overview of each panel included with this theme. We’ve spent a lot of time making this as
logical and self-explanatory as possible. There is also an information icon that will provide additional
details for each specific option.

Theme Basics – Theme basics will include any major/global rules that run across the site. Right now,
we’re including options like logo here.

Top Hat Options – The options in this section will pertain to Top Hat specific items. Most of these
options are simple toggles (On/Off). The main thing we want to note here is that you can control the
column structure for the Top Hat Dropdown area. For example, if the Dropdown Area Columns
option is set to 3 Columns - the front end structure for this section will be laid out into three
columns. To manage the actual content used for this section, navigate to Appearance > Widgets:
Tophat Dropdown Column 1, Tophat Dropdown Column 2, Tophat Dropdown Column 3, & Tophat
Dropdown Column 4. Note that if you have content included in the Tophat Dropdown Column 4, but
have your Dropdown Area Columns set to 3, you’ll see Tophat Dropdown Column 4 pushed to the 1st
column under Tophat Dropdown Column 1.
Sticky Header Options – The Sticky Header is triggered when the viewport scrolls past the Primary
Menu. This Sticky Header menu can be manage by assigning a menu to it’s menu location in
Appearance > Menus > Menu Locations. This panel handles any additional options to help make this
section more customizable. Because this section is so much smaller than the Primary Header, we’ve
included some additional options to manage a custom logo and spacing for this logo and the menu
used. Note: the Dynamic To Top plugin is used to add the “scroll to top” button in this section (see
Section 8 – Dynamic To Top for more info.

Layout Options – The Layout Options panel sets global layouts across the site. This is especially
helpful for page layouts - the page layouts set here will establish the default layout that you would
like to use for all pages. Then, you can manage any custom layouts for each page in the page
options.

Skin Builder – The Skin Builder panel provide color options across the site. The Primary Color
option and Secondary Color option are linked to colors across the site, making adding in your colors
quick and easy. Then there are additional options to help manage color and image backgrounds
across the site for specific sections (ie. Top Hat, Header, Footer, etc.). Then, you can manage any
specific color options with the Front End Theme Customizer covered in the next section.

Post Options – This panel is similar to the Layout Options panel in that the options set here will
affect all posts across the site. If you need any additional options, there are some provided on a per
post basis.

Footer Options – This panel is similar to the Top Hat Options panel in regards to the columns
allocation, and has the same workflow for managing widgets (Appearance > Widgets > Footer
Columns 1, 2, 3, & 4). Some specialty options that we’ve added are the Pre-Footer and Post-Footer
Images.

The Pre-Footer-Image actually overlays the end of the content area and the beginning of the
footer area. Image size used for demo is 64px by 64px. We also recommend using a PNG
image file to provide necessary transparency

The Post-Footer-Image is set to be the width of called after all of the Footer Columns and
before the Sub-Footer-Area. Image size used for demo is 1198px by 136px. We also
recommend using a PNG image file to provide necessary transparency.

Custom CSS – We recommend all custom CSS is added to this panel. Why? This section gets loaded
last in the cascade and will allow you one place to go to backup custom styles. This section should
also be maintained in the event of an update (although we always recommend backing up just in
case).

Custom Scripts – This panel was added because we know developers need an easy place to add
global functions. This section should also be maintained in the event of an update (although we
always recommend backing up just in case).

Custom Login – This panel provides a quick and useful way to customize the login for your site (ie.
Yoursite.com/wp-admin) and includes: Toggling this option On/Off, Positioning of the Login form,
Uploading a Custom Background Image, Setting a Fallback Background Color, Uploading a Custom
Login Logo Image, and adding/positioning additional Text or HTML markup. This panel is still in beta
production, but if you are having any issues with it, please let us know.

Part 7. The Theme Customizer


Visit your Appearances > Customize panel to make any cosmetic theme style customizations.

Note! The Theme Customizer is entirely optional. You don’t need to change a single thing on it
and we have not used it at all in the demo… That said, it will give you control to change everything
from fonts, type sizes, type color, background colors, and lots more for every main section of the
theme. Here’s what it looks like:

Use this panel at your own peril! We’ve done our best to make sure the theme looks like the demo
does right out of the box on all viewport sizes… if you change any of the style settings radically (like
using strange fonts at a really big or small size), there’s always the possibility that you can break the
layout or end up with a less-than-attractive page. With that said, we’ve built in the tools that allow
you to customize a wide range of theme elements – for any extras that aren’t shown in this panel,
you’ll need to get into the theme CSS and template files (for advanced users only!).

Part 8. Get to Know the Integrated Plugins


This theme requires you to install a handful of plugins to ensure that you have access to everything
we used in the demo. You don't need to use these plugins, and advanced users can manually disable
them if you choose, but we do ask that you install them upon theme activation to avoid any
confusion.

Revolution Slider

Slider Revolution is currently the top-selling plugin on Codecanyon and widely used by theme
authors. We have included it in our theme in a very simple manner - there are no special
instructions that you should need to know beyond those that are provided by the plugin maker on
their site.

You can import our demo slider using the provided "demo_slider.zip" file from the "Revolution Slider
> Import Slider" panel (see Step 4 > Importing Sliders).

» Plugin Support & Documentation

Visual Composer

Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will
save you tons of time working on the site content. You will be able to take full control over your
WordPress site, build any layout you can imagine – no programming knowledge required.

» Plugin Support & Documentation

Polytechnic Courses

A custom theme plugin for creating and managing courses. You can access this plugin from the
"Courses" panel in the dashboard menu.

Contact Form 7

A powerful plugin for creating contact forms and adding them into your content. You can access this
plugin from the "Contact" panel in the dashboard menu.

» Plugin Support & Documentation

Styles for WordPress (plus the theme-specific package)

This plugin helps to manage the Theme Customizer panel. There are two parts: The core plugin, and
the theme-specific plugin that must also been installed (it includes custom rules for our theme).
» Plugin Support & Documentation

Ajaxy Live Search

A plugin that allows you to add new functionality for "live" search results to the usual WordPress
search bars.

Plugin Support & Documentation

Responsive Menu

This is a Highly Customizable Responsive Menu Plugin for WordPress, with over 120 customizable
options giving you a combination of 14,000 options!

You can import our demo Responsive-Menu-Skin using the provided "Responsive-Menu-Skin.json"
file from the "Responsive Menu > Import/Export" panel (see Step 3 > Importing Responsive Menu
Skin).

Plugin Support & Documentation

Dynamic To Top

This WordPress plugin adds an automatic and dynamic "To Top" button to easily scroll long pages
back to the top. It features an intuitive control panel to style and adjust to each website's need. The
button only appears for JS enabled browsers and can be optionally disabled for mobile visitors.

Recently added was a toggle to manage theme styles for this element (which can be found in
Appearance > Theme Options > Sticky Header Options > Use Theme Styles for Dynamic To Top).
Toggling the option OFF will remove theme styles for this element, and the Appearance > To Top
panel will take precedent. Default value is ON, and will pull styles from the theme. Reason - This is
for users who want to modify this element further using the native/included options. These option
are limited, though, which is why the theme has custom styles for this.

Plugin Support & Documentation

Part 9. Polytechnic Courses


You have two options when it comes to courses, Polytechnic Courses (free) or Sensei Courses (paid) -
or both. Polytechnic Courses offers an integrated/free way to manage courses, coursework, and
associated faculty members. Sensei offers and extended/paid method to manage courses,
coursework, lessons, quizzes, registration, paid courses and analytics. Polytechnic WP supports both,
but we wanted to offer a really great (free) method to manage courses for educational institutions
that: may not need the extra functionality, may already use a third party like blackboard, or as a
starting point for developers to offer clients additional services.

This section covers how to manage the courses included with the Polytechnic Courses plugin
(custom built and included/free for this theme). For more information on Sensei Courses, check out
Part 10.

Adding a New Course

Adding a new course is easy! Just navigate to Courses > Add New to add a new course. Each course
has three distinct option sections to note:
The Course Details section, which is used to distinguish the course from others. This sections is used
for information including: Course Description, ID, Number, Name, Time, Days, Location,
Prerequisites, etc.

Next, the Homework (Visual Composer) section allows for faculty to provide more dynamic content
such as lecture notes, study guides, required reading, etc.

Finally, the Polytechnic Course Categories section is where categories can be managed for this
course. See Course Catalog section for more details on how this is used.

Course Catalog – Page Template

The Course Catalog page template can be chosen for any page. This page template displays the title,
content, then courses based on the options set (Course Categories & Number of Courses).

Part 10. Sensei - Plugin Support


Simply put, we’ve included “out of the box” support for the “Sensei” plugin by Woo Themes for
extended features and functionality for schools that want to take their courses and lessons to the
next level. This plugin is not included with the theme, and users who want to utilize these extended
features will need to purchase a license through Woo Themes
(http://www.woothemes.com/products/sensei/).

This plugin is also not associated with the Polytechnic Courses provided with the theme.

After you purchase a license for Sensei, setup is easy as we are simply using their included dummy
data in the demo. Install and activate the plugin > then navigate to Tools > Import > WordPress >
find and select the dummy_data.XML file included in the woothemes-sensei folder > and hit import.
Then you can add your links to your menu, and explore the awesome features of Sensei.

For more documentation on the Sensei Plugin:


http://docs.woothemes.com/documentation/plugins/sensei/

If you run into any issues while using Sensei with this theme, please let us know. We are happy to
offer bug support for this plugin. For any plugin specific issues, general help, and support while
using Sensei, please contact WooThemes/Sensei to get support for your license:
https://support.woothemes.com/hc/en-us

Part 11. Polytechnic Users


This section covers the newly added fields to all users, the role of “Faculty”, and the Course Catalog
page template included with this theme.

All Users – Faculty Information

This theme utilizes the user information which can managed in Users > Select a specific user > Edit.
WordPress already includes several fields that this theme is using, such as: Display name publicly as,
Email, and Biographical Info. This theme is adding some additional fields for users, including: College or
Department, Position or Title, Specialty, Department Phone, and Custom User Profile Photo. These fields
are being used/displayed for these users on author.php pages, and on single courses.
New User Role - Faculty

Admins can manage this role, assign users to it, and access/edit all Faculty user information. From a
user standpoint, users with this role will only have access to update their own Profile information,
add new courses, edit their own courses, and delete their own courses.
Part 12. Page Templates & Options
This theme comes with several built in page templates and page options to help you manage and
create awesome pages.

The page options include: Page Layout, Page Header, and Title Alignment.

Page templates set the default page functionality and can be used in conjunction with the page
editor and page layouts. The page templates included with this theme are the: Default Template,
Blog, Post Grid, Course Catalog, and Faculty Grid.

Default Template: This is the standard/blank template and is best when used in conjunction with
the Visual Composer Backend Editor (see Part 13 for more information on Visual Composer).

Blog: This template calls posts based on their categories and the categories selected in the Blog
options that appear when this template is selected. There is also an option to select how many posts
per page you would like before pagination occurs (ie. 3, 4, 5, etc.). -1 can be used if you would like to
show all posts.
Note: The post featured image and meta information come from each post but the options to
show/hide each of these is managed in Appearance > Theme Options > Post Options. These are
included here as global post rules to make it easier to have uniformity across your site without
having to change the option(s) for each post.

Post Grid: The post grid is a great template for showing posts (based on category) that you want to
display in a grid. This grid is image based, so make sure to have a featured image set for each post
used. We’re also including several options to manage this grid including: category, filter buttons, how
many columns, grid mode, aspect ratio, image width, image height, lightbox, display post
information, title, excerpt, category, links, image hover controls and number of posts per page.

Course Catalog: This template has been specially designed to call Polytechnic Courses and display
them in a catalog type format. Use the category selection to segment business courses from liberal
studies, or select all categories to so a full selection of courses. Course categories and information
are generated by the Courses section included with the Polytechnic Courses plugin.

Faculty Grid: This template is one of a kind. It actually queries users! And can filter based on the
course categories that they are published in. For example, if Ben is faculty member > publishes his
first course > and assigns the Business course category, he’ll show up in any Faculty Grid that has
the Business category selected. If he also publishes a course in Accounting, he’ll show up there too.

Part 13. Visual Composer

13.1 What’s Included

This plugin is included as a helpful tool to enhance the usability of basic WordPress features of the
theme itself. We are fully committed to providing support for bug reports and basic usage questions
for this plugin and provide updates for this plugin in our theme updates. With that said, if you would
like to have access to more than the basic coverage we offer (for example: auto updates, in-depth
support, etc.) we recommend purchasing a Regular License to satisfy this need and dealing directly
with the plugin author if you are having issues with the plugin.

We are adding a custom built module called the “Custom Hover Module” to the Visual Composer
Map. If you run into any issues with this module, please let us know directly so that we can provide
full support for our addition.

13.2.0 Usage & Theme Specifics

This section catalogs any theme specific modules or special layout/content guidelines that we’ve
used in the demo using the Visual Composer plugin. None of the following tricks are required for
theme use of course… in fact, these are simply personal embellishments and insightful uses of the
Visual Composer drag & drop layout builder… but just to be safe, we’re logging anything specific to
the theme here so no one gets confused!
Keep in mind that you can always import all of our demo-data (posts, pages, etc.) if you want to get
your hands on the actual content!

Modules: Visual Composer comes pre-integrated into the theme… we’ve even included a handful of
our own custom twists on their modules & support for other premium plugins via the module “drag
and drop” editor. Check out the full roster of modules here.

Templates: Visual Composer also comes with a templates tool, a great way to build and save
custom layouts. They also include some starter templates for you to choose from –
For example, you’ve built this awesome page but you want to use its layout/modules for several
other pages. With this feature, you can save this page’s template – let’s call it My Custom Page > Add
your new page(s) > and add in your My Custom Page template to your new page(s) to save you some
time. Then you can add, edit and delete your imported content on this new page without loosing the
one you saved.

13.2.1 Custom Module – Hover Image

As mentioned before - we are adding a custom built module called the “Custom Hover Module” to
the Visual Composer Map. This module is similar to the Single Image module provided by VC with
some custom options. Essentially, this module displays a single image with hoverable content.

Adding a Hover Module - Navigate to your page > select Add an


Element > and choose the Hover Image module.

Using the Hover Module Settings – The following images include walkthroughs on the options
provided.
Select a Start and End Height For the Animation - This can be managed per page (ie. All Hover
Image Modules for the page) in the Page Options

The Hover Grid – Using these modules individually is great, but if you’re building a grid (like we did in
the demo home page) then you’ll want to read the next few notes that we have for you.

• Helper PSDs: Navigate into the theme-download-package/Resources/PSDs to find tempalte


psds used to help with the image creation of what we're using in the demo.

• Image Size/Ratio: You'll notice that these are all 674 wide. This is to maintain their size for
responsive mode/mobile viewports where each module becomes the width of the content
container and re-organized so maintain readability.

• Image Size Option: You can use each of these to create your
own images, then leave the image size option blank to allow
for the responsiveness happen (based on column widths
from the row layout). You are welcome to use the image size option, but this is included as
an override for users who want to handle this control on their own.
• Helper Class - Standard Usage v. Grid Usage: We’re including a helper class to adjust
some of the image/grid margins. This is helpful because the Hover Image module in
standard content should act like standard content (ie. an image in regular usage). But in a
grid, you’ll want to adjust this collection of Hover Images to illustrate a more defined display.
So if you’re building a grid from scratch, make sure to edit the Visual Composer row
containing your grid > and add the helper class “hover-grid”

• Individual Demo Homepage Now Included: As we’ve mentioned before, we recommend


importing the demo-content.xml to provide a simple way for you to swap out content and
maintain the builds that we’re providing in the demo content. With that said, we totally
understand not wanting to import a ton of stuff if you already have content. Because of this,
we are now including a Demo-Homepage.xml file that only imports the home page
structure found in the theme-download-package/Resources/Demo_Data/Demo-Content-
Alternatives folder. This optional file provides users with the ability to forgo importing
everything, and to help with the building of your home page and hover grid.

Part 14. WooCommerce


This theme comes with full support for the latest version of WooCommerce. You can view all of the
official documentation for the plugin here, but we’ve put together a short guide that will get you up
and running quickly!

Using WooCommerce! We have setup this theme to work with WooCommerce in a simple and
straight forward way… but WooCommerce is a very complex plugin that you can spend a LOT of time
refining and tweaking to your needs. You should expect to spend at least a couple of hours if you
intend to seriously use WooCommerce, and that’s without looking into any of their extensions.
Furthermore, while we support WooCommerce, this is not an “e-Commerce” theme persay, and our
support for the plugin will be limited to basic layout and setup questions.

Setup Note - This plugin comes recommended with the theme and is included in the initial plugin
setup prompt. We understand that lots of users won’t need all of the bulk and extra pages that
WooCommerce adds, but it’s offered in the initial install to allow users to pick and choose what they
will use after setup. If you’ve installed this plugin (and imported the Demo-Content.XML, then you
should all you should be able to skip the following steps.

1. Install the WooCommerce Plugin.

Visit your Plugins > Add New panel, then just search for “WooCommerce” and follow the on-screen
instructions to install and activate the theme.

Once installed, make sure you follow the button to install the WooCommerce pages:

Make sure you click the “Install WooCommerce Pages” button. If it doesn’t show up (or you
accidentally miss the chance to click it), just deactivate the plugin and re-activate it.

Once activated and installed, you should have a handful of new pages that the WooCommerce
plugin uses:
2. Fill out the WooCommerce Settings

Your first Part should be to visit the “WooCommerce” panel on the left side of your dashboard and
get a feel for how things are organized. Once you’re ready, visit the “WooCommerce > Settings”
panel to fill out the storefront settings.

3. Import the Demo Products (optional)

If you want, you can install the handful of products shown in the theme demo page. This works just
like an ordinary WordPress XML import, but it will ONLY import products. We’ve separated this from
the main “demo import” process because lots of people don’t want to bother with the
WooCommerce stuff.

Visit your Tools > Import panel, select the WordPress import method, and upload the XML file found
in this theme’s download package that’s named “woo_demo_products.xml”.

This will import a handful of products, their images, and categories.

If you choose to skip this step, just make sure that each product has a featured-image (aka Product
Image) assigned as the layouts really look better with this setup!

4. Add the “Store” link to your menu.

Once you are happy with your storefront (you can always preview it by viewing the “Shop” page in
your Pages panel – usually the URL is “http://yoursite.com/shop/”), you should add the storefront
link to your menu so that people can find it. That’s it!

Part 15. Revolution Slider Home Page


If you’d like to replicate the Revolution Slider Home Page without the demo-content.xml:
Add a new page > and use the Visual Composer Backend Editor to manage the content. Add a row >
and a Revolution Slider module to that row. Then Edit that row and add the helper-class of “cover-
header” to the Extra Class Name section. The helper class is the hook used to offset the
header/tophat and provide the correct z-indexes to the elements involved with this.

Part 16. Support


We’re here to help! If you have any questions, feedback, or issues, please feel free to file a ticket at
our dedicated support forum: http://themeisland.ticksy.com/ We do our best to get you solid
responses within 24-48 hours (even on weekends). The clearer you illustrate your support request,
the better/quicker we can help you (and the person in the que behind you). To help with this, please
follow the help request checklist.
Please understand, though, that as much as we love to help, there are some situations that we
simply can’t help with. For more information, feel free to check out our Official Support Policy.

Here are some additional quick links to some commonly used resources:
- Time To UPDATE The Theme? Great Idea!
- Standard Troubleshooting Steps
- Premium Plugin FAQs

Thanks for using our theme!


Charles & Brandon Jones – Theme Island Studios

You might also like