Category: Coding

Gutenberg blocks are the fundamental unit of WordPress content since WordPress 5.0 — building a custom block with its own edit and save functions gives full control over the editor experience and the front-end output without relying on shortcodes or widget hacks that predate the block editor. The @wordpress/create-block scaffold generates the complete directory structure,…

Git hooks are shell scripts that run automatically at specific points in the Git workflow — before a commit is saved, before a push is sent, or after a merge completes — making them the ideal place to enforce code quality standards before bad code ever reaches the repository. PHP_CodeSniffer (PHPCS) with the WordPress Coding…

The WordPress REST API allows external applications, mobile clients, and JavaScript front-ends to read and write site data using standard HTTP methods and JSON payloads, without requiring direct database access or server-side PHP rendering. Core REST API routes cover posts, pages, categories, users, and media, but every custom plugin or theme data model — project…

CSS Container Queries arrived in all major browsers in 2023 and solve a longstanding limitation of responsive design: media queries respond to the viewport width, not the width of the element’s parent container. A card component placed in a three-column grid behaves differently than the same card in a single-column widget area, yet media queries…

Custom post types and taxonomies are the foundation of structured content in WordPress — they let you model data as portfolios, events, team members, or products without forcing everything into posts or pages. Registering them directly in a theme’s functions.php or in a dedicated plugin file is a deliberate architectural choice: plugin registration persists if…

Breadcrumb navigation shows users their location within a site hierarchy and provides search engines with a machine-readable signal about the content structure — Google displays breadcrumbs in search result snippets when BreadcrumbList JSON-LD is present. WordPress does not include built-in breadcrumb output, but the combination of conditional template tags and the get_ancestors() function provides all…

CSS Scroll Snap gives browsers native control over scroll positions, creating gallery carousels, full-screen section layouts, and step-by-step onboarding flows without a single line of JavaScript. Applying scroll-snap-type: x mandatory to a horizontal container and scroll-snap-align: start to each child snaps each card precisely into view as the user swipes or scrolls. The mandatory value…

WooCommerce’s built-in checkout fields cover billing address, payment, and order notes, but many businesses need additional information at checkout such as a delivery time preference, gift message, VAT number, or purchase order reference. Adding a custom field involves three coordinated steps: rendering the field in the checkout form, validating and sanitizing its value on submission,…

Accordion UI components are one of the most common patterns in FAQ sections, product feature lists, and support documentation pages — and they require no JavaScript library when built with vanilla ES6 and a handful of CSS transitions. The <details> and <summary> HTML elements provide native accordion behaviour without any JavaScript, but they lack smooth…