Skip to main content

GET ALL WORDPRESS THEMES - ONLY €59.00 (15 WordPress Pixelemu themes) Read more

PE School WordPress theme manual

A. GENERAL

This documentation is last updated on 23th June 2017.

Thank you for purchasing PE School Theme . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site.

If you like this theme, Please support us by rating this theme with 5 stars.

Before you start please choose if you want :

  • import demo content with plugin
  • manual import demo content
  • use Quickstart package

If you choose Quickstart option please skip points A2 and A3.

Follow steps listed here

Follow steps listed here

Follow installation steps listed here

After PE School Demo Content Importer has finished his job please check:

  1. If you have earlier Slider Revolution plugin installed and some sliders here please go to Appearance > Widgets. In sidebar Header open widget Revolution Slider, choose Homepage slider and click Save.

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Navigate to Settings > Reading and set options like that:

documentation

Next, set media in Settings > Media:

documentation

Follow steps listed here

 

B. THEME OPTIONS

All available settings for 'Clinic' version of PE School theme. More information about different versions you will find in Styles div.

To setup Basic Settings, navigate to Appearance > Theme Options and click on Basic Settings tab.

documentation

To setup Layout, navigate to Appearance > Theme Options and click on Layout tab.

documentation

To setup Main Menu, navigate to Appearance > Theme Options and click on Main Menu tab.

Megamenu:

documentation

Simple Menu:

documentation

To setup Blog, navigate to Appearance > Theme Options and click on Blog tab.

General:

documentation

Archive:

documentation

Single Post:

documentation

To setup Pages, navigate to Appearance > Theme Options and click on Pages tab.

Single Page:

documentation

Contact:

documentation

Members:

documentation

FAQ:

documentation

Programs:

documentation

To setup Fonts, navigate to Appearance > Theme Options and click on Fonts tab.

documentation

To setup Colors, navigate to Appearance > Theme Options and click on Colors tab.

General:

documentation

Top bar:

documentation

Menu and logo bar:

documentation

Header:

documentation

Top1 and Bottom1:

documentation

Top2 and Bottom2:

documentation

Top3 and Bottom3:

documentation

Copyright:

documentation

Widget styles:

documentation

Off-canvas:

documentation

To setup WCAG, navigate to Appearance > Theme Options and click on WCAG 2.0 tab.

documentation

To setup High Resolution, navigate to Appearance > Theme Options and click on High Resolution tab.

documentation

To setup Advanced, navigate to Appearance > Theme Options and click on Advanced tab.

documentation

To setup Import / Export, navigate to Appearance > Theme Options and click on Import / Export tab.

documentation

You will find theme settings in files:

  • / Theme Options / (version) / redux-options.json

 

C. PAGES

Follow steps listed here

Follow steps listed here

This page displays posts with post type Program Category and Programs. To create that page go to Pages > Add New. Now select template Program Page and click Update/Publish

documentation

When you save or publish page additional options will be available.

You can set:

  1. Items (Program Categories)
  2. Items per Page
  3. Thumbnails per Row
  4. Thumbnails Position
  5. Thumbnails Size
  6. Item height
  7. Thumbnail div Width

documentation

documentation

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

 

D. PLUGINS & WIDGETS

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Follow steps listed here

This plugin will be optionally downloaded and installed after theme installation.

Add PE Box widget to sidebar Primary Widget Area.

documentation

You can choose here:

  1. Title: title of widget
  2. Link
  3. Show Icon : checkbox
  4. Icon height : in pixels
  5. Icon width : in pixels
  6. Icon image : URL with http://
  7. Icon "hover" image : URL with http://

documentation

Click Save when you are done.

This widget is available after installation PE School plugin.

Add PE Short Info widget to sidebar Primary Widget Area.

documentation

You can choose here:

  1. Title: title of widget
  2. Link
  3. Icon (HTML)
  4. Description
  5. Animation type (animate.css)
  6. Animation delay (miliseconds)

documentation

Click Save when you are done.

This widget is available after installation PE School plugin.

Built-in widget which allows you to display social icons.

documentation

documentation

On demo page, widget is visible in the 'social' sidebar.

We have also a video tutorial on how to configure the PE Social widget:

Follow steps listed here

Follow steps listed here

Create and manage your calendar of events with ease. The Events Calendar will help take your site to the next level.

documentation

For correct display please set Default stylesheet to 'Skeleton' and Events template to 'Event Calendar Page'.

Plugin settings:

documentation

Widget settings:

documentation

We are using additional pe-events class for widget design.

This plugin is available at WordPress.org - https://wordpress.org/plugins/the-events-calendar/

 

E. ADDING CONTENT

Follow steps listed here

Navigate to Members > Add New. Enter title (member name), description and click Publish. Optionally you can choose featured image (member avatar).

documentation

You can also provide:

  1. Member programs
  2. Nember Facebook profile
  3. Member Twitter profile
  4. Member Linkedin profile
  5. Member Phone number
  6. Member Email address

documentation

Navigate to Testimonials > Add New. Enter title (author name), description and click Publish. Optionally you can choose testimonial author occupation.

documentation

First you should add Program Categories.

Navigate to Programs > Program Categories.

Enter:

  1. Category name
  2. Category slug
  3. Choose Category parent
  4. Category description

documentation

Click Add New Program Category when you are done.

Once you have category, you can add post.

Navigate to Program > Program Categories.

Enter title (program name), description, choose Program Categories, Featured Image and program Subtitle.

documentation

 

F. WPML

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

 

G. OTHER

Follow steps listed here

pe-margin - removes all margins for widget.

pe-color1 - provides different widget layout

pe-color2 - provides different widget layout

pe-color3 - provides different widget layout

pe-color4 - provides different widget layout

pe-color5 - provides different widget layout

pe-events - provides different widget layout for Events Calendar widget

text-right - aligns text right

text-left - aligns text left

text-center - aligns text center

pe-clean - for Tabs shortcode

pe-nospace - removes space between widgets.

pe-section-space - removes space above and below section.

pe-section-space-top - removes space above section.

pe-section-space-bottom - removes space below section.

no-bold - removes bold font weight from string.

Follow steps listed here

Follow steps listed here

Shortcodes article you will find here here.

In this article you will find some examples of shortcodes which you can use in articles.

All available widget positions in theme :

documentation

documentation

We have also a video tutorial on how to manage the theme layout in WordPress themes:

Typography article you will find here here.

In this article you will find some examples of custom classes which you can use in articles.

Follow steps listed here

 

H. STYLES

Theme PE School is available in 3 different versions. Each version have own settings and content.

documentation

You can import settings in Theme Options using provided in package file redux-options.json

  1. Go to Theme Options > Import / Export
  2. Click Import from File

    documentation

  3. Open redux-options.json file with Code or Text Editor and copy content.

    documentation

  4. Paste content in input.

    documentation

  5. Click Import

Remeber: All of your previous settings will be overrided.

Content can be imported in Tools > Import. More details in Demo Site Configuration div

 

I. WCAG

WAI is Web Accessibility Initiative - an initiative established by the W3C, defining the standards for creating web pages, which have to be available for many users - in the project participate companies such as IBM, Microsoft, Google, Apple (the author of WCAG). Web Content Accessibility Guidelines is a collection of documents relating to the availability of Internet services, Since 2012 has the status of international standard ISO.

  1. Page navigation by using keyboard - you don’t need to use a computer mouse to navigate through the relevant divs of the website, just keyboard will be enough
  2. Skip to the following Menu items is possible with the Tab key, so we can quickly move through the page

    WCAG

  3. Avoidance of animated elements (facilities for people suffering from epilepsy) stable graphics, no garish animated effects is one of the advantages of our theme
  4. High contrast mode: ensure optimal readability of the text ( Black/White Mode, Black/Yellow Mode, Yellow/Black Mode)

    WCAG

    WCAG

    WCAG

  5. Night mode - lets you avoid eyestrain. If your eyes get tired quickly, don’t strain them and to use night mode color version

    WCAG

  6. Width switcher (fixed/fluid) adjust the width of the screen to fit your needs
  7. Font size switcher (3 degrees of font size, which are fixed as a percentage)

    WCAG

You can easily customize all of the available facilities (disable and enable mods depending on your requirements) in Theme Options

WCAG

 

Shortcut menu in the top left corner of screen is visible when you use keyboard to navigate on the site (use TAB key). It allows for quick access to interesting or important content parts.

You can manage links and items in WordPress backend Appearance > Menus > Select 'Skip Menu' if exists or create new menu in 'Skip Menu' theme location.

WCAG

If you want create a new link in menu, simply chose Custom Links type.

WCAG

As URL you should set div ID where you want to link. You can check document divs ID with any Code inspector in your browser. Example in Chrome (F12 button) :

WCAG

Id of Bottom 1 div in example is 'pe-bottom1' which means we can add Custom Link in Skip menu with URL : #pe-bottom1

WCAG

WCAG

 

All main divs in theme have its own headings for users who use screen readers. It is helpful to browse the site and correctly recognize each part of site.

You can easly change labels in Theme Options > WCAG 2.0

WCAG

 

J. OPTIMIZE YOUR SITE

 

K. SOURCES AND CREDITS

Plugins:

  1. Amr shortcode any widget https://wordpress.org/plugins/amr-shortcode-any-widget/installation/
  2. Duplicator (Create a backup of your WordPress files and database. Duplicate and move an entire site from one location to another in a few steps. Create a full snapshot of your site at any point in time.) http://lifeinthegrid.com/
  3. Display Widgets (Adds checkboxes to each widget to show or hide on site pages.) http://strategy11.com/
  4. Max Mega Menu https://www.maxmegamenu.com/
  5. Option Tree https://github.com/valendesigns/option-tree
  6. Redux Framework https://reduxframework.com/
  7. Revolution Slider (Revolution Slider - Premium responsive slider) http://themepunch.com/
  8. W3 Total Cache http://www.linkedin.com/in/w3edge
  9. WordPress Importer https://profiles.wordpress.org/wordpressdotorg/
  10. WP User Avatar http://wordpress.org/support/plugin/wp-user-avatar/
  11. The Events Calendar https://wordpress.org/plugins/the-events-calendar/

 

Commercial images and videos used on the demo theme:

Depositphotos

  1. http://pl.depositphotos.com/7762260/stock-photo-english-female-student.html?ref=3830419
  2. http://pl.depositphotos.com/28317059/stock-photo-international-education-concept.html?ref=3830419
  3. http://pl.depositphotos.com/46645781/stock-photo-children-in-language-camp.html?ref=3830419
  4. http://pl.depositphotos.com/60426475/stock-photo-kids-drawing-and-filling-letters.html?ref=3830419
  5. http://pl.depositphotos.com/63951577/stock-photo-cute-child-have-fun-painting.html?ref=3830419
  6. http://pl.depositphotos.com/64982327/stock-photo-kids-playing-with-abacus.html?ref=3830419
  7. http://pl.depositphotos.com/2371625/stock-photo-modern-american-high-school.html?ref=3830419
  8. http://pl.depositphotos.com/10683075/stock-photo-preschool-teacher-and-students-in.html?ref=3830419
  9. http://pl.depositphotos.com/5451887/stock-photo-back-to-school.html?ref=3830419
  10. http://pl.depositphotos.com/6124930/stock-photo-education-concept.html?ref=3830419
  11. http://pl.depositphotos.com/4065982/stock-photo-confident-teacher.html?ref=3830419
  12. http://pl.depositphotos.com/4759144/stock-photo-schoolboy-in-high-school-class.html?ref=3830419
  13. http://pl.depositphotos.com/5653361/stock-photo-mixed-race-ollege-student.html?ref=3830419
  14. http://pl.depositphotos.com/7758124/stock-photo-group-of-students.html?ref=3830419
  15. http://pl.depositphotos.com/9119603/stock-photo-throwing-graduation-hats.html?ref=3830419
  16. http://pl.depositphotos.com/45863285/stock-photo-collage-of-clever-teachers-close.html?ref=3830419

Satisfaction guaranteed

Connect With Us

INDICO S.C.

ul. Przyjaźni 9, 84-215 Gowino, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Pixelemu.com All rights reserved.