Show full post entries on Storefront “Gridport” theme Blog page
Another short post on a very specific topic. If you are a user of the Gridport theme by Storefront Themes read on.
The question
“Can I show the full blog entries on the blog page instead of the excerpt and thumbnail in a grid?”
The answer is yes. You will need to do one simple PHP edit and add a little CSS. If you have not done this before see the note “Tools” at the bottom of this post.
Locate the index.php file which is in Gridport theme folder. Make a safe copy somewhere in case you have problems.
The code below is slightly condensed as the my blog code display removes empty lines if there is more than one, but it is a pretty simple edit and I have included enough surrounding code for you to find what you need. Your line numbers may vary slightly. A lot of code is removed, we call for the content instead of the excerpt. Also the id’s of the divs are changed so that they can be styled
<div id="grid-content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class('grid-item blogrid' . $col_class); ?> id="post-<?php the_ID(); ?>">
<h3 class="cufon" style="margin-bottom:10px;"><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { /* if post has post thumbnail */ ?>
<div class="post-thumb">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>" style="float:left;margin-right:10px;">
<?php the_post_thumbnail('thumbnail-large'); /* post thumbnail settings configured in functions.php */ ?>
</a>
</div>
<?php } ?>
<?php the_excerpt(); ?>
<div class="clear"></div>
</div>
<?php endwhile; ?>
Once you have located that code, you can copy and paste this code below replacing everything above with this. If you have a really long post that you think should not be displayed in its entirety, you can make use of the more tag in the post editor and it will be honored here. Your post will be cut off at the more tag and display “Continue Reading” followed by the post title.
<div id="no-grid">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="no-grid-post">
<h3 class="cufon" style="margin-bottom:10px;"><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_content("Continue reading " . the_title('', '', false)); ?>
<div class="clear"></div>
</div>
<?php endwhile; ?>
Now that you have the PHP sorted out you need a little css to clean it up. Of course you can style this however you wish. This is just some very basic CSS to make it acceptable.
/*put a little space between content and browser window edges */
#no-grid{padding:10px 50px;}
/* put some space and a border between posts */
#no-grid-post{border-bottom:1px solid #ccc; margin-bottom:50px;}
Add Post Author, Date and Category.
I have had a further request to add the Author details and date as they appear on the single post page at the top of the posts on the blog page. You will edit the same file. Find the first line you see in the code below. Paste the extra 2 highlighted lines right after it. Make sure you get all of that very long line.
<h3 class="cufon" style="margin-bottom:10px;"><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
<small><?php _e( 'Written by', 'storefront' ); ?> <?php echo get_the_author_link(); ?> <?php _e( 'on', 'storefront' ); ?> <?php echo get_the_date(); ?> - <?php _e( 'Posted in', 'storefront' ); ?> <?php the_category(', '); ?></small>
<div class="clear"></div>
Custom CSS:
This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes.
Tools:
You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
