PLEASE HELP: I want "read more" buttons – NOT text links

[jpnyberg]

Anyone know how to create "Continue Reading" BUTTONS for post excerpts?

I want the button to function and look like JUST the buttons on Smashing Magazine. (http://smashingmagazine.com)

Any help??  Anyone??I've tried every tutorial I can find online.

I'm running latest Genesis with Sample theme.

 

[Kim Parsell]

Smashing Magazine is using the tag in their posts to set up the Read more... link, and styling that link to look like a button.

You add the tag from the post editor using the more button at the top of the editor, which gives you a custom excerpt without having to copy and paste it into the excerpt section below the post editor.

To style the link, add the following to your style.css file in the Sample Theme on line 916 (after 08 Post Navigation):

/*
08.1 Post Navigation - Read More Link
---------------------------------------------------------------------------------------------------- */</code>

a.more-link, a.more-link:hover {
color: #fff;
font-size: 14px;
font-weight: normal;
line-height: 18px;
border: none;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 7px 10px;
text-decoration: none;
}

a.more-link {
background-color: #999;
}

a.more-link:hover {
background-color: #777;
}

Change the color: and background-color: values to whatever you want them to be.

To remove the brackets around the link, change the link text, and stop the link from jumping down partway on the single post view, add the following code to the end of your functions.php file in the Sample theme:

/** Modify the WordPress read more link */
add_filter( 'the_content_more_link', 'custom_read_more_link' );</code>

function custom_read_more_link() {
return '<a href="' . get_permalink() . '">Read more...</a>';
}

/** Stop more link from jumping to middle of page */
add_filter('the_content_more_link', 'remove_more_jump_link');

function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}

Hope this helps. 🙂

---

Just a simple country girl | Twitter

[jpnyberg]

Thanks for the reply Kim!  But, this didn't work.

In fact, after entering your suggested snippet into .php in Sample Theme, I am now locked out!

I have the "white screen of death" and get back in.

Also, I re-edited .php using Cpanel File Manager, but I am still locked out.

Everything was working fine until I made these changes.

Btw, I am using W3 Total Cache with CloudFlare integration.  Does this cause any problems?

[Kim Parsell]

Apparently the forum didn't like my use of the actual more tag in my reply. First paragraph should read:

Smashing Magazine is using the more tag in their posts to set up the Read more… link, and styling that link to look like a button.

Place the more tag in your post at the end of what you want the excerpt to be.

Holler if you have any more questions. 🙂

---

Just a simple country girl | Twitter

[Kim Parsell]

Yes, there's a very good chance that W3 Total Cache is causing an issue. Can you disable it until you get the changes made and working right?

And make sure that you add the code to your functions.php file after the last closing bracket from the previous function.

---

Just a simple country girl | Twitter

[jpnyberg]

Thanks Kim.
Any chance to you could save me some research time and tell me:

How do I disable a plugin using the cPanel?  I've never done this before.
And, I currently can't login to wp-admin.

So I can disable W3 Cache for now.

[Kim Parsell]

You can't disable individual plugins via Cpanel, only delete them.

Was functions.php the only file you edited?

---

Just a simple country girl | Twitter

[jpnyberg]

Kim you're amazing for taking the time to help me!  Thank you so much.
Yup, far as I know, I followed your instructions to the letter.   I still can't login to wp-admin.

I am happy to provide my cPanel credentials if you'd really like to look around!  😉

I'm just happy to have the help and can certainly send over a 12 pack or Starbucks card or manicure gift certificate or whatever.  😉

[Kim Parsell]

No, I'm going to walk you through fixing this yourself. It's not a good idea to give your cPanel credentials strangers. 😉

Open functions.php inside the Sample child theme folder, delete all the code in it, and paste this code into it:

<?php
// Start the engine
require_once( get_template_directory() . '/lib/init.php' );

// Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Genesis Sample Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/' );

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'sample_viewport_meta_tag' );

function sample_viewport_meta_tag() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

// Add support for custom background
add_theme_support( 'custom-background' );

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
	'width' => 1152,
	'height' => 120
) );

// Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

The above code is the original contents of the functions.php file. Save the file and try to access wp-admin again.

If the above does not fix your problem, go up one level in the file directory to the /wp-content/themes/ folder, then delete only the Sample child theme folder. This will force WordPress back to the default theme and you should be able to log in again.

---

Just a simple country girl | Twitter

[jpnyberg]

Awe ok.  But yikes!  I will lose all my extra php add-ons right?

Here's what my php file looks like now.  Any ideas?  Or, do I still have to delete everything?

<?php
// Start the engine
require_once( get_template_directory() . '/lib/init.php' );

// Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Genesis Sample Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/' );

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'sample_viewport_meta_tag' );
function sample_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

// Add support for custom background
add_theme_support( 'custom-background' );

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
'width' => 1152,
'height' => 120
) );

// Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

// Register newsletter widget area
genesis_register_sidebar( array(
'id'        => 'newsletter',
'name'        => __( 'Newsletter', 'custom-theme' ),
'description'    => __( 'This is the newsletter section.', 'custom-theme' ),
) );

// Add the newsletter widget after the post content
add_action( 'genesis_after_post_content', 'custom_add_newsletter_box' );
function custom_add_newsletter_box() {
if ( is_singular( 'post' ) )
genesis_widget_area( 'newsletter', array(
'before' => '<div id="newsletter">',
) );
}

/** Modify the speak your mind text */
add_filter( 'genesis_comment_form_args', 'custom_comment_form_args' );
function custom_comment_form_args($args) {
$args['title_reply'] = 'Leave a Comment';
return $args;

add_filter( 'genesis_comment_form_args', 'wps_comment_form_args' );
/**
* Remove website field from Comments Form
*
* @param array $args Comments form arguments.
* @return array $args Modified Comments form arguments.
*/
function wps_comment_form_args( $args ) {
unset( $args['fields']['url'] );
return $args;
}

/** Register widget areas */
genesis_register_sidebar( array(
'id'            => 'after-post-ad',
'name'          => __( 'After Post Ad', 'themename' ),
'description'   => __( 'This is a widget area that can be placed after the post', 'themename' ),
) );

add_action( 'genesis_after_post_content', 'my_widget_after_post' );
function my_widget_after_post() {
if ( ! is_singular( 'post' ) )
return;
genesis_widget_area( 'after-post-ad', array(
'before' => '<div class="after-post widget-area">',
) );
}

/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );
function custom_load_google_fonts() {
wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans', array(), PARENT_THEME_VERSION );
}

add_filter( 'genesis_comment_form_args', 'url_filtered' );
add_filter( 'comment_form_default_fields', 'url_filtered' );
function url_filtered( $fields ) {
if ( isset( $fields['url'] ) )
unset( $fields['url'] );
if ( isset( $fields['fields']['url'] ) )
unset( $fields['fields']['url'] );
return $fields;

}

/** Modify the WordPress read more link */
add_filter( 'the_content_more_link', 'custom_read_more_link' );

function custom_read_more_link() {
return 'Read more...';
}

/** Stop more link from jumping to middle of page */
add_filter('the_content_more_link', 'remove_more_jump_link');

function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}

[Kim Parsell]

Okay, I've edited the code above so you can keep your current mods, but remove what was added.

Copy and paste the following into functions.php:

<?php
// Start the engine
require_once( get_template_directory() . '/lib/init.php' );

// Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Genesis Sample Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/' );

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'sample_viewport_meta_tag' );

function sample_viewport_meta_tag() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

// Add support for custom background
add_theme_support( 'custom-background' );

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
	'width' => 1152,
	'height' => 120
) );

// Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

// Register newsletter widget area
genesis_register_sidebar( array(
	'id'        => 'newsletter',
	'name'        => __( 'Newsletter', 'custom-theme' ),
	'description'    => __( 'This is the newsletter section.', 'custom-theme' ),
) );

// Add the newsletter widget after the post content
add_action( 'genesis_after_post_content', 'custom_add_newsletter_box' );
function custom_add_newsletter_box() {
	if ( is_singular( 'post' ) )
		genesis_widget_area( 'newsletter', array(
			'before' => '<div id="newsletter">',
		) );
}

/** Modify the speak your mind text */
add_filter( 'genesis_comment_form_args', 'custom_comment_form_args' );

function custom_comment_form_args($args) {
	$args['title_reply'] = 'Leave a Comment';
	return $args;
}

/**
* Remove website field from Comments Form
*
* @param array $args Comments form arguments.
* @return array $args Modified Comments form arguments.
*/
add_filter( 'genesis_comment_form_args', 'wps_comment_form_args' );

function wps_comment_form_args( $args ) {
	unset( $args['fields']['url'] );
	return $args;
}

/** Register widget areas */
genesis_register_sidebar( array(
	'id'            => 'after-post-ad',
	'name'          => __( 'After Post Ad', 'themename' ),
	'description'   => __( 'This is a widget area that can be placed after the post', 'themename' ),
) );

add_action( 'genesis_after_post_content', 'my_widget_after_post' );

function my_widget_after_post() {
	if ( ! is_singular( 'post' ) )
		return;
	genesis_widget_area( 'after-post-ad', array(
		'before' => '<div class="after-post widget-area">',
	) );
}

/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );

function custom_load_google_fonts() {
	wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans’, array(), PARENT_THEME_VERSION );
}

add_filter( 'genesis_comment_form_args', 'url_filtered' );
add_filter( 'comment_form_default_fields', 'url_filtered' );

function url_filtered( $fields ) {
	if ( isset( $fields['url'] ) )
		unset( $fields['url'] );
	if ( isset( $fields['fields']['url'] ) )
		unset( $fields['fields']['url'] );
	return $fields;

}

That should get you back to where you were before you edited the file.

---

Just a simple country girl | Twitter

[jpnyberg]

Thanks Kim.

Argh!  This didn't work, either.  I can't login to wp-admin or see my page at all.  Still white screen.

At this point, I'm bummed and gonna give up for the night and try again tomorrow.

Thanks again for helping out!

[Kim Parsell]

You're most welcome. 🙂

When you try again tomorrow, rather than deleting the Sample theme folder, simply rename the folder to old-sample. That will still disable the theme, forcing WordPress back to the default theme, and hopefully allowing you in, without losing any of your customizations.

To disable W3 Total Cache, go to the plugins folder and rename the folder by adding old- to the beginning of the folder name.

---

Just a simple country girl | Twitter

[jpnyberg]

Kim,

Thanks for trying to help me with this.

I got my site up and running again.

I have the read more link styled with the blue buttons.

But, the php snippet you provided causes my site to freeze up - white screen of death.

I tested it a couple of times.  Every time I remove the php bit, the site comes up again.

Any thoughts?

[Kim Parsell]

The issue may be with the second function (remove_more_jump_link($link)). It works fine on my site, but you may have code, either in a plugin or functions.php, that is conflicting with it.

The first function is one from the StudioPress snippets section to change the text of the more link, so shouldn't be causing a problem. If you've got the text the way you want it, I wouldn't worry about it.

---

Just a simple country girl | Twitter

[Author]

Posts