Briefing – STATUS: INCOMPLETE

This wordpress plugin is actually my first plugin and at the time of writing this post is is still unfinished BUT i am getting closer to being done.  The purpose behind this plugin is to learn how plugins work and are written. After about 5 hours I was successful in creating a multi page plugin that logged in, had an activation and deactivation section,

html help, css html, plugin information page, colour palettes and so on. As I developed this code I was continually growing and learning how to connected css in php and how to add html in php. I was really amazed how easy it was considering I had really no php knowledge although I am very familular with reading many coding languages.

Project

Web Design for Optimization Plugin – INCOMPLETE

Purpose

Student Aid Plugin

What I Did

Coding, CSS and Graphics

Download the Plugin
Download Plugin
Download the Source CSS
Download Now
Inspiration
Show Me Where

This it is a sample of the code in the main php file.

<?php
/**
*Plugin Name: COMP5062 Webdesign for Optimization
*Description: This is the plugin for the Webdesign for Optimization Course at Fanshawe College
*Version: 1.4
*Author: Matthew Schonewille
*Author URI: http:www.fanshaweprof.com
*License: GLP2
*License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*Text Domain:  wporg
*Domain Path:  /languages
**/

add_action( 'admin_menu', 'addmenu');

function addmenu() {
  add_menu_page('Comp5062 Menu', 'Comp5062 Menu', 4, 'comp5062-menu', 'comp5062Menu', '
dashicons-admin-site');
  add_submenu_page('comp5062-menu', 'Google Analytics', 'Google Analytics', 4, 'google-analytics', 'googleAnalytics');
  add_submenu_page('comp5062-menu', 'Website SEO', 'Website SEO', 4, 'website-seo', 'websiteSEO');
  add_submenu_page('comp5062-menu', 'HTML Help', 'HTML Help', 4, 'html-help', 'htmlHelp');
  add_submenu_page('comp5062-menu', 'CSS Help', 'CSS Help', 4, 'css-help', 'cssHelp');
  add_submenu_page('comp5062-menu', 'Course Evaluations', 'Course Evaluations', 4, 'evaluations', 'evaluations');
  add_submenu_page('comp5062-menu', 'Other WordPress Info', 'Other WordPress Info', 4, 'other-wordpress-info', 'otherInfo');
}

function comp5062Menu() {

  require 'comp5062menu.php';

}

//This is the function for the Custom Google Analytics to input in the page headers
function googleAnalytics() {

  require 'googleanalytics.php';

}
//This is the script that updates and validates the input code
function comp5062_scripts_page()
{

  if(array_key_exists('submit_scripts_update',$_Post))
  {
    update_option('comp5062_google_analytics_scripts',$_Post['googleanalytics_scripts']);

    ?>
    <div id="setting-error-settings-updated" class="update_settings_error notice is-dissmissible"><strong>Settings have been saved.</strong></div>
    <?php
  }
    $googleanalytics_scripts = get_option('comp5062_google_analytics_scripts', 'Paste code here');
}

/** This Function pastes the google analtyics tracking code in the header */
      function comp5062_display_googleanalytics_scripts()
      {
        $googleanalytics_scripts = get_option('comp5062_googleanalytics_scripts', 'none');
        print $googleanalytics_scripts;
      }
      add_action('wp_head', 'comp5062_display_googleanalytics_scripts');


function websiteSEO() {

  require 'websiteseo.php';

}

//This is a function to create the content for the submenu that is connected to it. The Function is named the same as the add_submenu_page function and executes the correct .php page to show when you click on the menu item.
function htmlHelp() {
  //require statement pulls the correct page and fills the content in that section of the page. In this case it is pulling the htmlhelp.php file that is also in the root folder.
    require 'htmlhelp.php';

}

function cssHelp() {

  require 'csshelp.php';

}

function otherInfo() {

    require 'otherinfo.php';

}

function evaluations() {

    require 'evaluations.php';

}

?>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  outline: 0;
}

body {
  background: linear-gradient(#485fed, rgba(255, 44, 118, 0.25)), #485fed;
  background-attachment: fixed;
  height: 100vh;
  padding: 3rem 0;
  padding-right: 20px;
  margin: 0;
  color: #555;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}

.container {
  width: 90%;
  margin: auto;
}

.mobile-wrapper {
  background: #fff;
  /* relative with .today-box::before*/
  z-index: 1;
  /*positive*/
  position: relative;
  /*---------*/
  max-width: 1200px;
  min-height: 100%;
  margin: auto;
  padding: 10px 0 20px;
  border-radius: 10px;
  box-shadow: 0px 10px 30px -10px #000;
  overflow: hidden;
}

.header {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 40px;
}
.header .container {
  position: relative;
}
.header .container span {
  color: #444;
  font-family: 'Ramabhadra';
  font-size: 21px;
  font-weight: 700;
}
.header .container h1 {
  margin-top: 5px;
  color: #919294;
  font-size: 13px;
  font-weight: 300;
}
.header .container .menu-toggle {
  width: 25px;
  height: 25px;
  background: #fff;
  padding: 24px;
  border-radius: 50%;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10px 30px -14px #000;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.header .container .menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: #777;
  border-radius: 2px;
  transition: all 300ms ease;
}
.header .container .menu-toggle span:not(:last-child) {
  margin-bottom: 5px;
}
.header .container .menu-toggle span:first-child {
  width: 20px;
}
.header .container .menu-toggle span:last-child {
  width: 15px;
}
.header .container .menu-toggle:hover span:first-child, .header .container .menu-toggle:hover span:last-child {
  width: 100%;
}
.header .container::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left-color: #e8e8e8;
  position: absolute;
  bottom: -13px;
  right: 0px;
}
.header .container::after {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: 2px;
  background-color: #e8e8e8;
  position: relative;
  top: 8px;
}

.today-box {
  background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;
  color: #FFF;
  padding: 37px 40px;
  position: relative;
  box-shadow: 0px 0px 40px -9px #485fed;
  margin-bottom: 50px;
}
.today-box::before {
  content: "";
  background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;
  opacity: 0.4;
  z-index: -1;
  display: block;
  width: 100%;
  height: 40px;
  margin: auto;
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translatex(-50%);
  border-radius: 50%;
  box-shadow: 0px 0px 40px 0 #485fed;
}
.today-box .breadcrumb {
  font-weight: 300;
  position: relative;
}
/*.today-box .breadcrumb::after {
  content: "\f3d1";
  font-family: 'Ionicons';
  vertical-align: middle;
  font-size: 12px;
  font-weight: 100;
  display: inline-block;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 45px;
  top: 3px;
}*/
.today-box .date-title {
  font-size: 20px;
  color: #ffffff;
  margin: 7px 0 0 0;
  letter-spacing: 1px;
  font-weight: 600;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
}
/*.today-box .plus-icon {
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0px 10px 30px -14px #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 40px;
  cursor: pointer;
  transition: all 350ms ease;
  transition-timing-function: cubic-bezier(0.05, 1.8, 1, 1.57);
}
.today-box .plus-icon:hover {
  transform: translateY(-40%);
}
.today-box .plus-icon i {
  font-size: 22px;
  font-weight: 700;
  background: #fff;
  color: #777;
  width: 45px;
  height: 45px;
  border: 6px solid #485fed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.today-box .plus-icon:active {
  top: 52%;
  transform: translatey(-52%);
  right: 38px;
  box-shadow: 0px 8px 30px -14px #000;
}
*/
.upcoming-events .container h3 {
  color: #333;
  font-size: 17px;
  margin-bottom: 30px;
  position: relative;
}
.upcoming-events .container h3::before {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background-color: #e8e8e8;
  position: absolute;
  top: 60%;
  transform: translatey(-60%);
  right: 0;
}
/*.upcoming-events .container h3::after {
  content: "\f3ff";
  font-family: 'Ionicons';
  color: rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  font-size: 36px;
  font-weight: 100;
  display: inline-block;
  background: #fff;
  color: #919294;
  width: 38px;
  text-align: center;
  position: absolute;
  right: 60px;
  top: -10px;
}*/
.upcoming-events .container .events-wrapper {
  margin-bottom: 30px;
}
.upcoming-events .container .events-wrapper .event {
  position: relative;
  margin-bottom: 25px;
  padding-left: 30px;
  /*cursor: pointer;*/
}
.upcoming-events .container .events-wrapper .event i {
  font-size: 24px;
  font-weight: 100;
  position: absolute;
  left: 0;
  top: -4px;
}
.upcoming-events .container .events-wrapper .event .event__point {
  margin: 0;
  margin-bottom: 5px;
  color: #555;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}
.upcoming-events .container .events-wrapper .event .event__point_sub {
  margin: 0;
  padding-top: 10px;
  color: #555;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}
.upcoming-events .container .events-wrapper .event .event__duration {
  position: relative;
  right: 0;
  color: #999;
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
}
.upcoming-events .container .events-wrapper .event .event__description {
  margin: 0
  color: #919294;
  font-size: 13px;
  font-weight: 300;
}
.upcoming-events .container .events-wrapper .event.active {
  background: #e8e8e8;
  padding: 17px 0 5px 60px;
  margin-bottom: 38px;
  border-radius: 5px;
}
.upcoming-events .container .events-wrapper .event.active::after {
  content: "";
  display: block;
  width: 90%;
  height: 10px;
  background: #fff;
  border: 2px solid #ddd;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translatex(-50%);
}
.upcoming-events .container .events-wrapper .event.active i {
  position: absolute;
  left: 25px;
  top: 17px;
}
.upcoming-events .container .events-wrapper .event.active .event__description::before, .upcoming-events .container .events-wrapper .event.active .event__description::after {
  content: "\f3d1";
  font-family: 'Ionicons';
  font-size: 32px;
  display: inline-block;
  color: #919294;
  text-align: center;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.upcoming-events .container .events-wrapper .event.active .event__description::before {
  right: 45px;
  font-size: 22px;
  transition: all 550ms ease;
  transition-timing-function: cubic-bezier(0.05, 1.8, 1, 1.57);
}
.upcoming-events .container .events-wrapper .event.active:hover .event__description::before {
  transform: translate(15px, -12px);
}

.hot {
  color: #ee6b51;
}

.done {
  color: #999 !important;
}

.icon-in-active-mode {
  color: #43ff28;
  font-size: 20px !important;
}

.upcoming {
  font-weight: bold;
  color: #777;
}

.add-event-button {
  display: flex;
  align-items: center;
  margin-left: auto;
  border: 0;
  padding: 0;
  background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 0px 40px -9px #485fed;
}
.add-event-button:active {
  position: relative;
  top: 2px;
  left: 2px;
}
.add-event-button .add-event-button__title {
  color: #FFF;
  padding: 0 18px 0 23px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  font-family: 'Lato';
  font-size: 15px;
  font-weight: 600;
}
.add-event-button .add-event-button__icon {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 0 17px 0 12px;
  height: 100%;
}
.add-event-button .add-event-button__icon i {
  margin: 0;
  color: #fff;
  font-size: 25px;
  padding: 13px 0;
}

a:link {
  text-decoration:none;
  color: #ffffff;
}
a:hover {
  color: #e6ffff;
}
Matt-image

Matthew is a Marketing Professor at Fanshawe College who specializes in technical marketing but has dabbled in many graphic disciplines from animation to graphic design and photography to web development. Besides teaching thousands of students over his various online platforms, he has created a number of companies including Eagleye Photography Inc, Behind the Curtain and FLT- Free lightroom tutorials.com. Matthew holds a Masters of Technology Entrepreneurship and Innovation from McMaster University (Ontario, Canada), a Bachelor of Education degree and Bachelor of Arts degree with Honors.