Add a "Continue Reading" button to Hawthorn

Please note: This article is specifically for the Hawthorn theme. 

ADDING "CONTINUE READING" BUTTON TO STANDARD POSTS

To add a "Continue Reading" button beneath your standard layout posts, you can follow these steps:

Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content.php". 

On line 110, you'll see this line of code:

<?php the_content('', false); ?>

Change that line of code to the following instead:

<?php the_content(__('Continue Reading', 'hawthorn')); ?>

If you'd like to have the button say something other than "Continue Reading", you're welcome to change the text at this point in time. 

Next, on lines 114-118, you'll see this block of code:

<?php if(get_theme_mod('hawthorn_sidebar_homepage') == true) : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 42); ?>…</p>
<?php else : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 26); ?>…</p>
<?php endif; ?>

Change that block of code to instead be:

<?php if(get_theme_mod('hawthorn_sidebar_homepage') == true) : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 42); ?>…</p>
<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'hawthorn' ); ?></span></a></p>
<?php else : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 26); ?>…</p>
<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'hawthorn' ); ?></span></a></p>
<?php endif; ?>

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and enter this styling code:

.more-link {
    text-align:center;
    display:block;
    margin:40px auto;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:11px;
        font-weight: 700;
    color:#000;
        background-color: #fff;
        border: 1px solid #000;
        padding: 10px 0;
        max-width: 200px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
a.more-link:hover {
    text-decoration:none;
    color:#fff;
        background: #000;
}

Save changes to the file when finished.