University - Installation Manual

Usage Guide

Installation Customization

Introduction

Thank you for trying University, the amazing WordPress theme from GavickPro with full BuddyPress support! University is a feature-rich theme that's built to enhance the education sector, whether for a school, college or university website, and as such it can seem a little daunting getting started. This guide is intended to help you get started with the theme, covering basic installation and configuration.

Structure of This Guide

This guide can be roughly separated into 2 major sections, which themselves can be separated into sections. The first major section following this introduction covers installation options for the theme, whether the quickstart install that can be used to run a full WordPress install to match the demo site, or manual installation, that requires installation of the theme and plugins as well as the demo content and theme settings.

The second section covers the manual placement and configuration of the various widgets; in the quickstart package this is done automatically by the installer, but an installation on an existing WordPress site that doesn't use the quickstart package will require manual placement and configuration.

How the Theme Works

University's frontpage is based mainly on widgets. Several widget areas are created on the frontpage, and within those areas different widgets are placed that fulfill different functions. They might be a complex slideshow or news show widget, or just a simple text widget. It works a bit like a giant web-based puzzle; the theme includes several shaped areas, and widgets are the pieces that fit into these areas. Of course, some pieces can fit into several areas, whereas others can't; we'll be covering this more in-depth in the customization section of this guide.

To get an idea of the framework underneath the frontpage, take a look at the following image, that shows how the frontpage is segmented up, the name of each section, and the name of the type of widget used. This will come in handy later on as we move through installation and customization:

Installation Options

There are 2 options for installing the theme; via the quickstart, which installs WordPress, the theme, widgets, plugins, configuration and sample data to match our demo layout, or manual installation, which requires manual installation of the theme, plugins, demo content and settings.

The quickstart installation is perfect if you're starting a website from scratch; it installs all you need to match the demo so that you can start modifying the content straight away. However, it cannot be installed in an existing WordPress installation; the server must not have WordPress installed.

Manual installation is much more long-winded, but this method allows the theme to be installed on an existing WordPress installation, so you can preserve your settings, members, content and other data.

After deciding which installation process works for you, move on to the appropriate section of this guide for further installation information.

Quickstart Installation Guide

If you're starting a brand new site, or don't have anything in your current installation that you need to keep, then the quickstart will get you up to speed very quickly.

A full, step-by-step guide to quickstart installation may be found in our documentation at the following link:

WordPress Quickstart Installation Guide

Manual Installation Guide

Manual installing a theme is not a tough process, but the widget configuration can be long-winded and tedious depending on the complexity of the theme. Before starting on configuring the widgets (covered in sections 5-7 of this guide), you'll need to take care of some steps to ensure you've got all you need to match the demo layout.

Downloading and installing the theme

This process takes just a few moments, and is that same as any other theme install. A full guide to this process may be found at the following link:

Theme Installation Guide

Installing plugins

The plugins provide the meat of the frontpage and offer additional functionalities that will make your website stand out. It is important to ensure that all necessary plugins are installed before proceeding with the rest of the installation; a guide to assist you with this is here:

Plugin Installation Guide

Importing the demo content

The demo content includes the posts, categories, menus and media from our demo site; since the basic widget configuration for the theme often references this content it will simplify the configuraton process if installed. A guide to doing so is here:

Importing Demo Content

Importing Theme Settings

The GavernWP framework includes several options that need to be set specifically for each theme. This guide will help you import the settings and save time!

Importing Theme Settings

What's next?

Now that you've installed the theme and plugins and imported the demo content and theme settings, it's time to start placing and configuring the widgets. The next section will guide you step-by-step through this process.

Configuring Frontpage Widgets

These widgets are used to create the frontpage layout. Since we are not able to import widget settings, we will need to manually set the widget placement and settings. Once this section is complete your frontpage will be ready to match our demo.

Configuring the Header Background

The header of the theme uses GavickPro's Image Show widget to create a large background slideshow made up of images from your media library.

To set this up to match our demo layout:

  1. Log-in to your WordPress backend and navigate to the Widget configuration screen. Click on the down arrow to the right of the 'Header Bg' widget area to expand it.
  2. Drag the 'GK Image Show' widget from the left of the screen to the expanded 'Header Bg' section and drop it there. The widget's options will expand automatically.
  3. Configure the options according to the below screenshot:

    The title field should be left blank, and the animation speed, animation interval, autoanimation and show text block options may be left as default.

  4. Click on the 'Widget Rules' button to expand the options and set the widget to be visible only on the homepage.

  5. Save the widget settings.

The header slideshow is now configured and will appear on your frontpage.

Configuring the Latest Events Display

Several widgets are overlaid on the background slider to provide more information. The 'Latest Events' section displays upcoming events or gatherings for students to join in on. To create this section:

  1. In the widgets configuration screen of your WordPress backend, expand the 'Header Left' widget area on the right side of the screen.
  2. Drag a 'News Show Pro by GavickPro' widget from the left side of the screen to the newly-expanded area. It will expand it options automatically.
  3. Configure the options of the widget according to the below screenshots:

    Basic Settings

    Widget Layout

    Note: Only change the Article Wrapper option to 'events'; all other options will disappear.

    Event List options

    Article Layout

    Advanced Settings
    No changes need to be made in this area

  4. Click on the 'Widget Rules' button to expand the options, and set it to appear on no pages except for the homepage.
  5. Click the 'Save' button to preserve the widget settings.

The latest events section is now configured.

Configuring the Study With Us and Take a Tour Sections

Both of these sections occupy the Header Right widget area, and they are both simple text widgets that are extremely easy to configure.

  1. In your WordPress backend, open the widget screen and expand the Header Right widget area.
  2. Drag a Text widget to the expanded area. The options will open automatically.
  3. A text widget has only 2 main areas; the title field, where you can add a widget title, and the main body of the widget where you can add any text you like. Add the following HTML code into the main body section, leaving the title blank:
     <ul>
     <li>
     <h3><a href="#">Study with us</a></h3>
     <p>One of the world's most dynamics capitals</p>
     </li>
     <li>
     <h3><a href="#">Press &amp; media</a></h3>
     <p>One of the world's most dynamics capitals</p>
     </li>
     <li>
     <h3><a href="#">Departments</a></h3>
     <p>One of the world's most dynamics capitals</p>
     </li>
     </ul>
     <a href="#">More services</a>
    
  4. Click on the 'Widget Rules' button to expand the options, and set the widget to be visible only no the homepage.
  5. Still in the widget rules, set the Widget Style to 'Transparent'.
  6. Click save.

The top part of the section is now configured, but the video 'Take a Tour' link still needs to be added. Bear in mind that the position of the text widgets matters; if two widgets occupy the same area then they will be displayed on the homepage in the order they are in. To set up the second widget:

  1. Drag a second Text widget to the Header Right widget area, and place it below the existing Text widget.
  2. Leaving the title blank as before, add the following code to the main body of the text widget:
     <a class="thickbox gk-video-block" href="//www.youtube.com/embed/Uh70E4hKTog?title=0&amp;TB_iframe=true&amp;width=640&amp;height=480">Take a tour</a>
    
  3. Click on the 'Widget Rules' button to expand the options, and set the widget to be visible only no the homepage.
  4. Still in the widget rules, set the Widget Style to 'Video', and change the 'Visible On' option to 'Desktop'.
  5. Click 'Save' to save the widget options.

Both text widgets are now configured.

Configuring the Information Request Form

The information request form appears just underneath the header. It's created with a simple text widget with custom HTML. To configure it:

  1. Expand the Header Bottom widget area on your Widgets screen and drag a text widget to the expanded area.
  2. Leave the title blank, and copy the following code into the main body of the text widget:
     <form class="gk-information" action="#">
     <div><strong>Get info based on<br /> your study lavel</strong> <input     name="full-name" type="text" placeholder="Full name" /> <input     name="education-level" type="text" placeholder="Your education level" /    > <input name="email" type="email" placeholder="Your e-mail" /> <input     type="submit" value="Request information" /></div>
     </form>
    
  3. Open the 'Widget Rules' options. Set the widget to be visible on no pages except the homepage.
  4. Click 'Save' to save the widget settings.

Configuring the Admissions Information Area

The admissions section occupies the right of the template, next to the university information section. It is made up of standard text links with icons. To create this section:

  1. Open your Widgets page and expand the 'Sidebar' widget area. Drag a new text widget into this area.
  2. Write "Admissions" in the title field.
  3. Copy the following code to the main body of the text widget:
     <ul>
     <li><a href="#"><i class="gk-icon-script"></i>How to apply</a></li>
     <li><a href="#"><i class="gk-icon-calendar"></i>Deadlines</a></li>
     <li><a href="#"><i class="gk-icon-marker"></i>Plan a visit</a></li>
     <li><a href="#"><i class="gk-icon-education"></i>Find a major</a></li>
     <li class="last-item"><a href="#">More details…</a></li>
     </ul>
    
  4. Expand the Widget Rules area and set it to appear only on the homepage.
  5. Set the Widget Style option in the Widget Rules to 'Icons Menu'.
  6. Set the Visible On option in the Widget Rules to 'Desktop.
  7. Click 'Save'.

The admissions section is now ready.

Configuring the University Information Section

This section provides some basic information about the university, with links to other areas.

To create this section:

  1. Expand the Mainbody widget area and drag a Text widget to into the area.
  2. Write "N°1 American University" in the title field.
  3. In the main body of the text widget, copy the following code:
     <img class="gk-content-image" src="[pageurl]/wp-content/themes/University/images/demo/students.jpg" alt="University Joomla and WordPress Theme" />
     <div class="gk-content">
     <p>Ut imperdiet ipsum vel est congue, a vestibulum orci faucibus. Mauris dictum orci ornare arcu placerat, eu porta quam sollicitudin. Fusce in dapibus turpis. Curabitur imperdiet fermentum tellus.</p>
     <p>Nunc suscipit magna vitae nisi blandit, lacinia pellentesque elit euismod. Quisque ut mattis dolor, a gravida turpis.</p>
     <a href="index.php/about-us">More details…</a></div>
     <ul class="gk-content-list" data-cols="3">
     <li><a href="#">Be part of us</a></li>
     <li><a href="#">Find allies</a></li>
     <li><a href="#">Get support</a></li>
     </ul>
    
  4. Expand the Widget Rules and set the widget to appear only on the homepage.
  5. Change the Widget Style in the Widget Rules section to Medium Title.
  6. Click 'Save' to save the widget settings.

This section is now good to go!

Configuring the News Section

The news section highlights the latest posts from the site's blog whilst a background picture with parallax-scrolling effect adds some extra flair:

To create this section:

  1. Expand the 'Bottom I' widget area and drag a 'News Show Pro by GavickPro' widget to the area.
  2. Configure each of News Show Pro's option tabs according to the following images:

    Basic Settings

    Widget Layout

    Article Layout

    Link Format

    Advanced Settings
    No changes need to be made in this area

  3. Expand the Widget Rules and set it to appear only on the homepage.
  4. Set the Widget Style to 'Parallax'.
  5. Save the widget settings.

The news section is now configured.

Configuring the Tweets Section

The tweets section will show the latest tweets from a particular search query.

To create this section:

  1. Expand the 'Bottom II' widget area and drag a new 'GK Tweets Widget' widget to the expanded area. The options will expand automatically.

  1. Write "Connect" in the title field.
  2. Set the "Amount of tweets" option to 4.
  3. Change the 'Show Avatar' and 'Show Links' options to disabled.
  4. Expand the Widget Rules and set the widget to be visible only on the homepage.
  5. Set the Widget Style to 'Medium Title'.
  6. Save the widget.

The tweets section is now configured, however, additional steps must be taken to 'activate' it. This will be covered in the customization section of this tutorial.

Creating the Social Media Icons and Links

This section provides a set of social media icons that link to a particular profile for users to stay connected.

To create these icons:

  1. Expand the 'Bottom III' widget area and drag a Text widget to it.
  2. Write "Stay Connected" in the title field.
  3. In the main body of the text widget, copy the following code:
     <ul class="gk-social-icons">
     <li><a class="gk-icon-gplus-outline" href="https://plus.google.com/        +gavickpro/posts">Google+</a></li>
     <li><a class="gk-icon-twitter-outline" href="https://twitter.com/        gavickpro">Twitter</a></li>
     <li><a class="gk-icon-fb-outline" href="https://www.facebook.com/        gavickpro">Facebook</a></li>
     <li><a class="gk-icon-youtube-outline" href="#">YouTube</a></li>
     <li><a class="gk-icon-linkedin-outline" href="#">LinkedIn</a></li>
     </ul>        
    
  4. Expand the Widget Rules options and set the widget to appear on no pages except the homepage.
  5. Set the Widget Style option to 'Custom CSS Class'. A new field will appear for you to enter the custom CSS class in.
  6. Add the following to the custom CSS class field:
     color1 half thintitle
    
  7. Save the widget settings.

Campus Life Title

This area serves only as a title; underneath this widget is a BuddyPress feed that we will be looking at shortly. To create the title:

  1. Expand the 'Bottom III' widget area and drag a text widget to it, placing it underneath the 'Stay Connected' text widget.
  2. Write "Campus Life" in the title field.
  3. Expand the Widget Rules and set the widget to appear on no pages except the homepage, change the Widget Style option to "Bottom Title", and set the Visible On option to "Desktop".
  4. Save the widget.

Newsletter Subscription Form

This section allows visitors to sign-up to receive newsletters. The form and newsletter functionality is provided by the MailPoet plugin, which we installed at the beginning of this tutorial. Creating this section requires two major steps; first, creating the subscription form, and second, configuring the widget to display the form.

Creating the Form

  1. In your WordPress backend, click on MailPoet>Settings on the left menu. You will be taken to the MailPoet options screen.
  2. Click on the 'Forms' tab at the top of the settings page. This will take you to a list of forms, but in this case there should only be the one; "Subscribe to our Newsletter".
  3. Highlight the "Subscribe to our Newsletter" form; a set of options will appear: Edit, Duplicate, or Delete. Click on Edit to be taken to the form edit screen.

  1. Currently the form has two fields; an email field for users to place their email address, and a subscribe button to complete subscription. Hover over the 'Email' field with your mouse, and click the 'Edit Display' button that appears.
  2. You will see a pop-up with two options; Label and Display Label within input. Change the Label field from "Email" to "Your Email Address" and set the Display Label within input option to "Yes", then click Done to close the pop-up.
  3. Now hover over the Subscribe! button in the editor and click the 'Edit Display' button as before.
  4. The pop-up here only offers one option; to change the Label text for the button. Change this from "Subscribe!" to "Subscribe" (without the exclamation mark). Click Done to close the pop-up.
  5. Click Save to save the amended form.

Configuring the Newsletter Widget

  1. Navigate to your Widgets page and expand the 'Bottom III' widget area. Drag a MailPoet Subscription Form widget to this area and place it underneath the two text widgets you already set.
  2. In the title field, write "University's Official Newsletter".
  3. In the 'Select a form' drop-down box, make sure the 'Subscribe to our Newsletter' form that we created in the previous section is selected.
  4. Expand the Widget Rules options and set the widget to appear on no pages except the homepage.
  5. Change the Widget Style option to Custom CSS class, and enter "newsletter" in the Custom CSS Class field.
  6. Click 'Save' to preserve the widget settings.

Both the subscription form and the widget are now configured.

This section provides a stream of the latest images from your BuddyPress users. We created the title for this section in the previous part of the tutorial, so now we will create the stream itself.

To configure this widget:

  1. Expand the 'Bottom IV' widget area and drag a GK BuddyPress Gallery widget to it.
  2. Set the title in the title field to "!BuddyPress Gallery". The exclamation mark prevents the title from being shown on the frontpage.
  3. Change the Photo Width option to 285.
  4. Expand the Widget Rules and set the widget to appear on no pages except the homepage.
  5. Save the widget settings.

The BuddyPress stream is now configured and will automatically update as images are uploaded to BuddyPress.

Now all that's left for the frontpage is the menus; there are three menu sections that need to be taken care of; the main menu, the main footer menu, and some additional footer menus that are placed as widgets rather than assigned in the WordPress settings. These are all custom menus that were imported with the sample content, so configuration is easy.

To configure the menus:

  1. On the Widgets screen, expand the 'Bottom V' widget area and drag five (5) Custom Menu widgets to it, as in the below image:

  2. Expand the first custom menu widget and set its title to "About University". In the "Select Menu" drop-down list, select the "About University" menu.
  3. Save the widget.
  4. In the second custom menu widget, set the title as "Admissions" and select the Admissions menu in the "Select Menu" field, and save.
  5. Set the third custom menu widget's title to "Academics", and select the menu with the same name in the "Select menu" drop-down list. Click the save button.
  6. Set the fourth custom menu widget's title to "Research", and select the "Research" menu in the "Select Menu" drop-down list. Save.
  7. Set the fifth custom menu widget's title to "Campus Life", and select the "Campus Life" menu from the "Select Menu" drop-down list. Click the save button to save the changes.

The footer menus are now configured, and your frontpage is now ready to go:

Next, we will configure the sidebars and other widgets that appear on pages other than the frontpage.

Assigning the main menus imported from the demo content

As with the custom menus in the last section, the main menu and main footer menu were both included in the demo content and just need to be assigned to their respective positions. To assign the menus:

Log into your WordPress backend and click on Appearance>Menus to be taken to the "Edit Menus" screen.

Since the menus were already created and imported in the demo content we can ignore the "Edit Menus" option, so just click on the "Manage Locations" tab at the top of the screen.

You'll see that there are two menu positions in the University theme; Main Menu and Footer Menu. You will need to select the appropriate menu for each menu position from the drop-down list. Thankfully, we're not very original in our menu naming, so among the selection of menus you'll find one called "Main Menu" and another called "Footer Menu", so just assign them to their namesake position.

Now click on the "Save Changes" button and you're menus are good to go!

Configuring Sidebar or Other Additional Widgets

The sidebar or other additional widgets create things like category quick links, article previews, a calendar, search or other links/information that will be useful for navigation.

Latest News on the Sidebar

The first sidebar section when viewing an article contains a list of the latest news stories with links to encourage further reading.

To create this section:

  1. On your Widgets page, expand the Sidebar widget area and drag a News Show Pro by GavickPro widget to it, placing it underneath the Admissions text widget that we configured earlier.
  2. Configure each of News Show Pro's option tabs according to the following images:

    Basic Settings

    Widget Layout

    Article Layout

    Link Format

    Advanced Settings
    No changes need to be made in this area

  3. Expand the Widget Rules and set the widget to appear on All Post pages, and the following category pages: university-news, events-list-1, events-list-2, post-formats.

    Note: To set the widget to appear on all post pages, select "Post" in the "Select page to add" drop-down box, but leave the Post ID/Title/Slug field blank and click "Add page".

  4. Click the Save button to save the settings.

The latest news will now appear on post/category pages in the sidebar.

Creating the Calendar

Underneath the latest news in the sidebar is a calendar widget.

To create this section:

  1. Drag a Calendar widget into the expanded Sidebar widget area, placing it underneath the "Latest News" News Show Pro widget.
  2. Set the Calendar widget's title to "Calendar".
  3. Expand the Widget Rules and limit the widget to appearing on all post pages and the following category pages: university-news, events-list-1, events-list-2, post-formats.
  4. Click the Save button.

The Calendar is now configured.

Adding the Search Bar

Under the calendar in the sidebar is a search bar for quick navigation.

To create it:

  1. Drag a Search widget into the Sidebar widget area; place it underneath the calendar widget.
  2. Set the title in the title field to "Search".
  3. Expand the Widget Rules options and set the widget to appear on no pages except all post pages and the following category pages: university-news, events-list-1, events-list-2, post-formats.
  4. Save the widget.

The search bar is now ready.

Adding the Latest Comments Feed

At the bottom of the sidebar is a feed for all the latest article comments.

To create this section:

  1. Drag a GK Comments widget to the Sidebar widget area, and place it underneath the search widget.
  2. Set the title in the title field to "Comments".
  3. Set the Avatar Size option to 40, and the Number of Comments to 2.
  4. Expand the Widget Rules options and, like the other sidebar widgets, set this widget to appear on no pages except all post pages and the following category pages: university-news, events-list-1, events-list-2, post-formats.
  5. Save the widget settings.

The latest comments feed is now configured.

Category List on the Left of the Article

On the left side of an article's page is a list of categories for quick navigation.

To create this section:

  1. On your Widgets screen, expand the Inset widget area and drag a Categories widget into the expanded area.
  2. Leave the title field blank, and add a tick to the checkbox for "Show post counts".
  3. Expand the Widget Rules options and set the widget to appear on no pages except all post pages and all category pages.
  4. Save the widget settings.

Configuring the Quick links Menu

The quick links menu appears on the inset bar exclusively on the About Us pages, to help visitors navigate between the About Us sub-pages.

To create this menu:

  1. Expand the Inset widget area and drag a Custom Menu widget to the expanded area.
  2. Set the title in the title field to "Quick Links".
  3. In the "Select Menu" drop-down list, select "Quick links".
  4. Expand the Widget Rules settings and set the widget to appear on no pages except for these pages: about-us, history, faqs, fast-facts.
  5. Set the Widget Style option to "Menu".
  6. Save the changes to the widget.

The menu is now configured.

Now all that is left is to configure the BuddyPress-specific widgets.

Configuring the BuddyPress-Specific Widgets

The BuddyPress-specific widgets are widgets that display information from BuddyPress, or add extra information to BuddyPress pages. If you are intending to create a site that does not take advantage of BuddyPress' features, then it will not be necessary to configure these widgets. However, it is worth considering the benefits of a social-network enhanced site that allows users to interact more deeply than traditional sites.

BuddyPress Header Widgets

The BuddyPress page header is made up of a text widget with a call to action and a login form underneath.

Creating the Header Text

  1. Expand the Header Bg widget area and drag a Text widget into it, placing it above the existing Image Show widget.
  2. Set the title as "!Come and join our community" including the exclamation mark.
  3. Copy and paste the following code into the main body of the text widget:
     <p>Come and join our community. Expand your network and get to know new         people!</p>
     <a href="[pageurl]/registration" class="btn-join"> Join us now, it's         free! </a>
    
  4. Expand the Widget Rules options and set the widget to appear on no pages except BuddyPress Activity pages.
  5. Set the Widget Style option to "BuddyPress Guest".
  6. Set the "Visible for" option to "Only guests".
  7. Save the widget settings.

Creating the Login Form

  1. Drag a GK Login widget into the expanded Header Bg area. Place it below the Text widget, but above the Image Show widget.
  2. Set the title to "!GK Login widget".
  3. Expand the Widget Rules settings and set the widget to appear on no pages except BuddyPress Activity pages.
  4. Set the Visible For option to "Only guests".
  5. Save the widget.

The header widgets for BuddyPress are now configured.

BuddyPress Sidebar Widgets

BuddyPress-specific pages offer a wealth of information in the sidebar, including latest members, latest photos and who's online. Configuring these sections is simple, and uses BuddyPress' own powerful widgets.

Members Section

The members section provides several tabs for users to check the latest, most active or popular users.

To create this section:

  1. In the Widgets screen, expand the Sidebar area and drag a (BuddyPress) Members widget to the expanded area. Place it under the Admission Text widget we configured earlier.
  2. Set the title of the widget as "Members".
  3. Set the Max members to show option to 9.
  4. Expand the Widget Rules section and set the widget to appear on no pages except BuddyPress Activity pages.
  5. Save the widget.

Latest Photos

This section displays the latest photos posted by BuddyPress members.

To create this section:

  1. Drag a BP Latest Photos widget to the expanded Sidebar widget area, placing it under the (BuddyPress) Members widget.
  2. Set the title as "Latest Photos".
  3. Set the Columns option to 3.
  4. Set the Rows option to 4.
  5. Expand the Widget Rules and set the widget to appear on no pages except BuddyPress Activity pages.
  6. Save the widget.

Who's Online

This section shows members that are currently online and logged-in.

To setup this section:

  1. Drag a (BuddyPress) Who's Online widget to the expanded Sidebar widget area, placing it below the BP Latest Photos widget.
  2. Set the title of the widget to "Who's Online".
  3. Expand the Widget Rules and set the widget to appear on no pages except BuddyPress Activity pages.
  4. Save the widget.

All BuddyPress widgets are now configured, which means that all widgets have now been set-up and your website is good to go!