Html Output

There are a few different way you can display HTML using PHP. Generally, you will use the echo command to output something. This will be seen by a web browser, and then it will format it.

<?php get_header; ?>

<div class="content">

    <div class="content_botbg">

        <div class="content_res">

            <!-- full block -->
            <div class="shadowblock_out">

                <div class="shadowblock">

                    <div class="post">

                        <?php if ( have_posts ) while ( have_posts ) : the_post; ?>

                            <?php if ( !empty( $post->post_parent ) ) : ?>
                                <p class="page-title"><a href="<?php echo get_permalink( $post->post_parent ); ?>" title="<?php esc_attr( printf( __( 'Return to %s', 'appthemes' ), get_the_title( $post->post_parent ) ) ); ?>" rel="gallery"><?php
                                    printf( '<span class="meta-nav">' . __( '&larr; Return to %s', 'appthemes' ) . '</span>', get_the_title( $post->post_parent ) );
                            <?php endif; ?>

                            <div id="post-<?php the_ID; ?>" <?php post_class; ?>>
                                <h2 class="attach-title"><?php the_title; ?></h2>
                                <div class="attach-meta">
                                        printf( __( '<span class="%1$s">By</span> %2$s', 'appthemes' ),
                                            'meta-prep meta-prep-author',
                                            sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
                                                get_author_posts_url( get_the_author_meta( 'ID' ) ),
                                                sprintf( esc_attr__( 'View all ads by %s', 'appthemes' ), get_the_author ),
                                    <span class="meta-sep">|</span>
                                        printf( __( '<span class="%1$s">Uploaded</span> %2$s', 'appthemes' ),
                                            'meta-prep meta-prep-entry-date',
                                            sprintf( '<span class="entry-date"><abbr class="published" title="%1$s">%2$s</abbr></span>',
                                                esc_attr( get_the_time ),
                                        if ( wp_attachment_is_image ) {
                                            echo ' <span class="meta-sep">|</span> ';
                                            $metadata = wp_get_attachment_metadata;
                                            printf( __( 'Full size is %s pixels', 'appthemes' ),
                                                sprintf( '<a href="%1$s" title="%2$s">%3$s &times; %4$s</a>',
                                                    esc_attr( __( 'Link to full-size image', 'appthemes' ) ),
                                    <?php edit_post_link( __( 'Edit', 'appthemes' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
                                </div><!-- /attach-meta -->
                                <div class="entry-content">
                                    <div class="entry-attachment">
                                        <?php if ( wp_attachment_is_image ) : ?>
                                            $attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
                                            foreach ( $attachments as $k => $attachment ) {
                                                if ( $attachment->ID == $post->ID )
                                            // If there is more than 1 image attachment in a gallery
                                            if ( count( $attachments ) > 1 ) {
                                                if ( isset( $attachments[ $k ] ) )
                                                    // get the URL of the next image attachment
                                                    $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
                                                    // or get the URL of the first image attachment
                                                    $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
                                            } else {
                                                // or, if there's only 1 image attachment, get the URL of the image
                                                $next_attachment_url = wp_get_attachment_url;
                                            <p class="attachment"><a href="<?php echo $next_attachment_url; ?>" title="<?php echo esc_attr( get_the_title ); ?>" rel="attachment">
                                                $attachment_width  = apply_filters( 'appthemes_attachment_size', 800 );
                                                $attachment_height = apply_filters( 'appthemes_attachment_height', 800 );
                                                echo wp_get_attachment_image( $post->ID, array( $attachment_width, $attachment_height ) );
                                            <div id="nav-below" class="navigation">
                                                <div class="next-prev"><?php previous_image_link( false, __('&larr; prev', 'appthemes') ); ?>&nbsp;&nbsp;&nbsp;<?php next_image_link( false, __('next &rarr;', 'appthemes') ); ?></div>
                                            </div><!-- /nav-below -->
                                        <?php else : ?>
                                            <a href="<?php echo wp_get_attachment_url; ?>" title="<?php echo esc_attr( get_the_title ); ?>" rel="attachment"><?php echo basename( get_permalink ); ?></a>
                                        <?php endif; ?>
                                    </div><!-- /entry-attachment -->
                                </div><!-- /entry-content -->
                            </div><!-- /post -->
                        <?php endwhile; // end of the loop ?>

                        <div class="clr"></div>


                </div><!-- /shadowblock -->

            </div><!-- /shadowblock_out -->

            <div class="clr"></div>

        </div><!-- /content_res -->

    </div><!-- /content_botbg -->

</div><!-- /content -->
<?php get_footer; ?>

Breaking PHP for Output

In addition to using functions such as echo and print, you can also end your script, and anything beyond the end of the script will be output as normal HTML to the browser. You can also restart your script whenever you want after you've closed the PHP tag. Confused? It's actually pretty simple.

Let's say you had a for loop to count up to five and output it.

for($x = 1; $x < 6; $x++)
  echo("<li>" . $x . "</li>");

While I would tend to use templates for larger pages that output a lot, we'll get to that later. Remember how all your PHP scripts start with <?php and end with ?>? Those don't have to be the very start and end of your file. In fact, PHP handles ending and restarting scripting just like if everything between the ?> and <?php tags were inside of an echo statement.

Thus, you could do something like this:

 for($x = 1; $x < 6; $x++)
  <li><?php echo $x ?></li>

This is actually a very common method of outputting variables in a script, especially if there is a lot of HTML surrounding the variables. As I said before, I personally rarely ever do this, as in my opinion, using echo for smaller scripts keeps your code cleaner (and I would use templates for larger ones). However, we want to cover most of the language here, so this is another method you could use.

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.



Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.

Manage research, learning and skills at Create an account using LinkedIn to manage and organize your omni-channel knowledge. is like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us