### Example theme.json Styles Configuration

Source: https://developer.wordpress.org/themes/global-settings-and-styles/styles

An example demonstrating how to define styles for text and background colors globally, for buttons, and for the core/code block within `theme.json`.

```json
{
	"version": 2,
	"styles": {
		"color": {
			"text": "#000000",
			"background": "#ffffff"
		},
		"elements": {
			"button": {
				"color": {
					"text": "#ffffff",
					"background": "#000000"
				}
			}
		},
		"blocks": {
			"core/code": {
				"color": {
					"text": "#ffffff",
					"background": "#000000"
				}
			}
		}
	}
}
```

--------------------------------

### Example 404 Template File

Source: https://developer.wordpress.org/themes/templates/templates

This example shows a typical structure for a 404 error template file, including references to template parts and a block pattern.

```html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:pattern {"slug":"twentytwentythree/hidden-404"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
```

--------------------------------

### Example content-page.php Template File

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files

This is an example of a `content-page.php` template file used in the Twenty Fifteen theme. It displays the page title, content, pagination links, and an edit link.

```php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php the_content(); ?>
		<?php
		wp_link_pages( array(
			'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
			'after'       => '</div>',
			'link_before' => '<span>',
			'link_after'  => '</span>',
			'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
			'separator'   => '<span class="screen-reader-text">, </span>',
		) );
		?>
	</div><!-- .entry-content -->

	<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>

</article><!-- #post-## -->
```

--------------------------------

### Check SVN Installation

Source: https://developer.wordpress.org/themes/releasing-your-theme/updating-your-theme

Use this command in your terminal to verify if SVN is installed on your system.

```bash
svn --version
```

--------------------------------

### Register Theme Setup Function

Source: https://developer.wordpress.org/themes/core-concepts/custom-functionality

Use this snippet to register theme-supported features with WordPress. It should be executed on the `after_setup_theme` action hook.

```php
<?php
add_action( 'after_setup_theme', 'theme_slug_setup' );

function theme_slug_setup() {
	add_theme_support( 'wp-block-styles' );
}
```

--------------------------------

### Twenty Thirteen Theme Comments.php Example

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files/comment-template

A comprehensive example of the comments.php template file from the Twenty Thirteen theme. It includes structure for displaying comments, pagination, and the comment form.

```php
<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains comments and the comment form.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

/*
 * If the current post is protected by a password and the visitor has not yet
 * entered the password we will return early without loading the comments.
 */
if ( post_password_required() ) {
	return;
}
?>

<div id="comments" class="comments-area">

	<?php if ( have_comments() ) : ?>
		<h2 class="comments-title">
			<?php
			printf(
				_nx(
					'One thought on "%2$s"',
					'%1$s thoughts on "%2$s"',
					get_comments_number(),
					'comments title',
					'twentythirteen'
				),
			number_format_i18n( get_comments_number() ),
			'<span>' . get_the_title() . '</span>'
			);
			?>
		</h2>

		<ol class="comment-list">
			<?php
			wp_list_comments( array(
				'style'       => 'ol',
				'short_ping'  => true,
				'avatar_size' => 74,
			) );
			?>
		</ol><!-- .comment-list -->

		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
			<nav class="navigation comment-navigation" role="navigation">

				<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h1>
				<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentythirteen' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentythirteen' ) ); ?></div>
			</nav><!-- .comment-navigation -->
		<?php endif; // Check for comment navigation ?>

		<?php if ( ! comments_open() && get_comments_number() ) : ?>
			<p class="no-comments"><?php _e( 'Comments are closed.', 'twentythirteen' ); ?></p>
		<?php endif; ?>

	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments -->

```

--------------------------------

### Empty Custom Settings in theme.json

Source: https://developer.wordpress.org/themes/global-settings-and-styles/settings/custom

An example of a `theme.json` file with an empty `settings.custom` object, demonstrating the basic structure before any custom properties are defined.

```json
{
	"version": 2,
	"settings": {
		"custom": {}
	}
}
```

--------------------------------

### Global Theme Settings Example

Source: https://developer.wordpress.org/themes/global-settings-and-styles/settings/blocks

This snippet shows a basic structure for global theme settings, including placeholders for border, color, custom, spacing, and typography configurations.

```json
{
	"version": 2,
	"settings": {
		"border": {},
		"color": {},
		"custom": {},
		"spacing": {},
		"typography": {}
	}
}
```

--------------------------------

### Block Pattern File Header Example

Source: https://developer.wordpress.org/themes/features/block-patterns

This is an example of a block pattern file header. It includes essential metadata like Title, Slug, and Categories, which WordPress uses to register the pattern.

```php
<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: featured
 */
?>
<!-- Pattern code goes here. -->
```

--------------------------------

### Template with Included Pattern

Source: https://developer.wordpress.org/themes/features/block-patterns

Example of a theme template file incorporating a header, a custom pattern, and a footer.

```html
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:pattern {"slug":"themeslug/hero"} /-->

<!-- Some other blocks. /-->

<!-- wp:template-part {"slug":"footer"} /-->
```

--------------------------------

### PHP Conditional Logic in Patterns

Source: https://developer.wordpress.org/themes/patterns/using-php-in-patterns

This example demonstrates PHP code that will not execute correctly in a pattern because global data is unavailable during the 'init' hook.

```php
<?php if ( is_page() ) : ?>
	<!-- wp:paragraph -->
	<p><?php the_title(); ?></p>
	<!-- /wp:paragraph -->
<?php endif; ?>
```

--------------------------------

### Hero Pattern with Block Markup

Source: https://developer.wordpress.org/themes/patterns/registering-patterns

This example shows a complete hero pattern, including the required header and the block markup for a cover section with headings, paragraphs, and buttons.

```php
<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: featured
 */
?>
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">See My Popular Posts →︎</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
```

--------------------------------

### Enable Appearance Tools in theme.json

Source: https://developer.wordpress.org/themes/core-concepts/global-settings-and-styles

A minimal theme.json example to enable appearance tools for blocks. This configuration is reflected in the WordPress admin's Styles interface.

```json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true
	}
}
```

--------------------------------

### Hardcoded Image URL Example

Source: https://developer.wordpress.org/themes/features/block-patterns

This is an example of a hardcoded image URL found within a block pattern. It needs to be replaced with a dynamic URL.

```html
http://localhost/wp/wp-content/uploads/2023/10/hero-background.jpg
```

--------------------------------

### Add a Custom Section for CSS

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Create a new section in the Customizer using add_section. This example creates a 'Custom CSS' section with a specified title and description.

```php
$wp_customize->add_section( 'custom_css', array(
  'title' => __( 'Custom CSS' ),
  'description' => __( 'Add custom CSS here' ),
  'panel' => '', // Not typically needed.
  'priority' => 160,
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
) );
```

--------------------------------

### Add a Theme Mod Setting with Default and Sanitization

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Example of adding a 'theme_mod' setting with a default value and a sanitization callback. This is typical for theme options.

```php
$wp_customize->add_setting( 'accent_color', array(
  'default' => '#f72525',
  'sanitize_callback' => 'sanitize_hex_color',
) );
```

--------------------------------

### Example Archive Template Structure

Source: https://developer.wordpress.org/themes/templates/introduction-to-templates

This code shows a typical structure for an archive template (archive.html) in a block theme, demonstrating how to include different template parts like header, loop, and footer.

```html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:template-part {"slug":"loop","align":"full"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
```

--------------------------------

### Example 404.php Template

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files

This 404.php template file is displayed when a requested page is not found. It includes a header, a main content area with an error message, and a search form.

```php
<?php get_header(); ?>

<div id="primary" class="content-area">

	<main id="main" class="site-main" role="main">

		<section class="error-404 not-found">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1>
			</header><!-- .page-header -->

			<div class="page-content">
				<?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfifteen' ); ?>
				<?php get_search_form(); ?>
			</div><!-- .page-content -->

		</section><!-- .error-404 -->

	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>
```

--------------------------------

### Enqueueing a JavaScript File

Source: https://developer.wordpress.org/themes/core-concepts/including-assets

Example of how to enqueue a JavaScript file located at '/assets/js/example.js' within your theme. This demonstrates the practical application of the wp_enqueue_script() function.

```php
wp_enqueue_script(
	'theme-slug-example',
	get_parent_theme_file_uri( 'assets/js/example.js' ),
	array(),
	wp_get_theme()->get( 'Version' ),
	true
);
```

--------------------------------

### Empty Patterns Array in theme.json

Source: https://developer.wordpress.org/themes/global-settings-and-styles/patterns

An example of the default `patterns` property in `theme.json` with an empty array, indicating no patterns are bundled.

```json
{
	"version": 2,
	"patterns": []
}
```

--------------------------------

### Example HTML Markup for a Single Post Template

Source: https://developer.wordpress.org/themes/core-concepts/templates

This is an example of the HTML markup generated by a WordPress template for a single post. WordPress automatically handles the final markup, allowing theme developers to focus on creating templates.

```html
<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Post Title</title>
	<!-- Scripts, styles, and meta here. -->
</head>

<body class="post-template single single-post">
	<div class="wp-site-blocks">
		<header class="wp-block-template-part">
			<!-- Header blocks here. -->
		</header>
		<main class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
			<!-- Nested blocks here. -->
		</main>
		<footer class="wp-block-template-part">
			<!-- Footer blocks here. -->
		</footer>
	</div>
</body>
</html>
```

--------------------------------

### Add a Custom Section for Footer Options

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Add a custom section for theme-specific options, such as footer information. This example sets a title and a priority to control its position.

```php
// Add a footer/copyright information section.
$wp_customize->add_section( 'footer' , array(
  'title' => __( 'Footer', 'themename' ),
  'priority' => 105, // Before Widgets.
) );
```

--------------------------------

### Full Hero Pattern with Dynamic Buttons

Source: https://developer.wordpress.org/themes/patterns/using-php-in-patterns

The complete hero pattern file, including the PHP array for button labels and the foreach loop for dynamic button generation. This example also includes internationalized text and a dynamic image.

```php
<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: featured
 */

$buttons = array(
	__( 'Button A', 'themeslug' ),
	__( 'Button B', 'themeslug' )
);

?>
<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>","id":3838,"dimRatio":50,"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull">
	<span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>
	<img class="wp-block-cover__image-background wp-image-3838" alt="" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>" data-object-fit="cover"/>
	<div class="wp-block-cover__inner-container">
		
		<!-- wp:heading {"textAlign":"center"} -->
		<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ); ?></h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph {"align":"center"} -->
		<p class="has-text-align-center"><?php esc_html_e( 'This is my little home away from home.', 'themslug' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
		<div class="wp-block-buttons">
			<?php foreach ( $buttons as $button ) : ?>
				<!-- wp:button {"className":"wp-block-button is-style-outline"} -->
				<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $button ); ?></a></div>
				<!-- /wp:button -->
			<?php endforeach; ?>
		</div>
		<!-- /wp:buttons -->

	</div>
</div>
<!-- /wp:cover -->
```

--------------------------------

### Example footer.php Template

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files

This is a standard footer.php template file. It includes the site footer, copyright information, and hooks for actions. It also calls wp_footer() to include necessary scripts and closing body/html tags.

```php
</div><!-- .site-content -->

<footer id="colophon" class="site-footer" role="contentinfo">

	<div class="site-info">

		<?php
		/**
		 * Fires before the Twenty Fifteen footer text for footer customization.
		 *
		 * @since Twenty Fifteen 1.0
		 */
		do_action( 'twentyfifteen_credits' );
		?>
		<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>

	</div><!-- .site-info -->

</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>
```

--------------------------------

### Example sidebar.php Template

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files

This sidebar.php template file displays widgets if they are active in the 'sidebar-1' area. It checks for the existence of navigation menus or active sidebars before rendering the secondary content area.

```php
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : ?>

	<div id="secondary" class="secondary">

		<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>

	</div><!-- .secondary -->

<?php endif; ?>
```

--------------------------------

### Build a Custom Template HTML File

Source: https://developer.wordpress.org/themes/global-settings-and-styles/custom-templates

Create the HTML structure for the 'Content Canvas' custom template. This example includes the site header, post content, and site footer, providing a basic layout for posts and pages.

```html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
<main class="wp-block-group">
	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
```

--------------------------------

### Registering an Index Template Pattern

Source: https://developer.wordpress.org/themes/patterns/starter-patterns

This snippet defines a template pattern for the home and index template types. Similar to the previous example, it's set to be excluded from the inserter.

```php
<?php
/**
 * Title: Index Template
 * Slug: themeslug/index-template
 * Template Types: home, index
 * Viewport width: 1376
 * Inserter: no
 */
?>
<!-- Block code here. -->

```

--------------------------------

### Example header.php in Twenty Fifteen Theme

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files

This is a standard header.php file used in the Twenty Fifteen theme. It includes essential HTML for the head section and the beginning of the body content, utilizing WordPress template tags and conditional logic.

```php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
        <div id="sidebar" class="sidebar">
            <header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <?php if ( is_front_page() && is_home() ) : ?>
                    <h1 class="site-title">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    </h1>
                    <?php else : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    <?php endif;
                    $description = get_bloginfo( 'description', 'display' );
                    if ( $description || is_customize_preview() ) :
                        echo $description;
                    endif; ?>
                    <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
                </div><!-- .site-branding -->
            </header><!-- .site-header -->
            <?php get_sidebar(); ?>
        </div><!-- .sidebar -->
        <div id="content" class="site-content">

```

--------------------------------

### Add a Plugin Option Setting

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Example of adding a setting of type 'option' for plugin usage, including capability and sanitization. Supports keyed arrays for storing multiple values in a single option.

```php
$wp_customize->add_setting( 'myplugin_options[color]', array(
  'type' => 'option',
  'capability' => 'manage_options',
  'default' => '#ff2525',
  'sanitize_callback' => 'sanitize_hex_color',
) );
```

--------------------------------

### Global Page Template with Header Comments

Source: https://developer.wordpress.org/themes/classic-themes/templates/page-template-files

This example from the TwentyFourteen theme defines a 'Full Width Page' template using a multi-line PHP docblock. This format is also recognized by WordPress for template naming.

```php
<?php
/**
* Template Name: Full Width Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/

```

--------------------------------

### Applying Custom Line Height Preset in theme.json Styles

Source: https://developer.wordpress.org/themes/global-settings-and-styles/styles/using-presets

Reference a registered custom preset using the 'var:custom' syntax within the 'styles' section of theme.json. This example applies the 'md' line height to the global typography settings.

```json
{
	"version": 2,
	"settings": {
		"custom": {
			"lineHeight": {
				"xs": "1",
				"sm": "1.25",
				"md": "1.5",
				"lg": "1.75"
			}
		}
	},
	"styles": {
		"typography": {
			"lineHeight": "var:custom|line-height|md"
		}
	}
}
```

--------------------------------

### Registering a Starter Page Pattern

Source: https://developer.wordpress.org/themes/patterns/starter-patterns

Define the 'Block Types' and 'Post Types' parameters in the file header to register a pattern as a starter page pattern. This makes it available when users add a new page.

```php
<?php
/**
 * Title: Example Page
 * Slug: themeslug/example-page
 * Categories: page
 * Block Types: core/post-content
 * Post Types: page
 * Viewport width: 1376
 */
?>
<!-- Block code here. -->
```

--------------------------------

### Add a Customizer Panel and Section

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Register a new panel and add a section to it. Panels provide a higher level of organization for Customizer settings.

```php
$wp_customize->add_panel( 'menus', array(
  'title' => __( 'Menus' ),
  'description' => $description, // Include html tags such as <p>.
  'priority' => 160, // Mixed with top-level-section hierarchy.
) );
$wp_customize->add_section( $section_id ,
 array(
  'title' => $menu->name,
  'panel' => 'menus',
) );
```

--------------------------------

### Copy Existing Theme Version

Source: https://developer.wordpress.org/themes/releasing-your-theme/updating-your-theme

Create a new directory for the updated version by copying the files from the previous version. This is a crucial step before making changes for a new release.

```bash
svn cp 1.0.1 1.0.2
```

--------------------------------

### Register Custom Color Presets

Source: https://developer.wordpress.org/themes/global-settings-and-styles/color

Initialize empty arrays for duotone, gradients, and palette in theme.json to prepare for registering custom presets.

```json
{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [],
			"gradients": [],
			"palette": []
		}
	}
}
```

--------------------------------

### Enabling Text, Background, and Link Colors

Source: https://developer.wordpress.org/themes/global-settings-and-styles/color

Configure the `theme.json` to enable text, background, and link color settings. By default, all are set to `true`.

```json
{
	"version": 2,
	"settings": {
		"color": {
			"background": true,
			"link": true,
			"text": true
		}
	}
}
```

--------------------------------

### Enqueueing a Stylesheet

Source: https://developer.wordpress.org/themes/core-concepts/including-assets

Use `wp_enqueue_style()` within an action hook in `functions.php` to load a CSS file. This example enqueues a stylesheet located at `/assets/css/example.css` in the theme.

```php
wp_enqueue_style(
	'theme-slug-example',
	get_parent_theme_file_uri( 'assets/css/example.css' ),
	array(),
	wp_get_theme()->get( 'Version' ),
	'all'
);
```

--------------------------------

### Get Approved Comments Loop

Source: https://developer.wordpress.org/themes/classic-themes/templates/partial-and-miscellaneous-template-files/comment-template

Retrieves and displays only approved comments for a post using the WP_Comment_Query class. Use this to programmatically fetch and loop through comments.

```php
<?php
// Get only the approved comments
$args = array(
	'status' => 'approve',
);

// The comment Query
$comments_query = new WP_Comment_Query();
$comments       = $comments_query->query( $args );

// Comment Loop
if ( $comments ) {
	foreach ( $comments as $comment ) {
		echo '<p>' . $comment->comment_content . '</p>';
	}
} else {
	echo 'No comments found.';
}
?>
```

--------------------------------

### Container Block with Global Padding

Source: https://developer.wordpress.org/themes/global-settings-and-styles/settings/use-root-padding-aware-alignments

An example of a container block, such as a Group block, with the 'has-global-padding' class applied. This indicates the block will utilize the global padding settings.

```html
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
	<!-- nested blocks... -->
</div>
```

--------------------------------

### Add a Date Control

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Example of adding a date control with custom input attributes for styling and placeholder text. The 'active_callback' can be used to conditionally display the control.

```php
$wp_customize->add_control( 'setting_id', array(
  'type' => 'date',
  'priority' => 10, // Within the section.
  'section' => 'colors', // Required, core or custom.
  'label' => __( 'Date' ),
  'description' => __( 'This is a date control with a red border.' ),
  'input_attrs' => array(
    'class' => 'my-custom-class-for-js',
    'style' => 'border: 1px solid #900',
    'placeholder' => __( 'mm/dd/yyyy' ),
  ),
  'active_callback' => 'is_front_page',
) );
```

--------------------------------

### Get Default Priority of a Customizer Panel

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/the-customizer-javascript-api

Retrieve the priority of a panel, section, or control using the priority() method. This value determines its position in the Customizer UI.

```javascript
priority = wp.customize.panel( 'widgets' ).priority(); // returns 110 by default
```

--------------------------------

### Add a Customizer Setting

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Demonstrates the parameters available when adding a new setting to the Customizer. Use 'theme_mod' for theme-specific settings and 'option' for site-wide settings.

```php
$wp_customize->add_setting( 'setting_id', array(
  'type' => 'theme_mod', // or 'option'
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
  'default' => '',
  'transport' => 'refresh', // or postMessage
  'sanitize_callback' => '',
  'sanitize_js_callback' => '', // Basically to_json.
) );
```

--------------------------------

### Image Block Lock Attribute

Source: https://developer.wordpress.org/themes/patterns/patterns-and-block-locking

This is an example of the `lock` attribute added to block markup when movement is disabled. The `move` key set to `true` indicates that the block cannot be moved.

```html
<!-- wp:image {"lock":{"move":true,"remove":false}} -->
```

--------------------------------

### Registering a Selective Refresh Partial

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/tools-for-improved-user-experience

This snippet demonstrates how to register a partial for the 'blogdescription' setting in the Customizer, targeting the '.site-description' selector and using a callback to render the blog's description.

```php
function foo_theme_customize_register( WP_Customize_Manager $wp_customize ) {
    $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
        'selector' => '.site-description',
        'container_inclusive' => false,
        'render_callback' => function() {
            bloginfo( 'description' );
        },
    ) );
}
add_action( 'customize_register', 'foo_theme_customize_register' );
```

--------------------------------

### Implement Customizer Setting Preview

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/customizer-objects

Handles the previewing of customizer settings of type 'nav_menu'. It hooks into 'wp_get_nav_menu_items' to display changes before saving.

```php
function menu_customizer_preview_nav_menu( $setting ) {
  $menu_id = str_replace( 'nav_menu_', '', $setting->id );
  add_filter( 'wp_get_nav_menu_items', function( $items, $menu, $args ) use ( $menu_id, $setting ) {
    $preview_menu_id = $menu->term_id;
    if ( $menu_id == $preview_menu_id ) {
      $new_ids = $setting->post_value();
      foreach ( $new_ids as $item_id ) {
        $item = wp_setup_nav_menu_item( $item );
        $item->menu_order = $i;
        $new_items[] = $item;
        $i++;
      }
      return $new_items;
    } else {
      return $items;
    }
  }, 10, 3 );
}
add_action( 'customize_preview_nav_menu', 'menu_customizer_preview_nav_menu', 10, 2 );
```

--------------------------------

### Footer Template Part Example

Source: https://developer.wordpress.org/themes/templates/template-parts

A simple footer template part containing a Site Title block and a Paragraph block. This markup would be placed in a file like /parts/footer.html.

```html
<!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignwide">
	<!-- wp:site-title {"level":0} /-->

	<!-- wp:paragraph -->
		<p>Powered by WordPress.</p>
	<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
```

--------------------------------

### Single Post Template (single.php) Example

Source: https://developer.wordpress.org/themes/classic-themes/templates/post-template-files

This is a standard `single.php` template file from the Twenty Fifteen theme. It includes the header, main content area, post content retrieval using `get_template_part`, comment loading, and post navigation. It's used for displaying individual posts and attachments.

```php
<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();

            /*
             * Include the post format-specific template for the content. If you want to
             * use this in a child theme, then include a file called called content-___.php
             * (where ___ is the post format) and that will be used instead.
             */
            get_template_part( 'content', get_post_format() );

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            "endif";

            // Previous/next post navigation.
            the_post_navigation( array(
                'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' . 
                    '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
                    '<span class="post-title">%title</span>',
                'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
                    '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
                    '<span class="post-title">%title</span>',
            ) );

        // End the loop.
        endwhile;
        ?>

        </main><!-- .site-main -->
    </div><!-- .content-area -->

<?php get_footer(); ?>

```

--------------------------------

### Checkout Theme Repository

Source: https://developer.wordpress.org/themes/releasing-your-theme/updating-your-theme

This command checks out a copy of your theme's repository from the WordPress SVN server to your local machine. Replace 'NameOfYourTheme' with your actual theme's name.

```bash
svn co https://themes.svn.wordpress.org/NameOfYourTheme/
```

--------------------------------

### WordPress Generated Block Gap CSS

Source: https://developer.wordpress.org/themes/global-settings-and-styles/settings/spacing

Example of CSS generated by WordPress to handle block gap between nested blocks within a container. The specific IDs and values will vary.

```css
.wp-container-17.wp-container-17 > :first-child:first-child {
	margin-block-start: 0;
}
	
.wp-container-17.wp-container-17 > * {
	margin-block-start: var(--wp--preset--spacing--plus-4);
	margin-block-end: 0;
}
```

--------------------------------

### Filter All Active Callback Behavior

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/tools-for-improved-user-experience

Use the `customize_control_active` filter to globally override the `active_callback` logic for any control. This example hides controls without descriptions on singular post views.

```php
// Hide all controls without a description when previewing single posts.
function title_tagline_control_filter( $active, $control ) {
  if ( '' === $control->description ) {
    $active = is_singular();
  }
  return $active;
}
add_filter( 'customize_control_active', 'title_tagline_control_filter', 10, 2 );
```

--------------------------------

### Equivalent Individual Settings for Appearance Tools

Source: https://developer.wordpress.org/themes/global-settings-and-styles/settings/appearance-tools

This code shows the individual settings that are enabled when 'settings.appearanceTools' is set to true. It can be used for granular control if needed.

```json
{
	"version": 2,
	"settings": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"link": true
		},
		"dimensions": {
			"minHeight": true
		},
		"position": {
			"sticky": true
		},
		"spacing": {
			"blockGap": true,
			"margin": true,
			"padding": true
		},
		"typography": {
			"lineHeight": true
		}
	}
}
```

--------------------------------

### Register Section with Contextual Callback

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/tools-for-improved-user-experience

Register a new Customizer section and set its `active_callback` parameter to a function that determines its visibility. This example uses `is_front_page` from the Twenty Fourteen theme.

```php
$wp_customize->add_section( 'featured_content', array(
  'title'       => __( 'Featured Content', 'twentyfourteen' ),
  'description' => //...
  'priority'        => 130,
  'active_callback' => 'is_front_page',
) );
```

--------------------------------

### Example CSS Class for Custom Block

Source: https://developer.wordpress.org/themes/features/block-stylesheets

This is the CSS class format for a custom block with the namespace 'super' and slug 'duper'. Use this to target your custom block's elements.

```css
.wp-block-super-duper {
	/* custom CSS goes here. */
}
```

--------------------------------

### Minimum theme.json Structure

Source: https://developer.wordpress.org/themes/global-settings-and-styles/introduction-to-theme-json

The bare minimum structure for a theme.json file, including the essential 'version' property.

```json
{
	"version": 2
}
```

--------------------------------

### Get Children of Panels and Sections

Source: https://developer.wordpress.org/themes/classic-themes/customize-api/the-customizer-javascript-api

These JavaScript snippets show how to retrieve the child sections of a panel and the child controls of a section. This is useful for managing and manipulating groups of Customizer objects.

```javascript
sections = wp.customize.panel( 'widgets' ).sections();
```

```javascript
controls = wp.customize.section( 'title_tagline' ).controls();
```

--------------------------------

### Dynamic Site Title with Block Markup

Source: https://developer.wordpress.org/themes/templates/introduction-to-templates

Use block markup to dynamically output the site title in a block theme. This ensures the theme works across different WordPress installations.

```html
<!-- wp:site-title /-->
```

--------------------------------

### Theme Folder Structure for Style Variations

Source: https://developer.wordpress.org/themes/global-settings-and-styles/style-variations

Illustrates the file organization for a theme that includes custom style variations. Custom variations are placed in the /styles folder with unique filenames.

```text
/your-theme-folder
	/styles
		/latte.json
		/swashbuckler.json
	t/theme.json
```

--------------------------------

### Example: Removing a Custom Pattern Category

Source: https://developer.wordpress.org/themes/patterns/registering-patterns

Add this code to your `functions.php` file to unregister the 'themeslug/custom' pattern category. It hooks into the 'init' action to ensure the category is registered before attempting to unregister it.

```php
add_action( 'init', 'themeslug_unregister_pattern_categories' );

function themeslug_unregister_pattern_categories() {
	register_block_pattern_category( 'themeslug/custom' );
}
```

--------------------------------

### Example Cover Block Pattern Markup

Source: https://developer.wordpress.org/themes/patterns/registering-patterns

This is the block markup for a core Cover block pattern with nested blocks. It's recommended to wrap patterns in a container block for easier manipulation.

```html
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">This is my little home away from home. Here, you will get to know me.  I\'ll share my likes, hobbies, and more.  Every now and then, I\'ll even have something interesting to say in a blog post.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">See My Popular Posts →︎</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
```