[Support request] Can I add an icon to the read more button?

Hi Ema,

You can use wpsp_read_more_output to change how the read more button is displayed?

Can you provide us any mockup image/s of how you want the read more button to display?

Let us know.

Do you have the SVG file or the fontawesome icon code?

If you can get the specific icon we can help you with the code write up.:)

You can add this PHP snippet:

add_filter( 'wpsp_read_more_output', function( $output, $settings ){
    return sprintf('<div class="wpsp-read-more"><a title="%1$s" class="%4$s" href="%2$s">%3$s
        <span class="read-more-icon">
            <svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
        </span>
        </a>
        </div>',
            the_title_attribute( 'echo=0' ),
            esc_url( get_permalink() ),
            $settings[ 'read_more_text' ],
            esc_attr( $settings['read_more_class'] )
    );
},15,2);

And then add this CSS to align properly:

.wpsp-read-more a,
.wpsp-read-more a span.read-more-icon {
    display: inline-flex;
    align-content: center;
    align-items: center;
}

For the PHP part, you add it to a child theme’s functions.php or Code Snippets plugin.

The CSS is added on Appearance > customize > additional CSS.

Strange.

Can you share how you’ve added the code?

Here’s a demo on my sandbox site of this PHP snippet working. – https://dev-generate-press.pantheonsite.io/1671-2/

What happens if you turn the snippet into this?

add_filter( 'wpsp_read_more_output', function( $output, $settings ){
    return sprintf('<div class="wpsp-read-more"><a title="%1$s" class="%4$s" href="%2$s">%3$s
        <span class="read-more-icon">
            <svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
        </span>
        </a>
        </div>',
            the_title_attribute( 'echo=0' ),
            esc_url( get_permalink() ),
            $settings[ 'read_more_text' ],
            esc_attr( $settings['read_more_class'] )
    );
});

Strange how the code works on my end but not yours.

Can you try this?

add_filter( 'wpsp_read_more_output', function( $output, $settings ){
    $output = sprintf('<div class="wpsp-read-more"><a title="%1$s" class="%4$s" href="%2$s">%3$s
        <span class="read-more-icon">
            <svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
        </span>
        </a>
        </div>',
            the_title_attribute( 'echo=0' ),
            esc_url( get_permalink() ),
            $settings[ 'read_more_text' ],
            esc_attr( $settings['read_more_class'] )
    );

return $output;
});

If this doesn’t work, are you able to upload SVGs to your site’s media library? We can try adding it through CSS pseudo element.