Creating a WordPress plugin: the basics
Published: 2023-10-10 08:14:48

This is based on an interview question I recently received while looking for a [WordPress ](https://wordpress.org/)developer job.

I am using the following tools, ensure you have them installed

- [Local](https://localwp.com/)
- [Visual Studio Code](https://code.visualstudio.com/)

Using Local WP, create a sample project and ensure [Woocommerce ](https://woocommerce.com/)is installed.

Scaffold the plugin using [wp cli](https://wp-cli.org/) and use the shortcut from within local.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c00eukdusxmj7124g4x.png)


` wp scaffold plugin woo-admin-sample`

This will create a woo-admin-sample plugin folder,we can see it's also ready to activate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quyf37zijh0sfnzdtbl5.png)


Open the folder using vs code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0pxa7urhyakplrdni14.png)


Open woo-admin-sample.php and add the following

```
 // Plugin activation hook
register_activation_hook(__FILE__, 'my_api_plugin_activate');

function my_api_plugin_activate() {
    // Code to run when the plugin is activated
}

```
Create a directory and inside the directory a new file settings-page.php. in this file, write the following

```
<?php
  add_filter( 'woocommerce_settings_tabs_array', 'sample_my_acount_add_settings_tab', 50 );
  function sample_my_acount_add_settings_tab( $settings_tabs ) {
  	$settings_tabs['sample_my_account_tab'] = __( 'My Account', 'sample-my-account' );
  	return $settings_tabs;
  }
```

Create another file api-functions.php

```
<?php
function send_data_to_api() {
    // Code to send data to API
}

function store_api_data_as_transient() {
    // Code to store data as transients
}
```
Add another file templates.php

```
<?php
function load_templates($user_id) {
    // Code to load templates and display data
}

function check_data_expiry($user_id) {
    // Code to check data expiry and update if necessary
}
```

Add on to woo-admin-sample.php.

```
require_once(plugin_dir_path(__FILE__) . 'includes/settings-page.php');
require_once(plugin_dir_path(__FILE__) . 'includes/api-functions.php');
require_once(plugin_dir_path(__FILE__) . 'includes/templates.php');
```
This ensures that we load the 3 files we added as part of the plugin files
Now we can test and see that there is a 'My Account' tab under Woocommerce settings

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4nug96z98dsh236yvxf.png)

Now add the API key field for admin and Options for other users in settings-page.php

```
 add_action( 'woocommerce_settings_tabs_sample_my_account_tab', 'sample_my_account_tab' );
  function sample_my_account_tab() {
  	woocommerce_admin_fields( sample_my_account_get_settings() );
  }

  function sample_my_account_get_settings() {

    $settings = array(
        'section_title' => array(
            'name'     => __( 'My Account Settings', 'sample-my-account' ),
            'type'     => 'title',
            'desc'     => '',
            'id'       => 'wc_sample_my_account_tab_section_title'
        ),
        'api_key' => array(
            'name' => __( 'Api Key', 'sample-my-account' ),
            'type' => 'text',
            'desc' => __( 'Add API key', 'sample-my-account' ),
            'id'   => 'wc_sample_my_account_tab_api_key'
        ),
        'options' => array(
            'name' => __( 'Options', 'sample-my-account' ),
            'type' => 'textarea',
            'desc' => __( 'Add options separated by a comma.', 'sample-my-account' ),
            'id'   => 'wc_sample_my_account_tab_options'
        ),
        'section_end' => array(
            'type' => 'sectionend',
            'id' => 'wc_sample_my_account_tab_section_end'
        )
    );

    return apply_filters( 'wc_sample_my_account_tab_settings', $settings );
}

add_action( 'woocommerce_update_options_sample_my_account_tab', 'sample_my_account_update_settings' );
  function cxc_update_settings() {
  	woocommerce_update_options( sample_my_account_get_settings() );
  }
```
The result will be 2 fields displayed, an Api key field and an Options field.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yymu6zg19z7slkz4j3j.png)

However, the API key field is only visible for site owners, so let's amend our settings-page.php, replace the $settings array declaration with 

```
    if (is_user_logged_in()) {
        $current_user_id = get_current_user_id();
        if (current_user_can('administrator')) {
            $settings = array(
                'section_title' => array(
                    'name'     => __('My Account Settings', 'sample-my-account'),
                    'type'     => 'title',
                    'desc'     => '',
                    'id'       => 'wc_sample_my_account_tab_section_title'
                ),
                'api_key' => array(
                    'name' => __('Api Key', 'sample-my-account'),
                    'type' => 'text',
                    'desc' => __('Add API key', 'sample-my-account'),
                    'id'   => 'wc_sample_my_account_tab_api_key'
                ),
                'options' => array(
                    'name' => __('Options', 'sample-my-account'),
                    'type' => 'textarea',
                    'desc' => __('Add options separated by a comma.', 'sample-my-account'),
                    'id'   => 'wc_sample_my_account_tab_options'
                ),
                'section_end' => array(
                    'type' => 'sectionend',
                    'id' => 'wc_sample_my_account_tab_section_end'
                )
            );
        } else {
            $settings = array(
                'section_title' => array(
                    'name'     => __('My Account Settings', 'sample-my-account'),
                    'type'     => 'title',
                    'desc'     => '',
                    'id'       => 'wc_sample_my_account_tab_section_title'
                ),

                'options' => array(
                    'name' => __('Options', 'sample-my-account'),
                    'type' => 'textarea',
                    'desc' => __('Add options separated by a comma.', 'sample-my-account'),
                    'id'   => 'wc_sample_my_account_tab_options'
                ),
                'section_end' => array(
                    'type' => 'sectionend',
                    'id' => 'wc_sample_my_account_tab_section_end'
                )
            );
        }
    }
```
Now we can have the API key field load only for the admins and options for all users, we will refractor this later.


PS: I am currently not employed and open to jobs.