Deeper editing of index.php and single.php

Question

I'd like to fully customize the CSS and HTML of the main blog page (index.php) and the individual post page (single.php). However, looking in index.php and single.php, I don't see how to get at the HTML/CSS I'm looking for, as it appears to be doing this with external PHP functions.

As an example, I'd like to have my index.html page have something like this for the most recent two or three posts:

<div class="post_summary">
<img src="post_image1.png" class="post_image"/>
<h1>Name of first post</h1>
<p class="post_date">December 29th, 2014</p>
<a href="first_post.html">Read more...</a>
</div>

Presumably, this will involve a PHP loop and pulling the featured image, name, and date of each post. Any pointers on how to approach this would be terrific! Thanks for reading.

Answer 1

hey add the following code in your index.php file to show the three recent blog post like this

 <?php                  
            query_posts(array(
                'post_type'      => 'post',
                'posts_per_page' => 3,
                'order'    => 'ASC',            
            ));
    ?>          

 <?php  if ( have_posts() ) :?>
    <?php while ( have_posts() ) :the_post(); ?>
         <!-- Start BlogItem -->        
            <article id="post-<?php the_ID();?>" <?php post_class();?>>
                 <?php the_post_thumbnail( 'large' );?>
                <header class="entry-header">
                    <h1><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'blog' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>  
            <p class="post_date"><?php blog_posted_on(); ?></p>
                </header><!-- .entry-header -->
            <!-- Start content -->
                      <div class="content"><?php wp_excerpt('post_len','post_readmore'); ?></div>   
                    <!-- This is used to provide More Links-->                        
                    <!-- End content -->
                 </article>
                 <!-- End BlogItem --> 
            <?php endwhile; ?>
            <?php endif;?>

And also add the two function in your functions.php file

   if ( ! function_exists( 'blog_posted_on') ):         
        function blog_posted_on(){
             if ( count( get_the_category() ) ) :                               
                printf( __( 'On %2$s ', 'blog' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) );                           
                printf( __( '%2$s <span class="%1$s"></span> <span>writing by</span> %3$s', 'blog'),
                 'meta-prep meta-prep-author',
                  sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',
                   get_permalink(),
                   esc_attr(get_the_time() ),
                   get_the_date()                       
                ),
                 sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>',
                    get_author_posts_url( get_the_author_meta( 'ID' ) ),
                        sprintf( esc_attr__( 'View all posts by %s', 'blog' ), get_the_author() ),
                        get_the_author()
                    )                       
                    );
            endif; 
        }            
  endif;



function wp_excerpt($length_callback = '', $more_callback = '')
        {
            global $post;
            if (function_exists($length_callback)) {
                add_filter('excerpt_length', $length_callback);
            }
            if (function_exists($more_callback)) {
                add_filter('excerpt_more', $more_callback);
            }
            $output = get_the_excerpt();
            $output = apply_filters('wptexturize', $output);
            $output = apply_filters('convert_chars', $output);
            $output = '<p>' . $output . '</p>';
            echo $output;
        }

        function post_len($length) {
            return 41;
        }

        function post_readmore($more){
        global $post;
        return '<span class="post-read-more-color"><a href="'. get_permalink() . '">' . __( ' Read more...') . '</a></span>';
        }  

it work fine.

Answer 2

What you are seeing in template files is “actual” code. WordPress is PHP application and its templates are PHP–driven. That is the point, difference, and advantage moving from non–dynamic sites.

You have to deal with PHP working with WordPress. Fortunately one of the strongest factors that contribute to its popularity is that theme modifications are very easy to start with.

You should start with documentation in Codex, likely Stepping into Templates and Stepping Into Template Tags on WordPress side. However PHP Manual is something you should pay attention to as well.