How to Add Export and Import Functionality for WordPress Customizer Settings (Step-by-Step Guide)

If you’ve ever customized a WordPress theme only to lose your settings after switching environments or themes, you know how frustrating it can be.

Fortunately, you can add export and import functionality to your WordPress Customizer — allowing you to easily backup, restore, or migrate your theme settings between sites.

This step-by-step guide walks you through creating a Custom Export/Import feature using PHP and JavaScript — no plugins required.

Step 1: Create the Export/Import Section

Add the following code to your theme’s functions.php (or a dedicated Customizer file):

function ultra_nutrition_section_export_import( $wp_customize ) {
	$wp_customize->add_section(
		'export_import_section',
		array(
			'title'       => 'Export/Import Settings',
			'description' => 'Backup your customizer settings or restore from a previous backup.',
			'priority'    => 200,
		)
	);

	// Export Button
	$wp_customize->add_setting( 'export_settings', array( 'sanitize_callback' => '__return_false' ) );
	$wp_customize->add_control(
		new WP_Customize_HTML_Control(
			$wp_customize,
			'export_settings',
			array(
				'label'   => 'Export Settings',
				'content' => '
					
					Download all your customizer settings as a JSON file.
				',
				'section' => 'export_import_section',
			)
		)
	);

	// Import Field
	$wp_customize->add_setting( 'import_settings', array( 'sanitize_callback' => '__return_false' ) );
	$wp_customize->add_control(
		new WP_Customize_HTML_Control(
			$wp_customize,
			'import_settings',
			array(
				'label'   => 'Import Settings',
				'content' => '
					
						
						
						Upload a previously exported JSON file to restore settings. This will overwrite current settings.
						
					
				',
				'section' => 'export_import_section',
			)
		)
	);
}
add_action( 'customize_register', 'ultra_nutrition_section_export_import' );

This code creates a new “Export/Import Settings” section in your WordPress Customizer panel with buttons to export and import configuration files.

Step 2: Add the JavaScript Logic

Create a file named js/customizer-export-import.js and include the following script:

(function ($) {
	"use strict";

	wp.customize.bind("ready", function () {
		// Export Settings
		$("#export-settings-btn").on("click", function (e) {
			e.preventDefault();
			const settings = {};

			wp.customize.settings.settings.forEach(function (setting, id) {
				if (
					id.startsWith("ultra_nutrition_") ||
					id.includes("hero_") ||
					id.includes("footer_") ||
					id.includes("seo_")
				) {
					settings[id] = wp.customize(id)();
				}
			});

			const dataStr = JSON.stringify(settings, null, 2);
			const dataBlob = new Blob([dataStr], { type: "application/json" });
			const url = URL.createObjectURL(dataBlob);
			const link = document.createElement("a");
			link.href = url;
			link.download = "theme-settings-" + Date.now() + ".json";
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			URL.revokeObjectURL(url);

			alert("Settings exported successfully!");
		});

		// Import Settings
		$("#import-settings-btn").on("click", function (e) {
			e.preventDefault();
			const fileInput = document.getElementById("import-settings-file");
			const messageDiv = $("#import-message");

			if (!fileInput.files.length) {
				messageDiv.html('Please select a JSON file first.');
				return;
			}

			const reader = new FileReader();
			reader.onload = function (event) {
				try {
					const settings = JSON.parse(event.target.result);
					let importedCount = 0;
					Object.keys(settings).forEach(function (key) {
						if (wp.customize.has(key)) {
							wp.customize(key).set(settings[key]);
							importedCount++;
						}
					});
					messageDiv.html('Imported ' + importedCount + ' settings! Click "Publish" to save.');
				} catch (error) {
					messageDiv.html('Error: ' + error.message + '');
				}
			};
			reader.readAsText(fileInput.files[0]);
		});
	});
})(jQuery);

Step 3: Enqueue the Script

Add this to your functions.php:

function ultra_nutrition_enqueue_customizer_scripts( $hook ) {
	if ( 'customize.php' !== basename( $hook ) ) return;

	wp_enqueue_script(
		'ultra-nutrition-customizer-export-import',
		get_template_directory_uri() . '/js/customizer-export-import.js',
		array( 'jquery', 'customize-controls' ),
		'1.0.0',
		true
	);
}
add_action( 'customize_controls_enqueue_scripts', 'ultra_nutrition_enqueue_customizer_scripts' );

Bonus: Secure AJAX Version

For larger sites or theme frameworks, you can use AJAX-based export/import with nonce validation and server-side checks.
You’ll find the complete version in the code example above — ideal for production themes.

Why Add Export/Import to the Customizer?

✅ Backup: Keep a copy of your theme design settings.
🔄 Migrate: Move settings between dev, staging, and live sites.
⚡ Save Time: No need to reconfigure from scratch.
🧰 Developer-Friendly: Great for theme frameworks or client work.

Final Thoughts

Adding export/import functionality to your WordPress Customizer is one of the best developer quality-of-life features you can implement. It simplifies backups, accelerates migrations, and gives users confidence when testing design changes.

With just a few lines of PHP and JavaScript, you can make your theme far more professional and user-friendly.

Quick Summary

Feature	Description
Export Settings	Download Customizer settings as JSON
Import Settings	Upload and restore Customizer settings
Security	Optional nonce + permission checks
Compatibility	Works with all WordPress themes
Use Case	Theme backup, migration, testing