Shortcode API Administration Menus Settings & Options API

Summary: Learning about Shortcode API, Administration Menus, Settings and Options API.

Shortcode API

The Shortcode API in WordPress allows us to create macros to be used in posts, pages, and widgets. Shortcodes are small tags that can be used to execute custom code or display dynamic content.

Creating a Shortcode

To create a shortcode, we use the add_shortcode() function. This function maps a shortcode name to a callback function that outputs the desired content.

function my_custom_shortcode( $atts, $content = null ) {
    // Process shortcode attributes and content
    return '<div class="my-custom-class">' . $content . '</div>';
}
add_shortcode( 'my_shortcode', 'my_custom_shortcode' );

In this example, [my_shortcode]Your Content[/my_shortcode] would be replaced by <div class="my-custom-class">Your Content</div>.

Attributes in Shortcodes

Attributes can be passed to shortcodes as an associative array. The shortcode_atts() function is commonly used to handle default values and merge them with user-supplied attributes.

function my_custom_shortcode_with_atts( $atts ) {
    $atts = shortcode_atts(
        array(
            'type' => 'default',
            'id'   => '',
        ),
        $atts,
        'my_shortcode'
    );

    return '<div class="my-custom-class" id="' . esc_attr( $atts['id'] ) . '">' . esc_html( $atts['type'] ) . '</div>';
}
add_shortcode( 'my_shortcode', 'my_custom_shortcode_with_atts' );

Usage: [my_shortcode type="special" id="123"]

Enclosing Shortcodes

Shortcodes can enclose content, meaning they can be used with opening and closing tags, allowing content to be passed between the tags.

function my_enclosed_shortcode( $atts, $content = null ) {
    return '<div class="highlight">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'highlight', 'my_enclosed_shortcode' );

Usage: [highlight]This text will be highlighted.[/highlight]

Self-Closing Shortcodes

Shortcodes can be self-closing, meaning they don’t need closing tags and can return content immediately.

function my_self_closing_shortcode( $atts ) {
    return '<hr />';
}
add_shortcode( 'my_line', 'my_self_closing_shortcode' );

Usage: [my_line]

Administration Menus

The Administration Menus API in WordPress allows developers to add custom menus and submenus to the WordPress admin area. This is useful for organizing custom settings pages, plugin options, and other administrative functions.

Adding a Top-Level Menu

To add a top-level menu in the WordPress admin, use the add_menu_page() function.

function my_custom_admin_menu() {
    add_menu_page(
        'My Custom Page',        // Page title
        'My Menu',               // Menu title
        'manage_options',        // Capability required to access
        'my-custom-page',        // Menu slug
        'my_custom_page_callback', // Callback function
        'dashicons-admin-generic', // Icon URL or dashicon class
        6                        // Position in the menu
    );
}
add_action( 'admin_menu', 'my_custom_admin_menu' );

function my_custom_page_callback() {
    echo '<h1>My Custom Admin Page</h1>';
    echo '<p>Content of the custom admin page goes here.</p>';
}

Adding a Submenu

To add a submenu under an existing top-level menu, use the add_submenu_page() function.

function my_custom_admin_submenu() {
    add_submenu_page(
        'my-custom-page',        // Parent slug
        'My Custom Subpage',     // Page title
        'My Submenu',            // Menu title
        'manage_options',        // Capability
        'my-custom-subpage',     // Menu slug
        'my_custom_subpage_callback' // Callback function
    );
}
add_action( 'admin_menu', 'my_custom_admin_submenu' );

function my_custom_subpage_callback() {
    echo '<h1>My Custom Subpage</h1>';
    echo '<p>Content of the custom subpage goes here.</p>';
}

Removing or Modifying Menu Items

We can remove or modify existing menu items using remove_menu_page() and remove_submenu_page().

function my_remove_admin_menus() {
    remove_menu_page( 'edit.php' );           // Remove the Posts menu
    remove_submenu_page( 'themes.php', 'theme-editor.php' ); // Remove Theme Editor submenu
}
add_action( 'admin_menu', 'my_remove_admin_menus', 999 );

Settings & Options API

The Settings & Options API in WordPress provides a standardized way to create, store, and retrieve options (settings) from the WordPress database. It is particularly useful when developing plugins that require settings pages.

Registering Settings

Use the register_setting() function to register a setting and specify its data handling.

function my_register_settings() {
    register_setting(
        'my_options_group', // Option group
        'my_option_name',   // Option name
        'my_sanitize_callback' // Sanitize callback
    );
}
add_action( 'admin_init', 'my_register_settings' );

Adding Settings Sections

To group related settings together, use the add_settings_section() function.

function my_settings_section() {
    add_settings_section(
        'my_section_id',       // Section ID
        'My Settings Section', // Title
        'my_section_callback', // Callback
        'my_options_page'      // Page slug
    );
}
add_action( 'admin_init', 'my_settings_section' );

function my_section_callback() {
    echo '<p>My settings section description.</p>';
}

Adding Settings Fields

Use add_settings_field() to add individual settings fields to a section.

function my_settings_fields() {
    add_settings_field(
        'my_field_id',          // Field ID
        'My Field Label',       // Field label
        'my_field_callback',    // Callback function
        'my_options_page',      // Page slug
        'my_section_id',        // Section ID
        array( 'label_for' => 'my_field_id' ) // Args
    );
}
add_action( 'admin_init', 'my_settings_fields' );

function my_field_callback( $args ) {
    $option = get_option( 'my_option_name' );
    echo '<input type="text" id="' . esc_attr( $args['label_for'] ) . '" name="my_option_name" value="' . esc_attr( $option ) . '" />';
}

Creating a Settings Page

Create a settings page where the options can be managed by using add_menu_page() or add_submenu_page() in conjunction with the above settings, sections, and fields.

function my_settings_page() {
    add_options_page(
        'My Plugin Settings',  // Page title
        'My Plugin',           // Menu title
        'manage_options',      // Capability
        'my_plugin',           // Menu slug
        'my_plugin_settings_page' // Callback function
    );
}
add_action( 'admin_menu', 'my_settings_page' );

function my_plugin_settings_page() {
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields( 'my_options_group' ); // Option group
            do_settings_sections( 'my_plugin' );   // Page slug
            submit_button();
            ?>
        </form>
    </div>
    <?php
}