Wordpress: Customize the_content(); to Generate Your Own HTML/CSS Image & “More” Link

If you’ve ever wondered how you can get Wordpress to actually let you edit the “more” link at the bottom of post previews that show on the homepage, you’ve found the right place.

Now, I know you can normally simply put:

'); ?>

And that would generate text from the post all the way until the <!–more–> link was inserted as well as adding an image from your HTML, but the thing is, you can’t actually edit the link it generates by using this PHP code. All you can edit is what the link should say or look like. In my case, I needed to be able to actually edit the link HTML so I could call a class named “continueReading” which I made in CSS, that creates a button image that changes when the mouse hovers or clicks it. Take a look at what I needed Wordpress to do, in pure HTML and CSS:

Continue reading the article...

And the CSS for ‘continueReading’:

.continueReading
{
  margin: 40px 0 40px 0;
  display: block;
  width: 135px;
  height: 33px;
  background: url("images/continueReading2.jpg") no-repeat 0 0;

}

.continueReading:hover
{ 
  background-position: 0 -33px;
}

.continueReading:active
{ 
  background-position: 0 -66px;
}

.continueReading span
{
  display: none;
}

What this pretty much does is load one single image, and when the mouse hovers the image or clicks it, it moves down the image to the next state.

So how do I edit the actual HTML link in Wordpress?

Simply use this code below instead of what you’re used to doing:

Continue reading the article...

All I did was tell the_content to not show the “more” link or text, and simply only show the article preview. Then I inserted my own custom link to the permalink of the article, and was able to call the a class I needed, called ‘continueReading”. Now the button works great!

Example

Continue reading the article…

References:

• http://blog.adamoliver.net/tutorials/change-the_content-more-link-in-wordpress/
• http://graphpaperpress.com/2009/02/18/tip-how-to-change-the-default-wordpress-excerpt/
• http://codex.wordpress.org/Template_Tags/the_content

Bonus

If you’re also wondering how to edit the actual link HTML in the next_posts_link(); and previous_posts_link(); to add a CSS class or whatever you like, you must actually go into the core Wordpress files to do that. If you do this, make sure and save a version of the file you have so when you update Wordpress, you can upload yours back in afterwards.

First, login to your FTP client and head to wp-includes/link-template.php, then download and edit it.

Navigate to where you see this:

function get_next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
	global $paged, $wp_query;

	if ( !$max_page ) {
		$max_page = $wp_query->max_num_pages;
	}

	if ( !$paged )
		$paged = 1;

	$nextpage = intval($paged) + 1;

	if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
		$attr = apply_filters( 'next_posts_link_attributes', '' );
		return '". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'';
	}
}

Now, just change

		return '". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'';

To

		return '". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'';

The same goes for the other function, named ‘get_previous_posts_link’.

Any questions or comments can be left below. Thank you for reading!

You may also be interested in reading:

• 20 Useful Web Design Articles, Generators and Tutorials
• How to be a Better Web Designer
• New Design
• MySpace Profiles 2.0: How to Go Back to 1.0
• New Design, New Idea!