daily notes

CSS Reset / Normalize *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } Layout Structure (Flexbox) .container { width: 1200px; margin: 0 auto; } .header { display: flex; justify-content: space-between; align-items: center; } Grid Layout Example .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } Typography Precision Font Loading function basic_theme_fonts() { wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap', false ); } add_action('wp_enqueue_scripts', 'basic_theme_fonts'); Typography System body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: #222; } h1 { font-size: 40px; font-weight: 700; } h2 { font-size: 32px; font-weight: 600; } p { margin-bottom: 20px; } header.php <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header class="site-header"> <div class="container"> <h1 class="logo"> <a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?> </a> </h1> <?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'nav', 'menu_class' => 'main-menu' )); ?> </div> </header> Register Menu function basic_theme_setup() { register_nav_menus(array( 'primary' => 'Primary Menu' )); } add_action('after_setup_theme', 'basic_theme_setup'); Responsive Design Viewport Meta <meta name="viewport" content="width=device-width, initial-scale=1.0"> Media Queries @media (max-width: 992px) { .container { width: 90%; } .post-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } } Custom Single Template <?php get_header(); ?> <main class="single-post container"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; endif; ?> </main> <?php get_footer(); ?>

February 19, 2026 · 2 min · Ashish Verma

daily notes

Media Management in WordPress Themes Handling Images Uploading & Metadata // Get attachment metadata $meta = wp_get_attachment_metadata( $attachment_id ); // Access width and height $width = $meta['width']; $height = $meta['height']; WordPress stores media under wp-content/uploads/year/month/. Generates multiple sizes automatically (thumbnail, medium, large). Metadata stored in wp_postmeta for efficient retrieval. Featured Images // Enable support in functions.php add_theme_support( 'post-thumbnails' ); // Display a specific size if ( has_post_thumbnail() ) { the_post_thumbnail( 'medium' ); } // Get URL $url = get_the_post_thumbnail_url( get_the_ID(), 'large' ); Custom Image Sizes ...

February 18, 2026 · 3 min · Ashish Verma

daily notes

Classic themes: Edited using classic editor, or third party plugins like elementor. Has Widget, menus Block Themes: Introduced FSE Is it important to have index.php in wordpress themes? Yes, it is still strictly required. If you are building a theme using the traditional PHP method (the way themes have been built for 20 years), WordPress still looks for index.php as the primary fallback. Without it, the theme is considered “broken” and cannot be activated. ...

February 17, 2026 · 6 min · Ashish Verma

daily notes

Child Themes in WordPress Concept and Purpose A child theme is a WordPress theme that inherits the design and functionality of another theme, called the parent theme. It allows developers to modify or extend a site’s appearance and behavior without editing the parent theme’s files directly. This approach ensures that customizations remain intact after parent theme updates and that core theme files remain untouched. It is considered best practice when modifying styling, template files, or functions.php. ...

February 16, 2026 · 3 min · Ashish Verma

daily notes

Advanced CSS Properties and Techniques CSS Custom Properties (Variables) Useful for theming and maintaining consistent design values across components. :root { --primary-color: #6c5ce7; --border-radius: 12px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .card { background-color: var(--primary-color); border-radius: var(--border-radius); box-shadow: var(--shadow); } Variables can be overridden inside media queries or themes: .dark { --primary-color: #1e1e2f; } Advanced CSS Grid Layout Responsive auto-fitting layout: .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } Grid template areas for complex layouts: ...

February 13, 2026 · 3 min · Ashish Verma

daily notes

Theme File Structure A basic WordPress theme requires: style.css (theme metadata and styles) index.php (fallback template) Common additional files: header.php footer.php sidebar.php functions.php single.php page.php archive.php search.php 404.php Page Template Layout Custom Page Template: <?php /* Template Name: Custom Layout */ get_header(); ?> <section class="custom-page"> <?php while (have_posts()) : the_post(); the_content(); endwhile; ?> </section> <?php get_footer(); ?> Enqueue Styles and Scripts In functions.php: ...

February 12, 2026 · 1 min · Ashish Verma

daily notes

A WordPress theme controls the visual presentation and layout of a WordPress site. It consists of template files, stylesheets, functions, and optional assets (JavaScript, images, fonts). Themes define how content stored in the database is rendered in the browser. A theme does not modify core WordPress functionality; instead, it uses WordPress APIs, hooks, and template hierarchy rules to display content. Basic Theme Structure A minimal theme requires: style.css index.php Example: style.css (Theme Header) /* Theme Name: Example Theme Theme URI: https://example.com Author: Your Name Author URI: https://example.com Description: A minimal custom WordPress theme. Version: 1.0 License: GNU General Public License v2 or later Text Domain: example-theme */ The header comment identifies the theme in the WordPress admin panel. ...

February 11, 2026 · 2 min · Ashish Verma

daily notes

Administration menu Administration Menus are the menus you see on the left sidebar of the WordPress admin dashboard (/wp-admin). Each of these is an admin menu, and plugins can: Add a top-level menu Add a submenu under an existing menu Add hidden pages (no visible menu item) <?php /** * Plugin Name: My Admin Menu Plugin * Description: Demonstrates how to create WordPress administration menus. * Version: 1.0 * Author: You */ if ( ! defined( 'ABSPATH' ) ) { exit; // Prevent direct access } /** * Hook into the admin menu system */ add_action( 'admin_menu', 'my_plugin_register_admin_menu' ); /** * Register admin menus */ function my_plugin_register_admin_menu() { // TOP-LEVEL MENU add_menu_page( 'My Plugin Dashboard', // Page title 'My Plugin', // Menu title 'manage_options', // Capability 'my-plugin', // Menu slug 'my_plugin_dashboard_page', // Callback function 'dashicons-admin-generic', // Icon 25 // Position ); // SUBMENU PAGE add_submenu_page( 'my-plugin', // Parent slug 'My Plugin Settings', // Page title 'Settings', // Menu title 'manage_options', // Capability 'my-plugin-settings', // Menu slug 'my_plugin_settings_page' // Callback function ); } /** * Dashboard page callback */ function my_plugin_dashboard_page() { if ( ! current_user_can( 'manage_options' ) ) { return; } ?> <div class="wrap"> <h1>My Plugin Dashboard</h1> <p>This is the main dashboard page of the plugin.</p> </div> <?php } /** * Settings page callback */ function my_plugin_settings_page() { if ( ! current_user_can( 'manage_options' ) ) { return; } ?> <div class="wrap"> <h1>My Plugin Settings</h1> <form method="post" action="options.php"> <?php settings_fields( 'my_plugin_settings_group' ); do_settings_sections( 'my-plugin-settings' ); submit_button(); ?> </form> </div> <?php } Settings & Options API Options API - Stores and retrieves data from the database Settings API - Builds admin settings pages (UI + validation + security) Settings API does NOT store data. Options API does NOT render UI All wordpress options are stored in wp_options table. add_option( 'my_plugin_color', 'blue' ); update_option( 'my_plugin_color', 'red' ); $color = get_option( 'my_plugin_color', 'default' ); delete_option( 'my_plugin_color' ); <?php /** * Plugin Name: My Settings Plugin * Description: End-to-end example of Admin Menu + Settings & Options API * Version: 1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; } /** * 1️⃣ ADMIN MENU (ENTRY POINT) */ add_action( 'admin_menu', 'my_plugin_add_admin_menu' ); function my_plugin_add_admin_menu() { add_menu_page( 'My Plugin Settings', // Page title 'My Plugin', // Menu title 'manage_options', // Capability 'my-plugin', // Menu slug 'my_plugin_settings_page', // Page callback 'dashicons-admin-settings' // Icon ); } /** * 2️⃣ REGISTER SETTINGS (SETTINGS API) */ add_action( 'admin_init', 'my_plugin_register_settings' ); function my_plugin_register_settings() { // Register option (Options API via Settings API) register_setting( 'my_plugin_settings_group', // Settings group 'my_plugin_options', // Option name (stored in wp_options) 'my_plugin_sanitize_options'// Sanitization callback ); // Settings section add_settings_section( 'my_plugin_main_section', // Section ID 'Main Settings', // Title 'my_plugin_section_text', // Callback 'my-plugin' // Page slug (menu slug) ); // Settings field add_settings_field( 'enable_feature', // Field ID 'Enable Feature', // Label 'my_plugin_enable_field', // Field callback 'my-plugin', // Page slug 'my_plugin_main_section' // Section ID ); } /** * 3️⃣ SECTION DESCRIPTION */ function my_plugin_section_text() { echo '<p>Configure the main settings for the plugin.</p>'; } /** * 4️⃣ FIELD HTML */ function my_plugin_enable_field() { $options = get_option( 'my_plugin_options' ); $enabled = $options['enable_feature'] ?? ''; ?> <input type="checkbox" name="my_plugin_options[enable_feature]" value="1" <?php checked( 1, $enabled ); ?>> <label>Enable the main feature</label> <?php } /** * 5️⃣ SANITIZATION */ function my_plugin_sanitize_options( $input ) { $output = []; $output['enable_feature'] = isset( $input['enable_feature'] ) ? 1 : 0; return $output; } /** * 6️⃣ SETTINGS PAGE (CONNECTED TO ADMIN MENU) */ function my_plugin_settings_page() { if ( ! current_user_can( 'manage_options' ) ) { return; } ?> <div class="wrap"> <h1>My Plugin Settings</h1> <form method="post" action="options.php"> <?php settings_fields( 'my_plugin_settings_group' ); do_settings_sections( 'my-plugin' ); submit_button(); ?> </form> </div> <?php } What the Settings API Does (and DOES NOT do) What it DOES Registers settings ...

February 10, 2026 · 6 min · Ashish Verma

daily notes

Block Patterns: A predefined group of blocks (text, images, buttons, columns, etc.) inserted inside a post or page. Once inserted, they’re just normal blocks—you can fully edit them Template Patterns: Larger structural layouts meant for templates used in the Site Editor (not regular page editing). Often define parts of a page or an entire page layout The WordPress commitment is to conform to all WCAG 2.2 Level A and Level AA guidelines. Nonce: class MyPlugin_Admin { // Display a form in the WP Admin public function render_settings_page() { ?> <div class="wrap"> <h1><?php echo esc_html__( 'Plugin Settings', 'my-plugin' ); ?></h1> <form method="post" action="admin-post.php"> <?php wp_nonce_field( 'save_plugin_settings', 'my_admin_nonce' ); ?> <input type="hidden" name="action" value="my_save_action"> <input type="text" name="setting_one" value=""> <?php submit_button( esc_html__( 'Save Changes', 'my-plugin' ) ); ?> </form> </div> <?php } } public function handle_save() { // 1. Verify the nonce // If this fails, WP automatically calls wp_die() with a 403 error check_admin_referer( 'save_plugin_settings', 'my_admin_nonce' ); // 2. If we reach here, the request is valid! // Now sanitize the other inputs if ( isset( $_POST['setting_one'] ) ) { $data = sanitize_text_field( $_POST['setting_one'] ); update_option( 'my_plugin_data', $data ); } // 3. Redirect back wp_redirect( admin_url( 'admin.php?page=my-plugin-page&status=success' ) ); exit; } $action (The “What”) ...

February 9, 2026 · 5 min · Ashish Verma

daily notes

WordPress Theme A theme controls the visual presentation of a WordPress website. It defines layout, typography, colors, and structure. Themes use PHP, HTML, CSS, and JavaScript. WordPress themes follow a template hierarchy to load files. Theme Architecture Overview A WordPress theme is composed of: Template files (PHP) Stylesheets (CSS) Functions file Assets (CSS, JS, images) theme-name/ ├── style.css ├── index.php ├── functions.php ├── header.php ├── footer.php ├── sidebar.php ├── page.php ├── single.php ├── archive.php ├── 404.php Required Theme Files 1. style.css Contains theme metadata Required for theme recognition /* Theme Name: Basic Theme Author: Developer Version: 1.0 */ 2. index.php Main fallback template Required for rendering content <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); the_title('<h1>', '</h1>'); the_content(); } } Template Files and Their Purpose header.php Contains opening HTML, <head>, and navigation <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> footer.php Contains footer content and closing tags <?php wp_footer(); ?> </body> </html> sidebar.php Displays widget areas <?php if ( is_active_sidebar('main-sidebar') ) : ?> <?php dynamic_sidebar('main-sidebar'); ?> <?php endif; ?> page.php Used for static pages <?php get_header(); ?> <?php the_title('<h1>', '</h1>'); ?> <?php the_content(); ?> <?php get_footer(); ?> single.php Used for single blog posts <?php get_header(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php get_footer(); ?> Template Hierarchy (Basic) Order WordPress follows to load templates: ...

February 6, 2026 · 2 min · Ashish Verma