Home › Forums › Pro Support › Can I add an icon to the read more button?
- This topic has 17 replies, 3 voices, and was last updated 2 years, 4 months ago by
elvin.
-
AuthorPosts
-
April 16, 2021 at 10:00 am #29345
Ema
ParticipantHello,
I’m looking to add a little arrow to the ‘read more button’ on show posts. Can this be done?
Best Ema
April 18, 2021 at 6:11 pm #29390elvin
ModeratorHi 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.
April 19, 2021 at 4:37 am #29402Ema
ParticipantHello Elvin,
Thanks for getting back to me.
Would be like this – just using one of the general arrows from GP Blocks
April 19, 2021 at 5:31 pm #29419elvin
ModeratorDo 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.:)
April 20, 2021 at 3:39 am #29447Ema
ParticipantHi 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
April 20, 2021 at 7:53 pm #29467elvin
ModeratorYou 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; }
April 24, 2021 at 3:31 pm #29548Ema
Participanthello 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 🙂
April 25, 2021 at 4:55 pm #29569elvin
ModeratorFor 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.
July 15, 2021 at 4:06 am #32030Yvon
ParticipantHi 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,
YvonJuly 15, 2021 at 4:35 pm #32067elvin
ModeratorStrange.
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/
July 16, 2021 at 4:07 am #32094Yvon
ParticipantThanks 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.jpgI use Generatepress with Generateblocks and no other page editor.
Thanks for your help.
July 18, 2021 at 5:22 pm #32160elvin
ModeratorWhat 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'] ) ); });
July 19, 2021 at 1:10 am #32209Yvon
ParticipantHi 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.jpgThis 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!
July 19, 2021 at 7:41 pm #32245elvin
ModeratorStrange 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.
July 26, 2021 at 2:11 am #32406Yvon
ParticipantHi 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!
-
AuthorPosts
- You must be logged in to reply to this topic.