wpherocoder.com Website

How to Create WordPress Plugin

How to Create WordPress Plugin

The most important reason to create a plugin is that it allows you to separate your own code from the WordPress core code.

If something were to go wrong with your plugin, the rest of the site will generally continue to function.

If there is one cardinal rule in WordPress development, it would be this: Do not touch WordPress core.

In other words, do not edit core WordPress files to add functionality to your site, because WordPress overwrites core files with each update.

If you need more information on what a WordPress plugin is about. Please read our Beginner’s Guide To WordPress Plugins guide.

The concepts that are covered in this guide.

  • Creating an Admin Menu and Page
  • Styling your Admin Page using WP CSS styling
  • Interacting with WP Database such via $wpdb object

NOTE: Our project will be displaying posts that are in draft mode, you will want to make sure you have a few draft mode posts already created in WordPress.

PostsWithinWordPress

We will start out by creating a new folder and naming it the same name as our plugin.

In our example we will name it myfirstplugin and we will put all the code within the folder.

myfirstpluginfolder

Create a new php file and name it MyFirstPlugin.php.

MyFirstPluginfile

Next, we will need to create the Plugin header.

The Plugin header is the most important piece of code because it enables WordPress to recognize your Plugin.

When creating the Plugin header, you should always be descriptive and actuate as possible.

Whatever data you put inside this section is the information that will be displayed in the Plugins page.

You will need to setup FileZilla or a similar software with your hosting connection information.

Copy the myfirstplugin folder over to your hosting server using FTP and paste it in the Plugins folder /wp-content/plugins.

Login to the WordPress administration panel and then click on the Plugins menu.

You will notice that our Plugin has been recognized by WordPress.

From here we can activate the Plugin, remember that our Plugin will not do much at this point.

You will notice that our Plugin has been activated by WordPress.

On the right is the listed information from the Plugin header: description, version, author, and author URI.

Now we are ready to start building some functionality within our Plugin.

Open the MyFirstPlugin.php file in Visual Studio Code editor or your favorite coding editor.

We are going to build a single menu item and we will create a menu under the WordPress existing Settings menu.

After the Plugin header add the following code.

In the above code we are using the admin menu hook ‘admin_menu’ to add our submenu.

We written a function which contains the code required to add the submenu.

The add_options_page function will add a submenu to the Settings menu.

There are five arguments in the add_options_page:

  • The first argument is the title of the page which will be shown in the HTML title tags.
  • The second argument is the name of our submenu as it will be displayed in the dashboard.
  • The third argument is the capability of who can view this submenu – administrators only can view the page.
  • The fourth argument is the menu slug. In our example we are using a PHP constant, which gives the full path of the file name and the name of our plugin file.
  • The fifth argument is the function that will display our menu page.

We need to finish adding the myfirstplugin_admin function in our plugin.

The class=”wrap” is its own CSS class within WordPress.

It will keep the styling of our menu consistent with the general styling of the WordPress administration pages.

Notice that our HTML code is separated from our PHP code and that it is placed outside of the PHP tags.

This technique is used whenever you need to add HTML code within your PHP code.

Next, we are going to add a table using HTML and make it consistent within the WordPress styling of the administration pages.

We are referencing to a CSS class called wide fat and styling the table.

When using the wide fat class, it has specific styles set for the <thead> and <tfoot> HTML tags.

The wide fat class styles the header and the footer of our table to match all other tables in the administration dashboard of WordPress.

Save your changes then copy the myfirstplugin folder over to your hosting server using FTP and paste it in the Plugins folder /wp-content/plugins.

In the WordPress administration page, Settings menu and click on MyFirstPlugin menu.

Our table is now visible, and you can see both the header and footer of our table.

We are now going to add some PHP code in between the <tbody> tag.

The PHP code will be the steps on how to query the WordPress database.

We have used a special WordPress class called $wpdb which is designed specifically for WordPress database interactions.

To use the $wpdb class, it will need to be declared as a global object within our function.

The variable $mytestdrafts will hold the data for both ID and post_title columns from the database.

The get_results method retrieves an entire SQL result set from the database or think of it as “many rows”.

The SQL Statement is selecting both ID and post_title column from the posts table where the post_status column equals only draft.

We also need to add the post_type column where the value will equal “post”, or we will get pages that are in current draft mode to show in our table.

Thus far we have queried the database for all the draft posts.

Next, we need to add the code that will output the content of our posts, which contains the results from our database queries into our administration table.

We are using the loop in the form of a foreach statement.

To create our table rows, we are wrapping our results inside the HTML <tr> tags.

To populate the table cells of each row, we are using the echo statements.

The echo statements consist of <td> tags which display the post_title and the ID value.

We are extracting the data from the database object with these commands.

Notice how we are separating our HTML and PHP code.

Save your changes then copy the myfirstplugin folder over to your hosting server using FTP and paste it in the Plugins folder /wp-content/plugins.

In the WordPress administration page, Settings menu and click on MyFirstPlugin menu.

Our table now is showing all the posts that are in draft mode.

The table is displaying the Post Tile and Post ID of each of these posts.

If you want to deactivate the plugin, click the Deactivate link in My First Plugin.

Conclusion

 Hopefully now you have a good understanding how plugins are created. In our next tutorial we are going to learn how to create a plugin that will update the Post Title.