Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Wordpress - styling posts on the index page (starkers theme)

Featured Replies

I've recently embarked on making my first website via wordpress. I'm okay at HTML/CSS (still learning) but starting off with PHP - but getting there.

 

I am using the Starkers theme and have got some pages up, getting my head round it etc. (thanks to the Chris Coyier tutorials!)

 

From what I understand on the index page the comments are pulled in via:

 

<?php get_template_part( 'loop', 'index' ); ?>

 

I've been trying to style the posts on the index page, but can't quite find what file to style.

 

From research one way is to create an 'index-post.php' file and paste some loop into it and style that?

 

Thanks

Edited by Renaissance-Design
Please usethe code button or tags to format your code.

All styles should be in style.css in the theme directory. To find out which styles you need to change for the posts, load up your index page and view source then find the div id or class in the style sheet. I cannot give you a definitive answer as it all depends on the theme and what they have named their styles.

  • Author

Thanks for the responses. I have found this code in the 'loop.php':

 

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

<?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?>

   <?php if ( ( function_exists( 'get_post_format' ) && 'gallery' == get_post_format( $post->ID ) ) || in_category( _x( 'gallery', 'gallery category slug', 'starkers' ) ) ) : ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	    <header>



		   <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'starkers' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>



		    <?php starkers_posted_on(); ?>
	    </header>

<?php if ( post_password_required() ) : ?>
		    <?php the_content(); ?>
<?php else : ?>
<?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
   if ( $images ) :
    $total_images = count( $images );
    $image = array_shift( $images );
    $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?>

    <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>

    <p><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'starkers' ), 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'starkers' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', number_format_i18n( $total_images )); ?></p>
<?php endif; ?>

   <?php the_excerpt(); ?>

<?php endif; ?>

	    <footer>
		 <?php if ( function_exists( 'get_post_format' ) && 'gallery' == get_post_format( $post->ID ) ) : ?>
		 <a href="<?php echo get_post_format_link( 'gallery' ); ?>" title="<?php esc_attr_e( 'View Galleries', 'starkers' ); ?>"><?php _e( 'More Galleries', 'starkers' ); ?></a> |

		 <?php elseif ( in_category( _x( 'gallery', 'gallery category slug', 'starkers' ) ) ) : ?>
		 <a href="<?php echo get_term_link( _x( 'gallery', 'gallery category slug', 'starkers' ), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'starkers' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a> |

		 <?php endif; ?>

		 <?php comments_popup_link( __( 'Leave a comment', 'starkers' ), __( '1 Comment', 'starkers' ), __( '% Comments', 'starkers' ) ); ?>
		 <?php edit_post_link( __( 'Edit', 'starkers' ), '| ', '' ); ?>
	    </footer>
    </article>

<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>

   <?php elseif ( ( function_exists( 'get_post_format' ) && 'aside' == get_post_format( $post->ID ) ) || in_category( _x( 'asides', 'asides category slug', 'starkers' ) )  ) : ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
		    <?php the_excerpt(); ?>
    <?php else : ?>
		    <?php the_content( __( 'Continue reading →', 'starkers' ) ); ?>
    <?php endif; ?>

	    <footer>
		    <?php starkers_posted_on(); ?> | <?php comments_popup_link( __( 'Leave a comment', 'starkers' ), __( '1 Comment', 'starkers' ), __( '% Comments', 'starkers' ) ); ?> <?php edit_post_link( __( 'Edit', 'starkers' ), '| ', '' ); ?>
	    </footer>
    </article>


<?php /* How to display all other posts. */ ?>

   <?php else : ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <header>


		    <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'starkers' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>


		    <?php starkers_posted_on(); ?>


	    </header>

   <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
		    <?php the_excerpt(); ?>
   <?php else : ?>
		    <?php the_content( __( 'Continue reading →', 'starkers' ) ); ?>

		    <?php wp_link_pages( array( 'before' => '<nav>' . __( 'Pages:', 'starkers' ), 'after' => '</nav>' ) ); ?>
   <?php endif; ?>

	    <footer>

		    <?php if ( count( get_the_category() ) ) : ?>
				    <?php printf( __( 'Posted in %2$s', 'starkers' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> |
		    <?php endif; ?>
		    <?php
			    $tags_list = get_the_tag_list( '', ', ' );
			    if ( $tags_list ):
		    ?>
				    <?php printf( __( 'Tagged %2$s', 'starkers' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?> |
		    <?php endif; ?>
		    <?php comments_popup_link( __( 'Leave a comment', 'starkers' ), __( '1 Comment', 'starkers' ), __( '% Comments', 'starkers' ) ); ?>
		    <?php edit_post_link( __( 'Edit', 'starkers' ), '| ', '' ); ?>

	    </footer>
 </article>

	    <?php comments_template( '', true ); ?>

   <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>

<?php endwhile; // End the loop. Whew. ?>

 

 

So is this the code I should copy and paste into a file I create called 'loop-index.php' and then can start adding divs to style?

 

Thanks

Use developer tools in Chrome or Firefox and find the recurring class for the posts. Then find this in the stylesheet, if it exists. If it doesn't create it.

Why do you want to create loop-index.php? You can just use loop.php. Like pp's said use developer tools to find out which elements to style in style.css.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.