CODEWITHSUNDEEP
phpwordpresshyperlinkshortcode
Vedran
Vedran

Reputation: 187

Wordpress shortcodes - first shortcode is broken

I have a page where I'd like to add some concerts to the schedule page. In order to do so, I decided I will use shortcodes so the user can provide just the necessary data and I will parse it and generate the html in the shortcode function.

First I'd like to tell you why I think this is wordpress related. I have added this code directly to the page php file:

<h4>This year hardcoded</h4>
<a href='#' class='p-link'>
    <h2>01.02.2018 / RHCP</h2>
    <p>20:00 / NY</p>
</a>
<a href='#' class='p-link'>
    <h2>03.04.2018 / The Rolling Stones</h2>
    <p>21:00 / LONDON</p>
</a>
<a href='#' class='p-link'>
    <h2>11.12.2018 / Pink Floyd</h2>
    <p>22:00 / TOKIO</p>
</a>

And it works fine.

enter image description here

Since my shortcode function returns the same I expected the same result but I didn't get it. First shortcode result is broken.

This is what I added to the functions.php:

function shortcode_issue_func( $atts ) {
    $shortcode_atts = shortcode_atts( array(
        'date' => '',
        'time' => '',
        'title' => '',
        'location' => '',
        'link' => '#'
    ), $atts );

    $html = "<a href='{$shortcode_atts['link']}' class='p-link'>
                <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
                <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
            </a>";
    return $html;
}
add_shortcode( 'shortcode-issue', 'shortcode_issue_func' );

In the wordpress page edit I added this:

[shortcode-issue date="19.07.2018" time="20:00" title="RHCP" location="NY" link="http://localhost/wordpress/rep-3/" ]
[shortcode-issue date="21.08.2018" time="21:00" title="The Rolling Stones" location="London" link="http://localhost/wordpress/rep-3/" ]
[shortcode-issue date="23.11.2018" time="22:00" title="Pink Floyd" location="NY" link="http://localhost/wordpress/rep-3/" ]

This is the output

enter image description here

You can notice that sections 1 and 2 are not wrapped together in the "a" tag as section 3 is.

Dumping the $html before return, reveals there should be no issues:

enter image description here

And the hacky solution I did is to add the empty "p" tag before "a" tag.

$html = "<p style='display: none;'></p>
        <a href='{$shortcode_atts['link']}' class='p-link'>
            <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
            <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
        </a>";
return $html;

enter image description here

But I'd like not to have such hacks in my code and I can't find a reason why this is happening. I'd be very thankful if somebody can help.

Edit 1

The code has the HTML5 declaration --> <!DOCTYPE html>

So the "a" tag wrapping should be allowed.

Edit 2

I just noticed that there is a "phantom" "p" tag in the resulting html.

enter image description here

Thank you!

Upvotes: 0

Views: 218

Answers (1)

Sally CJ
Sally CJ

Reputation: 15620

Try to remove the extra spaces in the $html variable value.

So change this:

$html = "<a href='{$shortcode_atts['link']}' class='p-link'>
            <h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>
            <p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>
        </a>";

..to this one:

$html = "<a href='" . esc_url( $shortcode_atts['link'] ) . "' class='p-link'>" .
    "<h2>{$shortcode_atts['date']} / {$shortcode_atts['title']}</h2>" .
    "<p>{$shortcode_atts['time']} / {$shortcode_atts['location']}</p>" .
"</a>";

PS: It's always a good practice to esc_url() a URL address.

Upvotes: 1

Related Questions