was successfully added to your cart.
CorePlugin DevelopmentPlugins

Plugin Development – Web Design for Optimization V1

By November 20, 2018 No Comments

Web Design Plugin Development: Version 1

Welcome!  In this post i’ll be covering my first experience in plugin development with the first version of my web design for optimization plugin I was designing for my class. It’s an information based plugin that is there to help my marketing students to keep on top of what they have to do with the class (web design for optimization class) and deadlines etc.

Before we get started, I knew nothing about php until about 4 hours before I started to create this plugin. I know html and css but php was very new to me. I searched out some tutorials online and soon enough I realized that there are only a few things needed to actually start to build a plugin. All you technically need is one file, in this case I called it “webdesign_for_optimization.php and in the header of the plugin you need some of the following:

<?php

/**
*Plugin Name: COMP5062 Webdesign for Optimization
*Description: This is the plugin for the Webdesign for Optimization Course at Fanshawe College
*Version: 1.0
*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
**/

?>

Technically you do not need everything there but it comes very close to the header boiler plate from wordpress themselves. In reality Im sure you only needed these few lines.

<?php

/**
*Plugin Name: COMP5062 Webdesign for Optimization
*Description: This is the plugin for the Webdesign for Optimization Course at Fanshawe College
*Version: 1.0
*Author: Matthew Schonewille
*Author URI: http:www.fanshaweprof.com
**/

?>

This allows wordpress to see and ultimately know that your plugin is real despite not having any actual content in it. After I learned that basic input I started to create my menu and pages.

Creating My Main Menu and Pages

In wordpress plugin development you need to call actions and then create a function to be executed to create what you want. In this case I needed to call the add_action() to call the correct admin menu and then the name I wanted the function to use in my code.

add_action( 'admin_menu', 'addmenu');

function addmenu() {
  add_menu_page('Comp5062 Menu', 'Comp5062 Menu', 4, 'comp5062-menu', 'comp5062Menu', 'dashicons-admin-site');

As you will notice the first part of the add_action( ‘admin_menu’ … defines where I want the menu to go and in this case I wanted a separate menu on the left side. Then the second part ‘addmenu’ ) is the name I will use in the function.

WordPress has broken it down a bit simpler.

add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Plugins can specify that one or more of its PHP functions are executed at these points, using the Action API. (wordpress.org)

Parameters

$tag

(string) (Required) The name of the action to which the $function_to_add is hooked.

$function_to_add

(callable) (Required) The name of the function you wish to be called.

$priority

(int) (Optional) Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.

Default value: 10

$accepted_args

(int) (Optional) The number of arguments the function accepts.

Default value: 1

Adding in a Function

After the action comes the function and in this case the function was named “addmenu” based on the last parameter in the add_action hook I created before.

function addmenu() {
  add_menu_page('Comp5062 Menu', 'Comp5062 Menu', 4, 'comp5062-menu', 'comp5062Menu', 'dashicons-admin-site')

The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site through PHP code. You can use it to call native PHP functions, WordPress functions, or to define your own functions.

Alternatively, you can place your custom PHP code into your own WordPress Plugin, or simply use a “functionality” plugin such as the Code Snippets plugin to manage your custom PHP snippets.

There are differences between using a plugin and a functions.php file.

A WordPress Plugin:

  • Executes only when individually activated via the Plugins panel.
  • Applies to all themes.
  • Requires specific unique Header text.
  • Is stored in wp-content/plugins, usually in a subdirectory.

A functions file:

  • Executes only when in the currently activated theme’s directory.
  • Applies only to that theme. If the Theme is changed, the functionality is unused.
  • Requires no unique Header text.
  • Is stored with each Theme in the Theme’s subdirectory in wp-content/themes.

 

Creating My Page Content

When I first started to see that the add_action hook worked and that the function was creating the page I wanted, the next step was to put content on the page because a blank page is….. boring.

I had no idea how to link pages to other page in php so I first learned how to link my conent from a function to a menu item called a sub_menu_page. The code looks like this.

add_submenu_page( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '' )

 

This function takes a capability which will be used to determine whether or not a page is included in the menu. The function which is hooked in to handle the output of the page must check that the user has the required capability as well. (wordpress.org)

Parameters

$parent_slug

(string) (Required) The slug name for the parent menu (or the file name of a standard WordPress admin page).

$page_title

(string) (Required) The text to be displayed in the title tags of the page when the menu is selected.

$menu_title

(string) (Required) The text to be used for the menu.

$capability

(string) (Required) The capability required for this menu to be displayed to the user.

$menu_slug

(string) (Required) The slug name to refer to this menu by. Should be unique for this menu and only include lowercase alphanumeric, dashes, and underscores characters to be compatible with sanitize_key().

$function

(callable) (Optional) The function to be called to output the content for this page.

Default value: ”

After I stumbled through this with many failures, I ended up with this being the submenu page string.

add_submenu_page('comp5062-menu', 'Website SEO', 'Website SEO', 4, 'website-seo', 'websiteSEO');

This function calls a submenu page to be created underneath of the main menu item and then defines where it fits in priority, who can edit it and what page it is connected to. As I have no idea to connect pages, the last string ‘websiteSEO’ ) is connected to a function that creates the content for that menu item.

function websiteSEO() {
  ?>
  <div class='wrap'>
    <h2>What is Search Engine Optimization (SEO)?</h2>
        <p>SEO is a marketing discipline focused on growing visibility in organic (non-paid) search engine results. SEO encompasses both the technical and creative elements required to improve rankings, drive traffic, and increase awareness in search engines. There are many aspects to SEO, from the  words on your page to the way other sites link to you on the web. Sometimes SEO is simply a matter of making sure your site is structured in a way that search engines understand.

        SEO isn't just about building search engine-friendly websites. It's about making your site better for people too. At Moz we believe these principles go hand-in-hand.

        This guide is designed to describe all areas of SEO—from finding the terms and phrases (keywords) that generate traffic to your website, to making your site friendly to search engines, to building links and marketing the unique value of your site. If you are confused about this stuff, you are not alone, and we're here to help.</p>
        <iframe width="720" height="405" src="https://www.youtube.com/embed/hF515-0Tduk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h2>Why does my website need SEO?</h2>
        <p>The majority of web traffic is driven by the major commercial search engines, Google, Bing, and Yahoo!. Although social media and other types of traffic can generate visits to your website, search engines are the primary method of navigation for most Internet users. This is true whether your site provides content, services, products, information, or just about anything else.

        Search engines are unique in that they provide targeted traffic—people looking for what you offer. Search engines are the roadways that make this happen. If search engines cannot find your site, or add your content to their databases, you miss out on incredible opportunities to drive traffic to your site.

        Search queries—the words that users type into the search box—carry extraordinary value. Experience has shown that search engine traffic can make (or break) an organization's success. Targeted traffic to a website can provide publicity, revenue, and exposure like no other channel of marketing. Investing in SEO can have an exceptional rate of return compared to other types of marketing and promotion.</p>
    <h2>Why can't the search engines figure out my site without SEO?</h2>
        <p>Search engines are smart, but they still need help. The major engines are always working to improve their technology to crawl the web more deeply and return better results to users. However, there is a limit to how search engines can operate. Whereas the right SEO can net you thousands of visitors and increased attention, the wrong moves can hide or bury your site deep in the search results where visibility is minimal.

        In addition to making content available to search engines, SEO also helps boost rankings so that content will be placed where searchers will more readily find it. The Internet is becoming increasingly competitive, and those companies who perform SEO will have a decided advantage in visitors and customers.</p>
    <h2>Can I do SEO for myself?</h2>
        <p>The world of SEO is complex, but most people can easily understand the basics. Even a small amount of knowledge can make a big difference. Free SEO education is widely available on the web, including in guides like this. Combine this with a little practice and you are well on your way to becoming a guru.

        Depending on your time commitment, your willingness to learn, and the complexity of your website(s), you may decide you need an expert to handle things for you. Firms that practice SEO can vary; some have a highly specialized focus, while others take a broader and more general approach.

        In any case, it's good to have a firm grasp of the core concepts. </p>

        <p><a href="https://moz.com/beginners-guide-to-seo">Credit Resource - https://moz.com/beginners-guide-to-seo</a></p>
      </div>
  <?php
}

As you will notice in the code above, if you want to put html in the php, you need to exit the php and when reenter it when you are done with the html. Super interesting but frustrating when you get it wrong.

Below is what the page looked like. As you can see it’s really basic BUT it’s displaying what I wanted and is a working page connected in the menu. SUCCESS.

Next Steps.

Next was to create some more pages and then learn how to create separate pages that didn’t mess up my code in the main (index) webdesign_for_optimization.php page. See, what I learned was the clean code that is structurally sound and easy to read is what I wanted and needed. As I progressed to further revisions of this plugin it’s amazing how the code cleaned up and standards became normal.

I hope you enjoyed this post and learned what you came for. If your looking for more information on wordpress plugins check out my post called “WordPress Plugins Explained”.  As you can see I’m writing it in more of a teaching monologue type style and we will see how it goes. Make sure you download the source code and see what I did in more detail and I hope it helps you create you first plugin and how you what works and what not to do. 🙂

Thanks again,

Matthew

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.

Leave a Reply