How to Customize the Headway “Read More” Links

The read-more links in headway are kind of ugly by default. Luckily, we can fix that pretty easily!

[youtube]http://www.youtube.com/watch?v=C1gKyzvCyEo[/youtube]

Of course, there were a few elements left unaddressed. You cannot change the hover look from within the visual editor, and you cannot modify the text that appears. So, I’m going to show you how.

How to Style the “Read the Full Article” Link Hover in Headway

Add the following code to your custom.css file using the WordPress appearance editor:

body.custom a:hover.more-link {text-decoration: none; background:  #000; color: #fff;}

Change the background color and text color to your liking and you’re good to go! If you want to get fancy, you can add background images, CSS rounded corners, etc. The code for styling both the regular link and the hover link is as follows:

body.custom a.more-link {text-decoration: none; background: blue;  color: #fff;}
body.custom a:hover.more-link {text-decoration: none; background: #000;  color: #fff;}

How to Change the Headway  Read-More Text

Simply go to wp-admin–>headway configuration –> post/comments –> Miscellaneous –> Read More Text and change the text to whatever you want to appear. Note that you’ll need to use ASCII Special Characters if you want special characters to appear. This is true of any input field.

HACK: How to Manually Change the Read-More Text

This part of the tutorial existed before the headway update that let you change the settings. If you’re trying to translate your website, this could be helpful. Or if you just like to do things the hard way.

Now we get to the hacking part. This requires FTP access. We’re going to venture into the core files of Headway and muck around with some text so you no longer have “Read the Full Article” displaying below excerpts.

Open up your Headway .zip folder on your computer and go to library–>leafs–>content–>content.php. Find:

<?php if(strpos($post->post_content, '<!--more-->')){  ?>
 <p><a href="<?php the_permalink() ?>">Read the full  article &raquo;</a></p>
 <?php } ?>

Change the text “Read the Full Article »” to anything you want! That will only work when the “more” tag is enabled. Now we need to change it for all of the other excerpts. Find the following code:

<div>
 <?php the_excerpt(); ?>
 <p><a href="<?php the_permalink() ?>">Read the full  article &raquo;</a></p>
 </div>

Change the text “Read the Full Article »” to your new message. Save your changes.

Using your favorite FTP client, upload content.php to headway-folder/library/leafs/content/ and be sure to overwrite the existing content.php.

Now you’re done!

Any Questions?

Did you find this hack helpful? What does your “read more” text say? Share your thoughts and opinions below!