--Daily-Notes-->

WooCommerce Installation Methods Install via WordPress Admin Dashboard Navigate to Plugins → Add New Search for WooCommerce Click Install Now → Activate Install via WP-CLI wp plugin install woocommerce --activate Manual Installation Download WooCommerce from the official repository Upload to /wp-content/plugins/ Activate via WordPress admin Initial Setup Wizard After activation, WooCommerce provides a guided setup: Store details (location, currency) Payment methods Shipping configuration Recommended features Updating WooCommerce Update via Admin Dashboard Go to Dashboard → Updates Update WooCommerce like any plugin Update via WP-CLI wp plugin update woocommerce Best Practices Before Updating Backup database and files ...

Core Web Vitals Core Web Vitals are a set of user-centric performance metrics defined by Google to measure real-world user experience on the web. These metrics focus on loading performance, interactivity, and visual stability. Largest Contentful Paint (LCP) Measures loading performance. It marks the time when the largest visible content element (image, video, or text block) is rendered. Good: ≤ 2.5s Needs Improvement: 2.5s – 4.0s Poor: > 4.0s Interaction to Next Paint (INP) Measures responsiveness. It evaluates how quickly a page responds to user interactions. ...

HTTPS HTTPS (HyperText Transfer Protocol Secure) ensures encrypted communication between the client and server using TLS (Transport Layer Security). It is a foundational requirement for modern web applications. Why It Matters Encrypts data in transit (prevents MITM attacks) Enables modern APIs: Service Workers Progressive Web Apps (PWA) Web Push Notifications Improves SEO (Google ranking signal) Required for secure cookies and authentication flows Implementation Approaches 1. Using Let’s Encrypt (Certbot) sudo apt update sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d example.com -d www.example.com 2. Force HTTPS Redirect (Nginx) server { listen 80; server_name example.com www.example.com; return 301 https://$host$request_uri; } 3. Force HTTPS Redirect (Apache) <VirtualHost *:80> ServerName example.com Redirect permanent / https://example.com/ </VirtualHost> 4. Enable HSTS (Strict Transport Security) add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; Best Practices Use TLS 1.2 or higher Avoid mixed content (HTTP assets on HTTPS pages) Renew certificates automatically Use secure cookies: Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Lax Mobile Friendly Overview A mobile-friendly website adapts layout, content, and interactions for smaller screens and touch interfaces. ...

Core Web Vitals Modern websites are built using a mix of HTML, CSS, and JavaScript. For optimal performance, browsers and search engines favor pages that render quickly with minimal blocking. HTML + CSS → fast initial rendering JavaScript → adds interactivity but can delay rendering if not optimized The key challenge is balancing interactivity with performance. Render-blocking resources (especially large CSS and synchronous JavaScript) delay: Parsing Execution First paint Therefore, optimization focuses on: ...

Block themes represent the modern approach to WordPress development, leveraging Full Site Editing (FSE) and block-based design. Unlike traditional themes that rely heavily on PHP templates, block themes are built using HTML files composed entirely of block markup. This guide walks you through creating a block theme from the ground up, along with key concepts and best practices. Prerequisites Before getting started, make sure you have: WordPress version 5.9 or higher Access to the /wp-content/themes/ directory Setting Up Your Block Theme Create the Theme Directory Start by creating a new folder inside the themes directory: ...

How Block Theme Templates Load Block themes follow the same initial bootstrap process as classic themes, but diverge at the template resolution stage to support block-based templates. Core Loading Flow wp-blog-header.php is the entry point for every front-end request. It loads wp-includes/template-loader.php, which determines which template should render the current request. Based on the query type, a corresponding function is called: get_single_template() for single posts or CPTs get_page_template() for pages get_archive_template() for archives These functions internally call get_query_template() to resolve the correct template file. ...

Theme.json theme.json is a configuration file used in block themes to define global settings, styles, and design systems for both the editor and frontend. It acts as a central source of truth for: Design tokens (colors, typography, spacing) Editor capabilities Block-level customization How to Create theme.json Create a theme.json file in the root of your theme: my-block-theme/ ├── theme.json Minimal Example { "version": 2, "settings": {}, "styles": {} } Settings and Styles settings Defines what tools and options are available in the editor. ...

Block Theme (FSE Overview) A Block Theme is a WordPress theme built using blocks and designed for Full Site Editing (FSE). It enables editing the entire site (header, footer, templates, etc.) using the Block Editor instead of traditional PHP templates. Uses HTML-based templates instead of PHP Powered by theme.json Supports Global Styles Built for Full Site Editing (FSE) Uses block markup (<!-- wp:block-name -->) Core Concepts Theme Structure Basic Folder Structure my-block-theme/ │ ├── style.css ├── functions.php ├── theme.json ├── screenshot.png │ ├── templates/ │ ├── index.html │ ├── single.html │ └── page.html │ ├── parts/ │ ├── header.html │ └── footer.html │ └── assets/ ├── css/ └── js/ Main Stylesheet (style.css) Purpose Required for theme recognition Contains theme metadata Can include global CSS Example /* Theme Name: My Block Theme Theme URI: https://example.com Author: Ashish Verma Description: A custom block theme Version: 1.0 */ body { margin: 0; font-family: sans-serif; } Custom Functionality (functions.php) Purpose Add theme supports Register features Enqueue scripts and styles Example <?php function my_block_theme_setup() { add_theme_support( 'wp-block-styles' ); add_theme_support( 'editor-styles' ); add_theme_support( 'responsive-embeds' ); } add_action( 'after_setup_theme', 'my_block_theme_setup' ); Templates (Block-Based) Example: templates/index.html <!-- wp:template-part {"slug":"header"} /--> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer"} /--> Including Assets (CSS & JavaScript) Example function my_theme_assets() { wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), [], wp_get_theme()->get( 'Version' ) ); wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', [], null, true ); } add_action( 'wp_enqueue_scripts', 'my_theme_assets' ); Global Settings & Styles (theme.json) Purpose Define design system (colors, typography, spacing) Apply global styles across blocks Example { "version": 2, "settings": { "color": { "palette": [ { "name": "Primary", "slug": "primary", "color": "#0073aa" } ] }, "typography": { "fontSizes": [ { "name": "Small", "slug": "small", "size": "12px" } ] } }, "styles": { "color": { "background": "#ffffff", "text": "#000000" } } } Block Patterns What are Block Patterns? Block Patterns are predefined layouts made up of blocks. They can be inserted from the Patterns tab in the editor and then customized. ...

Introduction to Full Site Editing (FSE) Full Site Editing (FSE) is a set of features in WordPress that enables editing of the entire website using the Block Editor. Instead of limiting blocks to post/page content, FSE extends block-based editing to headers, footers, templates, and global styles. It unifies the editing experience and reduces reliance on PHP templates for layout control. Core Components of FSE 1. Site Editor The Site Editor is the central interface for managing the entire site structure. ...

Creating a block block.json { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "create-block/copyright-date-block", "version": "0.1.0", "title": "Copyright Date Block", "category": "widgets", "description": "Display your site's copyright date.", "example": {}, "supports": { "color": { "background": false, "text": true }, "html": false, "typography": { "fontSize": true } }, "textdomain": "copyright-date-block", "editorScript": "file:./index.js", "render": "file:./render.php" } Similar to the useBlockProps() function in the Editor, get_block_wrapper_attributes() outputs all the necessary CSS classes and styles in the block’s wrapper. Only the content needs to be updated. <?php ... ?> <p <?php echo get_block_wrapper_attributes(); ?>>© <?php echo date( "Y" ); ?></p> adding block attributes "example": {}, "attributes": { "showStartingYear": { "type": "boolean" }, "startingYear": { "type": "string" } }, You can create your own custom panels using the InspectorControls component. The InspectorControls belongs to the @wordpress/block-editor package. ...