The manual design grind was killing me

I spend way too much time staring at blank canvases in Canva or Photoshop. It starts with one post, then ten, then twenty, and suddenly I have spent four hours moving text layers three pixels to the left. It is a massive waste of time for someone who actually knows how to code. I wanted a way to just dump a list of titles and images into a folder and have a script spit out professional-looking social media graphics without me touching a mouse.

That is where autofacebookpost started. I did not want to deal with complex image processing libraries in Python like PIL or OpenCV because styling text with code is a nightmare. I already know CSS. I can build a layout in HTML in ten minutes that looks better than anything I can make in a dedicated design tool. So the goal was simple: use HTML as my design engine and use a headless browser to take screenshots of it.

I am 21, I do not have a budget for expensive API credits or high-end servers. I needed something that could run in a container, handle bulk uploads, and eventually push those images straight to a Facebook page because logging into Meta’s Business Suite is its own circle of hell. This project was about reclaiming my time and proving that I could automate the boring parts of being online.

How the engine actually works

The stack is pretty straightforward but effective. I am using Flask for the web interface and Playwright to handle the heavy lifting of rendering. The core idea is that every thumbnail is just an HTML template. When I upload a CSV or enter data manually, the app injects those strings into the template, spins up a headless Chromium instance, and snaps a high-resolution screenshot.

In app.py, I set up the basic routes to handle the dashboard and the file management. I decided to use a local db.json file instead of a full SQL database. Is it scalable for a million users? No. Does it work perfectly for a single developer running it on a VPS? Absolutely. It keeps the project lightweight and portable.

The logic for actually generating the image is tucked away in makethumb.py. It uses Playwright’s async API to launch the browser. Here is a simplified look at how I handle that rendering process:

import asyncio
from playwright.async_api import async_playwright

async def generate_screenshot(html_content, output_path):
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(viewport={'width': 1280, 'height': 720})
        await page.set_content(html_content)
        await page.screenshot(path=output_path)
        await browser.close()

By using page.set_content(), I can pass the fully rendered HTML string directly to the browser. I do not have to host the template on a public URL or deal with local file path permissions inside the browser context. It is fast, and because it is Chromium, I can use modern CSS features like Flexbox, Grid, and even complex text shadows or filters that would be impossible in a standard image library.

The Docker nightmare

I thought containerizing this would be easy. I was wrong. Playwright requires a massive list of system dependencies to run Chromium inside a Linux environment. My first Dockerfile was failing constantly because of missing shared libraries like libnss3 and libgbm1. I spent an entire afternoon just trial-and-erroring the apt-get install list.

I eventually settled on using python:3.11-slim-bullseye as the base image to keep the size down, but even then, the final image is nearly 1GB because of the browser binaries. I had to be very specific in the Dockerfile to only install Chromium and not the entire Playwright suite of Firefox and Webkit, which saved me a few hundred megabytes of disk space on my cheap VPS.

# Install system dependencies required for Playwright
RUN apt-get update && apt-get install -y --no-install-recommends \
    libnss3 libnspr4 libdbus-1-3 libatk1.0-0 \
    libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 \
    libxcomposite1 libxdamage1 libxfixes3 libxrandr2 \
    libgbm1 libasound2 && rm -rf /var/lib/apt/lists/*

# Install only the necessary browser
RUN playwright install chromium

Even after getting the dependencies right, I ran into memory limits. Chromium is a resource hog. Running multiple concurrent screenshot requests would occasionally crash the container. I had to implement some basic queueing logic in the Flask app to ensure I was not trying to open twenty browser tabs at once on a machine with only 2GB of RAM.

Templates and design decisions

I did not just want one look. I wanted variety. The thumbnail_templates/ folder is filled with different HTML files like template_gaming.html, template_corporate.html, and template_minimalist.html. Each of these uses specific Google Fonts and CSS variables for quick color swaps.

One of the tougher decisions was how to handle images within the thumbnails. Initially, I tried to upload them directly, but managing paths inside the templates was messy. I shifted to using external URLs or a dedicated image_uploads folder that the Flask app serves. This allows me to use a standard <img src="..."> tag in the HTML and let the browser handle the scaling and cropping via object-fit: cover.

I also built a “Manual Entry” mode. Sometimes I don’t have a CSV; I just have three ideas in my head. I created a UI where I can paste a list of titles and badges into separate textareas. The app splits these by newlines and matches them up. If I provide 5 titles and 5 images, it generates 5 thumbnails in a single click. It is a small feature, but it is the one I use the most.

The Facebook Graph API struggle

Getting the images generated was only half the battle. I wanted to post them. The Facebook Graph API is notoriously annoying to work with. You need a User Token, which you then have to exchange for a Long-Lived Page Access Token. If you get the scopes wrong, the API just returns a cryptic error message.

I wrote a helper function in app.py called get_page_access_token to handle this exchange. It was a headache to debug because Meta’s documentation doesn’t always match the actual behavior of their v19.0 endpoints. I had to deal with permissions like pages_manage_posts and pages_read_engagement just to get a simple photo upload working.

def get_page_access_token(user_token, page_id):
    url = f"https://graph.facebook.com/v19.0/{page_id}"
    params = {"fields": "access_token", "access_token": user_token}
    try:
        r = requests.get(url, params=params)
        r.raise_for_status()
        data = r.json()
        return data.get("access_token"), None
    except Exception as e:
        return None, str(e)

The app now saves these credentials in the db.json file. Once set up, I can pick any generated thumbnail from my library, write a caption, and hit “Post”. It even supports a “First Comment” feature, which is great for putting hashtags or links without cluttering the main post caption.

How to run this yourself

If you want to use this, you need Docker. I wouldn’t recommend trying to install the Playwright dependencies on your local machine unless you’re on a clean Linux distro, otherwise you will mess up your system libraries.

• Clone the repo to your server or local machine.
• Create a db.json file if it is not already there with the basic structure {"thumbnails": [], "social_media_credentials": {}}.
• Build the image: docker build -t autofacebookpost .
• Run the container: docker run -p 5002:5002 autofacebookpost
• Access the dashboard at http://localhost:5002.

You will need to go to the Settings page to add your Facebook Access Token and Page ID if you want to use the posting features. For the templates, you can either use the ones I built or upload your own HTML files to the thumbnail_templates directory. Just make sure your HTML uses the variables the app expects, like {{ main_title }} and {{ image_url }}.

Who this is for

This is for the developer who is running a side project or a niche news site and cannot justify hiring a designer. It is for people who believe that if you have to do something more than twice, you should probably write a script for it. It is not a replacement for a real creative director, but it is a massive upgrade over default, boring social media posts.

I built this for me. I needed a way to maintain a social presence for my projects without it becoming a second full-time job. It is grounded, it is a bit rough around the edges, and it solves exactly one problem: making and sharing graphics fast.

What I would change next

The biggest thing missing is a proper scheduling system. Right now, it posts immediately. I have some UI code in facebook_post.html for a scheduler, but the backend logic for a task runner like Celery or Redis isn’t there yet. I did not want to add that complexity in version one, but as I use it more, I realize that being able to batch-create and schedule a week’s worth of posts on Sunday night is the ultimate goal.

I also want to add support for more platforms. Instagram is the obvious next step, but their API is even more restrictive about third-party uploads. I might have to look into using Playwright to actually automate the web-based upload flow if the API continues to be a bottleneck. Finally, I’d like to integrate a basic AI prompt that can generate the titles based on a URL, so I don’t even have to think of the headlines myself.

Why I built this instead of relying on another plugin

A while ago, I was working on a WordPress site with more than 4,000 images in the media library. Most of them were old JPEG and PNG files, and many were much heavier than they needed to be. When I tested the site in PageSpeed Insights, the result was not great. The score was sitting around the low 30s, and the image recommendations were mostly pointing to one thing: serve images in a next-gen format.

I checked a few popular plugins, but most of them came with a subscription model or required the images to be processed through an external cloud service. That did not feel right for this project. I wanted a tool that could run directly on the server, keep the workflow simple, and avoid adding another monthly cost.

The other issue was control. Some image optimisation tools can be too aggressive. They rewrite database values, remove original files, or make changes that are hard to reverse when something goes wrong. I have seen websites break because an optimisation process failed halfway through. So my main rule was simple: keep the original files untouched and only serve the WebP version when it exists and works properly.

That is how the idea for Effortless WebP Converter started. It became a dashboard-based WordPress tool that scans the media library, converts images in small batches, and uses WordPress filters to serve the WebP version on the front end. The goal was not to build a huge optimisation suite. I wanted something lightweight, predictable, and safe enough to use on real client sites.

The project is available on GitHub for anyone who wants to review the code, test it, or improve it further: Explore the Effortless WebP Converter source code.

The timeout problem that shaped the whole workflow

The hardest part was not the WebP conversion itself. The real problem was server limits. Most shared hosting environments do not allow long-running PHP scripts. If a process takes more than 30 or 60 seconds, the server usually stops it.

That becomes a serious issue when you are trying to process thousands of images. If you try to convert everything in one request, the process will fail quickly. I tested that approach early on, and it was clear that increasing memory limits or execution time was not a reliable answer. On client hosting, you often do not control those settings.

So I built the conversion process around small batches. The admin dashboard sends a request to the server, the server processes a few images, saves the progress, and then the dashboard sends the next request. This keeps each request short and reduces the chance of a timeout.

The useful part is that the process can continue from where it stopped. If the browser tab closes, the internet drops, or the server pauses for a moment, the plugin still knows which images are pending. That required a clean state system using the WordPress Options API, but it made the whole workflow much more dependable.

How the plugin is structured

The plugin is built around a simple structure. There is a main loader file, a core class that handles the main logic, and a small set of admin assets for the dashboard interface. I kept the JavaScript plain and avoided build tools because this plugin did not need extra complexity.

The main class uses a singleton pattern so the hooks are managed from one place. That keeps the code easier to follow and prevents filters or actions from being registered more than once. For a small WordPress utility plugin, that approach works well.

For image conversion, the plugin checks the server environment first. It looks for Imagick, then falls back to GD when Imagick is not available. Imagick usually gives better results, but GD is available on many hosting setups. If neither extension exists, the plugin does not try to force anything. It simply shows that the server cannot handle the conversion.

The conversion logic

public function ajax_convert_batch(): void {
    check_ajax_referer('webp_migrator_admin', 'nonce');

    $state = $this->get_state();
    $batch_size = 5;
    $attachments = array_slice($state['pending'], 0, $batch_size);

    foreach ($attachments as $attachment_id) {
        $this->process_attachment($attachment_id);
    }

    // Update the stored state and return the batch response.
}

This is the basic idea behind the batching system. The plugin takes the pending attachment IDs, processes a small group, updates the saved state, and returns a response to the dashboard. It is not fancy, but it is stable. On lower-end hosting, that matters more than trying to process too much at once.

Serving WebP images without breaking the front end

Creating the WebP files is only part of the job. The site also needs to serve those files to visitors without breaking existing images. I did not want to depend on .htaccess rules because they can be difficult to debug, especially across different hosting environments.

Instead, I used WordPress filters. The plugin works with common image output points such as wp_get_attachment_url, wp_calculate_image_srcset, and the_content. This gives the plugin a safer way to replace image URLs only when a WebP version is available.

The srcset handling needed extra care. Responsive images in WordPress can include several URLs and width values in one attribute. If that string is changed incorrectly, the browser can ignore it or load the wrong image. So the plugin checks each possible replacement carefully before changing the output.

For images inside post content, the plugin uses a straightforward replacement approach. It is lighter than parsing the whole HTML document and works well for common WordPress content output. The priority is set so the filter runs after most content changes, but before the final markup reaches the browser.

How the URL filter works

public function filter_attachment_url($url, $post_id) {
    if (is_admin()) {
        return $url;
    }

    $webp_url = str_replace(['.jpg', '.jpeg', '.png'], '.webp', $url);
    $path = str_replace(content_url(), WP_CONTENT_DIR, $webp_url);

    if (file_exists($path)) {
        return $webp_url;
    }

    return $url;
}

This is the safety check that makes the plugin reliable. It only changes the image URL when the matching WebP file exists on the server. If the WebP file is missing or the conversion failed for that image, the original file stays in place. The visitor never sees a broken image because the plugin always has a fallback.

What I chose not to add

I kept the first version focused. One thing I did not include was automatic CSS background image replacement. Finding and replacing background images inside CSS files can get messy very quickly. Themes and builders handle those images in different ways, and parsing CSS through PHP would add more risk than value for this version.

I also skipped WP-CLI support for the first release. I know it would be useful for developers, but the main goal was to create a dashboard-first workflow. Most clients and site owners are more comfortable running a tool from the WordPress admin area than using the command line.

I also decided not to delete original images. Some tools offer that feature to save disk space, but I do not think it is worth the risk by default. Storage is usually cheaper than losing an original file that cannot be recovered later.

The interface is intentionally simple as well. It uses familiar WordPress admin styling instead of a heavy custom UI. I spent more time making the conversion logic safe than making the dashboard look overly polished. For this kind of plugin, that felt like the right tradeoff.

Who this plugin is useful for

This plugin is useful for WordPress sites that need better image performance without adding a heavy optimisation service. It is especially helpful for older websites with large media libraries full of JPEG and PNG files.

• Site owners who want to convert existing media library images to WebP.
• Developers who want a transparent server-side tool without cloud processing.
• WordPress users on hosting environments where rewrite rules are not easy to manage.
• Anyone who wants to keep original files as a safety backup.

It is not trying to replace every image optimisation platform. It is built for a specific job: scan the media library, create WebP versions, and serve them safely when they are available.

How to install and use it

The setup is standard for a WordPress plugin. There are no API keys, external accounts, or subscription settings. The server only needs PHP 7.4 or higher with either GD or Imagick enabled.

You can download the plugin directly from the release file here: Download the Effortless WebP Converter plugin.

1. Download the plugin ZIP file from the release link.
2. Open your WordPress dashboard and go to Plugins.
3. Click Add New, then Upload Plugin.
4. Upload the effortless-webp-converter.zip file.
5. Activate the plugin after installation.
6. Go to Tools and open the Effortless WebP Converter screen.
7. Click Scan Library to find JPEG and PNG images in the media library.
8. Start the conversion and keep the browser tab open while the batches run.
9. Check the front end in an incognito window to confirm that WebP images are loading.

After conversion, I usually test the homepage, a blog post, and any page with large visual sections. Opening an image in a new tab is a quick way to confirm whether the WebP version is being served. Once everything looks right, the plugin continues handling the URL replacement automatically.

What I learned while building it

This project reminded me how useful a focused tool can be. The plugin does not need a complex framework or an external API to solve the problem. It only needs a reliable way to scan files, convert them safely, track progress, and avoid breaking the existing media library.

The most important work was in the edge cases. Some files had unusual names. Some servers had permission issues. Some images failed conversion. The plugin had to handle those problems quietly without damaging the site.

Seeing the process reach 100 percent and then watching the site serve lighter image files felt like a proper win. It is a small improvement on the surface, but those small improvements add up fast when you care about performance, user experience, and clean WordPress development.

The problem with paid plugins

I was working on a project last week for a client who wanted a simple video in their WooCommerce product gallery. It sounds like a basic feature, right? But when I started looking for solutions, everything was behind a paywall. People are charging seventy or eighty dollars a year for a plugin that just adds a video tag to a slider. It felt like a total rip-off, especially for a small business just starting out. I have this thing where I hate adding bloat to a site if I can just write the logic myself. Every plugin you add is another potential security hole or something that will break during the next WordPress update. I decided I would rather spend a few hours struggling with the code than make my client pay for a subscription they do not really need.

The pressure was on because the site was supposed to go live in two days. I had a choice. I could tell them to buy the plugin and be done with it in ten minutes, or I could stay up late and build a custom solution. I chose the latter. It was not just about saving money. I wanted to learn how WooCommerce handles its gallery internally. I wanted to see if I could make something that felt native to the dashboard without making the interface look messy. It was a bit of a gamble because if I could not get it working, I would have wasted a whole night and still had to buy the plugin anyway.

What this solves

This snippet is designed to bridge the gap between a standard image gallery and a professional product showcase. Most themes only allow images. If you want a video, you usually have to put it in the long description where nobody sees it. This code does a few specific things:

• It adds a new section to the product edit page so you can upload a video file.
• It lets you choose a specific thumbnail for that video so it does not look like a broken play button in the gallery.
• It automatically allows your WordPress site to accept video formats like MP4 and WebM if they were restricted before.
• It hooks directly into the gallery slider to inject the video right alongside the product photos.
• It uses native WordPress media tools, so it feels like it belongs there.

The main goal was to keep it lightweight. No extra database tables, no massive CSS libraries, just pure PHP and a bit of jQuery to handle the admin UI. I also wanted to make sure it worked with themes that use the Splide slider, which is common in a lot of custom WooCommerce builds lately. Standard WooCommerce hooks sometimes fail with these themes, so I had to find a way to target the HTML output directly.

The struggle of building it

The hardest part was definitely the admin interface. I am twenty-one, and I grew up with modern web apps, so working with the WordPress media library in JavaScript always feels a bit like stepping back in time. I spent about two hours just trying to get the “Select Video” button to open the media frame correctly. I kept getting these weird console errors because I forgot to enqueue the media scripts properly. It is those small, stupid mistakes that really get to you when it is 2 AM and you just want to go to sleep. I felt a lot of doubt. I kept thinking that maybe the eighty-dollar plugin was worth it just to avoid this headache.

Then there was the issue of the frontend. The theme I was using did not use the standard WooCommerce gallery hooks. It used a custom template from a developer named TemplateMela. My code kept working on the default Storefront theme but would disappear the moment I switched back to the client’s theme. I had to dig through the theme’s source code, looking for filter names. That is when I found the filters for the main image and the thumbnail list. Once I had those, I could finally inject my video HTML into the right spot. It was a huge win. Seeing that play button finally show up in the gallery felt better than any paycheck.

I also had to deal with the reality of video file sizes. If a user uploads a 50MB video, it is going to ruin the site’s performance. I could not solve that with just code, so I had to make sure the snippet used the “metadata” preload setting. This ensures the browser only downloads the video info instead of the whole file when the page loads. It is a small tradeoff, but it keeps the site fast while still giving the user what they want.

Security and risks

When you are writing code that handles file uploads and saves data to the database, you have to be careful. I have seen too many snippets online that are just wide open to attacks. I made sure to include some basic but essential security measures in this code.

• Nonces: The code uses a nonce (number used once) to verify that the person saving the product video is actually the authorized user and not some random script.
• Capabilities: I added a check to ensure only people with the ‘edit_post’ permission can actually change the video data.
• Sanitization: Every piece of data coming from the user is passed through functions like absint() or sanitize_text_field(). This prevents people from trying to inject malicious scripts into your database.
• File types: While the code allows video uploads, it still relies on the WordPress core to handle the actual file processing. It does not bypass the main security filters for the media library.

The biggest risk with this snippet is not actually security, but server resources. If you are on a very cheap shared hosting plan, hosting your own videos can be tough. Videos take up a lot of bandwidth. If you have ten people watching a high-definition product video at the same time, it might slow down your site. This snippet is safe to use, but you should always try to compress your videos before uploading them. Keep them under 5MB if you can.

How to use

Getting this working on your site is pretty straightforward. You do not need to be a developer to do it, just follow these steps carefully. I always recommend using a child theme or a snippet plugin so you do not lose your changes when you update your main theme.

1. Install the WPCode or Code Snippets plugin from the WordPress repository.
2. Create a new snippet and set the type to PHP Snippet.
3. Copy the entire block of code provided below.
4. Paste it into the code editor in the plugin.
5. Set the snippet to run everywhere and hit save.
6. Go to one of your products in the dashboard. You will see a new section in the right-hand sidebar or at the bottom of the image gallery box that says “Gallery video”.
7. Select your video and a thumbnail, then update the product.

If you do not see the video on the front of the site, check if your theme uses a custom gallery. This code is specifically tailored for themes using the TemplateMela structure or standard WooCommerce hooks. If your theme is very unique, you might need to adjust the filter names in the code.

<?php
/**
 * Plugin Name: WC Product Gallery Media
 * Description: Adds video controls inside WooCommerce Product Gallery and renders one video item in single-product gallery.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

const AWI_PRODUCT_VIDEO_META_KEY       = '_awi_product_gallery_video_id';
const AWI_PRODUCT_VIDEO_THUMB_META_KEY = '_awi_product_gallery_video_thumb_id';

/**
 * Allow common video uploads.
 */
add_filter(
	'upload_mimes',
	static function ( $mimes ) {
		$mimes['mp4']  = 'video/mp4';
		$mimes['m4v']  = 'video/mp4';
		$mimes['mov']  = 'video/quicktime';
		$mimes['webm'] = 'video/webm';
		$mimes['ogv']  = 'video/ogg';
		$mimes['ogg']  = 'video/ogg';
		return $mimes;
	}
);

/**
 * Inject video controls into the existing WooCommerce Product Gallery metabox.
 */
add_action(
	'admin_enqueue_scripts',
	static function ( $hook_suffix ) {
		if ( ! in_array( $hook_suffix, array( 'post.php', 'post-new.php' ), true ) ) {
			return;
		}

		$screen = get_current_screen();
		if ( ! $screen || 'product' !== $screen->id ) {
			return;
		}

		$post_id  = isset( $_GET['post'] ) ? absint( wp_unslash( $_GET['post'] ) ) : 0;
		$video_id = $post_id ? (int) get_post_meta( $post_id, AWI_PRODUCT_VIDEO_META_KEY, true ) : 0;
		$thumb_id = $post_id ? (int) get_post_meta( $post_id, AWI_PRODUCT_VIDEO_THUMB_META_KEY, true ) : 0;

		$video_url      = $video_id ? wp_get_attachment_url( $video_id ) : '';
		$video_filename = $video_url ? wp_basename( $video_url ) : '';
		$thumb_url      = $thumb_id ? wp_get_attachment_image_url( $thumb_id, 'thumbnail' ) : '';

		wp_enqueue_media();
		wp_register_script( 'awi-product-gallery-video-admin', '', array( 'jquery' ), '1.1.0', true );
		wp_enqueue_script( 'awi-product-gallery-video-admin' );

		$config = array(
			'nonce'         => wp_create_nonce( 'awi_save_product_video' ),
			'videoId'       => $video_id,
			'thumbId'       => $thumb_id,
			'videoFilename' => $video_filename,
			'thumbUrl'      => $thumb_url,
		);

		$js = 'window.awiProductGalleryVideo = ' . wp_json_encode( $config ) . ';';
		wp_add_inline_script( 'awi-product-gallery-video-admin', $js, 'before' );

		$inline_js = <<<'JS'
jQuery(function($) {
	var cfg = window.awiProductGalleryVideo || {};
	var $box = $('#woocommerce-product-images .inside');
	var $form = $('#post');

	if (!$box.length || !$form.length) {
		return;
	}

	if ($('#awi-product-gallery-video-wrap').length) {
		return;
	}

	if (!$('#awi_product_video_id').length) {
		$form.append('<input type="hidden" id="awi_product_video_id" name="awi_product_video_id" value="' + (cfg.videoId || '') + '">');
	}
	if (!$('#awi_product_video_thumb_id').length) {
		$form.append('<input type="hidden" id="awi_product_video_thumb_id" name="awi_product_video_thumb_id" value="' + (cfg.thumbId || '') + '">');
	}
	if (!$('#awi_product_video_nonce').length) {
		$form.append('<input type="hidden" id="awi_product_video_nonce" name="awi_product_video_nonce" value="' + (cfg.nonce || '') + '">');
	}

	var ui = '' +
		'<div id="awi-product-gallery-video-wrap">' +
			'<hr />' +
			'<p><strong>Gallery video</strong></p>' +
			'<p>Select one video and one thumbnail image.</p>' +
			'<div class="awi-pgv-row">' +
				'<button type="button" class="button" id="awi-select-product-video">Select video</button> ' +
				'<button type="button" class="button" id="awi-remove-product-video">Remove</button>' +
			'</div>' +
			'<div class="awi-pgv-file" id="awi-product-video-filename"></div>' +
			'<div class="awi-pgv-row">' +
				'<button type="button" class="button" id="awi-select-product-video-thumb">Select thumbnail</button> ' +
				'<button type="button" class="button" id="awi-remove-product-video-thumb">Remove</button>' +
			'</div>' +
			'<div class="awi-pgv-thumb-wrap"><img id="awi-product-video-thumb-image" alt="Video thumbnail" /></div>' +
		'</div>';

	var $anchor = $box.find('p.add_product_images');
	if ($anchor.length) {
		$anchor.after(ui);
	} else {
		$box.append(ui);
	}

	var $videoId = $('#awi_product_video_id');
	var $thumbId = $('#awi_product_video_thumb_id');
	var $videoName = $('#awi-product-video-filename');
	var $thumbImg = $('#awi-product-video-thumb-image');
	var videoFrame = null;
	var thumbFrame = null;

	function setVideoLabel(name) {
		$videoName.html(name ? name : '<em>No video selected</em>');
	}

	function setThumb(url) {
		if (url) {
			$thumbImg.attr('src', url).show();
		} else {
			$thumbImg.attr('src', '').hide();
		}
	}

	setVideoLabel(cfg.videoFilename || '');
	setThumb(cfg.thumbUrl || '');

	$('#awi-select-product-video').on('click', function(e) {
		e.preventDefault();
		if (videoFrame) {
			videoFrame.open();
			return;
		}

		videoFrame = wp.media({
			title: 'Select product gallery video',
			button: { text: 'Use this video' },
			library: { type: ['video'] },
			multiple: false
		});

		videoFrame.on('select', function() {
			var attachment = videoFrame.state().get('selection').first().toJSON();
			if (!attachment || !attachment.id) {
				return;
			}
			$videoId.val(String(attachment.id));
			setVideoLabel(attachment.filename || ('ID: ' + attachment.id));
		});

		videoFrame.open();
	});

	$('#awi-remove-product-video').on('click', function(e) {
		e.preventDefault();
		$videoId.val('');
		setVideoLabel('');
	});

	$('#awi-select-product-video-thumb').on('click', function(e) {
		e.preventDefault();
		if (thumbFrame) {
			thumbFrame.open();
			return;
		}

		thumbFrame = wp.media({
			title: 'Select product video thumbnail',
			button: { text: 'Use this image' },
			library: { type: ['image'] },
			multiple: false
		});

		thumbFrame.on('select', function() {
			var attachment = thumbFrame.state().get('selection').first().toJSON();
			if (!attachment || !attachment.id) {
				return;
			}
			$thumbId.val(String(attachment.id));
			var thumbUrl = attachment.sizes && attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;
			setThumb(thumbUrl || '');
		});

		thumbFrame.open();
	});

	$('#awi-remove-product-video-thumb').on('click', function(e) {
		e.preventDefault();
		$thumbId.val('');
		setThumb('');
	});
});
JS;

		$inline_css = <<<'CSS'
#awi-product-gallery-video-wrap {
	margin: 12px 0 0;
	padding: 12px 8px 0;
	border-top: 1px solid #dcdcde;
	box-sizing: border-box;
}

#awi-product-gallery-video-wrap .awi-pgv-file {
	margin-top: 8px;
	word-break: break-all;
	color: #1d2327;
}

#awi-product-gallery-video-wrap .awi-pgv-thumb-wrap {
	margin-top: 8px;
}

#awi-product-gallery-video-wrap #awi-product-video-thumb-image {
	display: none;
	max-width: 100%;
	height: auto;
	border: 1px solid #dcdcde;
}
CSS;

		wp_add_inline_script( 'awi-product-gallery-video-admin', $inline_js );
		wp_register_style( 'awi-product-gallery-video-admin-style', false, array(), '1.1.0' );
		wp_enqueue_style( 'awi-product-gallery-video-admin-style' );
		wp_add_inline_style( 'awi-product-gallery-video-admin-style', $inline_css );
	}
);

/**
 * Save video and thumbnail IDs.
 */
add_action(
	'save_post_product',
	static function ( $post_id ) {
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
			return;
		}

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

		if ( ! isset( $_POST['awi_product_video_nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['awi_product_video_nonce'] ) ), 'awi_save_product_video' ) ) {
			return;
		}

		$video_id = isset( $_POST['awi_product_video_id'] ) ? absint( wp_unslash( $_POST['awi_product_video_id'] ) ) : 0;
		$thumb_id = isset( $_POST['awi_product_video_thumb_id'] ) ? absint( wp_unslash( $_POST['awi_product_video_thumb_id'] ) ) : 0;

		if ( $video_id > 0 ) {
			update_post_meta( $post_id, AWI_PRODUCT_VIDEO_META_KEY, $video_id );
		} else {
			delete_post_meta( $post_id, AWI_PRODUCT_VIDEO_META_KEY );
		}

		if ( $thumb_id > 0 ) {
			update_post_meta( $post_id, AWI_PRODUCT_VIDEO_THUMB_META_KEY, $thumb_id );
		} else {
			delete_post_meta( $post_id, AWI_PRODUCT_VIDEO_THUMB_META_KEY );
		}
	}
);

/**
 * Get video data for current product gallery.
 *
 * @return array<string, string|int>|null
 */
function awi_get_product_gallery_video_data() {
	if ( ! function_exists( 'wc_get_product' ) ) {
		return null;
	}

	global $product;
	if ( ! $product || ! is_a( $product, 'WC_Product' ) ) {
		return null;
	}

	$product_id = $product->get_id();
	$video_id   = (int) get_post_meta( $product_id, AWI_PRODUCT_VIDEO_META_KEY, true );
	if ( $video_id <= 0 ) {
		return null;
	}

	$video_url = wp_get_attachment_url( $video_id );
	if ( ! $video_url ) {
		return null;
	}

	$mime = (string) get_post_mime_type( $video_id );
	if ( 0 !== strpos( $mime, 'video/' ) ) {
		$mime = 'video/mp4';
	}

	$thumb_id  = (int) get_post_meta( $product_id, AWI_PRODUCT_VIDEO_THUMB_META_KEY, true );
	$thumb_url = $thumb_id ? wp_get_attachment_image_url( $thumb_id, 'woocommerce_gallery_thumbnail' ) : '';
	if ( ! $thumb_url ) {
		$thumb_url = wp_mime_type_icon( $video_id );
	}

	return array(
		'product_id' => $product_id,
		'video_url'  => $video_url,
		'mime'       => $mime,
		'thumb_url'  => (string) $thumb_url,
	);
}

/**
 * Add video slide to TemplateMela custom gallery main list.
 */
add_filter(
	'base_single_product_image_main_html',
	static function ( $html, $slide_id ) {
		static $added_for_product = array();

		$video_data = awi_get_product_gallery_video_data();
		if ( ! $video_data ) {
			return $html;
		}

		$product_id = (int) $video_data['product_id'];
		if ( ! empty( $added_for_product[ $product_id ] ) ) {
			return $html;
		}

		$added_for_product[ $product_id ] = true;

		$video_html  = '<li class="splide__slide awi-woo-video-slide">';
		$video_html .= '<video class="awi-product-gallery-video" controls preload="metadata" playsinline poster="' . esc_url( (string) $video_data['thumb_url'] ) . '">';
		$video_html .= '<source src="' . esc_url( (string) $video_data['video_url'] ) . '" type="' . esc_attr( (string) $video_data['mime'] ) . '" />';
		$video_html .= '</video>';
		$video_html .= '</li>';

		return $html . $video_html;
	},
	20,
	2
);

/**
 * Add video thumbnail item to TemplateMela custom gallery thumbnails list.
 */
add_filter(
	'base_single_product_image_thumbnail_html',
	static function ( $html, $slide_id ) {
		static $added_for_product = array();

		$video_data = awi_get_product_gallery_video_data();
		if ( ! $video_data ) {
			return $html;
		}

		$product_id = (int) $video_data['product_id'];
		if ( ! empty( $added_for_product[ $product_id ] ) ) {
			return $html;
		}

		$added_for_product[ $product_id ] = true;

		$thumb_html  = '<li class="bt-woo-gallery-thumbnail splide__slide awi-woo-video-thumb">';
		$thumb_html .= '<img src="' . esc_url( (string) $video_data['thumb_url'] ) . '" alt="Product video" />';
		$thumb_html .= '</li>';

		return $html . $thumb_html;
	},
	20,
	2
);

/**
 * Frontend styling for gallery video slide.
 */
add_action(
	'wp_enqueue_scripts',
	static function () {
		if ( ! function_exists( 'is_product' ) || ! is_product() ) {
			return;
		}

		wp_register_style( 'awi-product-gallery-video', false, array(), '1.1.0' );
		wp_enqueue_style( 'awi-product-gallery-video' );
		wp_add_inline_style(
			'awi-product-gallery-video',
			'.single-product .woocommerce-product-gallery__image--video,.single-product .awi-woo-video-slide{background:#000;border-radius:6px;overflow:hidden}.single-product .woocommerce-product-gallery__image--video .awi-product-gallery-video,.single-product .awi-woo-video-slide .awi-product-gallery-video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#000}.single-product .awi-woo-video-thumb img{object-fit:cover;width:100%;height:100%}'
		);
	}
);

The problem with default layouts

I was looking at the WooCommerce edit screen a few weeks ago and it really started to get on my nerves. If you want to add any extra data to a product, the default way is to create a meta box. Usually, these meta boxes end up at the very bottom of the page, or you have to hide them inside one of those vertical tabs in the product data section. It is a lot of clicking and scrolling for something that should be simple.

I had a specific need for this project. I wanted a way to add a product video link, but I wanted it to be the first thing I saw after the title. When you are managing hundreds of products, every second you spend hunting for a text field adds up. I felt like the standard WordPress way of doing things was actually slowing me down. I started wondering why there is so much empty space under the title input in the admin area and why more people do not use it.

The goal was simple. I wanted a field for a URL right under the title. Then, on the actual website, I wanted a link to appear right next to the product title that says (Watch Product Video). No fancy buttons, no heavy scripts, just a clean link that people can click. This is how I ended up building this specific extension.

Real world constraints

I did not have weeks to build some massive video management suite. I just needed something that worked. One of the biggest issues I ran into was how WordPress handles the edit screen. There is a hook called edit_form_after_title, but it behaves differently depending on what post type you are using. Since I was targeting WooCommerce products, I had to make sure I was not accidentally injecting my custom field into regular blog posts or pages.

Money was also a factor, in the sense that I did not want to buy a heavy plugin like ACF Pro just for one single field. It felt like overkill. I wanted a lightweight, standalone file that I could drop into any site without adding more bloat. I also had to think about the learning curve for the person actually using the site. If I put the field in a weird spot, they would forget to fill it out. By putting it right under the title, it becomes part of the natural workflow: type the name, paste the link, move on.

I struggled a bit with the front-end display. Different themes handle titles in different ways. Some themes use the standard the_title hook, while others use custom templates. And then there is Elementor. Elementor is a pain because it often bypasses standard WordPress filters. I had to spend a good few hours figuring out how to get my link to show up inside an Elementor product title widget without breaking the layout.

How the code is structured

I decided to wrap everything in a final class called AW_Product_Title_Video_Link. I like using static methods for these kinds of small plugins because it keeps the global namespace clean and I do not have to worry about instantiating objects everywhere. It is straightforward and it works.

The plugin uses a single meta key called _aw_product_video_link to store the URL. I kept it simple. I did not need a complex database table or anything like that. Just one row in the postmeta table per product. Here is a look at how I initialized the hooks:

public static function init(): void {
    add_action( 'edit_form_after_title', array( __CLASS__, 'render_admin_field_below_title' ) );
    add_action( 'save_post_product', array( __CLASS__, 'save_admin_field' ) );

    add_action( 'wp', array( __CLASS__, 'replace_single_product_title' ) );
    add_action( 'wp_head', array( __CLASS__, 'print_inline_styles' ) );
    add_action( 'wp_footer', array( __CLASS__, 'print_frontend_fallback_script' ), 99 );
    add_filter( 'elementor/widget/render_content', array( __CLASS__, 'filter_elementor_widget_render_content' ), 10, 2 );
}

The render_admin_field_below_title method is what actually draws the input box on the backend. I added some basic styling to it so it looks like it belongs in the WordPress dashboard. I used a simple border and some padding. I also added a nonce field for security. You should never save data in WordPress without checking a nonce first, otherwise you are just asking for trouble.

Dealing with the frontend and Elementor

The frontend part was tricky. I wanted the link to appear right after the title text. Initially, I tried using a filter on the_title, but that caused issues in the menu and other places where the title is displayed. I only wanted it on the single product page.

To fix this, I used the wp action to check if we are on a single product page before doing anything. For Elementor support, I had to use the elementor/widget/render_content filter. This looks at the content being rendered and, if it is a product title widget, it appends my custom HTML link to the title string. It is a bit of a workaround, but page builders often require these kinds of specific fixes.

public static function filter_elementor_widget_render_content( $content, $widget ) {
    if ( 'wc-product-title' !== $widget->get_name() && 'heading' !== $widget->get_name() ) {
        return $content;
    }

    $post_id = get_the_ID();
    $video_url = get_post_meta( $post_id, self::META_KEY, true );

    if ( ! empty( $video_url ) ) {
        $video_html = ' <a href="' . esc_url( $video_url ) . '" class="aw-video-link" target="_blank">(Watch Product Video)</a>';
        $content = str_replace( '</h1>', $video_html . '</h1>', $content );
    }

    return $content;
}

I also added a fallback script in the footer. This script is a bit of insurance. If the PHP filters fail for some reason or if the theme layout is really weird, the JavaScript looks for the product title on the page and manually injects the link. It might seem redundant, but in the world of WordPress themes, you can never be too sure. It is better to have a fallback than to have a client complain that the feature is missing on their specific setup.

Technical tradeoffs

I made a few specific choices that some developers might disagree with. First, I put the CSS in the wp_head instead of a separate file. Why? Because the CSS is only about five lines long. Making the browser fetch an entirely new .css file for five lines of code is a waste of a request. It is faster to just print it inline.

Second, I hardcoded the link text as (Watch Product Video). In a perfect world, I would have made this a setting in the admin area so it could be changed. But again, constraints. I needed this done quickly, and the user did not need to change the text. I chose speed of development over total flexibility. If I need to change it later, I can just open the file and edit one line. It is not a big deal for a custom project.

I also decided to keep the input as a URL type. This provides some basic browser level validation. If someone tries to paste something that is not a link, the browser will complain before the form even submits. It saves me from writing a bunch of custom validation logic in PHP.

Who this is for

• Store owners who want to highlight product videos prominently.
• Developers who need a simple way to add data fields without using heavy plugins.
• Sites using Elementor or custom themes where standard hooks might be unreliable.
• Anyone who prefers a clean, direct admin interface over cluttered meta boxes.

How to install

Installing this is just like any other WordPress plugin. Since it is just a single folder with a PHP file inside, you can zip it up and upload it. Here is the exact process:

• Download the product-link-below-title.zip file.
• Go to your WordPress admin dashboard.
• Navigate to Plugins then Add New.
• Click Upload Plugin and select the zip file.
• Click Install Now and then Activate.

Once it is active, go to any WooCommerce product. You will see the new field right below the product title. Paste a YouTube or Vimeo link there, save the product, and check the front end. The link should appear right next to the title. If you do not see it, check your theme settings or make sure the product actually has a link saved.

Why this matters to me

I think a lot of people overcomplicate WordPress development. They think you need a massive framework or a dozen third party libraries to do anything useful. This project reminded me that you can solve real problems with about 150 lines of PHP. It is not about how complex the code is, it is about whether or not it makes someone’s life easier. For me, not having to scroll to the bottom of the page every time I want to add a video is a win. It is a small win, but those are the ones that make the day to day work tolerable.

There is also a sense of control when you write your own tools. I know exactly how this plugin works. I know exactly where to go if it breaks. I do not have to wait for a developer to release an update or worry about a license key expiring. It is just my code running on my site, exactly how I want it. That is why I like building these small custom extensions.

Importon Bridge is a lightweight WordPress plugin that connects a browser companion with WooCommerce. It captures permitted product data from supported supplier pages and sends it directly into your WordPress store through a clean, authenticated workflow.

The goal is simple. Instead of copying product titles, descriptions, prices, images, attributes, and variations by hand, Importon Bridge gives you a faster way to move product data from the browser into WooCommerce.

It is built for store owners and developers who want control. No bloated import dashboard. No complicated SaaS layer. Just a focused bridge between the product page you are viewing and the WooCommerce store you manage.

See the current product details, requirements, and purchase options on the Importon Bridge product page.

What Importon Bridge does

Importon Bridge is designed around a practical WooCommerce import workflow. The browser companion captures product information from the page, then the WordPress plugin receives it through a secured REST API and creates or updates the product inside WooCommerce.

• Imports product title, description, price, images, attributes, and variations.
• Supports simple and variable WooCommerce products.
• Creates or updates products through authenticated REST API endpoints.
• Adds product video support when a video URL is available.
• Stores import history and failed-item logs for review.
• Includes a batch URL queue for importing multiple product links.
• Supports optional AI rewriting through OpenAI or Google Gemini.

Importon Bridge is an independent browser-assisted product workflow. Store owners are responsible for importing only data they are permitted to use.

Why I rebuilt it as Importon Bridge

The original idea was narrowly focused on importing supplier product data into WooCommerce. But the plugin grew into something broader. It now works more like a bridge between a browser-based product capture flow and a WordPress-powered store.

That is why the new name makes more sense. Importon Bridge describes the actual purpose of the tool better. It connects the browser companion, the WooCommerce product system, the REST API, import monitoring, batch URLs, and optional AI rewriting in one focused workflow.

I also cleaned up the branding, moved more of the setup flow into the plugin admin page, and made the connection process easier. The goal is to make the tool feel more complete without making it heavy.

How the workflow works

The system has two main parts. The first part is the browser companion. It runs in Chrome or any Chromium-based browser and captures product data from the page you are already viewing.

The second part is the WordPress plugin. It adds the admin screen, connection settings, REST API endpoints, product import logic, history logs, batch URL import tools, and optional AI rewrite settings.

1. Open a supported product page in your browser.
2. Use the Importon Bridge browser companion to capture the product data.
3. Send the product data to WordPress through the authenticated REST API.
4. Create or update the WooCommerce product.
5. Review import logs, failed items, and optional AI rewrite results inside WordPress.

REST API endpoints

Importon Bridge exposes authenticated endpoints under importonbridge/v1. These endpoints handle connection testing, settings, categories, and product import requests.

POST  /wp-json/importonbridge/v1/import      Create or update a WooCommerce product
GET   /wp-json/importonbridge/v1/ping        Confirm authentication
GET   /wp-json/importonbridge/v1/categories  List WooCommerce product categories
GET   /wp-json/importonbridge/v1/settings    Read connection settings
POST  /wp-json/importonbridge/v1/settings    Save connection settings
POST  /wp-json/importonbridge/v1/connect     Return connection details for the browser companion

AI rewriting support

AI rewriting is optional. It only runs when the administrator enables it from the plugin settings. This keeps the plugin useful for normal imports without forcing AI into every workflow.

• Supports OpenAI and Google Gemini.
• Stores API keys server-side in WordPress options.
• Allows provider order and model selection from the settings screen.
• Can rewrite titles and descriptions before saving product content.

Security choices

Because this plugin creates and updates WooCommerce products, the security layer matters. Importon Bridge uses WordPress-native protections instead of trying to invent its own system.

• Admin actions use WordPress nonces.
• REST endpoints check authentication and user capabilities.
• User input is sanitized before storage or processing.
• Output is escaped before rendering in the admin or frontend.
• External AI calls only run when an administrator configures them.

Requirements

Importon Bridge is built for modern WooCommerce stores and a Chromium-based browser workflow.

• WordPress 6.0 or higher.
• WooCommerce 8.0 or higher.
• PHP 7.4 or higher.
• Google Chrome or another Chromium-based browser for the browser companion.

How to install

The setup has two parts: the WordPress plugin and the browser companion. The plugin handles the WooCommerce side. The browser companion handles product capture from supported product pages.

WordPress side

1. After purchase, download the current plugin ZIP from your Freemius purchase email or customer portal.
2. Upload the plugin to /wp-content/plugins/.
3. Activate the plugin from the WordPress dashboard.
4. Make sure WooCommerce is installed and active.
5. Open Importon Bridge in the WordPress admin.

Browser side

1. Download the browser companion from the Importon Bridge settings page.
2. Open chrome://extensions in Chrome.
3. Turn on Developer Mode.
4. Click Load unpacked and select the browser companion folder.
5. Create a WordPress Application Password from your user profile.
6. Paste your Site URL, username, and Application Password into the connection panel.
7. Use the Test Connection option before importing products.

File structure

The plugin is organized into a small set of focused files. The main plugin file loads the system, while the includes folder handles admin screens, REST API logic, frontend behavior, and batch URL importing.

importon-bridge/
├── importon-bridge.php
├── README.txt
├── README.md
├── license.txt
├── assets/
│   └── url-import-admin.js
└── includes/
    ├── class-importonbridge-admin.php
    ├── class-importonbridge-frontend.php
    ├── class-importonbridge-rest.php
    └── class-importonbridge-url-import.php

Who this is for

Importon Bridge is for WooCommerce store owners, product upload teams, and developers who want a faster import workflow without relying on a heavy subscription tool.

It is especially useful when you need to move product data from browser-based supplier pages into WooCommerce, but you still want control over what gets imported, rewritten, reviewed, and published.

What the current 0.2.2 release includes

The current release uses Importon Bridge branding throughout the plugin, WordPress admin, REST connection, browser companion, and release package.

• Browser companion product import flow.
• WooCommerce product creation and update support.
• Simple and variable product handling.
• Optional AI rewriting.
• Batch URL import queue.
• Failed-run logging and admin monitoring.
• Freemius-ready delivery and a bundled SDK in the official release package.

Why this plugin matters

Importing products should not feel like a full-time data entry job. Importon Bridge makes the process faster by connecting the product page, the browser, and WooCommerce in one direct workflow.

It does not try to be a giant dropshipping platform. It focuses on the part that actually slows people down: collecting product data, sending it into WooCommerce, reviewing it, and improving the copy when needed.

That focus is what makes the plugin useful. It is a practical bridge for people who want a cleaner product import process without giving up control of their WordPress store.

The problem with bulk editing

I spent most of last Tuesday staring at the spinning loading icon in the WooCommerce dashboard. I had about sixty products that needed price updates and category shifts. If you have ever used the default bulk edit tool in WordPress, you know how clunky it feels. You select the items, you click edit, you apply the changes, and then you pray that the server does not time out. It is slow. It feels like software built fifteen years ago. I did not want to buy a seventy dollar plugin just to change some numbers and text. I am a developer, so I figured I should just build the solution myself. I wanted something that looked like a spreadsheet but worked directly inside my admin panel without any extra bloat.

The biggest issue was time. I did not have three days to build a full React based interface with a REST API. I needed something that worked right now. I had a deadline for a client and my own shop was falling behind. I needed a tool that let me see everything on one screen, type in the changes, and hit save once. No jumping between pages. No individual product screens. Just a clean list that lets me get the work done so I can go back to actually building things.

What this solves

This snippet creates a dedicated page in your WooCommerce menu called Inline Product Editor. It focuses on the three things people change most often. These are the title, the product category, and the regular price. I purposely left out things like weight or dimensions because adding too many fields makes the UI messy and hard to use on a laptop screen. Here is what this tool actually handles for you:

• It lets you search for products by name so you do not have to scroll through thousands of items.
• It provides a category filter to narrow down your list to a specific group.
• It allows you to change the number of products shown per page.
• It gives you a text input for the title and the price that you can edit instantly.
• It includes a category dropdown that replaces the current category with a new one.
• It highlights rows in green as soon as you change a value so you know what you have touched.

Basically, it turns a thirty minute chore into a two minute task. You check the boxes for the rows you want to update, hit the save button at the top or bottom, and the script handles the database updates in the background. It is straightforward and does not try to be anything it is not.

The struggle of building a clean UI

I am not a designer. I usually stick to the backend because CSS makes me want to put my head through a wall. When I started writing this, the table looked terrible. It was just a bunch of inputs smashed together. I had to spend a couple of hours tweaking the styles to make it feel modern. I used a lot of flexbox and sticky positioning. I wanted the save button to stay visible even when you are scrolling through a long list of products. That sticky header was a pain to get right with the WordPress admin bar, but it makes a huge difference in how the tool feels. If you have to scroll all the way back to the top to save, the tool is broken in my opinion.

I also had to think about mobile. Most people do not manage their shops on a phone, but sometimes you are on the train and you notice a typo in a price. I wrote some media queries that stack the table cells vertically on small screens. It is not perfect, but it is usable. The real win was the JavaScript logic for marking changed rows. I did not want the script to try and update every single product on the page every time you hit save. That is a waste of resources. By adding a CSS class to the row when an input changes, I can visually track my progress. I also added a feature where you can click the product ID cell to toggle the checkbox. It sounds small, but clicking those tiny checkboxes over and over is annoying. Making the whole cell clickable makes the experience feel much more fluid.

The technical logic and tradeoffs

I made some specific choices with the PHP logic here. For the price cleaning, I had to handle different formats. Some people use commas for decimals and others use dots. I wrote a small helper function called price_clean that strips out the garbage and ensures the database gets a clean float. If you leave a price field blank, the script just ignores it instead of setting your product price to zero. That was a bug I hit in the first version and it nearly ruined my day. Checking for empty strings versus actual numerical zeros is a classic PHP headache.

I decided to use the admin_post hook for the saving logic. Some people would argue for an AJAX save every time a field loses focus. I thought about that, but AJAX in the WordPress admin can be flaky if you have other plugins interfering. I went with a standard form submission. It is more robust. When you hit save, it processes the data, redirects you back to the page, and shows a success notice. It feels solid. You know for a fact that the data went through. The tradeoff is a page reload, but for a bulk tool, I think that is a fair exchange for reliability. I also made sure to clear the WooCommerce product transients. If you do not do that, the old prices might still show up on your front end for a while because of caching. That is one of those small details that separate a quick hack from a real tool.

The code

<?php
/**
 * Plugin Name: WPCup Inline Bulk Product Editor (WooCommerce)
 * Description: Edit WooCommerce product Title, Category, and Regular Price directly from a list UI in WP Admin.
 * Version: 1.1.0
 * Author: WPCup
 */

if (!defined('ABSPATH')) exit;

class WPCUP_Inline_Bulk_Product_Editor {
  const SLUG = 'wpcup-inline-bulk-product-editor';
  const NONCE_ACTION = 'wpcup_inline_bpe_save';

  public function __construct() {
    add_action('admin_menu', array($this, 'menu'));
    add_action('admin_post_wpcup_inline_bpe_save', array($this, 'handle_save'));
    add_action('admin_enqueue_scripts', array($this, 'assets'));
  }

  public function menu() {
    add_menu_page(
      'Inline Product Editor',
      'Inline Product Editor',
      'manage_woocommerce',
      self::SLUG,
      array($this, 'page'),
      'dashicons-edit',
      56
    );
  }

  public function assets($hook) {
    if (empty($_GET['page']) || $_GET['page'] !== self::SLUG) return;

    $css = "
      .wpcup-wrap{max-width:1280px;}
      .wpcup-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;}
      .wpcup-title{margin:0;line-height:1.15;}
      .wpcup-sub{color:#6b7280;margin:6px 0 0;font-size:13px;}
      .wpcup-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:12px;}
      .wpcup-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 1px 0 rgba(0,0,0,.02);}
      .wpcup-row{display:flex;gap:12px;flex-wrap:wrap;align-items:end;}
      .wpcup-row > div{flex:1 1 240px;}
      .wpcup-label{display:block;font-weight:600;margin-bottom:6px;}
      .wpcup-input,.wpcup-select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;background:#fff;}
      .wpcup-input:focus,.wpcup-select:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.18);border-color:#93c5fd;}
      .wpcup-btn{padding:10px 14px;border-radius:12px;border:1px solid #111827;background:#111827;color:#fff;cursor:pointer;}
      .wpcup-btn:hover{opacity:.92;}
      .wpcup-btn-secondary{background:#fff;color:#111827;border:1px solid #d1d5db;}
      .wpcup-btn-secondary:hover{background:#f9fafb;}
      .wpcup-note{color:#6b7280;font-size:13px;margin-top:6px;}
      .wpcup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
      .wpcup-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
      .wpcup-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fafafa;color:#111827;font-size:13px;}
      .wpcup-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;}
      .wpcup-table th,.wpcup-table td{padding:12px 12px;border-bottom:1px solid #e5e7eb;vertical-align:top;}
      .wpcup-table th{background:#f9fafb;text-align:left;font-weight:700;position:sticky;top:0;z-index:1;}
      .wpcup-muted{color:#6b7280;font-size:12px;margin-top:6px;}
      .wpcup-changed{outline:2px solid rgba(34,197,94,.25);background:rgba(34,197,94,.06);}
      .wpcup-price{max-width:160px;}
      .wpcup-title-input{min-width:260px;}
      .wpcup-sticky{position:sticky;top:32px;z-index:5;}
      .wpcup-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
      .wpcup-divider{height:1px;background:#e5e7eb;margin:12px 0;}
      @media (max-width: 900px){
        .wpcup-sticky{position:static;}
        .wpcup-table thead{display:none;}
        .wpcup-table, .wpcup-table tbody, .wpcup-table tr, .wpcup-table td{display:block;width:100%;}
        .wpcup-table tr{border:1px solid #e5e7eb;border-radius:14px;margin-bottom:12px;overflow:hidden;}
        .wpcup-table td{border-bottom:1px solid #e5e7eb;}
        .wpcup-table td:last-child{border-bottom:none;}
        .wpcup-table td[data-label]::before{
          content: attr(data-label);
          display:block;
          font-weight:700;
          color:#111827;
          margin-bottom:6px;
        }
        .wpcup-price{max-width:100%;}
      }
    ";
    wp_register_style('wpcup_inline_bpe_css', false);
    wp_enqueue_style('wpcup_inline_bpe_css');
    wp_add_inline_style('wpcup_inline_bpe_css', $css);

    $js = "
      document.addEventListener('DOMContentLoaded', function(){
        var selectAll = document.getElementById('wpcup_select_all');
        if(selectAll){
          selectAll.addEventListener('change', function(){
            var cbs = document.querySelectorAll('input[name=\"product_ids[]\"]');
            for (var i=0; i<cbs.length; i++) cbs[i].checked = selectAll.checked;
            updateSelectedCount();
          });
        }

        function updateSelectedCount(){
          var cbs = document.querySelectorAll('input[name=\"product_ids[]\"]');
          var count = 0;
          for (var i=0; i<cbs.length; i++) if (cbs[i].checked) count++;
          var el = document.getElementById('wpcup_selected_count');
          if(el) el.textContent = count;
        }

        var rowInputs = document.querySelectorAll('.wpcup-row-input');
        for (var i=0; i<rowInputs.length; i++){
          rowInputs[i].addEventListener('input', markChanged);
          rowInputs[i].addEventListener('change', markChanged);
        }

        function markChanged(e){
          var tr = e.target.closest('tr');
          if(tr) tr.classList.add('wpcup-changed');
        }

        var checkboxes = document.querySelectorAll('input[name=\"product_ids[]\"]');
        for (var i=0; i<checkboxes.length; i++){
          checkboxes[i].addEventListener('change', updateSelectedCount);
        }

        var toggles = document.querySelectorAll('[data-toggle-check]');
        for (var i=0; i<toggles.length; i++){
          toggles[i].addEventListener('click', function(){
            var tr = this.closest('tr');
            if(!tr) return;
            var cb = tr.querySelector('input[type=\"checkbox\"][name=\"product_ids[]\"]');
            if(cb){ cb.checked = !cb.checked; updateSelectedCount(); }
          });
        }

        updateSelectedCount();
      });
    ";
    wp_register_script('wpcup_inline_bpe_js', false);
    wp_enqueue_script('wpcup_inline_bpe_js');
    wp_add_inline_script('wpcup_inline_bpe_js', $js);
  }

  private function categories() {
    $terms = get_terms(array(
      'taxonomy' => 'product_cat',
      'hide_empty' => false,
      'orderby' => 'name',
      'order' => 'ASC'
    ));
    if (is_wp_error($terms)) return array();
    return $terms;
  }

  private function price_clean($v) {
    $v = trim((string)$v);
    if ($v === '') return '';
    $v = str_replace(',', '.', $v);
    if (!is_numeric($v)) return '';
    $n = (float)$v;
    if ($n < 0) $n = 0;
    return number_format($n, 2, '.', '');
  }

  public function page() {
    if (!current_user_can('manage_woocommerce')) wp_die('No permission.');
    if (!class_exists('WooCommerce')) {
      echo '<div class="wrap"><h1>Inline Product Editor</h1><div class="notice notice-error"><p>WooCommerce is not active.</p></div></div>';
      return;
    }

    $paged = isset($_GET['paged']) ? max(1, (int)$_GET['paged']) : 1;
    $per_page = isset($_GET['per_page']) ? max(10, min(200, (int)$_GET['per_page'])) : 25;
    $s = isset($_GET['s']) ? sanitize_text_field(wp_unslash($_GET['s'])) : '';
    $cat = isset($_GET['cat']) ? (int)$_GET['cat'] : 0;

    $args = array(
      'post_type' => 'product',
      'post_status' => array('publish','draft','private'),
      'posts_per_page' => $per_page,
      'paged' => $paged,
      'orderby' => 'date',
      'order' => 'DESC',
      's' => $s
    );

    if ($cat > 0) {
      $args['tax_query'] = array(
        array(
          'taxonomy' => 'product_cat',
          'field' => 'term_id',
          'terms' => array($cat)
        )
      );
    }

    $q = new WP_Query($args);
    $cats = $this->categories();

    $notice = '';
    if (!empty($_GET['wpcup_saved'])) {
      $notice = '<div class="notice notice-success is-dismissible"><p><strong>Saved.</strong> Selected products updated.</p></div>';
    } elseif (!empty($_GET['wpcup_error'])) {
      $notice = '<div class="notice notice-error is-dismissible"><p><strong>Error:</strong> ' . esc_html($_GET['wpcup_error']) . '</p></div>';
    }

    echo '<div class="wrap wpcup-wrap">';

    echo '<div class="wpcup-header">';
    echo '<div>';
    echo '<h1 class="wpcup-title">Inline Product Editor <span class="wpcup-badge">Title • Category • Regular Price</span></h1>';
    echo '<p class="wpcup-sub">Edit directly in the list. Tick the products you want, then click <strong>Save Selected</strong>.</p>';
    echo '</div>';
    echo '<div class="wpcup-actions">';
    echo '<span class="wpcup-pill">Selected: <strong id="wpcup_selected_count">0</strong></span>';
    echo '</div>';
    echo '</div>';

    echo $notice;

    echo '<div class="wpcup-card">';
    echo '<form method="get" class="wpcup-row">';
    echo '<input type="hidden" name="page" value="' . esc_attr(self::SLUG) . '">';

    echo '<div><label class="wpcup-label">Search</label><input class="wpcup-input" name="s" value="' . esc_attr($s) . '" placeholder="Search product title..."></div>';

    echo '<div><label class="wpcup-label">Category filter</label><select class="wpcup-select" name="cat">';
    echo '<option value="0">All categories</option>';
    foreach ($cats as $t) {
      echo '<option value="' . esc_attr($t->term_id) . '"' . selected($cat, (int)$t->term_id, false) . '>' . esc_html($t->name) . '</option>';
    }
    echo '</select></div>';

    echo '<div><label class="wpcup-label">Per page</label><select class="wpcup-select" name="per_page">';
    $opts = array(25, 50, 100, 200);
    foreach ($opts as $pp) {
      echo '<option value="' . esc_attr($pp) . '"' . selected($per_page, $pp, false) . '>' . esc_html($pp) . '</option>';
    }
    echo '</select></div>';

    echo '<div>';
    echo '<button class="wpcup-btn" type="submit">Apply</button> ';
    echo '<a class="button wpcup-btn-secondary" href="' . esc_url(admin_url('admin.php?page=' . self::SLUG)) . '">Reset</a>';
    echo '</div>';

    echo '</form>';
    echo '<div class="wpcup-note">Tip: click the product cell to quickly tick/untick a row. Green highlight means you changed something.</div>';
    echo '</div>';

    echo '<form method="post" action="' . esc_url(admin_url('admin-post.php')) . '">';
    echo '<input type="hidden" name="action" value="wpcup_inline_bpe_save">';
    wp_nonce_field(self::NONCE_ACTION, '_wpcup_nonce');
    echo '<input type="hidden" name="return_page" value="' . esc_attr(wp_unslash($_SERVER['REQUEST_URI'])) . '">';

    echo '<div class="wpcup-card wpcup-sticky">';
    echo '<div class="wpcup-toolbar">';
    echo '<div class="wpcup-toolbar-left">';
    echo '<strong>Ready to save?</strong>';
    echo '<span class="wpcup-note">Only checked products will be saved.</span>';
    echo '</div>';
    echo '<div class="wpcup-actions">';
    echo '<button class="wpcup-btn" type="submit">Save Selected</button>';
    echo '</div>';
    echo '</div>';
    echo '</div>';

    echo '<div class="wpcup-card">';

    if (!$q->have_posts()) {
      echo '<p>No products found.</p>';
      echo '</div></form></div>';
      return;
    }

    echo '<table class="wpcup-table">';
    echo '<thead><tr>';
    echo '<th><input id="wpcup_select_all" type="checkbox" title="Select all"></th>';
    echo '<th>Product (edit title)</th>';
    echo '<th>Category (dropdown)</th>';
    echo '<th>Regular price</th>';
    echo '</tr></thead><tbody>';

    while ($q->have_posts()) {
      $q->the_post();
      $id = get_the_ID();
      $title = get_the_title();

      $terms = get_the_terms($id, 'product_cat');
      $current_cat_id = 0;
      if (!is_wp_error($terms) && !empty($terms)) {
        $current_cat_id = (int)$terms[0]->term_id;
      }

      $price = get_post_meta($id, '_regular_price', true);
      $price = ($price !== '') ? $price : '';

      echo '<tr>';
      echo '<td><input type="checkbox" name="product_ids[]" value="' . esc_attr($id) . '"></td>';

      echo '<td data-toggle-check>';
      echo '<div class="wpcup-muted">ID: ' . esc_html($id) . ' (tap/click to tick)</div>';
      echo '<input class="wpcup-input wpcup-row-input wpcup-title-input" type="text" name="title[' . esc_attr($id) . ']" value="' . esc_attr($title) . '">';
      echo '</td>';

      echo '<td>';
      echo '<select class="wpcup-select wpcup-row-input" name="cat[' . esc_attr($id) . ']">';
      echo '<option value="0">No change</option>';
      foreach ($cats as $t) {
        $sel = selected($current_cat_id, (int)$t->term_id, false);
        echo '<option value="' . esc_attr($t->term_id) . '"' . $sel . '>' . esc_html($t->name) . '</option>';
      }
      echo '</select>';
      echo '<div class="wpcup-note">When saved, this replaces existing categories with the selected one.</div>';
      echo '</td>';

      echo '<td>';
      echo '<input class="wpcup-input wpcup-row-input wpcup-price" type="text" name="price[' . esc_attr($id) . ']" value="' . esc_attr($price) . '" placeholder="e.g. 19.99">';
      echo '<div class="wpcup-note">Regular price only.</div>';
      echo '</td>';

      echo '</tr>';
    }

    wp_reset_postdata();

    echo '</tbody></table>';

    $total_pages = (int)$q->max_num_pages;
    if ($total_pages > 1) {
      $base = add_query_arg(
        array(
          'page' => self::SLUG,
          's' => $s,
          'cat' => $cat,
          'per_page' => $per_page
        ),
        admin_url('admin.php')
      );

      echo '<div class="wpcup-divider"></div>';
      echo '<div class="wpcup-toolbar">';
      echo '<div class="wpcup-note">Page ' . esc_html($paged) . ' of ' . esc_html($total_pages) . '</div>';
      echo '<div class="wpcup-actions">';
      if ($paged > 1) {
        echo '<a class="button wpcup-btn-secondary" href="' . esc_url(add_query_arg('paged', $paged - 1, $base)) . '">Prev</a>';
      }
      if ($paged < $total_pages) {
        echo '<a class="button wpcup-btn-secondary" href="' . esc_url(add_query_arg('paged', $paged + 1, $base)) . '">Next</a>';
      }
      echo '</div></div>';
    }

    echo '</div>';
    echo '</form>';
    echo '</div>';
  }

  public function handle_save() {
    if (!current_user_can('manage_woocommerce')) wp_die('No permission.');

    $nonce = isset($_POST['_wpcup_nonce']) ? sanitize_text_field(wp_unslash($_POST['_wpcup_nonce'])) : '';
    if (!wp_verify_nonce($nonce, self::NONCE_ACTION)) wp_die('Security check failed.');

    $return = isset($_POST['return_page']) ? esc_url_raw(wp_unslash($_POST['return_page'])) : admin_url('admin.php?page=' . self::SLUG);

    $ids = isset($_POST['product_ids']) ? (array)$_POST['product_ids'] : array();
    $ids = array_filter(array_map('intval', $ids));

    if (empty($ids)) {
      wp_safe_redirect(add_query_arg(array('wpcup_error' => rawurlencode('No products selected.')), $return));
      exit;
    }

    $titles = (isset($_POST['title']) && is_array($_POST['title'])) ? $_POST['title'] : array();
    $cats   = (isset($_POST['cat']) && is_array($_POST['cat'])) ? $_POST['cat'] : array();
    $prices = (isset($_POST['price']) && is_array($_POST['price'])) ? $_POST['price'] : array();

    foreach ($ids as $product_id) {
      $post = get_post($product_id);
      if (!$post || $post->post_type !== 'product') continue;

      if (isset($titles[$product_id])) {
        $new_title = sanitize_text_field(wp_unslash($titles[$product_id]));
        if ($new_title !== '' && $new_title !== $post->post_title) {
          wp_update_post(array(
            'ID' => $product_id,
            'post_title' => $new_title
          ));
        }
      }

      if (isset($cats[$product_id])) {
        $new_cat_id = (int) sanitize_text_field(wp_unslash($cats[$product_id]));
        if ($new_cat_id > 0) {
          wp_set_object_terms($product_id, array($new_cat_id), 'product_cat', false);
        }
      }

      if (isset($prices[$product_id])) {
        $raw = sanitize_text_field(wp_unslash($prices[$product_id]));
        $clean = $this->price_clean($raw);

        if ($raw !== '' && $clean !== '') {
          update_post_meta($product_id, '_regular_price', $clean);
          $sale = get_post_meta($product_id, '_sale_price', true);
          if ($sale === '' || !is_numeric($sale)) {
            update_post_meta($product_id, '_price', $clean);
          }
        }
      }

      if (function_exists('wc_delete_product_transients')) {
        wc_delete_product_transients($product_id);
      }
    }

    wp_safe_redirect(add_query_arg(array('wpcup_saved' => 1), $return));
    exit;
  }
}

new WPCUP_Inline_Bulk_Product_Editor();
?>

Security & risks

Whenever you write a script that updates the database, you have to be careful. I put in several layers of protection here to make sure this does not break your store or open it up to hackers. Here is what you need to know about safety.

• User Permissions: I used the manage_woocommerce capability check. This means only admins or shop managers can see this page. A regular subscriber or a customer cannot access this menu or trigger the save function.
• Nonces: The save form uses a WordPress nonce. This prevents cross site request forgery. Basically, it ensures that the request actually came from your admin panel and not from some external site trying to mess with your data.
• Sanitization: Every single input is sanitized using sanitize_text_field and wp_unslash. I am not letting any raw HTML or weird characters into your database.
• Safe Redirects: The script uses wp_safe_redirect to return you to the editor page. This is a standard security practice to prevent malicious redirects.
• Risk: The biggest risk is human error. This tool replaces the category for the selected product. If you accidentally select the wrong category and hit save on fifty products, they will all move to that category. There is no undo button. Always make a database backup before doing large bulk edits. That is just common sense.

How to use

Getting this running is easy. You do not even need to create a plugin file if you do not want to. You can just use a snippet manager.

1. Install the WPCode plugin or Code Snippets on your WordPress site.
2. Create a new snippet and choose PHP Snippet.
3. Copy the code provided above and paste it into the editor.
4. Set the snippet to run everywhere or specifically in the admin area.
5. Hit save and activate the snippet.
6. Look for the Inline Product Editor link in your sidebar menu, usually near the WooCommerce icon.
7. Search for your products, check the boxes for the ones you want to change, and click Save Selected.

If you prefer to make it a standalone plugin, just save the code as a .php file in your plugins folder and activate it. It is self contained and does not require any external libraries or files to work.

What I learned from the build

I feel pretty good about how this turned out. It is not a revolutionary piece of software, but it solved a real problem I was having. I learned a lot about how WooCommerce stores prices and how to efficiently clear transients.

The real win for me was getting the CSS to look decent without using a library like Bootstrap. It keeps the page load fast and the code footprint small. If you find yourself spending way too much time in the standard WooCommerce bulk editor, give this a try.

It is free, simple, and useful for the exact job it was built for. I might add more fields later like stock status or SKU, but for now, this handles the bulk of my work.

Why I started this project

I was helping a friend move a bunch of articles from an old site to a new WordPress setup. If you have ever done this, you know it is a total pain. You either spend hours copying and pasting or you install a shady plugin that might break your site or charge you fifty dollars for a basic feature. I am twenty one and do not have that kind of money to throw away on simple tasks. I figured I could build a cleaner version myself. It is called wordpress-content-importer, or WPCup for short.

The goal was simple: make a tool where you put in a URL and get back a WordPress-ready XML file. I wanted it to be fast, typed, and easy to look at. I did not want any extra bloat. Just a direct path from point A to point B. This project is my attempt at solving that without the corporate overhead or the clunky interfaces of the early 2000s that most WordPress tools still use.

The technical stack I chose

I went with React and TypeScript. I know some people say it is overkill for a small tool, but I hate debugging runtime errors that could have been caught while I was typing. TypeScript is like a safety net when I am tired and coding at 2 AM. For the build tool, I used Vite. It is so much faster than the old stuff. I do not have the patience to wait ten seconds for a dev server to start up anymore. I want it to be instant.

For the styling, I used Tailwind CSS. I am not a designer by trade, so being able to just throw classes like “flex items-center justify-center” onto a div is a life saver. It keeps the CSS file small and prevents the whole “global style collision” nightmare. I also added Lucide React for icons because they are lightweight and look sharp on high-resolution screens.

// From package.json
"dependencies": {
  "@supabase/supabase-js": "^2.57.4",
  "lucide-react": "^0.344.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

You might notice Supabase in the dependencies. Right now, I am using the frontend for the core logic, but I kept Supabase there because I plan to add a database later to save import history. For now, it stays as a placeholder while I focus on the main UI and the XML generation logic.

How the code actually works

The core of the app lives in App.tsx. I wanted to simulate the feeling of a real import process so I could test the user experience before I fully hooked up a backend scraper. I built a state-driven UI that tracks the progress of the “import” and gives the user feedback at every step. This matters because if a user clicks a button and nothing happens for ten seconds, they think it is broken and leave.

Here is how the main import function looks right now:

const handleImport = async () => {
  if (!url.trim()) return;

  setIsImporting(true);
  setIsComplete(false);
  setProgress(0);

  const steps = [
    { progress: 15, text: 'Connecting to website...' },
    { progress: 35, text: 'Analyzing content structure...' },
    { progress: 55, text: 'Extracting posts and pages...' },
    { progress: 75, text: 'Processing media files...' },
    { progress: 90, text: 'Generating WordPress XML...' },
    { progress: 100, text: 'Import complete!' }
  ];

  for (const step of steps) {
    await new Promise(resolve => setTimeout(resolve, 800));
    setProgress(step.progress);
    setProgressText(step.text);
  }

  setIsImporting(false);
  setIsComplete(true);
};

It uses an array of steps to update the progress bar. This gives the user a sense of what is happening under the hood. Even though the current version is a simulation, it sets the stage for the real asynchronous calls I will be making to a scraping service later on. I used a simple loop with a timeout to handle the timing.

Handling the WordPress XML format

WordPress expects a very specific XML structure. If you miss one tag or have a weird character in there, the whole import fails. For the initial prototype, I built a function that generates a basic XML header. It is not a full export yet, but it proves the concept of generating a file directly in the browser using a Blob. This saves money on server costs because I am not processing files on a backend yet. Everything happens on the client side.

const handleDownload = () => {
  const element = document.createElement('a');
  element.setAttribute('href', 'data:text/xml;charset=utf-8,' + encodeURIComponent('<?xml version="1.0" encoding="UTF-8"?>\n<!-- WordPress Export for ' + url + ' -->'));
  element.setAttribute('download', 'wordpress-import.xml');
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
};

This approach has its limits. Browsers can be weird about large files. But for a few dozen blog posts, this is the most efficient way to do it. No login required, no data leaving the user’s computer until they decide to download it. It is privacy-first by accident, but I like it that way.

Real struggles and tradeoffs

The biggest struggle was deciding where to stop. I wanted to build a full web scraper that could bypass things like Cloudflare and handle JavaScript-rendered sites. But that takes a lot of time and a lot of money for proxy servers. As a solo dev, I had to be realistic. I decided to focus on the UI and the local file generation first. I chose to build a “shell” that looks and feels right, knowing I can plug in the heavy-duty scraping logic later.

Another issue was the CSS. I spent way too much time fiddling with the progress bar colors. I wanted a dark mode look that didn’t feel depressing. I ended up with a deep slate background and blue accents. It is clean and doesn’t distract from the main task. I also had to make sure it worked on my phone because I find myself checking my projects on the bus all the time. I added specific media queries in the index.css file to shrink the headings and padding on smaller screens.

I also struggled with the TypeScript config. Getting the module resolution right for Vite can sometimes be a headache. I had to look through the tsconfig.json and tsconfig.app.json to make sure everything was playing nice with the bundler. It is the kind of work nobody sees but it makes the development experience so much better.

The design decisions

I chose the Poppins font because it looks modern and is very readable. I imported it from Google Fonts in the index.html. I also used a wrapper class for the app container that uses flexbox to keep everything perfectly centered. It feels like a premium tool even though it is just a side project. I also made sure to include smooth transitions for the buttons and inputs. It is a small detail but it makes the app feel less “stiff.”

I decided not to use a heavy UI library like Material UI or Mantine. They are great but they add so much extra weight. I wanted this to load fast. Tailwind gives me exactly what I need without the overhead. The whole project is very light as a result.

Who this is for

• Developers who need a quick way to generate a WordPress XML skeleton.
• People moving small sites who do not want to use heavy plugins.
• Anyone interested in how to build a progress-based UI in React.
• Me, when I inevitably have to move another site in six months.

How to run it locally

If you want to play with the code, it is pretty standard. You will need Node.js installed. Follow these steps:

• Clone the repo from GitHub.
• Run npm install to get all the packages.
• Run npm run dev to start the Vite server.
• Open your browser to the local address provided.

You can then edit App.tsx and see the changes instantly. The linting is handled by ESLint, so it will yell at you if you do something weird with the types.

What I would change next

If I had more time and a budget for a server, I would build a Node.js backend using Puppeteer. That would allow the tool to actually visit the URL the user provides, find the blog posts, and extract the content automatically. Right now, it is a manual-input simulation. Real scraping is hard because every website has a different structure. I would probably need to use some basic AI or a set of rules to find the title and the body content of a post.

I would also improve the XML export to include categories, tags, and featured images. Right now it is just a header. A real WordPress import file is hundreds of lines of XML. Mapping the scraped data to those specific fields is the next big hurdle. But I am happy with the foundation I have here. It is a solid starting point for a tool that I actually need.

I also want to add a way to preview the content before downloading the XML. A simple table or list showing what was found would give users more confidence. It is all about building trust that the tool is doing the right thing. For now, the clean UI and the progress feedback are a good start toward that goal.

Spam comments are one of those small WordPress problems that quickly become annoying. A few fake comments turn into hundreds of bot submissions, random links, pingbacks, moderation emails, and dashboard clutter.

For a normal business website, portfolio, landing page, or service site, comments usually do not add any real value. They just create another place for bots to attack and another thing for the site owner to manage.

This is why I prefer disabling the WordPress comment system properly instead of only hiding the comment form with CSS. The goal is simple: stop spam comments before they reach the dashboard, remove unnecessary comment areas, and keep the site cleaner without installing a heavy plugin.

Why spam comments happen in WordPress

WordPress includes comments by default because it started as a blogging platform. That is useful for blogs and communities, but it becomes a problem when the site does not need public discussion.

Spam bots look for comment forms, pingback endpoints, and trackback behaviour because those areas can be used to push junk links or trigger unwanted notifications.

Even if comments are not visible in your design, some themes or old settings can still leave comment logic active. That is why a proper snippet should close comments, block pings, clear displayed comment arrays, and remove comment UI from the dashboard.

WordPress spam comments disable snippet

Use this PHP snippet if you want to stop spam comments and pingbacks across the whole WordPress site. It is best for websites where comments are not needed at all.

add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);

add_filter('comments_array', '__return_empty_array', 10, 2);

add_action('admin_menu', function () {
    remove_menu_page('edit-comments.php');
});

add_action('init', function () {
    if (is_admin_bar_showing()) {
        remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
    }
});

What this snippet does

The comments_open filter tells WordPress that comments are closed across the site. This stops the comment form from being treated as active.

The pings_open filter disables pingbacks and trackbacks. This helps reduce those random notification emails that often look confusing to clients.

The comments_array filter returns an empty comments list. This prevents old or existing comments from being displayed by themes that still try to output them.

The admin_menu action removes the Comments menu from the WordPress dashboard. The init action removes the comments icon from the admin bar for logged-in users.

Why this helps reduce comment spam

This snippet reduces the places where spam comments can appear or be shown. It also cleans up the admin area so the site owner is not distracted by comment menus and moderation links they do not need.

It is a lightweight option compared with installing a full plugin just to switch off comments. There is no extra settings screen, no upsell banner, and no plugin dependency to maintain.

It is also non-destructive. The snippet does not delete existing comments from the database. It simply stops comments and pings from being active and visible.

How to add this to WordPress

The safest way to add this code is through a snippet manager such as WPCode or Code Snippets. This is safer than editing your theme file directly, especially if you are not comfortable with PHP.

1. Install WPCode or Code Snippets.
2. Create a new PHP snippet.
3. Paste the code from this page.
4. Set the snippet to run everywhere.
5. Save and activate it.
6. Check the dashboard and frontend to confirm comments are removed.

When not to use this snippet

This is a global solution. It is not right for websites that still need blog comments, product reviews, testimonials submitted through comments, or community discussion.

WooCommerce product reviews can depend on the WordPress comment system. So if your store uses reviews, test this carefully on staging before using it on a live store.

For a simple business website that only wants to stop WordPress spam comments and keep the dashboard clean, this snippet is a strong lightweight option.

I built this Python automation engine because creating short videos every day manually was taking too much time. The process was always the same: choose a topic, write a script, create visuals, generate voiceover, add captions, render the video, upload it, and then save the publishing details somewhere.

Now the system does that workflow for me. It reads topics from Google Sheets, generates the short video, creates captions, uploads it to Instagram Reels and YouTube Shorts, then saves the result back into the sheet.

The best part is the schedule logic. I set the publishing schedule one time, and after that the engine follows it automatically. If I set it to post once a day, it runs once a day. If I set multiple publishing slots, it checks the sheet before each slot, picks the next pending topic, creates the video, publishes it, and logs the result.

You can view the project here: VideoAutomation on GitHub.

What this Python automation engine does

This is not just a script generator or a video renderer. It is a full short-form content pipeline built to move from topic to published video with as little manual work as possible.

The system uses Python as the main automation layer, GitHub Actions for scheduled runs, Google Sheets as the topic queue, and publishing APIs to push the final video online.

The schedule only needs to be set once

The schedule is handled through GitHub Actions cron. That means I do not need to open the dashboard every morning or keep my computer running in the background.

Once the schedule is configured, the workflow runs according to that timing. Each scheduled run wakes up the pipeline, checks the Google Sheet, finds the next topic marked as pending, processes one video, uploads it, then updates the sheet with the result.

This is what makes the system feel different from a normal video tool. A normal tool waits for you to click a button. This engine follows the schedule I already set and keeps publishing based on that rule.

Google Sheets controls the daily topics

The sheet is where the whole workflow starts. I add video topics there, set the status as pending, and the automation picks the next item when the scheduled run starts.

This sheet shows how the automation reads daily topics and saves publishing details after each scheduled run.

This makes the system easy to control. I do not need to open the codebase every day. I only need to update the sheet, and the engine knows what to process next.

It posts Instagram Reels automatically

The Instagram side is already part of the workflow. The automation creates the Reel, uploads it, and logs the result. That means the video does not just sit inside a folder waiting for me to upload it manually.

The feed above shows the daily Instagram Reels output created by this automation while I am offline or sleeping.

How the video pipeline works

The pipeline starts with a topic from Google Sheets. Then the system generates a script, creates scene visuals, produces the voiceover, trims silence, adds captions, applies background music, renders the final MP4, and uploads the video.

For script generation, the engine can use Gemini. For visuals, it can use Imagen through Vertex AI. For voice, it supports providers like ElevenLabs, Murf.ai, and Cartesia Sonic. For captions, it uses word-level timing so the text feels synced instead of randomly placed.

The system also supports scheduled daily publishing through GitHub Actions. That is what makes it useful. My computer does not need to stay on for the workflow to run.

Why this saves real time

Short-form content looks easy until you try to publish every day. The boring work is not one big task. It is ten small tasks repeated over and over.

This automation removes most of that repetitive work. I still control the ideas, topics, and direction, but I do not have to manually build and upload every single Reel.

That is the result I wanted: wake up, check the sheet, and see that the video was already created, posted, and logged.

Same video examples from the pipeline

These examples show the kind of short-form videos the engine is designed to produce. The focus is tight pacing, readable captions, voice flow, and simple vertical video output.

Playlist

6 videos

They Lied About Power | The Unbreakable Path of Silence

Tight pacing. No wasted seconds.

The 3 Unseen Pillars of Mental Dominance

Hook clarity test.

How Manipulators Control Your Mind

Caption rhythm and timing.

The Silent Prison of Desire

Voice cadence and flow.

WHEN EVERYTHING GOES WRONG: The Art of Rising in Silence

Scene transitions without being cheesy.

Your Suffering Is Meaningless. This Is Your Only Path to Power.

Punchy delivery test.

Who this is for

This Python automation engine is for creators, developers, and channel builders who want to publish short-form videos consistently without doing the same manual editing and uploading work every day.

It is not a no-code tool. You still need API keys, setup, and accounts connected. But once the workflow is ready, it can run on schedule and create real content while you are offline.

Final result

The final result is simple. I add topics to Google Sheets, set the schedule once, and the automation handles the rest according to that schedule. It creates videos, posts them as Instagram Reels and YouTube Shorts, then saves the run details back into the sheet.

That is what makes this useful. It is not just a generator. It is a scheduled publishing system that keeps working after I close the laptop.

View GitHub Repo