Creating a WordPress plugin: the basics

it's volkan 😎 — Tue, 10 Oct 2023 08:14:48 +0000

This is based on an interview question I recently received while looking for a WordPress developer job.

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

Using Local WP, create a sample project and ensure Woocommerce is installed.

Scaffold the plugin using wp cli and use the shortcut from within local.

wp scaffold plugin woo-admin-sample

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

Open the folder using vs code.

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

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.

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.

DEV Community: it's volkan 😎

Creating a WordPress plugin: the basics