PHP Programming/html output

From Wikibooks, open books for an open world
Jump to navigation Jump to search

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 ) );
                                ?></a></p>
                                
                            <?php endif; ?>

                            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            
                                <h2 class="attach-title"><?php the_title(); ?></h2>
            
                                <div class="attach-meta">
                                    <?php
                                        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() ),
                                                get_the_author()
                                            )
                                        );
                                    ?>
                                    
                                    <span class="meta-sep">|</span>
                                    
                                    <?php
                                        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() ),
                                                get_the_date()
                                            )
                                        );
                                        
                                        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>',
                                                    wp_get_attachment_url(),
                                                    esc_attr( __( 'Link to full-size image', 'appthemes' ) ),
                                                    $metadata['width'],
                                                    $metadata['height']
                                                )
                                            );
                                        }
                                    ?>
                                    
                                    <?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() ) : ?>
                                        
                                            <?php
                                            $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 )
                                                    break;
                                            }
                                            
                                            $k++;
                                            // 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 );
                                                else
                                                    // 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">
                                            <?php
                                                $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 ) );
                                            ?></a></p>
                    
                                            <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><!--/post-->

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

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

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

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

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

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

Breaking PHP for Output[edit | edit source]

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.

<?php
 
echo("<ul>");
for($x = 1; $x < 6; $x++)
{
  echo("<li>" . $x . "</li>");
}
echo("</ul>");
 
?>

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:

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

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.