We're merging with GenerateBlocks! Learn more here.

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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Can I add an icon to the read more button?

Tagged: ,

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #29345
    Ema
    Participant

    Hello,

    I’m looking to add a little arrow to the ‘read more button’ on show posts. Can this be done?

    Best Ema

    #29390
    elvin
    Moderator

    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.

    #29402
    Ema
    Participant

    Hello Elvin,

    Thanks for getting back to me.

    Would be like this – just using one of the general arrows from GP Blocks

    #29419
    elvin
    Moderator

    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.:)

    #29447
    Ema
    Participant

    Hi Elvin,

    Thank you!

    it’s this one

    <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>

    Ema

    #29467
    elvin
    Moderator

    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;
    }
    #29548
    Ema
    Participant

    hello Elvin, thanks so much for helping me with this. do I add to elements – hooks? I added to snippets and it created a critical error?

    best Ema 🙂

    #29569
    elvin
    Moderator

    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.

    #32030
    Yvon
    Participant

    Hi Elvin, I followed this instruction and added the code to a code snippet. But it returns a fatal error. What could cause this?

    This is the error:

    Fatal error: Uncaught ArgumentCountError: Too few arguments to function {closure}(), 1 passed in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php on line 292 and exactly 2 expected in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code:1 Stack trace: #0 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(292): {closure}(‘<div class=”wps…’) #1 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/plugin.php(212): WP_Hook->apply_filters(‘<div class=”wps…’, Array) #2 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/wp-show-posts/inc/functions.php(240): apply_filters(‘wpsp_read_more_…’, ‘<div class=”wps…’) #3 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(292): wpsp_read_more(Array) #4 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(316): WP_H in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code on line 1

    Thanks for your help,
    Yvon

    #32067
    elvin
    Moderator

    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/

    #32094
    Yvon
    Participant

    Thanks for your reply. I added the code in Code snippets like this:

    https://snipboard.io/m8MxAf.jpg

    And the css like this:
    https://snipboard.io/D4CJN6.jpg

    I use Generatepress with Generateblocks and no other page editor.

    Thanks for your help.

    #32160
    elvin
    Moderator

    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'] )
        );
    });
    #32209
    Yvon
    Participant

    Hi Elvin,

    Thanks for your help. I changed the snippet code, but it still gives an error:

    I added the code in Code snippets like this:
    https://snipboard.io/YzuU42.jpg

    This is the error:

    Fatal error: Uncaught ArgumentCountError: Too few arguments to function {closure}(), 1 passed in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php on line 292 and exactly 2 expected in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code:1 Stack trace: #0 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(292): {closure}(‘<div class=”wps…’) #1 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/plugin.php(212): WP_Hook->apply_filters(‘<div class=”wps…’, Array) #2 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/wp-show-posts/inc/functions.php(240): apply_filters(‘wpsp_read_more_…’, ‘<div class=”wps…’) #3 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(292): wpsp_read_more(Array) #4 /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-includes/class-wp-hook.php(316): WP_H in /home/customer/www/staging8.ingevanhaselen.nl/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code on line 1

    I hope you can help me, thanks!

    #32245
    elvin
    Moderator

    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.

    #32406
    Yvon
    Participant

    Hi Elvin, thanks again. I tried the new code, but still get the same result. Almost all other plugins are switched off and the issue keeps appearing. I think I can upload svg to my media folder. Could you help me with the CSS pseudo element?

    Thanks!

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.