Add category titles to your pages in Storefront’s Gridport Theme

Another short post on a very specific topic. If you are a user of the Gridport theme by Storefront Themes read on.

The question

The Gridport theme is designed to be very sleek and minimal. One of the design choices was not to show titles on the product category pages. I received this question on the forums “I wondered if you could provide a snippet of custom CSS code to restore the Category name?”
The answer is yes. You will need to do one simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.

Locate the page.php file which is in Gridport theme folder. Make a safe copy somewhere in case you have problems.
The code below is the complete file. You just need to add the highlighted lines and you will have category page titles. Your line numbers may vary slightly.

<?php get_header(); ?>

<?php
$image_width  = get_option( 'product_image_width' );
$image_height  = get_option( 'product_image_height' );
?>

<div id="single-content">

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

<?php if (! is_single())
		{ ?><h1><?php the_title(); ?></h1><?php }
	else 
		{  ?><?php }
?>

<?php the_content(); ?>


<?php endwhile; ?>
<?php else : ?>

<div><p><?php _e( 'No posts found. Try a different search?', 'storefront' ); ?></p></div>

<?php endif; ?>

</div>

<?php get_footer(); ?>

<h1><?php the_title(); ?></h1>

Or just delete everything and copy and paste the whole block from above as that is the whole file. In fact you could just go to Appearance/Editor in WordPress, find the page.php file, click to open and replace it’s contents with the above.

Tools:

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/

Leave a Reply