Change read more link

Hi, I am using beans_post_more_link to show a read more button after the excerpt. This link contains an anchor like #more-101 to skip the the lines of the article. Is there an option to remove the #more anchor?

Thanks

Bas

Hi Bas,

Since WP new core themes removed it and because many users asked, it will be removed from Beans Core from 1.3.1 (should be released next week). In the mean time, you can remove with the following snippet:

add_filter( 'beans_post_more_link_attributes', 'example_post_more_link_attributes' );

function example_post_more_link_attributes( $attributes ) {

    $attributes['href'] = esc_url( get_permalink() );

   return $attributes;

}

You may then remove that when you update to 1.3.1 as it won't be necessary anymore.

Thanks,

Thanks Thierry

Thierry, It's me again.

I used the starter child themes. I had set the site to show summary in reading setting, but the blog page showed full text instead of an excerpt. I had searched beans documentation but did not find how to show excerpt.

I searched through google and many people said to change the_content() to the_excerpt(). As I searched the beans framework, there was just one place where i found it. It is on tm-beans\lib\templates\fragments\post.php. Is it safe to change the_content() that I found there? Or you have a better approach to do.

oh...since this topic of discussion is about read more link, I also want to ask how to use a button instead of just a text link?

Thanks, Pandhu

Hey Pandhu,

All modifications must be done in your child theme and never directly in Beans theme as it would be lost when you update it. I would advise to use the_content WP filter here.

// Add button style to read more link.
beans_add_attribute( 'beans_post_more_link', 'class', 'uk-button' );

// Modify the_content.
add_filter( 'the_content', 'example_modify_post_content' );

function example_modify_post_content( $content ) {

    // Return the excerpt if it exists and if it is the home/front page.
    if ( has_excerpt() && ( is_home() || is_front_page() ) ) {
        return '<p>' . get_the_excerpt() . '</p><p>' . beans_post_more_link() . '</p>';
    }

    return $content;

}

See how we added the uk-button class to the read more link to give it the button style, you could give it the primary style by changing it to uk-button-primary.

Hope that help,

I tried your code and it worked great.

And about the uk-button, I tried to use uk-button-primary and uk-button-danger, but the result was different than button at getuikit.com documentation. It is no problem since I use css to modify the button's style.

Thanks Thierry, you're really give great support.

Hi Pandhu,

UIkit as 3 styles which are default, almost-flat and gradient. Beans uses default out of the box while UIkit demo uses the gradient. If you want to use the gradient on your website, here is the code snippet you can add to your child theme functions.php. It removes the default Uikit theme and apply the gradient UIkit theme instead.

add_action( 'beans_uikit_enqueue_scripts', 'example_modify_uikit_theme', 4 );

function example_modify_uikit_theme() {

 // Remove default style for performance purposes.
 beans_uikit_dequeue_theme( 'default' );

 // Add the gradient style.
  beans_uikit_enqueue_theme( 'gradient' );

}

If you are not in development mode, make sure you flush your assets cache in Appearance->Settings. Cool huh? Now your entire website as a more gradient style (buttons, pagination, menus etc.).

Happy coding,