Complete WordPress Developer Course - Plugins & Themes

Learn the fundamentals of PHP, a server-side language powering WordPress, and how PHP outputs HTML to browsers, including file creation and debugging via browser developer tools.

Learn how PHP variables store values, declare with a dollar sign, and output using echo. Understand variable naming, case sensitivity, and reassignment in practice.

Learn how strings and booleans fit into PHP data types, assign and output variables with single or double quotes, and understand true and false booleans and their impact on output.

Learn how to define and call reusable PHP functions in WordPress, move code into a centralized location, and pass messages with parameters while distinguishing parameters from arguments.

Explore PHP arrays to store multiple values in a single variable, create arrays with the array function, and access items by numeric indexes starting at zero.

Learn to loop through a PHP array using a while loop, avoid infinite loops, track iterations with a count variable, and output items with indexing, increment operators, and array shorthand.

Explore PHP constants created with the defined function, which take a name and value to store unchangeable values like tax rates; learn uppercase naming and reading without a dollar sign.

Learn how to handle PHP errors by reading error messages, understanding the error type (warnings that don't stop the script), and using file name and line number to debug.

Explore how WordPress configuration powers a site by examining wp-config.php, enabling debug mode for development, and understanding constants and critical settings in a large theme and plugin project.

Explore the WordPress file and folder structure, including the root directory, WP includes, WP Admin, and WP content, to understand how pages load and where plugins and themes live.

Register a WordPress theme by adding style.css and index.php with a file header naming the theme, then convert a static Tailwind template into a functional, customizable WordPress theme.

Add comprehensive file headers to the WordPress theme's style.css, including theme URI, author, description, tags, version, requirements, license, and text domain, then preview with a screenshot.

Discover full site editing in WordPress 5.9, where headers, footers, and content become editable blocks. See how this free approach standardizes page building, while requiring JavaScript and React skills.

Explore the index template in WordPress, shift from PHP to full site editing with a templates directory and index.html, and use block-based templates with theme.json.

Recreate the indexed template in WordPress by comparing the html with php, exploring how full site editing generates html, and studying templates to understand theme basics and php practice.

Add the language attribute to the index template using the WordPress language_attributes function to automatically set the correct language code for multilingual themes.

Learn to dynamically render the site's character set by retrieving it from the WordPress database with the blog info function and inserting it into the head meta tag.

Load additional tags in WordPress using the WP head and WP footer functions to safely inject meta tags, styles, and scripts, with themes taking priority over plugins.

Learn how WordPress generates body tag classes and uses WP Footer and WP Body Open to load content at top or bottom.

Explore WordPress resources and navigate the developer documentation to master plugins and themes, distinguishing WordPress.com from WordPress.org and understanding open source code.

Apply WordPress coding standards for consistent, well-formatted code guided by the WordPress Best Practices page and PHP standards; guidelines are optional unless contributing to core or releasing plugins and themes.

Learn how global styles in the full site editor apply colors, typography, and spacing across all pages, enabled by a theme.json in the theme root.

Load a schema to validate your theme json, catch casing and type errors, and ensure WordPress understands your settings by adding a $schema property.

Add colors to the theme palette by editing the theme JSON. Define a palette array with slug, color, and name, and prefix IDs to avoid conflicts.

Explore the WordPress color palette for backgrounds, text, and links, toggling properties globally or per block via the theme JSON. See how enabling or disabling colors affects site elements.

Learn how to disable and enable the custom color picker in WordPress at global and site title block levels by editing the theme JSON color object.

Apply duotone filters that override image colors to images and blocks by configuring theme.json, defining shadow and highlight colors, and creating custom duotones like pink sunset for high-contrast visuals.

Learn how to add and customize gradients in a WordPress theme using CSS gradients, applied at global and block levels, with presets, and how to disable them for specific blocks.

Apply default colors across WordPress blocks by configuring the theme.json styles object, using CSS variables and the var function for text and background colors.

Enable and customize borders in WordPress themes by configuring the border object in theme.json, test in the browser on the pull quote block, and compare global versus block-specific options.

Explore WordPress typography settings by adding font families in theme.json, using Pacifico and Rubik from Google Fonts, and understand site title versus global font loading.

Configure font sizes in the theme json by overriding WordPress defaults, using rem units, defining global and block-specific options, and disabling sizes for the Preformatted block.

Wrap up typography by setting initial values and applying styles globally or at the block. Set font family with WP preset font family and apply to the site title block.

Explore layout options by configuring content width in the WordPress theme, using content size and optional wide size in the theme.json to control post content and block alignment.

Activate global and block level margin and padding by adding a spacing property to the theme, set margin and padding to true, then apply and reset spacing.

Modify theme spacing by configuring units for margins and padding in WordPress. Add a units array in the theme JSON, remove the M unit, and test by refreshing the page.

Configure block gaps in WordPress themes by enabling gap settings in the theme JSON, adjusting the gap value (four rem), and overriding the CSS gap in a flex columns layout.

Enable everything in the theme JSON with the appearance tools setting to unlock full WordPress theme control, then reset templates via the full site editor to tailor per-block features.

Explains how Git and GitHub support version control and collaboration for WordPress plugins and themes, including creating repositories, committing changes, and sharing code or gist.

Begin turning a static template into a WordPress theme by organizing assets, converting HTML to blocks, and safely loading CSS without hard-coded paths.

Explore how hooks power WordPress by running PHP functions at specific events, from loading assets to authenticating users, and learn how the Hooks API enables extensibility.

Explore how the functions.php file powers WordPress themes by hosting hooks, separating logic from templates, and organizing code to add scripts and styles.

Explore the WordPress enqueue hook by using add_action to queue scripts and styles with wp_enqueue_scripts, define a prefixed function, and ensure proper timing before template rendering.

Explore how PHP function return values expose results outside a function, using a sum example and the return keyword that stops execution after returning.

learn how to organize a WordPress theme by using an includes directory and a front folder, load files with the include function and paths via get_theme_file_path, while understanding WordPress hooks.

Register CSS files with the WP Register style function, use a handle and a valid URL or get theme file URI, then queue them from the theme assets directory.

Fix font loading in WordPress by removing the version query parameter from font links, preventing duplicate parameters and ensuring Pacifica and Rubik load correctly.

Add preconnect link tags to the WordPress head by creating a head function hooked to WP Head, and set its priority to load Google fonts earlier.

Convert a static WordPress template into modular blocks by creating header and footer template parts, splitting templates into reusable parts, and loading them with template parts for consistent, maintainable pages.

Explore the anatomy of a WordPress block, from simple HTML blocks to template parts, and learn how JSON settings in comments configure block behavior.

Learn to optimize the header and footer in WordPress by comparing block-generated HTML from template parts to templates, adjusting wrappers and classes, and testing with developer tools to reduce bloat.

Generate dummy content for a WordPress theme using the Finger Press plugin, creating terms and posts with configurable taxonomies and images, then deactivate the plugin to proceed with theme work.

Recreate the header top bar with WordPress blocks, focusing on the header template part in the site editor. Adjust styling via block settings, including background color, typography, and padding.

Learn how to center WordPress content using the group block and custom classes, applying a container group inside the row to keep blocks aligned and contained on the home page.

Enable editor styles in the Gutenberg editor by adding theme support and loading three css files (google font, icons, index css) via add editor style after setup theme.

Add a navigation menu to the header using WordPress blocks, customize links, colors, spacing, and alignment, enable mobile overlay, and apply a secondary menu class for styling.

Recreate the header midsection by building a single row with blocks for logo, search form, and login link, using flexbox justification and careful padding, margins, and classes.

Create a separate editor CSS file and load it via the add editor style function to fix editor-specific header and menu styling.

Finish the header by adding the final navigation block, adjust the row settings and padding, and save templates to verify the full site editor header matches the static version.

Set up a two-column WordPress index layout with the columns block, placing posts on the left and sites, tags, categories, and highly rated posts on the right.

Learn to render dynamic post lists with the WordPress query loop block, pair it with the post template block, and enable URL-driven pagination using inherit query from loop.

Learn to build a two-column WordPress post template by configuring the columns block with 33.33% and 66.66% widths, then add blocks for author, title, date, image, tags, comments, and excerpt.

Learn to style the post list blocks for a WordPress theme by adjusting author, title, date, image, tags, and counts with block settings and custom CSS, including Bootstrap icons.

Implement and style the WordPress pagination block within the query loop, adding next and previous links with chevrons, flex layout, and hover effects. Adjust spacing, colors, and remove page numbers.

Create a reusable sidebar by adding a template part and blocks for tags and tag cloud, categories, and highly rated posts, then update the index template in the Gutenberg editor.

Recreate a WordPress footer using blocks, including a three-column layout, a white separator, and a social icon row, then open links in new tabs and adjust colors and spacing.

Study how WordPress uses the template hierarchy to render posts, pages, and other content, using the front page and index templates as fallbacks in block themes.

Add a dedicated 404 template to your WordPress theme, following the template hierarchy, by creating a 404 file with simple heading and paragraph blocks and testing with a broken URL.

Learn to create a category template in WordPress by leveraging the template hierarchy, using slug and id-specific templates, and adding a category header to distinguish category pages from the index.

Create a search.html template in WordPress by duplicating the index template, place a search form above the first-column posts, and implement a custom html block to show the search term.

Create a generic page template in the templates directory by transferring blocks from the single template, name the page.html file, strip unnecessary blocks, and test it on the front end.

Create and register custom templates beyond WordPress's hierarchy by editing the theme.json and specifying name, title, and post types for pages, including a full width page.

Explore the next half of the course, focusing on plugin and block development with PHP, JavaScript, and React, learning JavaScript fundamentals before returning to WordPress development.

Discover how JavaScript powers the web by enabling client-side interactivity and form validation, contrasting it with server-side PHP. Explore its use in WordPress, browsers, and apps to enhance user experience.

Explore dynamically typed data types in PHP and JavaScript, including strings, numbers, booleans, null, undefined, and objects. Learn to verify data types with the type of keyword in the console.

Discover constants, which are variables that cannot be updated after initialization, and compare them to updating regular variables; see how the const keyword contrasts with the outdated var keyword.

Explore template literals in JavaScript, injecting variables into strings with backticks and expressions, compare them with string concatenation, and apply dynamic text in Gutenberg development.

Create arrays in JavaScript with square brackets, storing mixed data in a states array with developer tools snippets. Access items by zero-based indexes and display the second with alert.

Master JavaScript objects for WordPress theme development by exploring properties, dot notation, arrays, and functions, including a withdraw method and the this keyword.

Explore the console object for debugging, replacing alert with console.log to view messages alongside the file name and line number, without blocking the page.

Load JavaScript with the script tag and link an external main.js file to keep HTML and JavaScript separate, placing scripts at the bottom to avoid blocking.

Explore how the browser builds the document object model from HTML, selects elements with querySelector or related methods, and manipulates content and styles with JavaScript.

Explore how conditional statements control the flow in JavaScript, compare values with strict and not equal operators, and implement if, else if, and else to log results.

Explore variable scope and its impact on accessibility across blocks, functions, and global scope. Learn how the var, let, and const keywords affect visibility and how to diagnose undefined errors.

Explore arrow functions as a shorter, readable alternative to regular functions, including assigning them to a variable, passing parameters, and using the fat arrow syntax.

Master JavaScript destructuring to extract properties from objects and items from arrays, simplifying code and improving readability. Learn examples of object properties like num and log num.

Discover how React, a JavaScript library for building user interfaces, integrates with WordPress to enable rapid interactive site development. Explore the learning curves and production optimization aspects for WordPress developers.

Start a react project in a browser-based environment, configure package.json with dependencies and dev dependencies, and explore public and source folders, React DOM, and npm packages.

Create a basic React app by rendering a heading to the browser using React and the createElement function, then mount elements into the root element with React DOM.

Discover how gsx lets you write HTML-like code in JavaScript, which webpack converts to React.createElement, while addressing single root elements, fragments, and className for styling.

Learn how component-based design in React makes HTML scalable by splitting UI into reusable elements. Return JSX from functions, render dynamic content like a clock, and compose components.

Explore how props extend components by passing data from a parent to a child header, render the name prop in the heading, and use variables and expressions with curly braces.

Explore es6 modules in JavaScript and organize code into page.js and header.js, learning import/export, default namespace, and that this is pure JavaScript, not a React feature.

Explore event handling in React by building a clickable counter link with useState, onClick, and preventDefault, and learn to manage browser events and the event object.

Explore the useEffect hook to persist data with local storage, watching dependencies, initializing from storage, and updating counts in a React counter component.

Master essential command line skills for local WordPress development, focusing on working directory, list, and change directory to navigate. Use PowerShell or Terminal to prepare for Gutenberg with React.

Learn how to build a separate WordPress plugin to create editable blocks for a theme, including header setup, plugin file creation, and registering blocks in WordPress.

Secure your main WordPress plugin file by checking WordPress is loaded with the exists function and the not operator, preventing direct access and premature execution, reinforcing plugin security.

Learn to install and use WordPress scripts with npm to streamline Gutenberg block development, decide when to use tooling, and manage dependencies with package.json and node_modules.

Explore the WordPress Scripts package, learn to use the scripts object, create shortcut commands, run them via PM, and keep plugins up to date with the update command.

Learn to create a bundle with Webpack in WordPress projects using Gutenberg and React, configure the WordPress Scripts package, and develop in the source folder to output a compact bundle.

Register a WordPress block by loading the block JSON file from the build directory using register_block_type within the init hook. Organize the plugin with includes and proper file paths.

Enqueue and test a block's script by configuring the block JSON to load an editor script, keeping front-end loading optional, and validating the block appears in the Gutenberg editor.

Create and register a custom WordPress block with a block JSON file, then build its UI using the registerBlockType function and a React component.

Learn to make a block's text editable using WordPress's rich text component, configure tag name and placeholder, and implement translation with wp i18n's double underscore, testing in Gutenberg.

Store user input in WordPress block attributes by configuring a string content attribute, then update it with onChange using setAttributes in the edit component to persist data.

Master saving blocks in WordPress Gutenberg by comparing client side and server side rendering, configuring save and edit functions, and using rich text content with database-backed front-end output.

Add block props to the root element to enable Gutenberg toolbar and styling, using useBlockProps and the spread operator on the rich text component.

Enqueue block styles by importing a main css file, adding classes with the block props function, and using the style option to queue editor and front-end styles.

Learn to configure the rich text component in WordPress plugins, restricting the editor toolbar to bold and italics, via the Allow formats array and core/bold, core/italic.

Add a color option to modify the underline of the h2 element in a WordPress block using the InspectorControls and PanelBody components, with the color input in the editor sidebar.

Add a color palette to a WordPress block using the color palette component from the components package, set an underlying color attribute with a default #f87171, and update on change.

Apply dynamic styles to WordPress blocks by editing the save function, using block props to add a style object, and implementing a background image with a linear gradient hover effect.

Explore attribute sources to optimize block data storage by extracting values from HTML using a selector, mapping to a JSON object in WordPress.

Refactor the plugin to support multiple blocks by creating a blocks directory and a fancy header folder, moving block files, and registering blocks with a PHP array using scripts package.

Create a custom WordPress Gutenberg search form block to replace the core header form, wiring block.json, index.js, and main.css, and register it for the editor UI.

Add a custom icon to WordPress blocks by exporting an SVG in an icons file, importing it into the block code, and updating the block registration and JSON.

Add a search form block template by copying HTML from the template, updating the index.js and import CSS, and applying block props with the correct class to ensure Gutenberg compatibility.

Learn to use the panel color settings component to adjust a block's background and text colors via inspector controls and a color settings panel that uses the theme palette.

Learn to apply colors to a WordPress block by using use block props to set background and text colors on the root element, and bind dynamic styles to the button.

Register a server-side render callback for the search form block with register_block_type, define the render_cb function, and conditionally pass options to enable front-end rendering.

Explore rendering a WordPress block with output buffers to capture HTML as a string. Use ob_start and ob_get_clean to return content cleanly to templates.

Convert block attributes to a PHP array, escape them, and use them in the render function to generate dynamic styles and classes for the search form block.

Finalize the WordPress search form by rendering the user’s search term in the input, submitting to the home page, and using translation and escaping helpers for safety.

Add the search form block to the search template, replace and test it in the browser, then use server-side rendering with PHP to render dynamic search results.

Create a dynamic page header block for WordPress, using server-side rendering to display the current category and optionally enable category text via a customizable block.

Add a rich text component to WordPress block header and store content in HTML comments for server rendering; connect to block attributes and update via onChange with a translatable placeholder.

Learn to add a toggle control with a slider and label to toggle the show category boolean for the page header, using inspector controls and onChange to update the attribute.

Learn to toggle content in the Gutenberg editor by conditionally rendering the page header based on the show category attribute, using a ternary operator with rich text components, server-rendered.

Finish the page header block and render the category header on the front end using server side rendering and output buffering, with PHP templates and safe defaults.

Learn to auto include many PHP files using glob patterns, merge results, and safely include files with include once, avoiding duplicates and handling errors.

Explore a different solution for creating a block plugin with WordPress's official create block package, including generated files, editor config, readme, index.js, and builds.

Explore the Gutenberg Examples repository to learn WordPress block development with vanilla JavaScript or JSX, and understand how WordPress wraps React createElement for backward compatibility and blocks without extra tools.

Develop a custom header tools block to open a modal with login and registration forms, replacing bloated plugins, and learn end-to-end block creation, server-rendered rendering, and basic inspector controls.

Explore the select control component to implement a boolean show off attribute for the header tools block, enabling login link toggling, and learn boolean type casting versus the toggle control.

Implement the WordPress checkbox control to toggle attributes, configuring label, help, and checked state with onChange, using a ternary to show or hide the link, and test in editor.

Toggle the log in link and templates inside a WordPress Gutenberg block using ternary operators and the and operator, enabling dynamic editor display based on the show off attribute.

Create a standalone authentication modal block decoupled from the header tools block to prompt logins from various actions, using server side rendering and a show register toggle.

Add a toggle control to show or hide the registration form within the authentication modal block, wiring it to the show register attribute and updating attributes in the inspector controls.

Learn how to load a front-end script for a WordPress block using the block JSON file, create a front-end js file, and verify it by logging to the console.

Explore building WordPress front-end interfaces with plain JavaScript or React, then wait for the document to load using DOMContentLoaded and addEventListener, logging readiness before proceeding.

Toggle the modal by switching display from none to block and applying modal show class; open it by clicking an element with the open modal class, and close via overlay.

Learn to implement tabbed forms inside a modal with plain JavaScript: toggle the active tab and display the corresponding sign in or sign up form while hiding the other.

Learn to handle registration form submissions with JavaScript by intercepting the submit event, preventing default page reload, and disabling the form while sending data, with live status messaging.

Discover what a representational state transfer rest api is and why sending data over http is efficient, then explore WordPress rest api endpoints for posts and media in json.

Practice using the WordPress REST API with Postman to test endpoints and HTTP methods (get, post, delete), retrieving posts from wp-json/v2/posts and exploring the schema and query parameters.

Explore why the core WordPress users endpoint cannot create accounts for anonymous users, requires admin access and a token, and how to build a custom endpoint.

Register a custom endpoint for user registration by hooking into the WordPress rest API, set up a namespaced up/v1 sign up route with post method and permission callback.

Define a signup rest api handler in WordPress to return a json response. Use a response array with a status key set to 1 for failure and 2 for success.

Learn how PHP uses classes as blueprints for objects, define properties and methods, instantiate with new, and access members via the arrow and public modifiers.

Validate registration requests by verifying username, email, and password from the request body via WP Rest Request and get_json_params, then use is_set and empty to reject incomplete data.

Prevent duplicate users by sanitizing email and text input, verifying existing usernames or emails with WordPress functions, and rejecting duplicates before insertion.

Learn how to create a new WordPress user using built-in functions like wp_insert_user, log the user in, and notify plugins with the wp_login hook.

Learn to generate a dynamic rest url in WordPress and inject it into the front end with an inline script, avoiding hardcoded endpoints for signup and auth.

Submit registration form data as JSON to the endpoint with fetch post, including username, email, and password, then use async/await to handle the response and show success or error messages.

Prepare the sign in endpoint by defining a PHP handler, setting up a WordPress REST route under the up/v1 namespace, validating credentials, and testing with Postman.

Authenticate the user with a custom endpoint using sanitized email and password, leveraging wp_signon and a remember-me option to set a login cookie, tested via Postman.

Finish the header tools block by using is_user_logged_in and wp_get_current_user to greet the user, hide the modal, and replace the sign in text with the user name.

Explore how static properties in PHP let a class share data without instances, using the static keyword and :: access, and compare static with non static properties in WordPress.

Learn how WordPress standardizes REST API methods using static constants from the WP Rest Server, applying get, post, put, patch, and delete to endpoints, and testing with Postman.