Theme Options

footer.php

<?php

/*Footer Options */
$copyright_text = get_option( 'tech_options' )['tech_option_copyright'] ?? '';
$logo_url = get_option( 'tech_options' )['tech_option_image_upload'] ?? '';
$social_media = get_option( 'tech_options' )['tech_option_social_media_repeater'] ?? '';
$image_repeater = get_option( 'tech_options' )['tech_option_image_repeater'] ?? '';

<footer class="footer-area cst_lower_footer py-4">
	<div class="container py-2">
        <div class="row mx-0 justify-content-sm-between justify-content-center align-items-center">
            <div class="col-sm-6 text-sm-start text-center">
                <?php if (!empty($logo_url)) : ?>
                    <a href="<?php the_permalink();?>"><img src="<?php echo esc_url($logo_url); ?>" alt="Uploaded Image" class="img-fluid"></a>
                <?php endif; ?>
            </div>
            <div class="col-sm-6 text-sm-end text-center mt-sm-0 mt-3">
                <?php
                    if (!empty($social_media)) { ?>
                      <ul class="d-flex gap-3 justify-content-sm-end justify-content-center p-0 list-unstyled">
                            <?php foreach ($social_media as $field) { 
                                if (!empty($field)) : 
                                    $domain = parse_url($field, PHP_URL_HOST);
                                    $domainParts = explode('.', $domain);
                                    $websiteName = $domainParts[1];
                                ?>
                                <li>
                                    <a class="text-white" href="<?php echo $field?>" target="_blank">
                                    <script>
                                        var websiteName = "<?php echo $websiteName ?>";
                                        document.write('<i class="fa fa-' + websiteName + '"></i>');
                                    </script>
                                    </a>
                                </li>
                                
                            <?php
                                endif; 
                            } ?>
                        </ul>
                    <?php }
                ?>
       
                <?php if (!empty($copyright_text)) : ?>
                    <p class="m-0"><?php echo $copyright_text; ?></p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</footer>

Theme Options Detail

Description: Copy and Paste theme-options code on your function.php file or anyother php file but make sure to include that file in function.php file
And after that copy and paste the foo.php code on your footer.hpp file or any other file where you want to get fetch and print the fields Data.
Theme Options

theme-options.php

<?php 

/**
 * Add a new options page named "Tech Options".
 */

/*Media Upload Script */
function enqueue_admin_scripts() {
    wp_enqueue_media();
}
add_action('admin_enqueue_scripts', 'enqueue_admin_scripts');

/** Register Option Page (Parent and Child All) **/
function myprefix_register_options_page() {
    add_menu_page(
        'Tech Options', /* Body Title */
        'Tech Options', /* Menu Title */
        'manage_options', /* Restriction */
        'tech_options', /* Options Slug */
        'tech_options_page_html', /* Register Function */
        'dashicons-admin-generic' /* Icon */
    );
}
add_action( 'admin_menu', 'myprefix_register_options_page' );

/* Register our settings of Fields */
function myprefix_register_settings() {
    register_setting('tech_options_group', 'tech_options', [
        'sanitize_callback' => 'tech_options_sanitize_fields',
        'default' => []
    ]);

        //First Section
        add_settings_section(
            'tech_options_sections',
            false,
            false,
            'tech_options'
        );
        /*Copyright Text Field */
        add_settings_field(
            'tech_option_copyright',
            esc_html__('Copyright Text', 'text_domain'),
            'render_tech_option_copyright_field',
            'tech_options',
            'tech_options_sections',
            [
                'label_for' => 'tech_option_copyright',
            ]
        );
        /*Phone Number Field */
        add_settings_field(
            'tech_option_number',
            esc_html__('Phone Number', 'text_domain'),
            'render_tech_option_number_field',
            'tech_options',
            'tech_options_sections',
            [
                'label_for' => 'tech_option_number',
            ]
        );
        /* Repeater Field */
        add_settings_field(
            'tech_option_social_media_repeater',
            esc_html__('Social Media', 'text_domain'),
            'render_tech_option_social_media_repeater_field',
            'tech_options',
            'tech_options_sections',
            [
                'label_for' => 'tech_option_social_media_repeater',
            ]
        );
        /* Image Repeater Field */
        add_settings_field(
            'tech_option_image_repeater',
            esc_html__('Image Slider', 'text_domain'),
            'render_tech_option_image_repeater_field',
            'tech_options',
            'tech_options_sections',
            [
                'label_for' => 'tech_option_image_repeater',
            ]
        );
}
add_action('admin_init', 'myprefix_register_settings');

/* Copyright Field */
function render_tech_option_copyright_field($args) {
    $options = get_option('tech_options');
    $value = isset($options[$args['label_for']]) ? $options[$args['label_for']] : '';
    
    ?>
    <input
        placeholder="Copyright Text Field"
        type="text"
        id="<?php echo esc_attr($args['label_for']); ?>"
        name="tech_options[<?php echo esc_attr($args['label_for']); ?>]"
        value="<?php echo esc_attr($value); ?>"
        style="margin-bottom:5px; width:369px;"
    >
    <?php
}

/* Phone Number Field */
function render_tech_option_number_field($args) {
    $options = get_option('tech_options');
    $value = isset($options[$args['label_for']]) ? $options[$args['label_for']] : '';
    
    ?>
    <input
        placeholder="Phone Number"
        type="text"
        id="<?php echo esc_attr($args['label_for']); ?>"
        name="tech_options[<?php echo esc_attr($args['label_for']); ?>]"
        value="<?php echo esc_attr($value); ?>"
        style="margin-bottom:5px; width:369px;"
    >
    <?php
}

/* Social Media Repeater */
function render_tech_option_social_media_repeater_field($args) {
    $options = get_option('tech_options');
    $repeater_fields = isset($options[$args['label_for']]) ? $options[$args['label_for']] : array('');

    if (!is_array($repeater_fields)) {
        $repeater_fields = array('');
    }
    ?>

    <div id="<?php echo esc_attr($args['label_for']); ?>_repeater">
        <?php foreach ($repeater_fields as $key => $field) : ?>
            <input type="text" name="tech_options[<?php echo esc_attr($args['label_for']); ?>][]" value="<?php echo esc_attr($field); ?>" style="margin-bottom:5px; width:369px;">
            <?php if ($key === 0) : ?>
                <button type="button" class="add-field button-secondary" style="width:100px;">Add More</button>
            <?php else : ?>
                <button type="button" class="remove-field button-secondary" style="width:100px;">Remove</button>
            <?php endif; ?>
            <br>
        <?php endforeach; ?>
    </div>

    <script>
        jQuery(function ($) {
            $('#<?php echo esc_attr($args['label_for']); ?>_repeater').on('click', '.add-field', function () {
                var $clone = $(this).prev('input').clone();
                $clone.val('');
                $(this).before($clone);
                $(this).text('Remove').removeClass('add-field').addClass('remove-field');
            });

            $('#<?php echo esc_attr($args['label_for']); ?>_repeater').on('click', '.remove-field', function () {
                $(this).prev('input').remove();
                $(this).text('Add More').removeClass('remove-field').addClass('add-field');
            });
        });
    </script>

    <?php
}

/* Image Repeater Field */
function render_tech_option_image_repeater_field($args) {
    $options = get_option('tech_options');
    $repeater_images = isset($options[$args['label_for']]) ? $options[$args['label_for']] : [];

    if (!is_array($repeater_images)) {
        $repeater_images = [];
    }
    ?>
    <div id="<?php echo esc_attr($args['label_for']); ?>_repeater">
        <?php foreach ($repeater_images as $key => $image) : ?>
            <div class="repeater-item">
                <input type="text" class="image-url" name="tech_options[<?php echo esc_attr($args['label_for']); ?>][]" value="<?php echo esc_attr($image); ?>" readonly>
                <button type="button" class="upload-image button">Upload Image</button>
                <button type="button" class="remove-image button">Remove Image</button>
                <br>
                <img src="<?php echo esc_attr($image); ?>" style="max-width: 100px;">
            </div>
        <?php endforeach; ?>
        <button type="button" class="add-image button">Add Image</button>
    </div>
    <script>
        jQuery(document).ready(function ($) {
            // Add Image
            $('#<?php echo esc_attr($args['label_for']); ?>_repeater').on('click', '.add-image', function () {
                var $repeaterItem = $('<div class="repeater-item"></div>');
                var $imageUrlInput = $('<input type="text" class="image-url" name="tech_options[<?php echo esc_attr($args['label_for']); ?>][]" readonly>');
                var $uploadButton = $('<button type="button" class="upload-image button">Upload Image</button>');
                var $removeButton = $('<button type="button" class="remove-image button">Remove Image</button>');
                var $br = $('<br>');
                var $imagePreview = $('<img style="max-width: 100px;">');

                $repeaterItem.append($imageUrlInput);
                $repeaterItem.append($uploadButton);
                $repeaterItem.append($removeButton);
                $repeaterItem.append($br);
                $repeaterItem.append($imagePreview);

                $('#<?php echo esc_attr($args['label_for']); ?>_repeater').append($repeaterItem);

                // Handle Upload Image
                $uploadButton.on('click', function (e) {
                    e.preventDefault();

                    var imageUploader = wp.media({
                        title: 'Upload Image',
                        button: {
                            text: 'Use this image'
                        },
                        multiple: false
                    });

                    imageUploader.on('select', function () {
                        var attachment = imageUploader.state().get('selection').first().toJSON();
                        $imageUrlInput.val(attachment.url);
                        $imagePreview.attr('src', attachment.url);
                    });

                    imageUploader.open();
                });

                // Handle Remove Image
                $removeButton.on('click', function (e) {
                    e.preventDefault();

                    $repeaterItem.remove();
                });
            });

            // Handle Upload Image for existing items
            $('#<?php echo esc_attr($args['label_for']); ?>_repeater').on('click', '.upload-image', function (e) {
                e.preventDefault();

                var imageUploader = wp.media({
                    title: 'Upload Image',
                    button: {
                        text: 'Use this image'
                    },
                    multiple: false
                });

                var $imageUrlInput = $(this).siblings('.image-url');
                var $imagePreview = $(this).siblings('img');

                imageUploader.on('select', function () {
                    var attachment = imageUploader.state().get('selection').first().toJSON();
                    $imageUrlInput.val(attachment.url);
                    $imagePreview.attr('src', attachment.url);
                });

                imageUploader.open();
            });

            // Handle Remove Image for existing items
            $('#<?php echo esc_attr($args['label_for']); ?>_repeater').on('click', '.remove-image', function (e) {
                e.preventDefault();

                var $repeaterItem = $(this).parent();
                var $imageUrlInput = $repeaterItem.find('.image-url');
                var $imagePreview = $repeaterItem.find('img');

                $imageUrlInput.val('');
                $imagePreview.attr('src', '');
            });
        });
    </script>
    <?php
}

/* The "Tech Options" page HTML. */
function tech_options_page_html() {
    if (isset($_GET['settings-updated'])) {
        add_settings_error(
            'tech_options_mesages',
            'tech_options_message',
            esc_html__('Settings Saved', 'text_domain'),
            'updated'
        );
    }

    settings_errors('tech_options_mesages');
    $options = get_option('tech_options');
    
    $logo_url = isset($options['tech_option_image_upload']) ? $options['tech_option_image_upload'] : '';
    $image_remove = isset($options['tech_option_logo_remove']) ? $options['tech_option_logo_remove'] : '';

    ?>
    <div class="cst_wrapper">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="options.php" method="post" enctype="multipart/form-data">
            <?php
            settings_fields('tech_options_group');
            do_settings_sections('tech_options');
            ?>
            <table class="cst_admin_table form-table">
                <tbody>
                    <tr>
                        <th><label for="tech_option_image_upload"><?php esc_html_e('Footer Logo', 'text_domain'); ?></label></th>
                        <td>
                        <input type="text" id="tech_option_image_upload" name="tech_options[tech_option_image_upload]" value="<?php echo esc_attr($logo_url); ?>" size="50" />
                        <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="<?php esc_attr_e('Upload Image', 'text_domain'); ?>" />
                            <!-- If image is uploaded than show this div -->
                            <?php if ($logo_url) : ?>
                                <div class="image">
                                    <label><?php esc_html_e('Current Image:', 'text_domain'); ?></label>
                                    <br>
                                    <img src="<?php echo esc_url($logo_url); ?>" alt="Uploaded Image" style="width: 100px;">
                                </div>
                            <?php endif; ?>
                            <!-- If image is not uploaded than do not show this div -->
                            <?php if (!$logo_url) : ?>
                                <div class="upload">
                                    <input type="file" id="tech_option_logo" name="tech_option_logo" disabled>
                                </div>
                            <?php endif; ?>
                        </td>
                        <!-- If image is uploaded than show Remove Image -->
                        <?php if ($logo_url) : ?>
                            <td>
                                <label>
                                    <input type="checkbox" name="tech_options[tech_option_logo_remove]" value="1" <?php checked($image_remove, '1'); ?> />
                                    <?php esc_html_e('Remove Image', 'text_domain'); ?>
                                </label>
                            </td>
                        <?php endif; ?>
                        
                    </tr>
                </tbody>
            </table>
            <!-- Upload From Media Library -->
            <script>
                jQuery(document).ready(function ($) {
                    // Upload button click event
                    $('#upload-btn').click(function (e) {
                        e.preventDefault();

                        // Create the media uploader
                        var mediaUploader = wp.media({
                            frame: 'select',
                            title: 'Choose Image',
                            button: {
                                text: 'Use this image'
                            },
                            multiple: false
                        });

                        // Open the media uploader
                        mediaUploader.open();

                        // Handle selected image
                        mediaUploader.on('select', function () {
                            var attachment = mediaUploader.state().get('selection').first().toJSON();
                            $('#tech_option_image_upload').val(attachment.url);
                        });
                    });
                });
            </script>
            <?php submit_button('Save Settings'); ?>
        </form>
    </div>
    <?php
}

/* Sanitizing Fields */
function tech_options_sanitize_fields($value) {
    $existing_options = get_option('tech_options');
    $value = wp_parse_args($value, $existing_options);

    if (!empty($value['tech_option_copyright'])) {
        $value['tech_option_copyright'] = sanitize_text_field($value['tech_option_copyright']);
    }

    if (!empty($value['tech_option_number'])) {
        $value['tech_option_number'] = sanitize_text_field($value['tech_option_number']);
    }

    if (!empty($_FILES['tech_option_image_upload']['tmp_name'])) {
        $upload = wp_upload_bits($_FILES['tech_option_image_upload']['name'], null, file_get_contents($_FILES['tech_option_image_upload']['tmp_name']));
        if (isset($upload['url'])) {
            $value['tech_option_image_upload'] = $upload['url'];
        }
    }

    if (isset($value['tech_option_logo_remove']) && $value['tech_option_logo_remove'] === '1') {
        $value['tech_option_image_upload'] = '';
    }

    unset($value['tech_option_logo_remove']);

    return $value;
}

Amazing. It is working awesome. Thanks