--Daily-Notes-->

Cache Stampede, Customizer API : Selective Refresh vs postMessage, Webpack A component is a reusable, independent unit of UI in React. Each component must return JSX (cannot return undefined). A React app can be visualized as a tree of components. Functional Components Defined as JavaScript functions. Accept props (input data from parent). Return JSX. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Using Components and Props Props are read-only inputs passed from parent → child. ...

Decoupled WordPress (Advanced Notes) Concept A decoupled (headless) WordPress architecture separates: Backend (WordPress CMS) → content management Frontend (React / Next.js / other) → presentation layer Architecture Flow WordPress (REST API / GraphQL) ↓ API Layer (JSON) ↓ Frontend (React / Next.js) Headless vs Decoupled Aspect Headless Decoupled Frontend Completely external External but may still use WP frontend partially Rendering Fully independent Hybrid Flexibility High Moderate Use case SPA / mobile apps Progressive migration Enabling API in WordPress REST API (built-in) Example endpoint: ...

GraphQL Overview GraphQL is a strongly typed query language and runtime designed to enable clients to request exactly the data they need from an API. It was originally developed by Facebook and is now maintained by the GraphQL Foundation. Unlike traditional REST APIs, GraphQL exposes a single endpoint and allows clients to define the structure of the response, reducing over-fetching and under-fetching of data. Key Characteristics Declarative data fetching Strongly typed schema ...

Asset Building using Webpack & Babel Modern WordPress development often separates source code (ES6+, SCSS, modules) from production-ready assets (minified JS/CSS). Tools like Webpack and Babel enable this workflow. Key Concepts Module Bundling: Combines multiple JavaScript files into a single optimized bundle. Transpilation: Converts modern JavaScript (ES6+) into backward-compatible versions. Tree Shaking: Removes unused code from final bundles. Loaders & Plugins: Extend Webpack functionality (e.g., handling CSS, images). Typical Project Structure theme/ ├── src/ │ ├── js/ │ │ └── index.js │ ├── scss/ │ │ └── style.scss ├── dist/ │ ├── bundle.js │ └── style.css ├── webpack.config.js ├── package.json Webpack Configuration Example const path = require('path'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, ], }, mode: 'production', }; Babel Configuration (.babelrc) { "presets": ["@babel/preset-env"] } Enqueuing Compiled Assets in WordPress function theme_enqueue_assets() { wp_enqueue_script( 'theme-bundle', get_template_directory_uri() . '/dist/bundle.js', array(), '1.0', true ); wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/dist/style.css', array(), '1.0' ); } add_action('wp_enqueue_scripts', 'theme_enqueue_assets'); Internal Mechanics Understanding WordPress internals is essential for extending functionality and debugging. ...

Dashboard widgets wp_add_dashboard_widget( $widget_id, $widget_name, $callback, $control_callback, $callback_args ); $widget_id: an identifying slug for your widget. This will be used as its CSS class and its key in the array of widgets. $widget_name: this is the name your widget will display in its heading. $callback: The name of a function you will create that will display the actual contents of your widget. $control_callback (Optional): The name of a function you create that will handle submission of widget options forms, and will also display the form elements. $callback_args (Optional): Set of arguments for the callback function. function wporg_add_dashboard_widgets() { // Add function here } add_action( 'wp_dashboard_setup', 'wporg_add_dashboard_widgets' ); # wp_network_dashboard_setup to use in network dashboard function wporg_add_dashboard_widgets() { wp_add_dashboard_widget( 'wporg_dashboard_widget', // Widget slug. esc_html__( 'Example Dashboard Widget', 'wporg' ), // Title. 'wporg_dashboard_widget_render' // Display function. ); } add_action( 'wp_dashboard_setup', 'wporg_add_dashboard_widgets' ); function wporg_dashboard_widget_render() { esc_html_e( "Howdy! I'm a great Dashboard Widget.", "wporg" ); } Removing default widget // Create the function to use in the action hook function wporg_remove_dashboard_widget() { remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); } // Hook into the 'wp_dashboard_setup' action to register our function add_action( 'wp_dashboard_setup', 'wporg_remove_dashboard_widget' ); # use these instad of wp_add_dashboard_widget fn to place at custom position add_meta_box( 'dashboard_widget_id', esc_html__( 'Dashboard Widget Title', 'wporg' ), 'dashboard_widget', 'dashboard', 'side', 'high' ); delete_expired_transients action is used to call function of same name, used to schedule deletion of expired transients daily. A widget adds content and features to a widget area (also called a sidebar). A widget is a PHP object that outputs some HTML. The same kind of widget can be used multiple times on the same page (e.g. the Text Widget). Widgets can save data in the database (in the options table). ...

HEAD is much less well known than the other two. HEAD is essentially the same as a GET request except that it does not retrieve the data, only information about the data. This data describes such things as when the data was last updated, whether the client should cache the data, what type the data is, etc. Modern browsers often send HEAD requests to pages you have previously visited to determine if there are any updates. All good API clients utilize HEAD before performing a GET request to potentially save on bandwidth. GET, POST, HEAD are the most common used in wp. Status Code Description 2xx Request was successful 3xx Request was redirected to another URL 4xx Request failed due to client error. Usually invalid authentication or missing data 5xx Request failed due to a server error. Commonly missing or misconfigured configuration files $response = wp_remote_get( 'https://api.github.com/users/blobaugh' ); The following defaults are assumed, though they can be changed via the $args parameter: method – GET ...

Customizer API Overview of the WordPress Customizer The WordPress Customizer provides a user-friendly interface that allows website owners to modify theme settings and preview changes in real time before publishing them. It is designed primarily for non-technical users such as bloggers, designers, and business owners. The Customizer enables users to adjust theme elements such as: Site title and tagline Colors and typography Header and background images Menus and widgets Custom theme options ...

Drop-ins WordPress drop-ins are special PHP files placed directly in the wp-content directory that override or extend specific WordPress core functionality. Unlike regular plugins, they are automatically loaded by WordPress if the file exists. Key characteristics: Stored in wp-content/ Automatically detected and loaded Cannot be activated or deactivated via the admin panel Used to replace or extend core behavior Visible under Plugins → Drop-ins in the admin area Default WordPress drop-ins: ...

Email Integration in WordPress WordPress sends emails using the wp_mail() function, which is a wrapper around PHP’s mail() function. While it works for simple setups, it is unreliable in production environments because many hosting providers block or throttle PHP mail. Professional deployments typically use an SMTP or API-based email service. A commonly recommended solution is Amazon SES (Simple Email Service), which provides scalable and reliable email delivery. wp_mail() basics The wp_mail() function sends emails using the WordPress mail system. It supports plain text and HTML emails and allows attachments and custom headers. ...

Custom Database Tables in WordPress A custom database table in WordPress is used when plugin data does not fit well into the default WordPress database schema. WordPress provides built-in tables such as wp_posts, wp_postmeta, wp_users, and others. However, certain plugins require structured, high-performance storage that cannot be efficiently managed through post meta or options tables. Using custom tables allows developers to define their own schema optimized for the plugin’s data model. ...