Coding Standards
WordPress
Spaces or Tabs? We're not getting that granular although it is recommended to use tabs with PHP.
However, we do think it is important to have consistency in your code. That's what this page is about.
Below are 2 samples of the same header.php file. The first is poorly formatted code. The second shows how we can clean this up to make it more readable.
Example #1 - BAD
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'default' ); ?></a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php the_custom_logo(); ?>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'default' ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->The example above is taken from the header.php file in the Underscores theme and represents poorly formatted code. There is no consistency with the nesting of HTML tags. No consistency with the indentations and the PHP get's lost among the HTML.
Now let's take a look at the same code block but with better formatting.
Example #2 - BETTER
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'default' ); ?></a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php the_custom_logo(); ?>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'default' ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->Notice how all of the opening and closing tags line up and the nesting of elements is clearly visible. When an element or HTML tag resides within another element, be sure to apply some indentation and keep this indentation consistent (spaces or tabs). There's no right or wrong way so long as you are consistent and it's easy to comprehend. Also notice how there are comments next to each closing tag to use as a reference. When mixing in PHP and HTML notice how we used an extra line break. It doesn't have to be done this way but it's consistent. Have we mentioned consistency?
If you need a little more guidance on the recommended coding standards for WordPress please review their documentation. They have a comprehensive list of coding standards for HTML, CSS, PHP and Javascript.
Last updated