I found out that [shortcode] are not showed in the post excerpts, so I was thinking about a workaround with javascript: keep the notation [shortcode], deleting its definition, and finally add a javascript which replace it with the html code of the original shortcode definition.

Say we have the following shortcode

add_shortcode( 'VF', 'vf_sc' );
function vf_sc( $atts ){
    return "<span class=boxed><b><font color=00CD00>V</font>|<font color=red>F</font></b></span>";

with boxed defined as

.boxed {
    padding: 0 5px;
    border: black 0.7px solid;

is it possibile to write a javascript which replaces the string [VF] with <span class=boxed><b><font color=00CD00>V</font>|<font color=red>F</font></b></span> ?

So that even by deleting the definition of the shortcode, I can still write [VF] in the editor and keep the same output.


Each post on my site starts with

<p class=textbox><b>TOPIC</b> description</p>

where TOPIC is the main argument of the post (usually 1 or 2 words), and description is a brief sentence explaining more about the content. Sometimes the description contains also the shortcode [VF].

This textbox is shown in the excerpt of each post when searching for them using the search bar.

  • Yes, that would be possible, but keep in mind it would only work for people who have JS enabled. So, search engines and humans with JS disabled wouldn't see the end output. It really depends on what your actual shortcode output would be, as to what the best option for displaying it would be. Perhaps modifying a template file would be better. Can you share what your actual shortcode would be outputting? – WebElaine Nov 5 at 14:48
  • The shortcode is the one that I wrote in the question, I edited the question adding an explanation. – sound wave Nov 5 at 14:57
  • 1
    I would suggest tweaking your code output - simplify to <span class="boxed"><strong>V</strong>F</span> and use CSS to make span.boxed red, and span.boxed strong the color 00cd00. The font tag has been deprecated for some time, and this simplifies the HTML enough that you could just paste the span directly into the Editor, instead of using the shortcode. The span would then be shown in the excerpts in search results. – WebElaine Nov 5 at 16:05
  • Thank you, but in that way only V is bold, while both should be. This is the shortest code I can think of <span class=vf><b>V</b>|<b>F</b></span> with .vf { padding: 0 5px; border: black 0.7px solid; } and .vf > b:first-of-type { color: #00CD00; } .vf > b:last-of-type { color: red; } – sound wave Nov 5 at 19:17
  • 1
    My point was you don't need JavaScript. Simplify your HTML and put the HTML directly into the editor. That way you can ensure everyone (human and search engine alike) see the same information. If you go the JS route search engines may be concerned that you're adding content, especially with hard-coded formatting in it, which tends to be used in injection attacks. – WebElaine Nov 5 at 20:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.