Old Guard Industrial Group Precision Locknuts
About This Project
Custom WordPress and WooCommerce website developed for an manufacturing and engineering client specializing in industrial fastening products. The project included a custom WordPress theme, WooCommerce integration, Authorize.net payments, custom product table tooling, and a custom quote request system.
Project Page Gallery
A visual walkthrough of the custom page designs, WooCommerce templates, product landing pages, and content layouts created for the website.
Site Exploration
Home
Introduces core product categories including locknuts, lockwashers, and lockplates while reinforcing the company’s industrial manufacturing identity. The page was built to balance technical product presentation with a clean user experience optimized for industrial buyers.
Products Overview
Created a centralized product browsing experience that organizes product lines into clear, easy-to-navigate categories to guide users toward the correct fastening solution for their application.
Product Category Archive
Customized WooCommerce archive templates to support industrial product browsing at scale. The layout was optimized for large technical catalogs, emphasizing product imagery, quick purchasing functionality, and clean grid organization while maintaining compatibility with WooCommerce sorting and pagination systems.
Individual Product Page
Developed custom WooCommerce product detail layouts for industrial products that have diagrams, specifications, related products, and stock visibility.
Locknut Landing Page
Designed and structured an industrial-grade locknuts page. The page combines educational product content, technical tables, FAQ systems, and industrial application messaging to improve organic search visibility while helping customers better understand product compatibility and use cases.
Lockwasher Landing Page
Created a technical content-driven landing page for lockwashers that combines manufacturing information, specification tables, and frequently asked questions into a structured industrial resource.
Lockplate Landing Page
Developed a dedicated lockplate landing page focused on industrial applications, manufacturing capabilities, and technical specifications. The layout integrates custom data tables, educational content, and FAQ components to create a more informative purchasing experience for engineers and industrial buyers.
Blog Index Page
Built a custom blog archive experience to support content marketing and SEO strategy. The page was designed to showcase educational manufacturing content in a structured, easy-to-read layout while maintaining consistent branding across the eCommerce platform.
Blog Article Template
A blog post template that supports structured headings, technical comparisons, FAQ sections, and product-focused content.
About
Designed and developed a custom “About Us” page highlighting OGIG’s manufacturing background, facility information, and production standards. The layout combines industrial branding with company storytelling to establish credibility and reinforce the company’s USA-based manufacturing identity.
Cart
Customized the WooCommerce cart flow to simplify purchasing for industrial products while maintaining compatibility with shipping calculations, coupon systems, and checkout workflows. The page emphasizes clarity, fast purchasing actions, and a streamlined layout optimized for business customers.
Checkout
Implemented a streamlined WooCommerce checkout experience focused on reducing friction during purchase completion. The checkout layout was customized to support industrial ordering workflows, shipping integration compatibility, and improved usability across desktop and mobile devices.
Contact Form
Developed a custom quote request page allowing customers to submit manufacturing inquiries and custom part requests directly through the website. The page was designed to support lead generation while maintaining a clean industrial-focused user experience.
404 Error Page
Designed a branded custom 404 page that maintains the website’s industrial visual identity while helping users recover from broken or outdated links. A JavaScript library called Three.js was used to create a fun animation where a 404 under construction sign follows the mouse cursor.
Theme Architecture
The custom OGIG WordPress theme was built using a modern frontend workflow focused on maintainability, modularity, and performance. The theme uses Dart Sass for stylesheet compilation and esbuild for JavaScript bundling and minification.
Technical Theme Highlights
The theme includes engineering-focused implementations designed to support performance, scalability, and long-term maintainability. Relevant code/work samples have been included next to each example.
Dynamic Asset Versioning
Compiled frontend assets use filemtime() for automatic cache busting, ensuring browsers load the latest stylesheet after deployment.
wp_enqueue_style(
'ogig-style',
get_template_directory_uri() . '/build/css/style.min.css',
[],
filemtime(
get_template_directory() . '/build/css/style.min.css'
)
);Modular Gutenberg Blocks
Reusable Gutenberg blocks were structured as self-contained components, helping keep the theme modular and easier to maintain.
register_block_type(
__DIR__ . '/blocks/hero'
);WooCommerce Product Queries
Custom product queries were used to support archive layouts, product landing pages, and related product sections.
$products = new WP_Query([
'post_type' => 'product',
'posts_per_page' => 16,
'orderby' => 'menu_order',
'order' => 'ASC',
]);Modern Build Workflow
Dart Sass and esbuild were used to compile, bundle, and optimize frontend assets during development.
npm run build
npm run watchCustom Search Experience
The project includes a custom animated search block built as a reusable Gutenberg component. The search experience combines React, Framer Motion, a WordPress REST API search endpoint, and a native WordPress search fallback.
The interaction was designed to feel more polished than a standard search bar, with results visually emerging from a fluid gooey pill-shaped interface.
The search bar was registered as a custom block with editable placeholder text, allowing it to be reused across the site.
{
"name": "ogig/gooey-search",
"title": "Gooey Search",
"category": "widgets",
"attributes": {
"placeholder": {
"type": "string",
"default": "Search…"
}
}
}Debounced live searches are performed in React with a custom WordPress REST endpoint. Standard WordPress search behavior is used as a fallback (for example, if JavaScript is disabled in the browser).
const r = await fetch(
`/wp-json/ogig/v1/search?s=${encodeURIComponent(q)}`,
{ signal: controller.signal }
);Technical Plugin Highlights
Several custom WordPress plugins were developed to support OGIG’s industrial product catalog, inquiry workflows, and WooCommerce integrations. These systems were built around the client’s technical product data and business requirements rather than relying on large third-party plugins. Relevant code/work samples have been included next to each example.
OGIG CSV Product Tables Plugin
A custom product table management plugin developed for displaying large industrial fastening datasets in searchable, responsive frontend tables. The plugin improves product discoverability while making technical product information easier to manage.
Large Dataset Product Tables
The implementation uses DataTables to provide advanced searching, sorting, and responsive product browsing functionality.
$('.ogig-product-table').DataTable({
responsive: true,
searching: true,
ordering: true,
paging: false
});CSV Product Import Workflows
The product management workflow was designed around CSV-driven imports to simplify updates for large industrial product catalogs and reduce manual product entry.
add_action(
'admin_post_ogig_csv_import',
[$this, 'handle_import']
);Shortcode-Based Rendering
The table system uses shortcode rendering, allowing technical product tables to be placed throughout Gutenberg layouts without relying on a page builder.
add_shortcode(
'ogig_product_table',
[$this, 'shortcode_table']
);Role-Based WooCommerce Pricing
The plugin includes WooCommerce pricing hooks to support role-based distributor pricing and alternate customer pricing structures.
add_filter(
'woocommerce_product_get_price',
[$this, 'role_based_price'],
20,
2
);OGIG Contact & Quote Request Plugin
A lightweight custom inquiry and quote request system built for industrial lead generation workflows. The plugin integrates directly into WordPress while keeping the submission process simple for customers and manageable for administrators.
Custom Inquiry Management
The plugin stores contact and quote request submissions inside WordPress using a dedicated custom post type, creating a lightweight internal inquiry management system.
register_post_type(self::CPT, [
'public' => false,
'show_ui' => true,
'supports' => ['title', 'editor']
]);Honeypot Spam Prevention
The inquiry form includes lightweight honeypot spam prevention to reduce automated submissions without adding friction for real users.
if (!empty($_POST['website'])) {
wp_die('Spam detected.');
}