block3

Block 3 is our “build our first functional plugin” class in the WordPress plugin development series. Click here to find the other blocks on the chain.

Now that we’ve setup our development environment, setup our IDE, and have reviewed the WordPress mechanisms to activate and communication with a plugin, we are ready to dive into building our first functional plugin. A BTC donations plugin based on a decent but not-recently-updated plugin by Bitmate.

Materials

The Blockyard “Bitcoin Donations” Repo

This is the repo we will start with when we want to start saving our code. It is not necessary to have this forked to start class. This is for reference to follow along in class:

git@gitlab.com:blockyard/blockyard-bitcoin-donations.git

https://gitlab.com/blockyard/blockyard-bitcoin-donations.git

Your destination folder should be in your Vagrant www/wordpress-two/public_html/wp-content/plugins directory.

Name it blockyard-bitcoin-donations for consistency.

A note about this repo:

The main repo is our “touchpoint” source repo. The master branch will continue to evolve as class continues.

The repo will also contain branches at key points in class.

Branches are typically used to track code “paths” and often include multiple commits related to a specific objective. At this point in class the main repo is using branches to provide simple way for people to follow along if the miss class. They serve as markers on the master branch to indicate key junctions in the class. Our current branches include:

  • genesis – where we started class with block 3 when people forked the repo this is what they had to start with.
  • shortcode_output_end_of_block3 – where we ended block 3 class with a plugin that adds a shortcode to WordPress. When used it spits out text in the point on the page where the shortcode was placed.

If you read the commit history (from bottom up) you can see that I try to keep commits small so you can follow along step-by-step.

The Bitmate Author Donations Plugin

This will be our baseline plugin that we are going to snarf code from to help us jump start our own simpler variation of this plugin. Install this using the WordPress admin interface on your WordPress Two site in your Blockyard Vagrant box.

https://wordpress.org/plugins/bitmate-author-donations

Class Outline

Fork It

Login to your GitLab account. Don’t have one? Create one and login.

Go to the repo site and click on the Fork button (top right near the rating etc. block).

Copy it to your account namespace.

This creates your own working copy, isolated from everyone else.

Click on the clone button and copy the repo address. If you’ve set up SSH access to GitLab you can use the SSH address. If you do not know what that is or have not yet done this use the HTTPS address.

We’ll use that address in a minute.

Start a phpStorm “new project from existing files”

That nuance is important. Not new project. Don’t do that. I do that EVERY freakin’ time…

Make sure you go to phpStorm and choose “New project from existing files”.

Now surf to the www/wordpress-two/public_html folder inside of that VVV directory you put on your laptop. This is what you want to use to start your new phpStorm project for this class.

Note: You will need to have already done the vagrant up and got the local Virtualbox machine running. If you cannot surf to http://vvv.test/ the box is not running and there is a chance the www subdirectories have not been created yet.

Clone YOUR copy of the repo into phpStorm

Start by expanding the public_html section of your project view pane on the left side of phpStorm.

Expand wp-content so you can see the plugins subfolder.

Click on that so it remains highlighted. This should make the VCS clone easier as it will type in the full path for the destination of your cloned code you are about to make.

With your new phpStorm “wordpress-two” project open go to the VCS menu in the top menu bar.

Choose git.

Choose clone.

In the URL box paste your git repo URL you copied during the fork steps noted above.

Make sure your path in the bottom folder box is the full path to the plugin you want to make. It SHOULD auto-type in the full path… on my MacOS box it looks like this:

You should now have the latest code from the class.

Do not have git installed?

phpStorm should prompt you to install it if this is the first time you’ve used git on your system. Most coding tools will install this if you’ve ever used git version control. Many Android and web app projects will install this automatically. If not, let phpStorm start the git install and follow the default options. You are working solo on your own copy of the repo so things like line-endings will not matter.

Missed Block 3 class?

You can see what we started with by checking out the genesis tag. The repo will automatically show you the latest commit on the master branch, which will include the most recent things we’ve worked on. Essentially showing you the code where class ENDED.

To get where we STARTED after you’ve cloned the repo into your plugin directory…

Go to the VCS menu.

Choose git and then branches.

Look for the “remote branches” part of the window that comes up and locate the “genesis” branch.

Click on “genesis” and choose “Checkout as…” and let it use the default local branch name of “genesis”.

Your code files will now be on where class started.

You can click on the files in the project pane on the left of the workspace and see where we started.

And to follow along….

Open the “Version Control” tab on the BOTTOM of the phpStorm window.

On the top edge of that new window that slid up, click on the log tab.

Now you should see the commit history.

Right click on the next commit up from the one that is checked out (all included commits you have locally are highlighted) and choose “checkout revision”.

The version control pane at the bottom of phpStorm

You can do this on each commit, looking through the code at each step to see the progression. Or just jump ahead to the latest commit and read code comments to see what we’ve done.


%d bloggers like this: