So I made this shortcode for a client that creates an expandable transcription box. It works as intended except if there is a line break in the code. Then it create an extra p tag inside the div

function transciptor( $atts = '' ) {
    $value = shortcode_atts( array(
        'text' => '',
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$value['text'].'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );

for example entering the code like this:

[transcript text="example line

example line"]

create two paragraph tags. How do I get the shortcode to add in linebreaks instead of making extra p tags?

UPDATED WITH $CONTENT

function transciptor( $atts = '', $content ) {
    $value = shortcode_atts( array(
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$content.'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );

So I made this shortcode for a client that creates an expandable transcription box. It works as intended except if there is a line break in the code. Then it create an extra p tag inside the div

function transciptor( $atts = '' ) {
    $value = shortcode_atts( array(
        'text' => '',
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$value['text'].'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );

for example entering the code like this:

[transcript text="example line

example line"]

create two paragraph tags. How do I get the shortcode to add in linebreaks instead of making extra p tags?

UPDATED WITH $CONTENT

function transciptor( $atts = '', $content ) {
    $value = shortcode_atts( array(
        'title' => 'Video transcript:'
    ), $atts );
    return '
    <style>
    #trans_title {
        margin: 0 auto;
        width: calc(60% + 48px);
        font-weight: bold;
    }
    #transcript_div > p {
        width: 60%;
        margin: 0 auto;
        max-height: 500px;
        overflow: scroll;
        padding: 24px;
        background-color: #e9f4fb;
        transition: 200ms;
    }
    #transcript_div > a {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: fit-content;
        background-color: #252a2d;
        padding: 12px 36px;
        border-radius: 36px;
        position: relative;
        bottom: 24px;
        color: white;
    }
    </style>
    <p id="trans_title">'.$value['title'].'</p>
    <div id="transcript_div">
        <p>'.$content.'</p>
        <a href="#">Expand</a>
    </div>
    <script>
        trans_text = document.querySelector("#transcript_div > p");
        trans_btn = document.querySelector("#transcript_div > a");
        expanded = false;

        trans_btn.onclick = function(event){
            event.preventDefault();
            expanded = !expanded;

            if(expanded == false){
                trans_text.style.maxHeight = "500px";
                trans_btn.innerHTML  = "Expand";
            }
            if(expanded == true){
                trans_text.style.maxHeight = "fit-content";
                trans_btn.innerHTML  = "Collapse";
            }
        }
    </script>

    ';
}
add_shortcode( 'transcript', 'transciptor' );

• php
• shortcode

1 Answer 1

You could try using the enclosing form to write the shortcode and make use of the $content returned variable.

You need to declare you short code function with the extra parameter:

function transciptor( $atts = '', $content ) {

and then write your shortcode as:

[transcript]
place the value that
will be passed to
$content here
[/transcript]

Note the alternative syntax for the shortcode. There is information about it in the codex here.

If the p tags are still there I see two other options. Don't enclose your shortcode parameter in paragraph tags, i.e.

'.$value['text'].'

instead of

<p>'.$value['text'].'</p>

or you could parse the p tags from the variable with something like:

$value['text'] = str_replace("<p>", "", $value['text']);
$value['text'] = str_replace("</p>", "<br>", $value['text']);