├── .gitignore ├── README.md ├── bin └── chapters.php ├── block-course-cohort ├── .DS_Store ├── course-cohort-introduction.md ├── images │ ├── .DS_Store │ ├── attributes-01.png │ ├── attributes-02.png │ ├── attributes-03.png │ ├── attributes-04.png │ ├── block-course-cohort-week-02.png │ ├── book-01.png │ ├── books-block-01.png │ ├── books-block-02.png │ ├── books-block-03.png │ ├── books-block-04.png │ ├── books-block-05.png │ ├── books-block-06.png │ ├── books-block-07.png │ ├── books-block-08.png │ ├── books-block-09.png │ ├── chocolatey-01.png │ ├── my-reading-list-01.png │ ├── my-reading-list-02.png │ ├── my-reading-list-03.png │ ├── my-reading-list-04.png │ ├── my-reading-list-05.png │ ├── my-reading-list-06.png │ ├── nodejs.png │ ├── save-01.png │ ├── save-02.png │ ├── save-03.png │ ├── save-error-01.png │ ├── terminal-01.png │ ├── terminal-02.png │ ├── terminal-03.png │ ├── wp-learn-todo-02.png │ ├── wp-learn-todo-add-block.png │ ├── wp-learn-todo-create-block-scripts.jpg │ ├── wp-learn-todo-create-block.png │ └── wp-learn-todo.png ├── week-01.md ├── week-02.md ├── week-03.md ├── week-04.md ├── week-05.md ├── week-06-draft.md └── week-06.md ├── blog-posts ├── .DS_Store ├── WordPress-Coding-Standards-Tools.md ├── converting-shortcodes-to-blocks.md └── images │ ├── castos-player.gif │ ├── castos-player.mp4 │ ├── html5-player.png │ ├── shortcode-block.png │ ├── standard-player.png │ └── time-relative.png ├── developer-learning-pathway ├── .cursor │ └── rules │ │ ├── lesson-creation-rules.mdc │ │ └── post-migration-rules.mdc ├── .gitignore ├── 01-how-wordpress-works │ ├── 01-web-servers.md │ ├── 02-file-structure.md │ ├── 03-wordpress-database.md │ ├── 04-permalinks.md │ ├── 05-front-end-request.md │ └── 06-admin-request.md ├── 02-local-development-requirements │ ├── 01-development-environment.md │ ├── 02-wordpress-installation.md │ ├── 03-code-editor.md │ └── 04-additional-tools.md ├── 03-the-programming-languages-of-wordpress │ ├── 01-html.md │ ├── 02-css.md │ ├── 03-javascript.md │ ├── 04-php.md │ ├── 05-mysql.md │ └── 06-coding-standards.md ├── 04-wordpress-hooks │ ├── 01-hooks.md │ ├── 02-action-hooks.md │ ├── 03-filter-hooks.md │ └── 04-working-with-hooks.md ├── 06-introduction-to-wordpress-plugins │ ├── 01-what-is-a-plugin.md │ ├── 02-plugin-requirements.md │ ├── 03-creating-custom-data-types.md │ ├── 04-custom-taxonomies.md │ ├── 05-custom-post-type-data.md │ └── 06-enqueing-css-or-javascript.md ├── 07-introduction-to-wordpress-blocks │ ├── 01-getting-set-up-for-block-development.md │ ├── 02-scaffolding-a-new-block.md │ ├── 03-building-your-first-block.md │ ├── 04-block-functionality.md │ ├── 05-block-attributes.md │ ├── 06-block-supports-and-styles.md │ └── 07-static-vs-dynamic-blocks.md ├── 08-wordpress-rest-api │ ├── 01-the-wordpress-rest-api.md │ ├── 02-using-the-wp-rest-api.md │ ├── 03-interacting-with-the-wp-rest-api.md │ └── 04-extending-the-wp-rest-api.md ├── 09-developing-for-wordpress-securely │ ├── 01-securely-developing-plugins-and-themes.md │ ├── 02-fixing-common-security-vulnerabilities.md │ └── 03-tools-to-detect-security-vulnerabilities.md ├── 10-introduction-to-internationalization.md │ ├── 01-what-is-internationalization.md │ └── 02-the-commonly-used-internationalization-functions.md ├── 11-introduction-to-wordpress-multisite │ ├── 01-setting-up-a-wordpress-multisite-network.md │ ├── 02-managing-a-multisite-network.md │ ├── 03-advanced-multisite-management.md │ ├── 04-developing-for-multisite-network.md │ └── 05-building-plugins-and-themes-for-multisite.md ├── 12-debugging-in-wordpress │ ├── 01-built-in-wordpress-debugging-options.md │ ├── 02-examining-the-state-of-your-php-code.md │ ├── 03-examining-the-state-of-your-javascript.md │ └── 04-useful-debugging-plugins.md └── Quizzes │ ├── 01-wordpress-development-stack.md │ ├── 02-extending-wordpress.md │ └── 03-development-practices.md ├── lesson-template.md ├── lesson_plans ├── implementing-the-rest-api.md ├── lesson_plan_structure.md └── using-the-rest-api.md ├── lessons ├── learning-pathway-beginner-developer.md ├── learning-pathway-generalist-developer.md ├── learning-pathway-intermediate-plugin-developer.md └── learning-pathway-intermediate-theme-developer.md ├── plugin-developer-learning-pathway ├── 01-Plugin-Development-Practices │ ├── 01-php-code-structure.md │ ├── 02-Naming-Collisions.md │ ├── 03-Activation-Deactivation-methods.md │ ├── 04-Uninstall-Methods.md │ └── 05-Development-Best-Practices.md ├── 02-Advanced-Hooks │ ├── 01-custom-hooks.md │ ├── 02-removing-hooks.md │ ├── 03-correct-the-hook.md │ ├── 04-good-practices.md │ └── imgs │ │ ├── assert-callback-values.png │ │ └── handling-filter-return.png ├── 03-Advanced-Blocks │ ├── 01-Modern-JavaScript.md │ ├── 02-React-without-JSX.md │ ├── 03-Nested-Blocks.md │ ├── 04-Block-Variations.md │ ├── 05-Block-Editor-Hooks.md │ ├── 06-Block-Hooks-API.md │ ├── 07-Fetching-WordPress-Data.md │ └── 08-Block-Bindings.md ├── 04-Advanced-WP-REST-API │ ├── 01-Custom-Routes-Endpoints.md │ ├── 02-The-Custom-Controller-Pattern.md │ ├── 03-Authentication-JSON-Web-Tokens.md │ └── 04-Authentication-OAuth.md ├── 05-Advanced-Custom-Post-Types │ └── 01-Working-with-custom-post-types.md ├── 07-Custom-Database-Tables │ ├── .wp-env.json │ ├── 01-Creating-and-Managing-Custom-Tables.md │ ├── 02-Interacting-with-custom-tables.md │ ├── wpl-form-submissions.php │ └── xkcd_exploits_of_a_mom.png ├── 12-Cron │ ├── 01-Introduction-to-WP-Cron.md │ └── 02-Scheduling-WP-Cron-events.md └── 15-Publishing-Plugins │ ├── 01-The-WordPress.org-plugin-directory.md │ └── 02-Plugin-Directory-Guidelines.md ├── theme-developer-learning-pathway ├── 05-Accessiblity │ ├── 01-accessibility-best-practices.md │ └── 02-tools-for-accessiblity-testing.md ├── 06-Privacy │ └── 01-Themes-and-user-privacy.md ├── 07-advanced-theme-development │ ├── 01-child-themes.md │ ├── 02-user-interface-best-practices.md │ ├── 03-javascript-best-practices.md │ ├── 04-build-process.md │ ├── 05-plugin-api-hooks.md │ └── 06-theme-testing.md └── 08-publishing-themes │ ├── 01-the-wordpress-org-theme-directory.md │ ├── 02-required-theme-files.md │ ├── 03-preparing-your-theme-for-submission.md │ ├── 04-submitting-your-theme.md │ └── 05-updating-your-theme.md ├── tutorials ├── .DS_Store ├── 6-4-improvement.php ├── common-apis-dashboard-widgets.md ├── common-apis-global-variables.md ├── common-apis-http-api.md ├── common-apis-internationalisation.md ├── common-apis-metadata.md ├── common-apis-options.md ├── common-apis-responsive-images.md ├── common-apis-settings.md ├── create-block-theme.md ├── create-block-tool.md ├── debugging-wordpress.md ├── developing-securely │ ├── 01-wordpress-plugin-security.md │ └── 02-wordpress-common-vulnerabilities.md ├── fundamentals-01-the-wordpress-database.md ├── fundamentals-02-custom-tables.md ├── fundamentals-03-implementing-custom-tables.md ├── fundamentals-nodejs-npm.md ├── images │ ├── .DS_Store │ ├── castos-player.gif │ └── custom.gif ├── introduction-to-theme.json.md ├── php-version-compatibility-testing.md ├── theme-json-classic-themes.md ├── wordpress-coding-standards.md ├── wordpress-request-lifecycle.md ├── wordpress-roles-capabilities-01-development.md ├── wordpress-roles-capabilities-02-custom-post-types.md ├── wp-multisite-01-create-a-network.md ├── wp-multisite-02-manage-a-network.md ├── wp-multisite-03-advanced-site-management.md ├── wp-multisite-04-developing.md └── wp-rest-api │ ├── wp-rest-api-01-using.md │ ├── wp-rest-api-02-interacting.md │ ├── wp-rest-api-03-custom-fields-authentication.md │ ├── wp-rest-api-04-modifying-responses.md │ └── wp-rest-api-05-custom-routes-endpoints.md └── workshops ├── introduction-html-api.md ├── ubuntu-vps-apache.md ├── ubuntu-vps-nginx.md ├── ubuntu-vps-openlitespeed.md └── wceu-workshop.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Developer content for Learn.WordPress.org 2 | 3 | Repository for collaboration around developer content for Learn.WordPress.org 4 | 5 | Issues in this repository have been disabled, to work on content for Learn.WordPress.org see https://github.com/WordPress/Learn/issues 6 | -------------------------------------------------------------------------------- /bin/chapters.php: -------------------------------------------------------------------------------- 1 | Utilities folder. You can also launch it by clicking on the Launchpad app and searching for Terminal. 52 | 53 | [image] 54 | 55 | On Linux distributions, the default terminal is also called Terminal, and it is usually located in the Applications menu. 56 | 57 | [image] 58 | 59 | On Windows, the default terminal is called Command Prompt, and it is located in the Start menu. 60 | 61 | However, we recommend using a terminal application for Windows called PowerShell, because it is possible to configure PowerShell to work similarly to the terminal on MacOS and Linux. 62 | 63 | To download PowerShell, go to https://learn.microsoft.com/en-gb/powershell/ and click on the Download Powershell button, and install the executable file that you download. 64 | 65 | Once it's installed, you can launch it by searching for PowerShell in the Start menu. 66 | 67 | [image] 68 | 69 | Once you have a working terminal, you will be able to install the software you need to start developing blocks. 70 | 71 | ## Why install Chocolatey for Windows? 72 | 73 | If you are running macOS or Linux, you can skip this lesson. 74 | 75 | In the Installing Node.js and npm lesson, we suggested using Chocolatey on Windows to install nvm, to then install Node.js and npm. But we also mentioned that you can use something called [nvm-windows](https://github.com/coreybutler/nvm-windows). 76 | 77 | So why recommend Chocolatey? 78 | 79 | The main reason we suggested Chocolatey is to get you comfortable using the terminal. Later on in this course, there will be times when you will need to use the terminal to run commands, and so we wanted to get you used to using it as soon as possible. 80 | 81 | There are however a few advantages to using a package manager like Chocolatey on Windows: 82 | 83 | - It makes it easier to install and update software, as long as the software is available as a Chocolatey pacakge, you can install, update or delete it with a single command. 84 | - When installing anything, Chocolatey, like other package managers, will also install any dependencies that the software needs to run. 85 | - It also makes it easier to keep track of what software you have installed on your computer. 86 | 87 | ## Why install nvm to install node.js, and npm 88 | 89 | å 90 | ## Wrap up 91 | 92 | -------------------------------------------------------------------------------- /block-course-cohort/week-02.md: -------------------------------------------------------------------------------- 1 | # TOC 2 | - Welcome 3 | - Using create-block to scaffold your first block 4 | - Why use create-block 5 | - What does create-block generate 6 | - Understanding wp-scripts 7 | - Internationalisation 8 | - Using create-block with an existing plugin 9 | - Activity 10 | - Wrap up 11 | 12 | ## Welcome 13 | 14 | Welcome to the second week of the Learn WordPress course cohort. 15 | 16 | [Introduction video] 17 | 18 | Hi there, and welcome to week 3 of this course cohort on building WordPress blocks. 19 | 20 | Last week you set up your local development environment with Node.js and npm, optionally using nvm. 21 | 22 | This week, you will be using the create-block tool to scaffold your first block. 23 | 24 | Create Block is an officially supported tool for scaffolding a WordPress plugin that registers a block. 25 | 26 | It generates PHP, JS, CSS code, and everything you need to start the project. It also integrates a modern build setup with no configuration. 27 | 28 | I love tools that make my life easier, and create-block is such a tool. Because it generates your code in a standardised way, it means that you can focus on creating your block, and not worry all the manual set up. 29 | 30 | This week, you will also have an activity to complete towards the end of the module. This activity will take everything you've learned this week, and put it into practice. 31 | 32 | As always, if you have any questions about anything, feel free to reach out to me in Slack. 33 | 34 | Happy coding! 35 | 36 | [ Transcript ] 37 | 38 | ## Introducing create-block 39 | 40 | ## Why use create block 41 | 42 | Now that you've generated your very first WordPress block, let's discuss why it's a good idea to use create-block to scaffold your blocks. 43 | 44 | create-block is officially supported by the WordPress project, and maintained by a team that forms part of the core developers of the block editor. This means that it's actively maintained, and will be kept up to date with the latest changes in WordPress. 45 | 46 | For example, since the block editor was introduced to WordPress in version 5.0, two action hooks have existed to enqueue CSS for the block editor, enqueue_block_editor_assets (to only load assets in the editor) and enqueue_block_assets (to load assets for both the editor and the front end). 47 | 48 | Many developers have been using the enqueue_block_editor_assets hook to enqueue their block assets like CSS or JavaScript files, when the editor is loaded (either in the post editor or in the site editor). 49 | 50 | In WordPress 6.3, the block editor was updated to be loaded in an iframe to isolate it from the rest of the admin screen. This has a [number of benefits](https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/#comments), but it does mean that the `enqueue_block_editor_assets` hook should no longer be used to add stylesheets for editor content. 51 | 52 | However, you'll notice in the scaffolded block plugin, neither the `enqueue_block_editor_assets` nor the `enqueue_block_assets` hooks are used to enqueue the block stylesheet. Instead, the relevant stylesheets are specified in the block.json file, which is read when you pass the build directory to the `register_block_type` function in PHP. 53 | 54 | create-block also defines your dependencies and sets up your build step automatically for you. You'll learn more about these terms in future lessons, but for now, just know that it saves a lot of time scaffolding your new block this way, compared to doing everything manually yourself. 55 | 56 | There are a few other reasons to use create-block, but for now, let's take a look at what it creates, and how all the pieces fit together. 57 | 58 | ## What does create-block generate 59 | 60 | ## Understanding wp-scripts 61 | 62 | ## Internationalisation 63 | 64 | ## Using create-block with an existing plugin 65 | 66 | ## Activity 67 | 68 | ## Wrap up 69 | 70 | 71 | -------------------------------------------------------------------------------- /block-course-cohort/week-06-draft.md: -------------------------------------------------------------------------------- 1 | ## Implementing the save function 2 | 3 | ## The save function 4 | 5 | Because the save function is merely saving the output, you don't need to re-run the `getEntityRecords` selector using the `useSelect` hook. Instead, you can just use the `select` function on the `core` store, and fetch the books that are already in the store. 6 | 7 | At the top of your save.js file, import the `select` function from the `@wordpress/data` package. 8 | 9 | ```js 10 | import { select } from '@wordpress/data'; 11 | ``` 12 | 13 | Then, inside the save function create the `books` variable and use the `select` function to fetch the books from the `core` store. 14 | 15 | ```js 16 | const books = select( 'core' ).getEntityRecords( 'postType', 'book' ); 17 | ``` 18 | 19 | Then, you can use the same books.map method to loop through the books and return the markup for each book. 20 | 21 | Remember to first update the existing markup to change the parent

to a

, and wrap the text in a

. 22 | 23 | ```js 24 | return ( 25 |

26 |

{'My Reading List – hello from the saved content!'}

27 |
28 | ); 29 | ``` 30 | 31 | Then, add the books.map method to loop through the books and return the markup for each book. 32 | 33 | ```js 34 | return ( 35 |
36 |

{'My Reading List – hello from the saved content!'}

37 | { books.map( ( book ) => ( 38 |
39 |

{ book.title.rendered }

40 | 41 |
42 |
43 | ) ) } 44 |
45 | ); 46 | ``` 47 | 48 | Now, before you refresh your browser, remove the block from the post or page you added it to, and either save the draft, or update the page. 49 | 50 | This is because when ever you hit refresh, the block already in the editor perform a check to compare the output being rendered by the save method, with the output that was saved in the database. If the output is different, the block will be marked as invalid, and you'll see an error in the editor. 51 | 52 | So whenever you make changes to your block's save function, it's a good idea to first remove the block from wherever you are testing it on, save content, hit refresh, and then add the block again. 53 | 54 | [!INFO] For the rest of this lesson, when you're testing your block's functionality, make sure to remove the block from the post or page you're testing it on, save the content, then refresh the browser before adding the block again. 55 | 56 | Once you've done this, you should see the same output in the editor that you saw earlier. However, if you preview the post or page, you'll see that the books are now being displayed. -------------------------------------------------------------------------------- /blog-posts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/.DS_Store -------------------------------------------------------------------------------- /blog-posts/WordPress-Coding-Standards-Tools.md: -------------------------------------------------------------------------------- 1 | # Overview of the coding standards tooling available to WordPress developers 2 | 3 | ## Outline 4 | - Introduction 5 | - WordPress Coding Standards 6 | - PHP 7 | - JavaScript 8 | - CSS 9 | - [WPCS for PHP_Codesniffer](https://github.com/WordPress/WordPress-Coding-Standards) 10 | - Requirements 11 | - Installation 12 | - Usage 13 | - [ESLint for JavaScript](https://eslint.org/) 14 | - Requirements 15 | - Installation 16 | - Usage 17 | - [Stylelint for CSS](https://stylelint.io/) 18 | - Requirements 19 | - Installation 20 | - Usage 21 | -------------------------------------------------------------------------------- /blog-posts/images/castos-player.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/castos-player.gif -------------------------------------------------------------------------------- /blog-posts/images/castos-player.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/castos-player.mp4 -------------------------------------------------------------------------------- /blog-posts/images/html5-player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/html5-player.png -------------------------------------------------------------------------------- /blog-posts/images/shortcode-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/shortcode-block.png -------------------------------------------------------------------------------- /blog-posts/images/standard-player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/standard-player.png -------------------------------------------------------------------------------- /blog-posts/images/time-relative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wptrainingteam/learn-wp-content/51930520433546a3576a6fcffbc12a912f89c735/blog-posts/images/time-relative.png -------------------------------------------------------------------------------- /developer-learning-pathway/.cursor/rules/lesson-creation-rules.mdc: -------------------------------------------------------------------------------- 1 | --- 2 | description: 3 | globs: 4 | alwaysApply: false 5 | --- 6 | You are assisting with the uploading course content to a WordPress site. 7 | 8 | ## Updating lessons 9 | 10 | 1. Lessons are custom post types, so use any custom post type tools for adding or updating lessons 11 | 2. When searching for lessons, search for lesson that are either in publish or draft status, as lessons might still be in draft mode. 12 | 3. If a matching lesson in WordPress cannot be found, search for possible lesson matches, and suggest from the list to be updated. 13 | 4. When updating WordPress lesson content from a markdown file, make sure to convert the content to block markup in the final lesson. 14 | 5. When adding or updating WordPress lesson content from a markdown file, the h1 heading in the markdown file should be added as the post title, not inside the post content. 15 | 5. If there are images present in a lesson, upload them to the WordPress media library, using media tools 16 | 6. When adding the lesson content, ignore any YouTube chapters in the lesson content 17 | 7. Always return a clickable preview URL when a lesson is added or updated 18 | 19 | ## User feedback 20 | 21 | 1. When calling tools from the MCP server, provide the user with minimal updates about what is happening. 22 | -------------------------------------------------------------------------------- /developer-learning-pathway/.cursor/rules/post-migration-rules.mdc: -------------------------------------------------------------------------------- 1 | --- 2 | description: 3 | globs: 4 | alwaysApply: true 5 | --- 6 | # Post Migration Rules 7 | 8 | ## MCP Server Usage 9 | 10 | - When searching, reading, or updating content on the **local WordPress site**, always use the `jonathanbossenger-local-mcp` MCP server tools. 11 | - When searching, reading, or updating content on the **production (public) WordPress site**, always use the `jonathanbossenger-production-mcp` MCP server tools. 12 | - Never use a local MCP tool for production content, or a production MCP tool for local content. 13 | - When migrating content, always fetch from the local server and create/update on the production server, unless otherwise specified. 14 | - When searching for posts, always include all post statuses. 15 | - When migrating post content, retain all post data and attributes. 16 | 17 | ## Minimal Updates 18 | 19 | - When calling tools from either MCP server, provide the user with minimal updates about what is happening. 20 | -------------------------------------------------------------------------------- /developer-learning-pathway/.gitignore: -------------------------------------------------------------------------------- 1 | .cursor/mcp.json 2 | -------------------------------------------------------------------------------- /developer-learning-pathway/01-how-wordpress-works/04-permalinks.md: -------------------------------------------------------------------------------- 1 | # Permalinks 2 | 3 | In this lesson, you'll learn about a concept called Permalinks, and how they are used to rewrite dynamic URLs in a WordPress site. 4 | 5 | ## Introduction 6 | 7 | In the web servers lesson, you learned that most PHP based applications, including WordPress, will have a Directory Index file. 8 | 9 | This is the file that will be executed when a user browses to the URL of the site in question. 10 | 11 | With a site powered by WordPress however, it's possible to have multiple different types of content rendered, like posts, pages, or products, all via the same Directory Index file. 12 | 13 | The key behind how this works is a feature called Permalinks. 14 | 15 | ## Query String Variables 16 | 17 | Before we dive into permalinks, it's useful to understand a concept known as a query string. 18 | 19 | Let's take a look at an example on a test WordPress installation. 20 | 21 | ``` 22 | https://wordpress.test/?p=1 23 | ``` 24 | 25 | In this example, the URL is `https://wordpress.test/`, and the query string is `?p=1`. The query string is a way to pass data to the web server. Here, the query string is passing the value `1` to the variable `p`. 26 | 27 | In PHP, it's possible to access the value of the variable `p` using the `$_GET` super global. 28 | 29 | ```php 30 | Permalinks**. 53 | 54 | The default permalink structure is Plain, meaning no Permalinks are in use, and plain query strings are used. 55 | 56 | The other options allow you to set your desired permalink structure from a list of common options, or define your own custom structure. 57 | 58 | When you set one of any these options other than Plain, the server will be configured to expect a clean URL based on the structure that you have defined. At the same time, WordPress will store the selected structure in the database. When a request is made to the site using a matching structure, WordPress will use these two pieces of data to map the URL structure to information that needs to be displayed, fetch that information, and display it on the page. 59 | 60 | On Apache web servers, this is typically handled in the .htaccess file. For example, if you set your permalink structure to any of the options other than Plain, the following code will be added to your .htaccess file: 61 | 62 | ``` 63 | 64 | RewriteEngine On 65 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 66 | RewriteBase / 67 | RewriteRule ^index\.php$ - [L] 68 | RewriteCond %{REQUEST_FILENAME} !-f 69 | RewriteCond %{REQUEST_FILENAME} !-d 70 | RewriteRule . /index.php [L] 71 | 72 | ``` 73 | 74 | This checks if the Apache web server has the rewrite module enabled, and then sets up the rewrite rules to expect a clean URL structure. 75 | 76 | On Nginx web servers, this is typically handled in the server block configuration file. Because Nginx does not support the use of an .htaccess file like configuration on a per WordPress level, the configuration is typically added by default to the server block in a location directive. 77 | 78 | ``` 79 | location / { 80 | try_files $uri $uri/ /index.php?$args; 81 | } 82 | ``` 83 | 84 | Whenever a permalink structure is set, if you add links to internal content like posts or pages, WordPress will automatically generate the correct URL based on the permalink structure that you have set. 85 | 86 | 87 | ## YouTube chapters 88 | 89 | 0:00 Introduction 90 | 0:39 Query String Variables 91 | 2:18 WordPress and Permalinks 92 | -------------------------------------------------------------------------------- /developer-learning-pathway/01-how-wordpress-works/06-admin-request.md: -------------------------------------------------------------------------------- 1 | # Admin request 2 | 3 | ## Introduction 4 | 5 | The functionality of the WordPress administration interface is handled by all the files in the `wp-admin` directory. 6 | 7 | Let's dive a bit deeper into the code that runs on a typical WordPress admin request, and understand how it differs from a front end request. 8 | 9 | ## What is an admin request? 10 | 11 | Unlike the typical front end request, different PHP files are executed depending on the functionality being used. Additionally, permalinks are not used in the dashboard, and instead query strings are used to pass data to these locations. 12 | 13 | For example, the default URL of the admin dashboard is `https://example.com/wp-admin/` 14 | 15 | This will load the `index.php` file in the `wp-admin` directory. 16 | 17 | However, if you want to view the posts in your site, the URL is `https://example.com/wp-admin/edit.php`. 18 | 19 | This will load the `edit.php` file in the `wp-admin` directory. 20 | 21 | If you click in the Edit post button, the requested URL is `https://example.com/wp-admin/post.php?post=1&action=edit`. 22 | 23 | This will load the `post.php` file in the `wp-admin` directory, passing it the `edit` action and the `post` ID of `1`. These query string variables are then used to determine what content to display. 24 | 25 | There are however a lot of commonalities in how each of these different admin files work. 26 | 27 | 1. The `wp-admin/admin.php` file is included, which sets up the WordPress environment 28 | 1. This file sets up any admin specific constants, and then includes the same `wp-load.php` file that is used on the front end, which in turn includes `wp-config.php` to include all the configuration settings for the WordPress install, and `wp-settings.php` which sets up the WordPress environment. 29 | 2. The file will then load any specific internal functionality, but only for the purposes of this specific section of the admin interface. 30 | 1. In the case of the dashboard, it wil include the WordPress Dashboard API which is located at `wp-admin/includes/dashboard.php` 31 | 2. It will then set up any specific content and variables required for the dashboard functionality 32 | 3. Next it will include the `wp-admin/admin-header.php` file, which performs things like setting up and rendering the header area of the admin interface as well as rendering the admin menu. 33 | 4. After that it will generate and render the content for the specific admin page 34 | 5. Finally, it will include the `wp-admin/admin-footer.php` file, which sets up and renders the footer of the admin interface 35 | 36 | ## YouTube chapters 37 | 38 | 0:00 Introduction 39 | 0:15 What is an admin request? 40 | -------------------------------------------------------------------------------- /developer-learning-pathway/02-local-development-requirements/01-development-environment.md: -------------------------------------------------------------------------------- 1 | # Development environment 2 | 3 | ## Introduction 4 | 5 | To develop with WordPress, there are a few things you will need to install on your computer, the first of which is a local development environment. 6 | 7 | There are many options for local development environments, and in this lesson, you'll learn about some of the most popular options. 8 | 9 | ## A quick intro to terminology 10 | 11 | Developers tend to use different terms to refer to the different WordPress environments they might use. 12 | 13 | The WordPress site that lives on the internet, and that users interact with, is often referred to as the live or production environment. This is the site where all the final content is published and any custom code is live. 14 | 15 | Sometimes, developers will create a separate server environment for testing new features or changes to the site. This is often referred to as the staging environment. This is a copy of the live site that is accessible via the internet, but usually only to the site owner or the developer. It is used to test new features or changes before they are deployed to the live site. 16 | 17 | Finally, developers will often have a local environment. This is a copy of the live or staging site that is installed on their computer. This is where they will do the majority of their development work. 18 | 19 | ## Local development environments 20 | 21 | Having a local development environment you are comfortable with allows you to focus on writing code, without having to worry about the complexities of setting up a web server and a database server on your computer. It also allows you to work offline, and test things out without the need to upload the code to a live site. 22 | 23 | Some local development environments also offer additional features, such as a built-in database management tool, or the ability to quickly change PHP versions. 24 | 25 | In the WordPress space, there are typically two types of local development environments: those that are created and maintained by members of the WordPress community, and those that are created and maintained by non-profits or companies. 26 | 27 | [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) is the local development environment currently recommended by the WordPress developer documentation. 28 | 29 | It requires a working knowledge of the command line, an installation of [Docker](https://www.docker.com/), and [Node.js](https://nodejs.org/en/). 30 | 31 | [VVV or Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/) is another local development environment maintained by members of the WordPress community. It also requires a working knowledge of the command line, and an installation of [VirtualBox](https://www.virtualbox.org/) and [Vagrant](https://www.vagrantup.com/). 32 | 33 | Another free and open source option is [XAMPP](https://www.apachefriends.org/). XAMPP is a local development environment that is maintained by Apache Friends, a non-profit project created to promote the Apache web server. While not specifically a WordPress local development environment, it includes everything you need, the Apache web server, a database server, and PHP. 34 | 35 | Like XAMPP, [MAMP](https://www.mamp.info/en) is another local development environment that is not specifically designed for WordPress, but it includes everything you need to get started. Unlike XAMPP, MAMP is not open source, and is available in both a free and a paid version. 36 | 37 | Other WordPress local development environments include [Studio by WordPress.com](https://developer.wordpress.com/studio/), [Local WP](https://localwp.com/), and [DevKinsta](https://kinsta.com/devkinsta/). 38 | 39 | Each of these products is created and maintained by their parent company, and each offer their own unique features. 40 | 41 | ## Choosing a local development environment 42 | 43 | Choosing a local development environment is a personal choice, and there is no right or wrong answer. 44 | 45 | You will need to review all the features of each option, the pros and cons, and decide which one is best for you. 46 | 47 | ## YouTube chapters 48 | 49 | 0:00 Introduction 50 | 0:17 A quick intro to terminology 51 | 1:07 Local development environments 52 | 3:18 Choosing a local development environment -------------------------------------------------------------------------------- /developer-learning-pathway/02-local-development-requirements/03-code-editor.md: -------------------------------------------------------------------------------- 1 | # Code Editor 2 | 3 | ## Introduction 4 | 5 | In order to develop for WordPress, you're also going to need a way to write and edit WordPress code. 6 | 7 | ## Choosing a code editor 8 | 9 | All code is essentially just text, and so you could technically write and edit WordPress code in your operating systems text editor. 10 | 11 | You would however be missing out on all the best features that true code editors and Integrated Development Environments or IDEs offer to you. 12 | 13 | If you don't already have a code editor or IDE that you are comfortable with, here are some options to consider. 14 | 15 | ## Visual Studio Code 16 | 17 | [Visual Studio Code](https://code.visualstudio.com/) is a free and open source code editor created by Microsoft. It is available for Windows, Mac, and Linux. It offers support for a wide range of languages, including HTML, PHP, JavaScript, and CSS. It also offers additional features like a built-in terminal, with the ability to add more features through extensions. 18 | 19 | ## VIM 20 | 21 | [VIM](https://www.vim.org/) is a free and open source text editor that is available for Windows, Mac, and Linux. It is a command line based editor, and is not as user-friendly as other editors. It does however offer a wide range of features, and is highly customizable. 22 | 23 | ## Brackets 24 | 25 | [Brackets](http://brackets.io/) is a free and code editor originally created by Adobe but now open sourced. It is available for Windows, Mac, and Linux. Brackets is similar to Visual Studio Code in that it offers support for a wide range of languages, and additional features through extensions. 26 | 27 | ## Sublime Text 28 | 29 | [Sublime Text](https://www.sublimetext.com/) is a code editor that is available for Windows, Mac, and Linux. It is not free, but does offer a free trial, and was another popular code editor before Visual Studio Code was released. 30 | 31 | ## Notepad++ 32 | 33 | [Notepad++](https://notepad-plus-plus.org/) is a free and open source editor that is available for Windows. Often seen as a powerful replacement for the default Windows text editor, it's also popular as a code editor. 34 | 35 | ## TextMate 36 | 37 | [TextMate](https://macromates.com/) is a free and open source editor that is available for Mac. Like Notepad++, it is a replacement for the default MacOS text editor and offers code editor features. 38 | 39 | ## PhpStorm 40 | 41 | [PhpStorm](https://www.jetbrains.com/phpstorm/) is a fully integrated development environment created by JetBrains. It is available for Windows, Mac, and Linux. It is not free, but does offer a free trial, and is popular with developers who work with PHP based applications. 42 | 43 | ## Conclusion 44 | 45 | Just like choosing a local development environment, choosing a code editor is a personal choice, and there is no right or wrong answer. 46 | 47 | For much of the content on Learn.WordPress.org, we will be using Visual Studio Code, but you are free to use whichever code editor you are most comfortable with. 48 | 49 | ## YouTube chapters 50 | 51 | 0:00 Introduction 52 | 0:07 Choosing a code editor 53 | 0:31 Visual Studio Code 54 | 0:52 VIM 55 | 1:07 Brackets 56 | 1:23 Sublime Text 57 | 1:36 Notepad++ 58 | 1:48 TextMate 59 | 1:58 PhpStorm 60 | 2:14 Conclusion -------------------------------------------------------------------------------- /developer-learning-pathway/02-local-development-requirements/04-additional-tools.md: -------------------------------------------------------------------------------- 1 | # Other useful development tools 2 | 3 | While a local development environment and a code editor are the foundational pieces of developing for WordPress, there are other community tools and resources that you may find useful. 4 | 5 | If you are developing a WordPress theme, the [WordPress.org Theme Test Data](https://codex.wordpress.org/Theme_Unit_Test) provides an option to import XML files containing dummy data for testing your themes. This lets you see how your theme performs with different types of content and layouts. 6 | 7 | You can install the [Theme Check](https://wordpress.org/plugins/theme-check/) plugin, which tests your theme for compliance with the latest WordPress standards and practices. 8 | 9 | Similar for plugin developers there is the [Plugin Check](https://wordpress.org/plugins/plugin-check/) plugin, which tests your plugin to ensure that it’s up to the base required standards from the WordPress Plugin Review team. 10 | 11 | There are also a number of plugins that can help with debugging your code. These include: 12 | 13 | - [Debug Bar](https://wordpress.org/plugins/debug-bar/) which adds a debug menu to the admin bar that shows query, cache, and other helpful debugging information. 14 | - [Query Monitor](https://wordpress.org/plugins/query-monitor/) which enables debugging of database queries, PHP errors, hooks and actions, block editor blocks, enqueued scripts and stylesheets, HTTP API calls, and more.. 15 | 16 | There is also [Log Deprecated Notices](https://wordpress.org/plugins/log-deprecated-notices/) which logs incorrect function usage, deprecated file usage, and deprecated function usage in your plugin or theme. 17 | 18 | You will learn more about each of these tools in future lessons. 19 | 20 | ## YouTube chapters 21 | 22 | 0:00 Introduction 23 | 0:13 Theme test data 24 | 0:28 Theme check and Plugin check 25 | 0:45 Debugging tools 26 | 27 | -------------------------------------------------------------------------------- /developer-learning-pathway/03-the-programming-languages-of-wordpress/01-html.md: -------------------------------------------------------------------------------- 1 | # HTML, the foundation of the internet 2 | 3 | # Introduction 4 | 5 | One of the first programming languages that you'll learn as a WordPress developer is HTML. 6 | 7 | In this lesson, you'll learn what HTML is, how it is used in WordPress, and where to find more information on writing HTML. 8 | 9 | ## What is HTML? 10 | 11 | HTML is synonymous with the web. The originator of the internet designed HTML to be used to create web pages. 12 | 13 | Whenever you visit a website in a browser, whether it's one of the [biggest news portal](https://wordpress.org/showcase/time-com/) in the world, or your local [nonprofit's home page](https://wordpress.org/showcase/helpcode/), the document you are viewing is written in HTML. 14 | 15 | HTML stands for HyperText Markup Language and is used to describe the structure of a web page. 16 | 17 | HTML is made up of elements. Elements are the building blocks of HTML documents. 18 | 19 | An HTML element usually has a start tag, an end tag, and content in between the tags. 20 | 21 | Here's an example of an HTML document: 22 | 23 | ```html 24 | 25 | 26 | My HTML document 27 | 28 | 29 |

This is the heading of my HTML document

30 | A randomly selected image 31 |

This is the content of my HTML document.

32 | 33 | 34 | ``` 35 | 36 | In the above example, the `` tag at the top is a start tag, and the `` tag at the bottom is the end tag. Notice that the end tag starts with a forward slash. The content in between these tags is the content of the `` element. 37 | 38 | HTML elements can be nested inside each other. In the above example, the `` element is nested inside the `` element, and the `` element is nested inside the `<head>` element. 39 | 40 | HTML elements are also semantic, which means that each tag has a specific meaning, and should be used in a specific way. For example, the `<h1>` element is a heading element, and the `<p>` element is a paragraph element. 41 | 42 | HTML elements can also have attributes. Attributes are used to provide additional information about an element. In the above example, the `<body>` element has an attribute called `class` with a value of `main`. 43 | 44 | Certain elements allow you to include media, such as images, audio, and video. In the above example, the `<img>` element is used to include an image on the page. The `src` attribute is used to specify the location of the image, and the `alt` attribute is used to provide alternative text for the image. 45 | 46 | HTML elements can also be self-closing. In the above example, the `<img>` element is self-closing, and you will notice that it doesn't have an end tag. 47 | 48 | When you visit a web page in a browser, the browser reads the HTML document and displays the content in the browser window. The browser reads the HTML document from top to bottom, and left to right. 49 | 50 | By default, each of the elements is displayed in a different way. For example, the `<h1>` element is displayed as a heading, and the `<p>` element is displayed as a paragraph. 51 | 52 | HTML is used everywhere across a WordPress site, from the dashboard, to the theme that powers the front end. Even plugins make use of HTML to display content. 53 | 54 | ## Accessible HTML 55 | 56 | When writing HTML, it's important to write accessible HTML. Accessible HTML is HTML that is written in a way that makes it easy for people with disabilities to use. 57 | 58 | For example, if you are using an image to display a logo, you should include alternative text for the image. This allows people who are using a screen reader to understand what the image is. 59 | 60 | Additionally, you should always use semantic HTML elements, and use them in the correct way. For example, if you are creating a heading, you should use a heading element, not a paragraph element. 61 | 62 | ## Additional Resources 63 | 64 | For more information about HTML, you can visit the following online resources: 65 | 66 | - [HTML on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML) 67 | - [Accessible HTML on MDN](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) 68 | - [HTML on Web.dev](https://web.dev/learn/html) 69 | - [Accessible HTML on Web.dev](https://web.dev/learn/accessibility) 70 | - [freeCodeCamp Responsive Web Design Course](https://www.freecodecamp.org/learn/2022/responsive-web-design/) 71 | 72 | ## YouTube chapters 73 | 74 | 0:00 Introduction 75 | 0:20 What is HTML? 76 | 3:11 Accessible HTML 77 | 3:50 Additional Resources -------------------------------------------------------------------------------- /developer-learning-pathway/03-the-programming-languages-of-wordpress/02-css.md: -------------------------------------------------------------------------------- 1 | # CSS, styling the web 2 | 3 | ## Introduction 4 | 5 | If HTML is the structure, then CSS is the style of the web. 6 | 7 | In this lesson, you'll learn how CSS is used with HTML, and where to find more information on CSS. 8 | 9 | ## What is CSS? 10 | 11 | CSS stands for Cascading Style Sheets. If HTML describes the structure of a web page then CSS describes the style of a document. 12 | 13 | CSS is used to define the colors, fonts, and layout of a web page. 14 | 15 | Let's take a look at the HTML document from the HTML lesson: 16 | 17 | ```html 18 | <html lang="en"> 19 | <head> 20 | <title>My HTML document 21 | 22 | 23 |

This is the heading of my HTML document

24 | A randomly selected image 25 |

This is the content of my HTML document.

26 | 27 | 28 | ``` 29 | 30 | In the above example, the HTML document is unstyled. It is displayed in the browser using the default browser styles. But you can alter the styles using CSS. 31 | 32 | For example, you can change the color of the heading element to red, and change the font size of the paragraph element to 20 pixels. 33 | 34 | ```html 35 | 36 | 37 | My HTML document 38 | 39 | 40 |

This is the heading of my HTML document

41 | A randomly selected image 42 |

This is the content of my HTML document.

43 | 44 | 45 | ``` 46 | 47 | Adding CSS to elements using the `style` attribute is known as inline styles, but it is not the best way to style an HTML document. 48 | 49 | Instead, you can use a ` 63 | 64 | 65 |

This is the heading of my HTML document

66 | A randomly selected image 67 |

This is the content of my HTML document.

68 | 69 | 70 | ``` 71 | 72 | It's also possible to add CSS to a document using an external stylesheet. This is the preferred way to add CSS to a document. 73 | 74 | ```html 75 | 76 | 77 | My HTML document 78 | 79 | 80 | 81 |

This is the heading of my HTML document

82 | A randomly selected image 83 |

This is the content of my HTML document.

84 | 85 | 86 | ``` 87 | 88 | In the above example, the `style.css` file would contain the following CSS: 89 | 90 | ```css 91 | h1 { 92 | color: red; 93 | } 94 | p { 95 | font-size: 20px; 96 | } 97 | ``` 98 | 99 | In these examples, the CSS has been targeting specific elements. But it's also possible to target elements based on their attributes. 100 | 101 | For example, you can target the `class` attribute of the body element, and add a border to it. 102 | 103 | ```css 104 | .main { 105 | border: 5px solid black; 106 | } 107 | ``` 108 | 109 | CSS can do a lot more than just change the color and font size of elements. It can be used to create complex layouts, animations, and more. 110 | 111 | Like HTML, CSS is used all across a WordPress site. The dashboard has its own core set of CSS to control its look and feel. 112 | 113 | Themes will ship with a custom set of CSS to style the theme elements. 114 | 115 | Plugins that add content to the front end of a site will also use CSS to style that content. 116 | 117 | WordPress also allows you the flexibility to add your own custom CSS, or to use external CSS frameworks, such as Bootstrap or Tailwind. 118 | 119 | ## Additional Resources 120 | 121 | For more information about CSS, you can visit the following online resources: 122 | 123 | - [CSS on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) 124 | - [CSS on Web.dev](https://web.dev/learn/css) 125 | - [freeCodeCamp Responsive Web Design Course](https://www.freecodecamp.org/learn/2022/responsive-web-design/) 126 | 127 | 128 | ## YouTube chapters 129 | 130 | 0:00 Introduction 131 | 0:17 What is CSS? 132 | 2:28 Using CSS 133 | 3:23 Additional Resources -------------------------------------------------------------------------------- /developer-learning-pathway/03-the-programming-languages-of-wordpress/03-javascript.md: -------------------------------------------------------------------------------- 1 | # JavaScript, creating great experiences 2 | 3 | ## Introduction 4 | 5 | JavaScript is a programming language that is used to add interactivity to web pages. 6 | 7 | Let's learn more about how JavaScript works, and how it can be used in a WordPress site. 8 | 9 | ## What is JavaScript? 10 | 11 | JavaScript is a client side scripting language, which means that it is interpreted by the browser. 12 | 13 | To see a simple example of what JavaScript can do, let's look at the HTML page from the previous lessons, and add a button which uses JavaScript change the color of the heading element: 14 | 15 | ```html 16 | 17 | 18 | My HTML document 19 | 20 | 21 | 22 |

This is the heading of my HTML document

23 | A randomly selected image 24 |

This is the content of my HTML document.

25 | 26 | 27 | 35 | 36 | ``` 37 | 38 | In this example: 39 | 1. A button element has been added to the document, with the text "Change heading color to blue". 40 | 2. At the bottom of the html document there is a new ` 66 | 67 | ``` 68 | 69 | Then you would move the JavaScript from the `