Hello everyone,
Some time ago a friend helped me to set a text excerpt code to manage long paragraphs. The code worked like this:
[show_more more="read more" less="read less" color="darkgray" align="center"] text to hide [/show_more]
I said worked because some days ago I noticed it doesn’t anymore. I suspect I might have messed with some source code he store somewhere else. Can you help me to figure out what could have happened?
Happy to try, but we would need more details. E.g. can you provide the source code the source code? Or some other way to see this not working?
Thanks James, right, I dm you the url.
It turns out that the PHP code responsible for the shortcut was deleted from the server.
@dRyW as discussed, let’s have a go at rebuilding this ourselves.
First, let’s confirm that a basic shortcode works.
Copy this PHP to your theme’s functions.php file:
function simple_show_more_shortcode($atts, $content = null) {
$a = shortcode_atts(
array(
'more' => 'Read more',
),
$atts
);
$output = <<<HTML
<div class="simple-show-more">
<div class="excerpt-content" style="display: none;">{$content}</div>
<button
onclick="this.previousElementSibling.style.display='block'; this.style.display='none';"
>
{$a['more']}
</button>
</div>
HTML;
return $output;
}
add_shortcode( 'show_more', 'simple_show_more_shortcode' );
Then in any post, using the text editor, add the following:
[show_more more="Click to reveal"]Hidden text here[/show_more]
When you visit the page, you should see a button that says “Click to reveal”, which when clicked, displays “Hidden text”.
LMK if you can get that working.
Yes, it works (you can check yourself). Since you named the function the same as the previous it picked up the orphaned code and now is working in every place I had placed it. Beautiful !!!
Great.
You had three other params on the orginal shortcode (four in total), more, less, color and align. Let’s update the code to make these work.
function simple_show_more_shortcode($atts, $content = null) {
$a = shortcode_atts(
array(
'more' => 'Read more',
'less' => 'Read less',
'color' => 'black',
'align' => 'left',
),
$atts
);
$output = <<<HTML
<div class="simple-show-more" style="text-align: {$a['align']};">
<div class="excerpt-content" style="display: none; color: {$a['color']};">{$content}</div>
<button onclick="
const content = this.previousElementSibling;
if (content.style.display === 'none') {
content.style.display = 'block';
this.innerText = '{$a['less']}';
} else {
content.style.display = 'none';
this.innerText = '{$a['more']}';
}
">
{$a['more']}
</button>
</div>
HTML;
return $output;
}
add_shortcode( 'show_more', 'simple_show_more_shortcode' );
Try updating like so and let me know the result.
It seems working nicely. The hidden part though once revealed for some reason stays aligned in the center no matter how I set alignment.
There might be some external CSS influencing the display. Try setting !important on the wrapper:
Change this:
<div class="simple-show-more" style="text-align: {$a['align']}">
to this:
<div class="simple-show-more" style="text-align: {$a['align']} !important">
Does that help?
For my own benefit and understanding…
Why are we defining an attribute array if we only ever use it once in the PHP?
It feels like this:
function simple_show_more_shortcode($atts, $content = null) {
$a = shortcode_atts(
array(
'more' => 'Read more',
'less' => 'Read less',
'color' => 'black',
'align' => 'left',
),
$atts
);
$output = <<<HTML
<div class="simple-show-more" style="text-align: {$a['align']};">
<div class="excerpt-content" style="display: none; color: {$a['color']};">{$content}</div>
<button onclick="
const content = this.previousElementSibling;
if (content.style.display === 'none') {
content.style.display = 'block';
this.innerText = '{$a['less']}';
} else {
content.style.display = 'none';
this.innerText = '{$a['more']}';
}
">
{$a['more']}
</button>
</div>
HTML;
return $output;
}
could just be…
function simple_show_more_shortcode($atts, $content = null) {
$output = <<<HTML
<div class="simple-show-more" style="text-align: left;">
<div class="excerpt-content" style="display: none; color: black">{$content}</div>
<button onclick="
const content = this.previousElementSibling;
if (content.style.display === 'none') {
content.style.display = 'block';
this.innerText = 'Read Less';
} else {
content.style.display = 'none';
this.innerText = 'Read More';
}
">
Read More
</button>
</div>
HTML;
return $output;
}
or even…
function simple_show_more_shortcode($atts, $content = null) {
$output = <<<HTML
<div class="simple-show-more" style="text-align: left;">
<div class="excerpt-content" style="display: none; color: black">{$content}</div>
<button onclick="
const content = this.previousElementSibling;
const next = (content.style.display === none) ? 'block' : 'none';
content.style.display = next;
this.innerText = 'Read ' + ((next === 'block') ? "Less" : "More");
">
Read More
</button>
</div>
HTML;
return $output;
}
The shortcode_atts array exists to let users customize the shortcode’s behavior without touching the code. It sets default values but allows users to override them when using the shortcode, like so:
[show_more more="Expand" less="Collapse" color="blue" align="center"]
If you remove the attribute array and hardcode the values, users won’t be able to customize anything.
Seems not..
It works on a vanilla WP install, so there must be some other factor at play.
Could you try creating a new page with no styles or anything and see if it works there.
If it still doesn’t work, would it be possible to get access to a page where I can see it not working? You can DM me the link if you don’t want to post it here.
Sure, I’ll give it a try.
I have some custom additional CSS with align="center", I can post it here if you think it may be relevant.
Have you ever tried replacing align=“center” with style=“text-align:center” ?
That won’t help. The style is applied in the PHP:
<div class="simple-show-more" style="text-align: {$a['align']};">
Are we at the “show us the result” point? Cause it sounds like were hunting a css rule in the output.
I tried on a new page and the result is the same.
This is what I see if I inspect the code
Somehow there is an unwanted style="text-align: center !important
That shouldn’t be happening. Either it is a caching issue (try giving the browser a hard refresh with Ctrl + F5), or you have changed the original code and need to change it back.
Correct. The UX Builder wasn’t updating the changes.
Both the hidden paragraph and the button (read more) have now the same alignment. Is it possible to keep the button in the center and the text to the left?
Sure. This will always align the button to the center of its container, while letting you specify the alignment of the text in the shoirtcode. Is that what you are after?
function simple_show_more_shortcode($atts, $content = null) {
$a = shortcode_atts(
array(
'more' => 'Read more',
'less' => 'Read less',
'color' => 'black',
'align' => 'left',
),
$atts
);
$output = <<<HTML
<div class="simple-show-more">
<div
class="excerpt-content"
style="display: none; color: {$a['color']}; text-align: {$a['align']};"
>
{$content}
</div>
<div style="text-align: center;">
<button onclick="
const content = this.parentElement.previousElementSibling;
if (content.style.display === 'none') {
content.style.display = 'block';
this.innerText = '{$a['less']}';
} else {
content.style.display = 'none';
this.innerText = '{$a['more']}';
}
">
{$a['more']}
</button>
</div>
</div>
HTML;
return $output;
}
add_shortcode('show_more', 'simple_show_more_shortcode');