Jade Format

Description

Rather than writing in straight HTML, we adopted and us a language called Jade (also known as Pug) in our development process. Jade is an extremely simplified form of HTML that streamlines the coding process. For example, standard HTML might look like this:

<div class="random-class" >
    <a href="https://phoscreative.com">Link Name
        <img src="../images/imageSource.png" alt="Alt-Tag Name" /> 
    </a>
</div>

Written in Jade, the same code would look like this:

div(class="random-class)
    a(href="https://phoscreative.com")Link Name
        img(src="../images/imageSource.png" alt="Alt-Tag Name")

The biggest difference is that Jade does away with the ending tags and instead utilizes indents. Anything “nested” below an element is assumed to be within that element. This makes for a very clean, easily readable set of code without the excess characters.

Additionally, there are a few ways to integrate PHP with Jade. First, use a hyphen at the start of the line:

div(id="page")
    main
        section
            - the_content()

“the_content()” will then be nested within #page main section. It is not necessary to include a semi-colon at the end of these single-lines of PHP.

Alternatively, multiple lines of PHP may be more easily written in a PHP block:

div(id="page")
    main
        section 
            :php
                $args = array(
                    'posts_per_page' => -1,
                    'post_type' = 'testimonials'
                );

As with how Jade functions, anything indented under the :php command will be compiled as php.

A typical loop would be written as follows:

- if (have_posts()) :
    - while (have_posts()) : the_post()
        - the_content()
    - endwhile
    - wp_reset_postdata()
- else :
    - include('includes/loop_missing.php')
- endif
MENU