search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
270 stars 97 forks source link

Tutorial - Enabling WordPress Development Mode #1738

Closed courtneyr-dev closed 9 months ago

courtneyr-dev commented 1 year ago

Enabling WordPress Development Mode

This tutorial will cover the WordPress Development Mode, a feature that allows developers to see detailed error messages and other debugging information. It will also guide on how to configure it in a 5-minute video format.

Related Resources

Guidelines

Review the team guidelines

Tutorial Development Checklist

SEO Keywords

courtneyr-dev commented 1 year ago

Starting script suggestion:

[Opening Slide: WordPress Development Mode]

Host on screen

"Hello, WordPress enthusiasts! Today we will take a deep dive into the WordPress Development Mode. In just five minutes, we'll explore why this mode is a developer's best friend and how to enable it. So, let's get started!

[Slide: Why Enable Development Mode]

First off, let's talk about why you'd want to enable Development Mode. The answer is simple: Debugging. When you're crafting a WordPress site, sometimes things go sideways. You might run into errors or issues that are like a needle in a haystack.

[Slide: Use Cases]

Here are a few scenarios where Development Mode comes to the rescue:

  1. Detailed Error Messages: Development Mode is like your personal detective. It gives you detailed error messages, helping you track down the issue.

  2. Script Debugging: It's also a great script debugger. You can see exactly where in your code the error is happening.

  3. Deprecated Function Alerts: If you're using outdated functions, Development Mode will wave a red flag. This is super helpful when you're updating old code.

But remember, with great power comes great responsibility. Development Mode can expose sensitive information, so it's not recommended for live sites.

[Slide: Enabling Development Mode]

Now, let's get our hands dirty and enable Development Mode.

[Screen share of WordPress dashboard]

First, you need to access the wp-config.php file. This is the heart of your WordPress installation, located in the root directory.

[Screen share showing the wp-config.php file]

Once you've opened the wp-config.php file, you'll need to add a line of code.

[Screen share showing where to add the code]

Just above the line that says '/ That's all, stop editing! Happy publishing. /', you'll add this line: define( 'WP_DEVELOPMENT_MODE', true );

[Screen share showing the added line of code]

And voila! You've enabled Development Mode.

To turn it off, simply change 'true' to 'false' in the line of code you added.

[Host on screen]

And that's all there is to it! You now know why and how to enable WordPress Development Mode. Remember to use this tool wisely and happy debugging!

[Closing Slide: WordPress Development Mode]

Thank you for joining me today, and as always, keep exploring WordPress!"

[End of Video]

davekellam commented 1 year ago

🤚 I'll tackle this tutorial

davekellam commented 1 year ago

Learning Objectives

  1. Explain when to use WordPress development mode
  2. How to enable WordPress development mode
  3. How to check which development mode is enabled
davekellam commented 1 year ago

Proposed script

[Opening Slide: WordPress Development Mode]

"Hello, WordPress developers! Today we explore the use cases for development mode, how to enable it, and how to check that it's working. So, let's get started!

[Slide: Why Enable Development Mode]

First off, let's talk about why you'd want to enable Development Mode. If you're participating in the development of WordPress core, or developing themes and plugins, this mode allows you to turn off various layers of caching that would otherwise get in your way.

At the time of this recording, the only development modes that have a specific effect on disabling these caching layers are setting it to 'core' and 'theme'. However, future updates to WordPress could include additions to the 'plugin' development mode, as well as changes and additions to each mode.

[Slide: Use Cases]

Here are a few scenarios where Development Mode comes in handy:

  1. Core development: Turning on core development mode will disable any caching related to core blocks when developing these blocks.
  2. Themes: Turning on theme development mode will prevent caching of the global settings and styles defined in the themes's theme.json file when working in the site editor.
  3. Site development: For developers working on client projects, enabling all will allow WordPress to function how you would expect.

But remember, enabling this setting can greatly impact performance. It generally should not be used on production websites.

[Slide: Enabling Development Mode]

Now, let's get started and enable Development Mode!

[Screen share of WordPress dashboard]

First, you need to access the wp-config.php file, typically located in the root directory.

[Screen share showing the wp-config.php file]

Once you've opened the wp-config.php file, you'll need to add a line of code.

[Screen share showing where to add the code]

Just above the line that says /* That's all, stop editing! Happy publishing. */, you'll add this line: define( 'WP_DEVELOPMENT_MODE', $mode ); where $mode is one of core, plugin, theme or all.

[Screen share showing the added line of code]

And voila! You've enabled Development Mode.

To turn it off, simply change the parameter to an empty string '', in the line of code you added, or remove the line entirely.

[Screen share showing the Site Info panel in the WordPress Dashboard]

If you want to check that development mode is working, and which mode is active, simply visit Tools > Site Health > Info in the Admin area and check the WordPress Constants section.

[Screen share showing wp_is_development_mode( $mode ) function]

You can also make use of the wp_is_development_mode( $mode ) function to check which mode is currently active and apply some logic when that mode is in use.

[Closing Slide: WordPress Development Mode]

And that's all there is to it! You now know why and how to enable WordPress Development Mode. Remember to use it wisely!

Thank you for joining me today!

[End of Video]

Context

digitalchild commented 1 year ago

Covers everything you need to, short and succinctly. Great work.

jonathanbossenger commented 1 year ago

@davekellam nice work on the script! I also really appreciate that you've included both a) where the slides would be and b) what would be included in a given slide, that really helps to visualize what the final tutorial would look like.

I do have one piece of technical feedback, and it's rather long-winded, so please bear with me. 🙂

Specifically under the Why Enable Development Mode and Use Cases sections of your script, according to the Make blog post: "There are currently only a few use-cases in WordPress core which are determined by the development mode, but this will likely increase in the future. Most usage today relates to theme.json caching."

I did a quick search on where the different development modes ('core', 'theme', and 'plugin' as checked by the wp_is_development_mode function) are currently used in WordPress as of 6.3, and I can only find 6 uses, 5 for 'theme' and one for 'core'

Based on the above, it looks like the development mode check is currently only used for two things

So at this stage, my suggestion is that we update the two sections I've mentioned as follows:

[Slide: Why Enable Development Mode]

First off, let's talk about why you'd want to enable Development Mode. If you're participating in the development of WordPress core, or developing themes and plugins, this mode allows you to turn off various layers of caching that would otherwise get in your way. 

At the time of this recording, the only development modes that have a specific effect on disabling these caching layers are setting it to 'core' and 'theme'. However, future updates to WordPress could include additions to the 'plugin' development mode, as well as changes and additions to each mode.

[Slide: Use Cases]

Here are a few scenarios where Development Mode comes is useful:

Core development: Turning on core development mode will disable any caching related to core blocks when developing these blocks.
Themes: Turning on theme development mode will prevent caching of the global settings and styles defined in the themes's `theme.json` file when working in the site editor.
Site development: For developers working on client projects, enabling all will allow WordPress to function how you would expect.

Let me know if you have any questions or alternative suggestions on this change. 🙂

davekellam commented 1 year ago

Awesome! Thank you @jonathanbossenger, from reading the track ticket, I was under the impression that it was only affecting core and theme at the moment. I didn't have the time to do a dive into the implementation in core during contributor day, just wanted to get it published before end of day. That was my next step, and really appreciate you taking the time to do that 🙌🏻

And the slide status was totally borrowed from Courtney's sample script above 😄

I'll update the script to reflect your suggestions!

jonathanbossenger commented 1 year ago

I didn't have the time to do a dive into the implementation in core during contributor day, just wanted to get it published before end of day. That was my next step, and really appreciate you taking the time to do that 🙌🏻

I'm very happy it was helpful.

If you need any help with the tutorial recording/review process, please feel free to @ me here.

davekellam commented 1 year ago

@jonathanbossenger I was curious how you approached recording the videos. Do you do it all in one go, or do each of the pieces separately, record the audio and then edit it together?

jonathanbossenger commented 1 year ago

Warning, wall of text incoming...

@davekellam I think everyone's process is different because everyone is more comfortable doing things in a way that suits them. Some folks like to record the visuals and the audio separately, some prefer to record the audio, and then add the visuals as static elements, with different overlays/animations, etc.

My preferred style is to record whatever visual elements I need (slides, local WordPress site, IDE/text editor) while reading from a script at the same time, as if I'm presenting a recorded workshop without any attendees. I then edit it all together afterward, adding annotations/overlays/animations. That way my video and audio are in sync. If there is a bad audio error, it's easier to record that new audio snippet and replace it in the already recorded video layer, as it forces me to record the audio to fit the timeline of the related video.

I also record a tutorial in logical sections or takes. So for example, if you look at my most recent tutorial script, I'll record each section on its own as a take, stop, and then move onto recording the next one. I tend to make a lot of bloopers and flub some bigger words, and doing it in smaller takes instead of trying to record one long take means fewer mistakes have to be edited out. This also allows me to switch between views (slides, WordPress dashboard, IDE/text editor) in between takes as needed. So, using the example script above, I'll record the Introduction showing the slides as one take, then the What is the Dashboard Widgets API section showing some widgets in the dashboard in another, then the How to use the Dashboard Widgets API section showing that function in the documentation, and so on.

I generally tend to have any visual elements on my main monitor, and the script on my secondary (laptop) monitor. I also tend to record my main monitor at 1920 x 1080 (2x DPI) resolution, as that makes things bigger on screen. I use VSCode for presenting code and I set the Zoom level to about 140%, sometimes 120% if there's a lot of code on the screen. When I first started I did some experimentation with screen sizes and zoom levels in my editor, to find the best fit. (If you're on a Mac I can recommend the EasyRes resolution switcher)

davekellam commented 12 months ago

Looks like you'll want to have development mode for enabled if you're doing any block pattern work, as a theme's patterns will get cached in a transient as of 6.4

Will also try to get this recorded soon. Been a bit slow starting a new routine here with life and work getting in the way 😅

kaitohm commented 10 months ago

Hi @davekellam 👋 How is this tutorial going? Can the team support you in any way?

kaitohm commented 9 months ago

I'm closing this issue for now as there hasn't been any activity for a while. But if you'd like to pick it up and continue working on it, feel free to reopen the issue 👍