May 11th, 2020

Part 1: WordPress Plugin Adding the Admin Page

WordPress is one of the most popular content management systems on the internet. Created using PHP it can handle all things blogging to commercial websites. In fact we use WordPress for both our blog and website. In this article I’ll show you how to create a WordPress plugin which creates a menu item and corresponding page in the admin console.

Hello World!

Let’s dive right in with a simple plugin that will say “Hello World!” on all the pages.

The header comment here is what the wordpress uses to recognise that this is a plugin, it is only needed for the point of entry of the plugin (other php files get called with include/require_once). At the bare minimum you need to have “Plugin Name” in the header for it to be listed in the plugin subdirectory. Now to save the file, make sure it’s in the sub folder of your wordpress installation “wp-content/plugins”, I suggest placing it into a subdirectory there so that you can organise your plugin.

To turn on the plugin, go to the wordpress admin panel and go to the “Plugins” menu option. Find the new plugin and activate it.

plugin panel

 

Now on every page of the website it will say “Hello world!” at the top left.

hello-world

 

It’s not very practical, but it gives an insight into how WordPress plugins work. WordPress handles plugins in a manner that allows them to be as pluggable as possible. When a plugin is activated, WordPress will run the main php file of the plugin. This means that we need to lock down when our plugin will be active.

Creating a New Admin Panel

Now that we know how to get a plugin recognised by WordPress, we can continue on to creating a proper plugin that does something useful. A good starting point would be to have a menu item on the sidebar, allowing us to have a page in the admin console. This is useful for allowing the admin of a wordpress site configure your plugin.

To do this, we need to hook into the action where the admin menu is loaded. When WordPress loads a page, it runs through a set of actions which we can hook into with the add_action function. In the following code we create a menu item in the admin panel which takes us to a page which says “Hello World!”:

Let’s take a look at the functions:

add_action(‘admin_menu’, ‘test_plugin_setup_menu’);

Here we hook into the point where the menu bar on the admin panel starts loading and tell wordpress that we want to run the function ‘test_plugin_setup_menu’, which is a few lines below.

add_menu_page( ‘Test Plugin Page’, ‘Test Plugin’, ‘manage_options’, ‘test-plugin’, ‘test_init’ );

Here is where we add the menu page and the menu item entry. The first option ‘Test Plugin Page’ is the title of our options page. The second parameter ‘Test Plugin’ is the label for our admin panel. The third parameter determines which users can see the option by limiting access to certain users with certain capabilities. ‘test-plugin’ is the slug which is used to identify the menu. The final parameter ‘test_init’ is the name of the function we want to call when the option is selected, this allows us to add code to output HTML to our page. In this case we just write out “Hello World!”.

admin-menu

Now that we have setup our options page, we have a staging ground to play with some more features of WordPress.

Collected

Leave a Reply

Your email address will not be published. Required fields are marked *

recent post

Part 3: WordPress…

Recently, I’ve been working on a proof of concept project which int...

 795 Views
Part 2: WordPress…

Uploading Files The goal of the plugin is to convert a PDF in WordPre...

 868 Views
Part 1: WordPress…

WordPress is one of the most popular content management systems on the...

 810 Views
CSS Hacks For Every Web Developer
CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of brow...

 1159 Views
What are Operators…

Operators are symbols or keywords that tell the JavaScript engine to...

 3040 Views
CSS3 Visual Formatting…

The CSS3 visual formatting model is the algorithm that is used to pro...

 487 Views
Animatable Properties in CSS3
Animatable Properties in…

The following section contains a complete list of animatable propert...

 496 Views
Custom Permalinks in…

Do you want to create custom permalinks in WordPress for posts, page...

 460 Views
HTML5 Tag Reference

HTML5 has many new tags included and many others deprecated from the...

 467 Views
Resize and Make…

Have you ever tried resizing a image to make it larger? This usually...

 488 Views