Theme The Morning After

The Morning After – Images, anyone?

Two days ago, the author of THE MORNING AFTER, Arun Kale, surprised me with a message on his forum.

Hello, all. I have moved the Morning After theme to Google Code. It will now be available at this location. I have also adopted the MIT License for the theme. […] I am open to accepting contributions to the theme from users of the theme — provided you know what you’re doing, of course.

Especially, the last sentence caught my attention. In my opinion, this offers US the opportunity to adopt this great magazine-style theme faster to new functionalities of WordPress. Having said that, here is my first contribution:
Since version 2.5, WordPress supports built-in galleries. So, I have added a gallery archive, a gallery section on home.php and an image template to my customized version of THE MORNING AFTER. The tutorial can be read here.

In my opinion, a gallery overview and a gallery section on home.php are not essential for THE MORNING AFTER, but it should offer a template file for images, so that the new built-in galleries of WordPress can be used. Therefore, I have written a new image.php template.

<?php get_header(); ?>
        <div id="topbanner_single" class="column span-14">   <!-- start top banner -->
            <div class="pagetitle">
                // you&#8217;re viewing...
        </div>   <!-- end top banner -->
        <div id="post_content" class="column span-14">   <!-- start home_content -->      
        <?php if (have_posts()) : ?>		
        <?php while (have_posts()) : the_post(); ?>
        	<div class="column span-11 first">
                <h2 class="post_cat">Images</h2>  		
            	<h2 class="post_name" id="post-<?php the_ID(); ?>"> <a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> &raquo; <?php the_title(); ?></h2>
            	<div class="post_meta">
            		By <?php the_author_posts_link(); ?> <span class="dot">&sdot;</span> <?php the_time('F j, Y'); ?> <span class="dot">&sdot;</span> <?php if(function_exists('wp_email')) { ?> <?php email_link(); ?> <span class="dot">&sdot;</span> <?php } ?> <?php if(function_exists('wp_print')) { ?> <?php print_link(); ?> <span class="dot">&sdot;</span> <?php } ?> <a href="#comments">Post a comment</a>
                <div class="captionfull"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div>
            	<?php the_content('<p>Continue reading this post</p>'); ?>

 				<div class="navigation">
					<div class="alignleft"><?php previous_image_link() ?></div>
					<div class="alignright"><?php next_image_link() ?></div>
				<div class="post_meta">
            		<p><?php the_taxonomies(); ?></p>
				<?php edit_post_link('Edit this entry.','<p>','</p>'); ?>
				<div id="comments">   <!-- start comments -->			
					<div id="commenthead">
						<h2 class="post_comm">Discussion</h2>
						<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
							// Both Comments and Pings are open ?>							
							<h3 class="mast5"><?php comments_number('No comments', 'One comment', '% comments'); ?> for &#8220;<?php the_title(); ?>&#8221;</h3>	
						<?php } else {
							// Neither Comments, nor Pings are open ?>
							<h3 class="mast5">Comments are disallowed for this post.</h3>
						<?php } ?>
					<?php comments_template(); ?>
				</div>   <!-- end comments -->
        <?php endwhile; else: ?>
		<p>Lost? Go back to the <a href="<?php echo get_option('home'); ?>/">home page</a>.</p>
		<?php endif; ?>    
            <?php get_sidebar(); ?>     
        </div>   <!-- start home_content -->
<?php get_footer(); ?>

This template is different to the image.php offered in the „old“ tutorial. This time, the template is based on the single.php of TMA 1.3 and not on my customized version. And in contrast to the old image.php, the navigation is based on thumbs and not on text links.

To achieve the floating of the navigation thumbs, the following code must be added to the cascading style sheet:


.navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 150px; }
.alignright { float: right; }
.alignleft { float: left; }

Finally, adding the image.php template to the theme directory and updating the style.css outputs such an image page:

The title consists of the name of the parent post and the name of the image. Caption and description are below the image.

Screen shot image post.

The (maximum) size of the image and the thumbnails can be edited unter WP Dashbard > Settings > Miscellaneous.

  1. […] Code. It will now be available at this location. I have also adopted the MIT License for the t Immigration Daily Immigration PortalWant to give your web site constantly updated content […]

  2. Hey Nick!
    You are a Morning after guru and I am finding all your tutorials very helpful…thanks for blogging your knowledge.
    I am customizing my own MA template, and whilst my CSS skills are fine, I have yet to learn php! Could you explain how you added the small image (nb) next to the default logo in the header….? Also, I tried to replace the logo with my own picture to the size specified here ( by Arun, but it pushed my navigation links all out of position. Any ideas?!!

  3. Hi Jon!
    I have added the logo as a background image and increased the margin of the title div… just CSS.
    Too complicated? Well, you convinced me to write a short tutorial about that during the next days.
    UPDATE: Here it is!

  4. […] a comment , I was asked: Could you explain how you added the small image (nb) next to the default logo in the […]

  5. […] This version of the image.php is not compatible with WordPress 2.6. Please use the basic version without text link navigation. Schlagworte: The Morning After, […]

  6. Hi Nick —
    Thanks so much for posting your expertise — it’s very helpful.
    You’re dealing with a total noob here… I’m confused as to how to get from point A – entering all the code (which was no problem) to point B – the lovely album/bilder page, as well as how I get the „latest galleries“ on my home page. There’s a disconnect for me… I’m sure it’s something totally obvious. Is there a certain name or category I need to reference in a page or post, or do I need an additional folder in my directory, etc?
    Thanks much!

  7. Hi Stacey!
    If you use my code with no changes, you have to create a category named „bilder“. Every post tagged with „bilder“ will appear on the gallery page and on the Latest Gallery section on home.php.
    Anyway, I will write a new tutorial about the whole topic when TMA 1.4 is out.

  8. Thanks much, Nick! I’ve figured out the Gallery page. Now I just have to figure out the home page. I have an auto-thumbnail plug-in that I think is interfering with the thumbs in the „Latest Galleries“ section, but I’ll keep poking around til I figure it out. :)

  9. Well, I was using the custom field for the recent post thumb to display a preview image of the gallery…
    That gave me the best control…but you can also try to pull an image out of a gallery… just have a look at the code of the gallery.php.
    Anyway, I suggest that you do not invest too much into this now… I know that Arun is working on TMA 1.4 this weekend. Afterwards, I will publish the new tutorial (with new code for the gallery.php)

  10. Thanks, Nick. I think I will take it easy for now (let my eyes un-cross), and I’ll eagerly await the new tutorial. :) You’re bookmarked, for sure!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert