Build Your First WordPress Plugin — Admin Settings, Hooks & Front-End Output

How WordPress Plugins Work

WordPress is built on a hook system — specific points in the execution where you can attach your own code. A plugin is a PHP file that hooks into WordPress to add, change, or remove functionality.

You never edit core files. Your plugin runs independently. Deactivate it, and everything it added disappears cleanly.

The Plugin Header Comment

Every WordPress plugin starts with a comment that WordPress reads:

<?php
/**
 * Plugin Name: YFIN Announcer
 * Description: Display a configurable announcement banner on your site.
 * Version: 1.0.0
 * Author: Cikal Studio Labs
 */

// Security: prevent direct file access
if ( ! defined( 'ABSPATH' ) ) exit;

Actions vs Filters

Actions — run your code at a specific point:

add_action( 'wp_head', 'my_function' );
function my_function() {
    echo '<meta name="generator" content="My Plugin" />';
}

Filters — modify data before WordPress uses it:

add_filter( 'the_title', 'my_title_filter' );
function my_title_filter( $title ) {
    return $title . ' — My Site';  // MUST return the value
}

Adding an Admin Settings Page

add_action( 'admin_menu', 'my_plugin_menu' );

function my_plugin_menu() {
    add_options_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin',
        'my_plugin_page'
    );
}

Saving and Reading Settings

// Save settings
update_option( 'my_plugin_settings', [
    'banner_text'    => sanitize_text_field( $input['banner_text'] ),
    'banner_enabled' => isset( $input['banner_enabled'] ) ? 1 : 0,
]);

// Read settings
$options = get_option( 'my_plugin_settings', [] );
$text    = $options['banner_text'] ?? '';

Enqueueing CSS and JS the Right Way

Never echo <link> or <script> tags directly in plugin output. Use WordPress's enqueue system:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );

function my_plugin_assets() {
    wp_enqueue_style( 'my-plugin', plugin_dir_url(__FILE__) . 'css/style.css' );
    wp_enqueue_script( 'my-plugin', plugin_dir_url(__FILE__) . 'js/script.js', [], '1.0', true );
}

This is a preview. The full ebook includes the complete plugin with a color picker field, automatic text color calculation (black or white based on background brightness), session storage for the close button, and instructions for packaging as a .zip file.