Including composer in a WordPress plugin and implementing autoload

Import HTML templates from separate file for custom WordPress plugin

Creating a sub menu for a side menu in a WordPress plugin

Building a basic Wordpress plugin

<p>To allow our plugin to be more developer friendly, we want to include composer to be able to split our code in multiple files and import already existing modules in our PHP plugin.</p>





<h2>Adding the composer.json in your plugin</h2>



<p>To use composer with our plugin, we want to add a composer.json file to the root of our plugin. To do this, we want to open up a terminal, go to our plugin's root and then run <code>composer init</code></p>



<p>There you will get a following command line setup screen</p>



<pre class="wp-block-code"><code>Package name (&lt;vendor&gt;/&lt;name&gt;) &#91;developer/my-first-plugin]: 
Description &#91;]: 
Author &#91;Victoryflame &lt;realvictoryflame@gmail.com&gt;, n to skip]: 
Minimum Stability &#91;]: 
Package Type (e.g. library, project, metapackage, composer-plugin) &#91;]: 
License &#91;]: GPL

Define your dependencies.

Would you like to define your dependencies (require) interactively &#91;yes]? no
Would you like to define your dev dependencies (require-dev) interactively &#91;yes]? no

{
    "name": "developer/my-first-plugin",
    "license": "GPL",
    "authors": &#91;
        {
            "name": "Victoryflame",
            "email": "realvictoryflame@gmail.com"
        }
    ],
    "require": {}
}

Do you confirm generation &#91;yes]? yes</code></pre>



<h2>Implementing autoload in composer.json</h2>



<p>Implementing autoload will allow us to import PHP classes from separate files. Lets add a new key/value pair in our composer.json configuration</p>



<pre class="wp-block-code"><code>"autoload": {
  "psr-4": {"Inc\\": "./inc"}
}</code></pre>



<p>This means that the namespace Inc will be in the inc folder.</p>



<p>Before we run composer install, lets add our PHP classes in their own files</p>



<h2>Moving PHP classes into their own files</h2>



<p>First lets create a file inside the inc files called Sidemenu.php</p>



<pre class="wp-block-code"><code>&lt;?php

  namespace Inc;

  use Inc\View;

  class Sidemenu {
    public static function addSideMenuItems() {
  
      $view = new View();
  
      $pages = array(
        array(
          'page_title' =&gt; 'Victoryflame Plugin', 
          'menu_title' =&gt; 'Victoryflame', 
          'capability' =&gt; 'manage_options', 
          'menu_slug' =&gt; 'victoryflame_plugin', 
          'callback' =&gt; array( $view, 'VictoryflameView'), // view-&gt;VictoryflameView
          'icon_url' =&gt; 'dashicons-store',
        )
      );
  
      $page = $pages&#91;0];
      add_menu_page( $page&#91;'page_title'], $page&#91;'menu_title'], $page&#91;'capability'], $page&#91;'menu_slug'], $page&#91;'callback'], $page&#91;'icon_url'] );
    }
  }</code></pre>



<p>Next, lets move our View class out into its own file</p>



<pre class="wp-block-code"><code>&lt;?php

  namespace Inc;

  class View {

    public function VictoryflameView() {
      echo '&lt;h1&gt; I am the page your menu directed you to&lt;/h1&gt;';
    }

  }
</code></pre>



<h2>Refactor existing code to use autoload to import classes</h2>



<p>In our my-first-plugin.php file, remove the classes that we moved over to our new files should be removed from it and we need to add the following just before our registerMenuPage function</p>



<pre class="wp-block-code"><code>
if ( file_exists( dirname( __FILE__ ) . '/vendor/autoload.php' ) ) {
	require_once dirname( __FILE__ ) . '/vendor/autoload.php';
}
</code></pre>



<p>This allows us to use our other PHP classes that are now inside different folders.</p>



<p>Next we want to modify the registerMenuPage function so we use our imported class. The below code refactors our function to do so</p>



<pre class="wp-block-code"><code>function registerMenuPage() {
  Inc\Sidemenu::addSideMenuItems();
}</code></pre>



<p>Finally, we need to update the code that checks to see if our class exists, because we now have it in a different location</p>



<pre class="wp-block-code"><code>if ( class_exists( 'Inc\\Sidemenu' ) ) {
  add_action( 'admin_menu', 'registerMenuPage' );
}</code></pre>





<p></p>

<p>If you've ever installed a WordPress plugin from the plugin store, you'd know that after you install the plugin, you need to activate the plugin.</p>



<p>Likewise, for your own plugins, you need to activate them.</p>



<p>The first thing we want to do is go into the plugins folder in our Wordpress folder. The path you'd need to look for would be </p>



<p><code>${Your-Wordpress-Folder-Name}/wp-content/plugins</code></p>



<p>Now lets create a folder named my-first-plugin with the two PHP files inside it, <code>index.php</code> and <code>my-first-plugin.php</code></p>



<p>Inside the index.php file, we just want to leave it blank</p>



<pre class="wp-block-code"><code>&lt;?php
  // silence is golden</code></pre>



<h2>Adding Header Fields </h2>



<p>Header fields tell WordPress that our file involves a plugin, and gives us information about the plugin. </p>



<p>Here are the following headers we're going to add to our plugin</p>



<ul><li>Plugin Name</li><li>Description</li><li>Version</li><li>Author</li><li>Author URI</li><li>License</li></ul>





<h3>Plugin Name</h3>



<p>The name of our plugin. For this plugin, I'm just going to name it <code>My First Plugin</code></p>



<pre class="wp-block-code"><code>&lt;?php
  /**
   * @package My First Plugin
   */

   /*
    Plugin Name: My First Plugin
   */</code></pre>



<h3>Description</h3>



<p>Describes our plugin, we can just state what our plugins purpose is for</p>



<pre class="wp-block-code"><code>&lt;?php
  /**
   * @package My First Plugin
   */

   /*
    Plugin Name: My First Plugin
    Description: This is my first attempt on writing a custom Plugin for this amazing tutorial series.

   */</code></pre>



<h3>Version</h3>



<p>What version of your plugin do you want to indicate we're on. I'm going to just set mine as 1.0.0</p>



<h3>Author</h3>



<p>Name of the author of the plugin, I'm going to just use my own</p>



<h3>Author URI</h3>



<p>The link to the authors website, which I will also use my own site for this. If you don't have your own website, or just don't want to add your own site, feel free to omit this.</p>



<h3>License</h3>



<p>According to Wordpress.org's guidelines, </p>



<figure class="wp-block-pullquote"><blockquote><p>any GPL-compatible license is acceptable, using the same license as WordPress — “GPLv2 or later” — is strongly recommended.</p><cite>https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#the-guidelines</cite></blockquote></figure>



<p>So I'm going to set the license to be <em>GPLv2 or later</em></p>



<pre class="wp-block-code"><code>&lt;?php
  /**
   * @package My First Plugin
   */

   /*
    Plugin Name: My First Plugin
    Description: This is my first attempt on writing a custom Plugin for this amazing tutorial series.
    Version: 1.0.0
    Author: Victoryflame
    Author URI: victoryflame.com
    License: GPLv2 or later
  */</code></pre>

Making our own plugin available to add WordPress

Creating a Side Menu for a WordPress plugin

<p>We're going to want to add a side menu to our WordPress plugin. To do this, we're going to want to use the <code>add_menu_page</code> function</p>



<h2>About the add_menu_page function</h2>



<p>The <code>add_menu_page</code> function allows us to add a menu to our WordPress plugin.</p>



<h2>The add_action hook</h2>



<p>The add_action hook is a function that happens after a specific action is called. Somewhere in the WordPress core, do_action will be called.</p>



<p>So first we'd add our action, along with a callback, then we'd do an action, and when we do that action, the callback we had passed into add_action will fire.</p>





<ol><li>First we call add_action for the specific action we want in our plugin</li><li>Then do_plugin fires its action, which results in call the callbacks for add_action to be fired afterwards</li></ol>



<h2>Adding the side menu in our code</h2>



<p>In our <code>my-first-plugin.php</code> file, we want to call add_action, and from there we call our callback function. Lets define the callback function we're going to use.</p>



<p>I'm going to name my callback function, registerMenuPage.</p>



<p>Next I'm going to set the following values:</p>



<ul><li>page_title</li><li>menu_title</li><li>capability</li><li>menu_slug</li><li>icon_url</li></ul>



<pre class="wp-block-code"><code>function registerMenuPage() {
  $page = array(
        'page_title' =&gt; 'Victoryflame Plugin', 
        'menu_title' =&gt; 'Victoryflame', 
        'capability' =&gt; 'manage_options', 
        'menu_slug' =&gt; 'victoryflame_plugin',
        'callback' =&gt; '',
        'icon_url' =&gt; 'dashicons-store', 
      );
   add_menu_page( $page&#91;'page_title'], $page&#91;'menu_title'], $page&#91;'capability'], $page&#91;'menu_slug'], $page&#91;'callback'], $page&#91;'icon_url'] );

}</code></pre>





<p> Now when you reload the page, you should see a menu item that says 'Victoryflame' on it. Its indicated by the red rectangle I've added onto the page (by adding it to the screenshot). The reason it says Victoryflame is because I set the menu title to Victoryflame.</p>



<figure class="wp-block-image size-large"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2021/05/Screen-Shot-2021-05-29-at-2.26.02-PM-1-1024x594.png" alt="" class="wp-image-1211"/></figure>



<h2>Having our side menu do something when we click on it</h2>



<p>Now that we have our side menu, we want it to actually do something. When we currently click on it, we get sent to WordPress' not found page. So next we want our WordPress application to send us to a page we create</p>



<p>For now, this page will be a blank page with some text on it.</p>



<h2>Creating the page our menu item will point to.</h2>



<p>Lets create a class called <code>Views</code> in our my-first-plugin.php file.</p>



<p>In there we will have a function called VictoryFlameView, which will return a string of HTML. Add this class just before the Menu</p>



<pre class="wp-block-code"><code>class View {

  public function VictoryflameView() {
    echo '&lt;h1&gt; I am the page your menu directed you to&lt;/h1&gt;';
  }

}</code></pre>



<h2>Connecting our view to our menu page</h2>



<p>Now that we've created our view, we want it to point to our page.</p>



<p>The way we do this is using the callback parameter we left as a blank string earlier.</p>



<p>So first, lets instantiate an instance of our view class inside our <code>addSideMenu</code> function in our SideMenu class.</p>



<pre class="wp-block-code"><code> public static function addSideMenuItems() {

    $view = new View();

    $pages = array(
      array(
        'page_title' =&gt; 'Victoryflame Plugin', 
        'menu_title' =&gt; 'Victoryflame', 
        'capability' =&gt; 'manage_options', 
        'menu_slug' =&gt; 'victoryflame_plugin', 
        'callback' =&gt; '',
        'icon_url' =&gt; 'dashicons-store',
      )
    );

    $page = $pages&#91;0];
    add_menu_page( $page&#91;'page_title'], $page&#91;'menu_title'], $page&#91;'capability'], $page&#91;'menu_slug'], $page&#91;'callback'], $page&#91;'icon_url'] );
  }
}</code></pre>



<p>Next we want to to make our callback point to our function inside the View class. But we cant just pass in a function as a string, like we do for add_action. The reason being that the function we want to access is behind the View class.</p>



<p>We could always get rid of the class and just have functions by themselves but then this poses two problems</p>



<ul><li>Using classes helps organize our code together</li><li>Even if we don't want to use classes, we should have the option to use a class to organize what views we want to set in our menu.</li></ul>



<p>For passing in a function that's part of a class, we need to pass in an array where the first element is the instance of our class, and the second value is the function from the class we want to pass in</p>



<pre class="wp-block-code"><code>array($instanceOfOurClass, 'functionFromClassWeWantToCall');</code></pre>



<p>So in our case we want to pass in the variable view as our first value, which is an instance of our View class, and pass in 'VictoryflameView' as our second value, the function we want to call.</p>



<pre class="wp-block-code"><code>    $view = new View();

    $pages = array(
      array(
        'page_title' =&gt; 'Victoryflame Plugin', 
        'menu_title' =&gt; 'Victoryflame', 
        'capability' =&gt; 'manage_options', 
        'menu_slug' =&gt; 'victoryflame_plugin', 
        'callback' =&gt; array( $view, 'VictoryflameView'), // view-&gt;VictoryflameView
        'icon_url' =&gt; 'dashicons-store',
      )
    );
</code></pre>



<p>Now when we go click on our menu item we get the following page</p>



<figure class="wp-block-image size-large"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2021/06/Screen-Shot-2021-06-02-at-10.41.21-PM-1024x518.png" alt="" class="wp-image-1218"/></figure>





<p></p>

<p><br>WordPress powers 70% of the internet, but as a websites ambitions grow, the existing functionality within WordPress might not be enough to do the things we want to do. We would need to extend the functionality that WordPress provides us, and we would do this by creating a plugin in WordPress.</p>



<h2>The WordPress plugin store</h2>



<p>WordPress has a plugin store where you can download plugins made by others. You might find a plugin that works for your specific need and wont need to bother creating a plugin.</p>



<p>For example, WPGraphQL is seen as a solid robust plugin to create a GraphQL endpoint and there likely isn't any need for you to create your own plugin like it.</p>



<p> However not every business is the same and there may be an instance where you need specific functionality for your use case.</p>



<h2>About our plugin</h2>



<p>The plugin we create will do the following:</p>



<ul><li>Return posts from WordPress</li><li>Return Tags and Categories from WordPress</li><li>Give us the ability to search for Posts and filter by name, tags and categories</li></ul>



<p>This seems pretty simple, and we're only reading existing information using our plugin, but its important that we start small to understand the building blocks of creating a plugin </p>



<h2>What you'll need</h2>



<ul><li>A local instance of WordPress running on your machine.</li><li>Knowledge of HTML, CSS, and PHP</li></ul>





<p></p>

Tutorials, articles and quizzes on Software Development

More Articles