MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add "Read More" links to Hawthorn's posts

Please note: This article is specifically for the Hawthorn theme



By default, Hawthorn doesn't include post "Read More" buttons or links on the blog or archive pages. If you would like to add these to the standard, grid, or list layouts, please read on for instructions. 

Note: We recommend updating your WordPress to one of the more recent updates as they introduced line numbers within the file editor. This will make following the below instructions much more easy. If you aren't able to update your WordPress for whatever reason, you can always use a code editor plugin such as "WPide" (https://wordpress.org/plugins/wpide). 


Add a function to your "functions.php" file

First, navigate to WP Dashboard > Appearance > Editor > and open up "functions.php". 

Scroll to the very bottom of the file and paste in this code:


//////////////////////////////////////////////////////////////////
// PREVENT SCROLL ON READ MORE LINK
//////////////////////////////////////////////////////////////////
function remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );


Save changes when finished. 

Then, to apply the "Read More" button, look below for the post layout type you want to add it to and follow its steps.


Add "Read More" button to Grid Layout items

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

On blank line 24, add in this code:

<div class="cust-more"><a href="<?php echo get_permalink(); ?>" class="feat-more"><?php esc_html_e( 'Read More', 'hawthorn' ); ?></a></div>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS and add:

.cust-more {
text-align: center;
padding-bottom: 20px;
}
.cust-more .feat-more:hover {
background-color: #fff;
border: 1px solid #000;
color: #000;
}

Save changes.

The "Read More" button on your Grid items will resemble the one from Hawthorn's Featured Area Slider. If you wish to change the appearance of the button, such as its colors, feel free to open up a new support ticket and let us know!



Add "Read More" link to List Layout items

Please note: Due to limited vertical space with the List items, this tutorial will add a "Read More..." link to the end of your List items' excerpt instead of adding a big button. 

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

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

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?>…</p>

Replace that line of code with the following code instead:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?><span class="cust-more"><a href="<?php echo get_permalink(); ?>" class="list-more"><?php esc_html_e( 'Read More…', 'hawthorn' ); ?></a></span></p>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and insert the following code:

a.list-more {
margin-left: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
font-weight: 500;
}

If you'd like to change the colors or styling of the "Read More" link, feel free to open up a new support ticket and let us know!



Add "Read More" link to Alternating List Layout items

Please note: Due to limited vertical space with the List items, this tutorial will add a "Read More..." link to the end of your List items' excerpt instead of adding a big button. 

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

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

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); >…</p>

Replace that line of code with the following code instead:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?><span class="cust-more"><a href="<?php echo get_permalink(); ?>" class="list-more"><?php esc_html_e( 'Read More…', 'hawthorn' ); ?></a></span></p>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and insert the following code:

a.list-more {
margin-left: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
font-weight: 500;
}

If you'd like to change the colors or styling of the "Read More" link, feel free to open up a new support ticket and let us know!



Add "Read More" button to Standard/Full posts


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

On blank line 119, add in this code:

<div class="cust-more"><a href="<?php echo get_permalink(); ?>" class="feat-more"><?php esc_html_e( 'Read More', 'hawthorn' ); ?></a></div>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS and add:

.cust-more .feat-more:hover {
background-color: #fff;
border: 1px solid #000;
color: #000;
text-decoration: none;
}

Save changes.

The "Read More" button on your Grid items will resemble the one from Hawthorn's Featured Area Slider. If you wish to change the appearance of the button, such as its colors, feel free to open up a new support ticket and let us know!