
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.