Split The_title using custom fields

<?php foreach( get_the_category() as $cat ) echo '<section class="middle ' . $cat->slug
. '" >'; ?>

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

<article>
<?php the_post_thumbnail(); ?>
<!-- I swapped the below code with yours -->

<!--===STR====== THE TITLE ========-->
<?php
$sub_title = get_post_meta($post->ID,'subtitle',true);
if($sub_title != '') {
echo '<h1>'. the_title() .'<span>'. $sub_title .'</span></h1>';
} else {
echo '<h1>'. the_title() .'</h1>';
}
?>
<!--===END====== THE TITLE ========-->

<?php the_content(''); ?>

<div class="a-options">
<a href="#new" class="comments scrollto">Comment</a>

<!-- share -->
<div class="share-button">
<div class="buttons">
<div class="facebook">

    <div class="fb-like" data-href="www.MyKettlesYard.co.uk" data-send="false" data-layout="button_count" data-width="95" data-show-faces="false" data-font="Arial"></div>

    <span class="child-pseudo">Facebook</span>
</div>

<div class="twitter">

    <a href="https://twitter.com/share" class="twitter-share-button" data-url="www.MyKettlesYard.co.uk" data-text="Kettles Yard, Cambridge - www.MyKettlesYard.co.uk" data-count="horizontal">Tweet</a><script src="//platform.twitter.com/widgets.js"></script>

    <span class="child-pseudo">Twitter</span>
</div>
</div>

<span class="pseudo-button">&#043; Share</span>
</div>  <!--! /share -->

</div><!--! /a-options -->

<?php comments_template(); ?>

</article>

<?php endwhile; ?>

<?php endif; ?>