search

Coding Standards

WordPress

Spaces or Tabs? We're not getting that granular although it is recommended to use tabs with PHParrow-up-right.

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.

hashtag
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.

hashtag
Example #2 - BETTER

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 documentationarrow-up-right. They have a comprehensive list of coding standards for HTML, CSS, PHP and Javascript.

PreviousBuild PhilosophyNextTheme Setup

Last updated