How to Add a Custom Section to WordPress Pages (Step-by-Step with Code)

When working with WordPress, you may often need to add custom sections or fields to your page editor — for example, an extra text field, color picker, or image uploader that stores page-specific data.

In this tutorial, you’ll learn how to create a custom section (meta box) inside the WordPress page edit screen, save the data to the database, and display it on the frontend.

Whether you want to add an “Extra Info”, “Banner Settings”, or “Custom CTA Text” section — this method will give you complete flexibility.

 

Step 1: Add a Custom Meta Box to Page Editor

Add the following code to your theme’s functions.php file or a custom plugin file.

    function my_page_custom_section() {
    add_meta_box(
        'page_extra_section',             // Unique ID
        'Extra Page Section',             // Box title
        'my_page_custom_section_html',    // Callback function
        'page',                           // Post type: 'page'
        'normal',                         // Context (normal, side, advanced)
        'default'                         // Priority
    );
}
add_action('add_meta_boxes', 'my_page_custom_section');

function my_page_custom_section_html($post) {
    wp_nonce_field('my_page_custom_section_nonce', 'my_page_custom_section_nonce_field');

    $custom_text = get_post_meta($post->ID, '_custom_page_text', true);
    $custom_color = get_post_meta($post->ID, '_custom_page_color', true);

    echo '<p><label for="custom_page_text"><strong>Custom Text:</strong></label></p>';
    echo '<input type="text" id="custom_page_text" name="custom_page_text" value="' . esc_attr($custom_text) . '" style="width:100%; max-width:600px;">';

    echo '<p><label for="custom_page_color"><strong>Background Color:</strong></label></p>';
    echo '<input type="color" id="custom_page_color" name="custom_page_color" value="' . esc_attr($custom_color) . '">';
}

 

This code registers a new meta box called “Extra Page Section” that will appear on the Edit Page screen inside your WordPress dashboard.

 

Step 2: Save the Custom Field Data

Next, you need to save the data entered into those fields when a page is updated.

Add this below the previous code:

    function save_my_page_custom_section($post_id) {
    if (!isset($_POST['my_page_custom_section_nonce_field']) ||
        !wp_verify_nonce($_POST['my_page_custom_section_nonce_field'], 'my_page_custom_section_nonce')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_page', $post_id)) {
        return;
    }

    if (isset($_POST['custom_page_text'])) {
        update_post_meta($post_id, '_custom_page_text', sanitize_text_field($_POST['custom_page_text']));
    }

    if (isset($_POST['custom_page_color'])) {
        update_post_meta($post_id, '_custom_page_color', sanitize_hex_color($_POST['custom_page_color']));
    }
}
add_action('save_post_page', 'save_my_page_custom_section');

This ensures your data is safely stored in the wp_postmeta table whenever a page is saved or updated.

 

Step 3: Display Custom Section on Frontend

Finally, let’s show the custom text and background color on the actual page.

Open your page.php (or custom page template) and add this code where you want the section to appear:

  <?php
$custom_text = get_post_meta(get_the_ID(), '_custom_page_text', true);
$custom_color = get_post_meta(get_the_ID(), '_custom_page_color', true);

if (!empty($custom_text)) {
    echo '<div style="background:' . esc_attr($custom_color ?: '#f5f5f5') . '; padding:20px; margin:20px 0;">';
    echo '<h3>' . esc_html($custom_text) . '</h3>';
    echo '</div>';
}
?>

  

Now, whenever you edit a page and fill out your Extra Page Section, the data will appear on that page’s frontend automatically.

 

Step 4: Enhance with More Fields (Optional)

You can easily expand this meta box with:

• Textareas (for longer content)
• Select dropdowns
• Date pickers
• Image uploaders (using wp.media)

Example:

  echo '<p><label>Highlight Text:</label><br>';
echo '<textarea name="highlight_text" rows="4" style="width:100%;">' . esc_textarea(get_post_meta($post->ID, '_highlight_text', true)) . '</textarea></p>';

  

And then save it using:

  update_post_meta($post_id, '_highlight_text', sanitize_textarea_field($_POST['highlight_text']));

  

 

Why Use Meta Boxes Instead of Custom Fields?

While WordPress has a “Custom Fields” option, meta boxes give you:

• A cleaner UI
• Multiple fields grouped under one heading
• Better control and validation
• Seamless integration with your post type or page editor

This is the professional developer’s approach when customizing the WordPress admin area.

 

Conclusion

Adding a custom section to your WordPress Page editor gives you more flexibility and structure when building dynamic, data-driven sites. Whether you’re adding banner text, SEO data, course info, or call-to-action content — meta boxes make it easy to create powerful, user-friendly admin interfaces.

With just a few lines of PHP, you can take full control of how your pages store and display information.